Skip to content
Submitted 26 days ago

Semantic HTML5 markup & plain CSS

#pure-css
browniscoding•40
@browniscoding
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?

i most proud of manage to handle flex box settings

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

it was a bit difficult for me to understand the usage of clamp.

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

I am not sure whether clamp is suitable for this situation, or there should be better way to control font size without using media queries and clamp function.

Community feedback

  • P
    Nicholas Crawford•50
    @nicholas-crawfordPosted 25 days ago

    Good job!

    A few things I noticed:

    1. You probably don't need to wrap everything in <div>. You could definitely get away with just having <p> tags and wrapping only when you need it.

    2. I'd recommend adding a meta description in the header like this <meta name="description" content="Insert text here">. It's good for metadata and improves SEO. Not that you're putting this on a search engine but it's good practice.

    3. You have another challenge folder in the repo which you don't need. I'd add a line to remove it in the .gitignore.

    4. You don't actually need to use media queries in the css at all. You can set a max-width for the card have everything else scale if needed.

    5. You should use grid to centre the box for the screenshot. See here (https://css-tricks.com/centering-css-complete-guide/#aa-both-horizontally-vertically) You can use <html> as the parent and body as the child.

    6. Responsiveness is pretty good on all sizes except for the tag .blogTagBox. It seems to shrink when the size is small. You could have a <div> wrapper for a <span> and add you background color and padding in the span. Something like this:

    .div {
    padding: 50px, 0;
}

.div > span {
    background-color: yellow;
    padding: 20px 50px;
    border-radius: 4px;
}

    (This is obviously not to scale, just a hint. ;) )

    1. The design is a little wider than the design.

    Clamp is a little difficult to understand but great to learn. I think CSS tricks does a good job of explaining it. (https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/) If you want to play around with it, try this: https://fluid.style/type?min=2.25&max=4.5&min-bp=20&max-bp=77.5&unit=%22rem%22

    Let me know if you have any questions. Good job and good luck!

    Marked as helpful
    1

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