lunoronti / css-web-3

Web 3.0 Project

Challenge Parameters	Challenge Details
Create a public repository	Web-3.0
Challenge type	Consolidation
Duration	2 days
Team	Solo

Learning objectives

• Write meaningful, semantically correct HTML
• Use modern positioning techniques using the grid or flexbox model
• Create a "pixel-perfect" integration from a given wireframe

The mission

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 :

The graphic designer gave you all the elements so you can code the thing yourself.

Don't forget to check my general usefull tips.

What should you use and investigate? (feel free to explorer even further)

• 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

Test

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.

Github Page

At the end of the project, you have to publish your page as a Github page.