Semantic HTML5 and CSS coupled with Flexbox and Grid)

Community feedback

• 

  Talha•120

  @TalhaAmjad0034Posted over 3 years ago

  Seems perfect to me.

  0

  ---

  

  Dike Obinna Clinton•200

  @Dike-CodePosted over 3 years ago

  @arywahhh Thank you, I really appreciate.🙌

  0
• 

  Favourite Jome•1,110

  @jomefavouritePosted over 3 years ago

  Hello Clinton, you did a very good job on your first challenge and here're my suggestions.

  • I noticed that the section element with the class name site has a div element with an image element with no src attribute link which produces an unnecessary space in the layout. I suggest removing that div element.

  • Also, I suggest applying a max-weight property to the paragraph p elements in other for the text not to be stretched out on bigger screens.

  • Also the images, should have a max-weight property applied. For example:

  .device_showcase .device {
      width: 75%;
      max-width: 1000px;
  }
  

  The max-weight property prevent the image from growing along with the viewport when that max weight is reached.

  • Finally, I'll suggest following a much better semantic layout structure. I noticed you didn't include the main element. Well, this is my personal structure though. Example below

  <header>...</header>
  <main>...</main>
  <footer>...</footer>
  

  0

  ---

  

  Dike Obinna Clinton•200

  @Dike-CodePosted over 3 years ago

  @jomefavourite. Thanks a lot... I'd sort and amend the errors.

  1
• 

  Erick•120

  @erickwalker1Posted over 3 years ago

  Wassup man, seems your preview site is rendering a 404. Maybe you mistyped the url?

  0

  ---

  

  Dike Obinna Clinton•200

  @Dike-CodePosted over 3 years ago

  @erickwalker1 Yeah, have sorted it out.

  0