Design comparison
Solution retrospective
I refactored this challenge. As my skills grew, I went back and reorganized the code to include custom properties and CSS nesting. Both are important in professional code bases, as they allow easier modifications and greater readability. Nesting, in particular, is a relatively new addition to CSS that makes CSS more enjoyable to read and write.
What challenges did you encounter, and how did you overcome them?My attribution was pushing the card component up using regular Flexbox. I realized that in order to keep it how I wanted it without affecting the layout, I had to break it out of document flow, so I ended up using relative/absolute positioning to accomplish what I wanted.
What specific areas of your project would you like help with?None for this particular project.
Community feedback
- @RedaKaafarani1Posted 7 months ago
- no semantic HTML provided, index.html and style.css seem to be similar
- The resizing of the screen doesn't seem to be affecting the layout but if we go below a certain range all becomes squished and goes to the top of the screen
- The solution looks pretty neat and as close to the design as one can get
- Code looks good with nesting and it's easy to follow along
- It's nice that there are variables defined in :root to be reused later in the code. Wouldn't be that important in such a small project but why not.
Marked as helpful0@CreativeLogicPosted 7 months ago@RedaKaafarani1
Thanks for pointing this out. I made a mistake and uploaded the CSS file instead of the index file on Github. I've been practicing best practice methods by having variables and nesting, among other things, to get familiar with good habits.
1
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