Skip to content
Submitted 10 months ago

blog preview card using html and css

Don•380
@eldon6219
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

third challenege with the new things i learned from the previous challenges hope it's good see you in the next one

Community feedback

  • Øystein Håberg•10,410
    @Islandstone89Posted 10 months ago

    HTML:

    • Remove the <header> - it is used for content that would repeat on every page, like a navigation bar with a logo. The whole card should be inside the <main>. If you want to include the .attribution, that should be the <footer>. If so, its text must be wrapped in a <p>.

    • I would wrap the date in a <time> tag, like this: <time datetime="2023-12-21">21 Dec 2023<time>

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • It's good practice to include a CSS Reset at the top.

    • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

    • Remove text-align: left on the span, as that is the default value. I would also remove width: fit-content and change from display: block to display: inline-block.

    • The card should not have a fixed width. Instead, add a max-width in rem, to prevent it from growing too wide on larger screens. Around 20rem should work OK.

    • I would remove the media query altogether, as the design doesn't change. When you do use them, they should be in rem, not px. It's common to do the mobile styles as the default, not the other way around. You wouldn't need width: 100%, and padding: 1rem should be placed on the body, and not inside a media query. With that set, you wouldn't need the margin either.

    Marked as helpful
    1
    Don•380
    @eldon6219Posted 10 months ago

    @Islandstone89 improved the code and uploaded it thanks for your help appreciate it <3

    1
    Øystein Håberg•10,410
    @Islandstone89Posted 10 months ago

    @eldon6219 the pleasure is mine - well done!

    As you're not using the --font-size variable, I would remove it. If you do use it, you must use rem.

    Body doesn't need a width: 100%, as that is its default value.

    Keep up the good work 🙂

    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