Semantic HTML5 markup, CSS3, CSS GRID, Flexbox, SASS,

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great though the site is not responsive at the moment. Before submitting or just coding in general, first, as I would prefer start from mobile first approach and after coding the mobile of a section, change the screen-width and work your way up to desktop layout. That way, you will be able to see on how your site looks when the screen-size changes. Mobile layout breakpoint is too late, you are using 375px which is too small for other phones, using mobile first approach you will fix issues like this.

  Other suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .entire-component should be using the main instead of div.
  • The bold text on the left side should be using h1. Remember that a page must have a single h1 .
  • Don't use figure on the stars since they are just purely decoration and doesn't really have a figcaption. What I would do is that, use them as background-image remember that you can put any amount of images on the background prop, this way , you avoided using extra html tags.
  • Also figcaption must be inside figure .
  • Person's img should be using the person's name as the alt like alt=" Colton Smith". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Since you are using figure on the testimonial, the person's name could use figcaption.
  • The person's name as well should be a heading tag since they are the main point for each testimonial. You can use blockquote as well.
  • Lastly, making the site more responsive and the mobile breakpoint to be adjusted.

  Aside from those, great work again on this one.

  Marked as helpful

  1
• 

  Babajide Peter Oyafemi•200

  @Babajide777Posted about 3 years ago

  @pikamart Thanks for your in-depth feedback. I did use a mobile-first approach, but I want to work with only 2 breakpoints for now. I will increase the first breakpoint to about 475px for other projects as you advised. I plan to use 3, 4, or 5 breakpoints when I get to more complex projects like landing pages. I really appreciate you taking the time to look at my work. Regards.

  1