Responsive news homepage solution using HTML, CSS and JS

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

Implementing the layout using CSS grid, whilst grid-items were also grids or flexbox components created some challenges regarding alignment. However, after some trial and error, I was able to come up with a few solutions. CSS custom variables were extremely helpful in this regard. It allowed me to maintain the flex and grid-item gaps easily.

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

Two challenges encountered:

1. Grid-item alignment for nested flex and grid-items.
2. Navigation menu

I overcame the grid-item alignment issues through trial and error. CSS custom variables were especially helpful regarding this. I was able to maintain gaps easily and ensured that the gaps for the grid-items were the same as the parent container.

I utilised online documentation and YouTube videos to resolve the mobile screen navigation menu. It was my first time creating this component.

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

As I am still learning (...and aim to continue learning) all feedback is welcomed.