Challenge Parameters | Challenge Details |
---|---|
Create a public repository | Web-3.0 |
Challenge type | Consolidation |
Duration | 2 days |
Team | Solo |
- Write meaningful, semantically correct HTML
- Use modern positioning techniques using the
grid
orflexbox
model - Create a "pixel-perfect" integration from a given wireframe
Welcome to your last project in plain CSS.
For this project, we will tackle a Frontend Mentor design.
You'll be led to use the knowledge you acquired on CSS (the basics, flex, grid and media queries) to do a perfectly responsive website.
The mission is simple, you have to perfectly reproduce this design : FIGMA FILE
The graphic designer gave you all the elements so you can code the thing yourself.
Don't forget to check my general usefull tips.
- B.E.M.
- SASS (scss)
- Semantic HTML
- Responsive HTML images
- Pixel perfection, what does it mean?
- When to use PX, REM, EM? ๐คฏ
- Sketching a website to understand it more
- Correct use of multiple selectors
- CSS Flexbox or CSS Grid
- SEO close to perfection
- Make hover animation
- Look for animation opportunities
Please check every details and
- test your code with a validator.
- Generate a report with Lighthouse & try to improve it as mush as you can.
At the end of the project, you have to publish your page as a Github page.