Skip to content
Submitted 4 months ago

Blog preview card

Lyna•260
@lynaIFR
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'm pretty proud of how the project came out, if you have any feedback, please feel free to share.

Community feedback

  • Roberts P•120
    @indaqooPosted 4 months ago

    Hi @lynaIFR,

    Looking at the HTML, I noticed you are styling elements using IDs ( # ). This is not ideal.

    IDs have a higher specificity compared to classes. This can make it harder to override styles later, as you would need to use even more specific selectors.

    IDs are often used in JavaScript for element selection and manipulation.

    Classes are reusable across multiple elements, whereas an ID is supposed to be unique within a document.

    Using height: 100vh on .container might not be the best approach. It is best to set height of html and body tag:

    html,
body {
    height: 100%;
}

    The .container class is intended to wrap your main content, centering it both vertically and/or horizontally within the viewport. Here’s an example of how to use it correctly ( based on mobile first approach).

    .container {
    max-width: 90%;
    margin-inline: auto;
}

@media only screen and (min-width: 425px) {
    .container {
        max-width: 100%;
        margin-inline: unset;
    }
}

<body>
    <main class="container">
        <article class="article">crazy content</article>
    </main>
</body>

    At the moment there are no media queries to handle different screen sizes, which makes the design less adaptable to various devices.

    Project looks good on desktop size but that cannot be said about mobile versions - view images

    You should consider a "mobile-first" approach. You can also check out my project on article cards where I implemented this approach.

    Have a look at Kevin Powell's responsive web design video: youtube

    Overall great job, keep it up.

    Marked as helpful
    1
    Lyna•260
    @lynaIFRPosted 4 months ago

    @RobertsPeirags thanks for the feedback, I'll fix the problems.

    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