Skip to content
Submitted 6 months ago

Responsive News Homepage with CSS Grid

#pure-css
S M Maaz•20
@Master786-wd
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Using the CSS grid made me feel proud, and I will use a framework next time.

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

The layout's alignment and placement present the largest obstacle for me, but the CSS grid helps to make things simple.

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

I was getting frustrated while trying to create side navigation with an overlay, so I needed help.

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted 6 months ago

    @Master786-wd

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The logo should be outside the nav.
    • The logo’s alt tag description needs to be improved upon ⚠️; it should ALWAYS and only state the company’s name.
    • Nav menus are not created in that manner; there is no need for separate code for the "mobile" and "desktop". Ps. Why did you use a anchor element to create the nav button (it doesn't direct user anywhere)?
    • Create a single nav and inside have a button and it should have an aria-label, aria-expanded and aria-control. After the button, add the unordered list containing the links.
    • You will then use CSS to then style the nav for mobile and desktop.
    • "Overlays" are not created in this manner; <div id="overlay"></div>. To create it, you will use position and have it applied/removed to the body when the nav menu opens/close.
    • There is still a lot more that needs to fix, but this will suffice for now.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
    S M Maaz•20
    @Master786-wdPosted 6 months ago

    @VCarames Thank you for your feedback. I will use those suggestions in the future.

    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