Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Proof Section

Asmae• 10

@Asmae-Amahrouk

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challenge really helped me to learn Media Query uses .... ready to receive your advice and observations.....

Community feedback

darryncodes• 6,430

@darryncodes

Posted

Hi Asmae,

Overall a good solution, a pretty close match to the design.

A few thoughts from me:

  • you relative file paths are causing the images not to display, as everything is in the same folder you just need to link to the exact image you need. Here is some useful info on this topic
  • you have a lot of accessibility and html errors, look into using semantic html like <main> and <footer tags
  • and take a look into your heading structure. You should usually have one <h1> and then not skip heading levels after that
  • I think you have relied on padding and margin a lot to layout your design, with absolute units it can play havoc with your responsive design. Here is a Complete Guide to Flexbox that is worth really studying and learning
  • You could consider using transform: translate x/y to achieve the staggered card affect instead of margin. I think it might be a little simpler from a responsive design perspective

Good luck with it all!

Marked as helpful

0

Asmae• 10

@Asmae-Amahrouk

Posted

@darryncodes THANKS!!!.. I really appreciate it !!! that will help me a lot ... I will take all your notes into consideration and work hard to improve my code ... : )

0
P
Katrien S• 1,070

@graficdoctor

Posted

Hi, you didn't upload your images correctly, so the links don't work anymore.

It's better practice to not set your fontsize in body as px. There is people that don't see well and adjust their fontsize in their browser. If you as a developer set a font as 15px, they will loose their settings and won't be able to view your work.

The design looks good. Not too much issues going on, except when viewed on some sizes, your text-cards are smaller of bigger than the star-cards. That looks a bit odd. Also your text doesn't always start at the same line. (see image) Everything should be outlined. It's better to have a <div class="container"> where you can position all the other elements on the same line using padding. What you should also do is set a max-width in that .container. Otherwise your page stretches all across the browser when someone views it on a big screen. A max-width would usually be about 1400px or 1140px, depending on the design or what you're creating.

I personally think you also added too many media-queries. Try to minimize them. And also make sure the design looks good on the smallest phone.

This is surely a good begin. Happy coding!

Marked as helpful

0

Asmae• 10

@Asmae-Amahrouk

Posted

@graficdoctor Sooooo helpful !!!!! gonna work hard to improve my code .... THANKS !!!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord