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

Blod Caard

P
codigoTin 100

@codigotin

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?

I am improving the use of variables and class management in order to give a more scalable structure to future projects.

What challenges did you encounter, and how did you overcome them?

I still find it difficult to focus on the small details, I need to see the design several times to have an idea of the things that will be necessary for the development.

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

I would like to get help on code optimization and HTML and CCS best practices.

Community feedback

oaved 90

@oaved

Posted

I think you have good code hygiene in your HTML and CSS and I think the card looks nice. I'm not by any means a seasoned programmer but I some tips for you!

HTML: You could try to use more sematic tags instead of divs. Maybe try tags like figure, article and figcaption in this project. Also, think about how you use your h1-h6 tags. In a card component like this, which is one coherent component, all h-tags should come in order. The h-tags should also be picked based on their semantic meaning, not by their size. I kinda looks like you have choosen h-tags here based on their size. If you haven't, you can disregard this last tip.

CSS: Try using more general names for your custom properties. Using the property "yellow" can get confusing if this card later on updates to be blue. You could therefore try naming your custom properties like "--clr-primary" and "--clr-accent" or something along those line.

Overall great design!

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