Skip to content
Submitted about 1 year ago

Blog preview card

Lyna•260
@lynaIFR
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Roberts P•120
    @indaqoo

    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

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