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

Submitted

Responsive Blog Preview Card (No Media Queries)

@SheGeeks

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 are you most proud of, and what would you do differently next time?

This is a great challenge to help anyone improve their knowledge of CSS functions like clamp() to create simple and responsive layouts.

Community feedback

@Carl-code

Posted

Hello friend, I just saw your project and code, the project is very good, only that you first did desktop fist, preferably I do mobile first, it is what was recommended, in your CSS code you should use custom properties which is using the colors in the :root Just like in the naming of your classes, they should be a little more specific in terms of the elements or components, I hope my feedback is useful to you.

1

@SheGeeks

Posted

@Carl-code

I appreciate you taking a look at my solution code, Carlos. Can I ask why you are saying I did this on desktop first?

I appreciate the suggestion to use custom properties. I definitely follow the same naming convention as my classes like you mentioned. However, this solution uses around 5 colors, and I repeated only 1 of those colors twice in the code. Moving them into custom properties seemed more repetitive than useful for a project this size and at my experience.

I tend to leave them out of these smaller challenges for the sake of a smaller and cleaner code base, but I do use them to manage tougher challenges with more code.

0

@Carl-code

Posted

@SheGeeks Thank you for taking the time to take the recommendations into account, in the end that's all I hope you continue with that enthusiasm to grow as a developer, a big hug.

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