Design comparison
Solution retrospective
I finished my first challenge but it took more time than I expected
What challenges did you encounter, and how did you overcome them?I didn't changed the read me file when I did work on the project. As I am submitting the solution a long time after I finished I don't remember the steps I followed. Will do better for the next challenge.
What specific areas of your project would you like help with?I would like to know if the css structure is optimal, meaning are there some improvements to make it shorter ?
Community feedback
- @ephraimdjeketPosted 3 months ago
Hi Sandrine. I'd say you did a very good job here :). Design aspect, everything looks close to pixel perfect. The only thing I noticed is the fonts being a bit bigger and different.
Your CSS structure is great, but I noticed that you're not using a CSS reset. I'd say this is crucial because all elements will otherwise retain their default styling and not all browsers will display apply these default rules.
I found a modern CSS reset that you could use:
/*
- Use a more-intuitive box-sizing model. */ *, *::before, ::after { box-sizing: border-box; } /
- Remove default margin */
- { margin: 0; } /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering / body { line-height: 1.5; -webkit-font-smoothing: antialiased; } / 5. Improve media defaults / img, picture, video, canvas, svg { display: block; max-width: 100%; } / 6. Remove built-in form typography styles / input, button, textarea, select { font: inherit; } / 7. Avoid text overflows / p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } / 8. Create a root stacking context */ #root, #__next { isolation: isolate; }
Keep coding!
Marked as helpful0@Sandrine-CPPosted 2 months ago@ephraimdjeket thank you so much for your feedback, so valuable and helpful, I did use the css reset for my second challenge ;-)
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord