Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

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

P
Steven Stroud 4,120

@Stroudy

Posted

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 helpful

0

@carlosmarte23

Posted

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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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