Skip to content
Submitted 4 months ago

Blog preview card using semantic HTML and CSS custom properties

oaved•90
@oaved
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 think I somewhat improved my semantic HTML. I still need to develop knowledge about, and ability to write, accessible HTML.

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

No real challenges really

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

I would like some help with my semantic structure of the HTML, some tips on how to make my HTML more accessible, the structuring of my CSS and my use of git and github. I know my commits wasn't the best here but maybe some feedback on my messages or something along those lines. Any feedback is welcome!

Community feedback

  • David Miguel Andrés•270
    @damigandPosted 4 months ago

    LANDMARKS

    The only thing that could make your semantic better is the use of landmarks. Landmarks are used to allow screen readers to know where the content of your page is, and gives them the ability to jump between sections on your page. You can check more information about landmarks here.

    If you want to give a specific element (that isn't considered a landmark) the ability to work as a landmark, you can use the attribute role in the element's tag.

    YOUR PROJECT

    To make your semantic a little bit better on this project, I think the .card div could be a main element instead. Alternatively, if you really want to keep the div element, I suggest using the attribute role="main" for blind users to benefit from that accessibility.

    In the future, if you also want to add the .attribution section (that I see commented on the source code of your project) or any other content related to copyright that is outside your main or role="main" element, I suggest using the attribute role="contentinfo".

    If the extra content outside your main is not copyright related, I recommend doing your own research on other kinds of role options you can choose for your elements.

    Marked as helpful
    1
  • Obare•320
    @simplyObarePosted 4 months ago

    your solution is really identical to the design provides. thumbs up!

    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