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 Master

Yous 170

@yousra10

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

7

Accessibility Issues

0

HTML Issues

View Report

Yous’s questions for the community

Hi everyone !!

It's my first time using @media queries for responsive. I use Flexbox to improve this skill. If you have any suggestions, it would be a pleasure to know it !! thank you in advance !

Happy coding !

Best regards ! Yous Ben

Community Feedback

@Tuason066

Posted

Hi, I have a suggestion for your styling.

I noticed that your elements have the same style and you write it repeatedly. If your elements have the same styles you can write like this:

.irene-roberts,
.anne-wallace {
styles...
}

so you don't need to repeat the styles over and over.

and if they have only different margins you can write like this:

.irene-roberts,
.anne-wallace {
same styles...
}

.irene-roberts {
margin-top: 1rem;
}

.anne-wallace {
margin-top: 2rem;
}

I also noticed that you wrote your margins like this:

margin-bottom: 0;
margin-left: 1rem;
margin-top: 1.2rem;

there is a shorthand property for that you can write it like this:

margin: 1.rem 0 0 1rem;

check out this link for more information: https://www.w3schools.com/css/css_margin.asp

By the way, the output is very significant. Happy coding !

Marked as helpful

0

Yous 170

@yousra10

Posted

Hi Jeffrey!

Thank you very much for your suggestions!! It's really help me and I will apply it. Thank you so much !!

0

Please focus on giving high-quality, helpful feedback and answering any questions yousra10 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

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