Skip to content
Submitted 8 days ago

HTML/CSS Only solution

Andrew J•40
@Sensationull
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Tried my hand at initializing CSS variables at the :root and it went pretty well. Gonna hope to keep that up, but also expand on what's stored there in the future. I think it would be a good place to have different font sizes placed there too. I just didn't get around to it this time.

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

Once I moved from the mobile first solution to the desktop, everything shifted slightly and I started changing the dimensions of the card container prematurely. I made things smaller, and then when I started updating the fonts to take up more space, the box became to small. So I'm gonna change my strategy next time for sure.

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

I want to know if there are better ways to architect the CSS code. I made multiple classes for the fonts and applied them directly to certain HTML elements, but I think if the only thing that's changing between the classes is the font size, then that should be handled by changing the property on a class, rather than having a class explicitly for it. Thoughts?

Community feedback

  • Dylan Heslop•1,570
    @dylan-dot-cPosted 8 days ago

    Well done on the project, it's well structured and formatted.

    For the cardDiscription div you can make it a p tag, just so it can be seen as a paragraph.

    For the css, I see you had alot of reset and some unrelated styles for like inputs and stuff, I think you could move all of that into its separate css file, namely reset(s).css and import it to your main file using @import. This can help with separation of concerns as the resets are fully related to the custom styles you wrote and could be reused in other projects.

    Also in terms of CSS and class architecture, you did it well and your code reminds of the atomic styles tailwindCSS uses(I don't know if you know it). So thats good and it could help you to quickly update fonts and font-styles on elements. I normally take a lazy approach to this as I just put the font-family on the body so all elements inherit it, then just used the font weight on the elements that needs a specific one.

    Anyways good job. Take care!

    Marked as helpful
    1
  • dharmen06•20
    @dharmen06Posted 8 days ago

    Its good to learn.

    0

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