New Home page

Community feedback

• 

  Deborah Robbiano•600

  @debriks

  Posted over 2 years ago

  Hi Ahmed,

  Great solution! Well done. :)

  I just have a few suggestions to improve it:

  • it's always good to make your images display: block and width: 100%, it makes them easier to work with and it will help avoiding them from being deformed on small screens.

  • another way to deal with the footer articles is by using display: grid instead of display: flex so that you can set the width of each column like so: display: grid; grid-template-columns: 1fr 2fr; Here's a good ressource on the subject: https://css-tricks.com/snippets/css/complete-guide-grid/

  • a good way to deal with the hero area is by using the css property grid-template-areas, where you just tell css what html element will be placed in each column and each row of your grid. Here's a example: grid-template-areas: "header header header" "hero hero aside" "hero hero aside" "footer footer footer";. Here's a ressource on the subject: https://css-tricks.com/almanac/properties/g/grid-template-areas/

  • for accessibility purposes, img tags should always have a altattribute (ex: alt="top laptops 2022" : https://css-tricks.com/some-things-about-alt-text/

  Hope you find these comments helpful.

  Keep up the good work! :)

  12

  Marked as helpful