Skip to content
Submitted about 1 year ago

Blog preview card trainig accessibility and CSS basics

accessibility, lighthouse
P
Franci Melink•400
@francimelink
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?

Basically, the project was mainly aimed at the basics of HTML structure and CSS itself. Mistakes are still possible as I am basically still a beginner.

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

As I mentioned above, the project served as a basis for me. I had no particular problems with the project itself

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

I definitely want to progress in HTML structuring itself, because I still often find myself editing the HTML structure itself. I think this would be a good base when I go on to more difficult projects

Code

Please log in to post a comment

Log in

Community feedback

  • tediko•6,700
    @tediko

    Hello @francimelink!

    Good job on this challenge. Some things I'd change:

    • The <header> should not be included inside the <main> tag. When a <header> is nested in <main> , <article> , or <section> , it just identifies it as the header for that section and isn't a landmark. Adding loads of headers in sub sections or inside landmarks creates a load of unwanted noise for assistive tech users and means you then have to label every section and header.
    • You shouldn't define font-size in your body element and certainly not in pixels. Browsers set the HTML font size to 16px by default. Defining your body element font-size in pixels will not respect the user's font-size preferences and therefore your web page will not be user-friendly.
    • You shouldn't use <button> for "learning" label. Buttons are to be used for performing an in-page action, trigger some action. This is just some text with styles.
    • Author avatar should contain alt attribute since it isn't decorative image. You shouldn't hide it with aria-hidden attribute.
    • Change body to take min-height: 100vh. 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.

    Happy coding!

    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