Submitted

frontMentor5

@hotchkiss88

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

3

Accessibility Issues

1

HTML Issues

View Report

Community Feedback

Ken 455

@lmaoken

Posted

Great job! Just a few suggestions:

Always have a <main> element wrapping your entire content. On your project you would have the main element instead of div for .container

<main class="container"> </main>

When you use the section element, it should always follow with child heading tags (h2-h6). Changing those sections to divs will also solve some errors that are being flagged.

The layout for 1440px and 375px looks great but everything in between looks like your page is spilling out to the top and being hidden. I know the challenge is to make it for those two screen sizes. However, It's good practice to make it responsive for all screen sizes! I'm sure adding a quick media query for the other sizes and applying padding-top or margin-top will be a quick fix to that problem!

Don't forget to generate a new report!

Marked as helpful

0

@hotchkiss88

Posted

Hello Ken. Thank you for feedback. It's very helpful. My projects were speed-run. Five in five days. I also watched your work. It looks really professional. You can see that you put a lot of work into the final effect. Good luck.

1

Give some feedback to @hotchkiss88 about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!