Responsive Webpage using CSS Grid & Flexbox

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  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.

  Marked as helpful

  1

  ---

  

  Tiffani•30

  @tiffanicodesPosted over 2 years ago

  @christopher-adolphe Thank you so much!! This was incredibly helpful and I really appreciate you sharing those resources. I will definitely check them out and see how I can improve.

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @tiffanicodes,

  I'm happy to help and glad to see this was helpful to you. 🤝

  Don't hesitate to dive into my git repository for this challenge, you may also find something useful there. 😉

  See you on the next one.

  Best regards.

  1
• 

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  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.

  1

  ---

  

  Tiffani•30

  @tiffanicodesPosted over 2 years ago

  @faruking thanks! It's nice to know I wasn't the only one struggling lol. I will definitely check out your solution to see how you approached this challenge.

  0