Frontend Mentor | Responsive News Homepage with CSS Grid coding challenge solution

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

@VCarames

Posted 4 months ago

@Master786-wd

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

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.

"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.

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

Happy Coding! 👾

@Master786-wd

Posted 4 months ago

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

Responsive News Homepage with CSS Grid