Responsive Webpage using CSS Grid & Flexbox

Hi @tiffanicodes, 👋

You did a nice job in completing this challenge. 👍 I have recently completed the same project and I think I can give you some tips on how you could improve your solution or at least think of a different approach.

• I see that you have built the main content section using the grid-area property from CSS grid. While this is not a bad approach, it is not a flexible solution. Here are 2 resources that will surely help you come up with a more efficient layout. Travis Horn - Responsive grid, CSS-TRICKS - Responsive Grid
• In order to render the hero title in black and white, you can apply the mix-blend-mode property. It can have different values depending on the result you want to get, in the case of this challenge, the exclusion value does the job. 😉 Read more about it here.
• The spacings in the footer section need to be reviewed as at the moment it looks wider than the header and main sections. I would suggest that you add a wrapping <div class="container"> element inside the different sections of your page to which you then apply a max-width. This will resolve the problem as well as on the location page.
• On the CSS side, I would suggest that you refrain from using id as selectors to style elements as this hinders reusability.

I hope this helps.

Keep it up.

Well done. I had the same struggle also. You can also check my solution, you might find something helpful especially in the area of responsiveness.