Design comparison
Solution retrospective
I learned a lot from everyone’s feedback in the previous challenge and tried to do better in this one. I have switched most of the size units from px to rem. Does it work well? I hope you can leave some feedback so I can improve even more. Thanks
Community feedback
- @StroudyPosted 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
- You are using a lot of
<div>
, Problem with this that it does not have any semantic meaning, Here for example could be a<h1 h2 h3 h4>
tag or a<p>
<div class="category"> Learning </div>
- Avoid using
id
selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.
), which are reusable and more manageable, allowing for better control over your styles and easier updates.
I hope you found this advice helpful! Keep up the great work. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀
Marked as helpful0 - You are using a lot of
- @carlosmarte23Posted 2 months ago
Hello! great work. It appears to be really close to the design on the desktop.
Here are some tips:
1- Next time for practice, try to do the layout using Flexbox or Grid.
2- Try using a separate file for your CSS and link it to the HTML.
3- Remember to adjust the mobile design as the challenge suggested to have smaller font size that desktop: For this consider doing media query's or using the clamp function with relative sizes like rem.
For example:
.responsive-text { font-size: clamp(0.875rem, 2.5vw, 1rem); }
Other than that, I think you're doing a great job.
Let's keep learning together!
Marked as helpful0
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