- Node 16 (LTS)
We suggest you to use a version manager like nvm to switch versions more easily.
The idea of this lab is to practice with HTML and CSS by implementing a responsive web page based on a provided mockup.
Complete the HTML and CSS files in the public directory to make it look as the provided Mockup.
- CSS Frameworks are not allowed for this exercise.
- The
<main>tag as well as all existingidattributes should not be changed because they are used for testing. - Follow all the rules mentioned in the Style guide and Guidelines: Colors, Typography, dimensions, spacing and positioning.
- The font and the normalized css have already been created and added to the index.html
- Please ask for help if you are stuck on a problem.
- We have set up some tests to check if your page is corresponding to the mockup.
npm installAlthough you can directly open the index.html file with your browser and start coding, we advise you to use a development server such as live-server, which is a little development server written in Node.js with live reload capability.
Everything is already setup for you in the package.json. To start the development server, you just need to run the following command:
npm run devOnce started, the server will serve the files in the public directory and automatically reload the browser when you save any file.
Make sure your development server has started before running tests.
We have made some tests with the library cypress.
You can locally run them with:
npm run cypress:openTo run them without opening the browser (headless testing):
npm run cypress:runIt's recommended to test your layout with Chrome or Chromium to ensure you use the same browser as the one that will be used in the CI (it's Chromium in the CI) to verify your submission.
- The Fonts used in the mockup have been loaded from https://fonts.google.com
- CSS Reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- HTML 5 sementic elements https://www.w3schools.com/html/html5_semantic_elements.asp
Happy coding 🤓 !