Design comparison
Solution retrospective
A little bit of background: This is my very first challenge in Frontend Mentor; I picked up HTML and CSS through a Udemy course last year, and currently I am studying React.js. Along the way, I realized nothing is getting internalized, as I am slowly forgetting all the basics and foundations of HTML, CSS, and JS. That is why I wanted to revisit these techniques first before I move on with the rest of React.js.
As I was working on this first challenge, I realized I did not remember the simplest thing, such as positioning and centering. There are repeated elements in CSS that need grouping but somehow doing that messes up the project. So I am submitting a rough and raw version of this challenge, to see how my first step in working on an actual project is.
Any feedback would be appreciated. Thank you.
Community feedback
- @dolomita28Posted almost 3 years ago
Hi Esther, You did a great job. There can be many different solutions to achieve the same. I would only suggest you avoid using px units. It's better to get used to use %, rem or em units. You could also take advantage of flexbox techniques (which I've seen you know how to use them) even for nested containers so you don't need using margins to center items. Finally, check out the report above with some accessibility issues to get extra hints. Best
1@estaarrrPosted over 2 years ago@dolomita28 Thank you for the feedback! For my second challenge I switched from using px to rem as you have recommended. I need to go in depth with flexbox to use the technique you have suggested. Thank you!
0
Please log in to post a comment
Log in with GitHub
Join 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