Skip to content
Submitted over 2 years ago

News page using css grid

accessibility
Demilade•120
@Billygotclout
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Had issues making the nav bar responsive with pure css

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,870
    @AdrianoEscarabote

    Hi Demilade, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • The links must have an aria-label or sr-only text that tells where the link navigates the user. For example: Visit our Facebook. For images, you should set aria-hidden=” true” to be ignored by screen readers and to avoid redundancy and repetition.

    The rest is great!

    I hope it helps... 👍

  • Yasmine•710
    @Yasmine10

    Hi @Billygotclout 👋

    Good job on finishing this project!

    To make the navbar responsive with HTML and CSS you can use a hidden checkbox and a label. Inside the label you place the hamburger icon and depending on when the checkbox is checked or not you show or hide the navbar.

    I also have a codepen that could help explain how to do this exactly 😊

    Hope this helps!

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