Skip to content
Submitted over 2 years ago

Social Proof Section ~ FlexBox | Responsive Design

accessibility
Cornflakes•290
@CornflakesPlus
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello FEM community!

I got extremely busy with my work this month, so this project took a while to complete. I only had time to code for two hours a week, seriously 😄. I wasn't able to code consistently with this project, so sometimes I felt out of context. It also has many missing pieces but I had to make it work.

Anyways, as always, I would appreciate any feedback. Some things I need guidance with are:

  1. How to have better HTML for the star icons without repetition
  2. Background image using the background-position property

and any other specifics. Thank you all!

Code

Please log in to post a comment

Log in

Community feedback

  • Dusan Brankov•860
    @dusan-b

    Hi,

    you did a good job building semantic and accessible HTML.

    Regarding the rating stars, I think the only way to avoid repetition is to merge the SVG images into one image. However, you could also do something like the following:

    // HTML
<div class="rated review">
  <span class="star-icon"></span>
  <span class="star-icon"></span>
  <span class="star-icon"></span>
  <span class="star-icon"></span>
  <span class="star-icon"></span>
</div>

// CSS
.star-icon {
  width: 17px;
  height: 16px;
  background: transparent url("../images/icon-star.svg") center no-repeat;
}

    According to MDN, the <section> element should usually contain a heading to indicate the content's purpose for SEO and assistive technologies. For the testamonials section I would consider replacing <section> with <div>, or alternatively adding a visually hidden <h2> element as a direct child of <section>.

    Besides that, your code is well structured. Keep it up!

    Marked as helpful
  • Suleman Tasawar•380
    @Suleman-Tasawar

    As far as i know that the Section tag is used when there is content that you want to show by order like for example consider a book it has headings,paragraph,diagrams Its default property is block

    section{ display block; }

    while the div tag does'nt have any special purpose you can put any content inside it.Consider you testamonial solution.You can use two parent div containers.One for the upper textual content and Another for the testamonial.

    <div> has default property display block;

    while the blockquote tag is used to reference a section quoted from another Page or Site

    <blockquote cite="www.frontendmentor.io/"> FrontendMentor:A Frontend Portal to practice Webdesigning </blockquote>

    Does this help you in any way

  • Cornflakes•290
    @CornflakesPlus

    I would appreciate it if someone can give some feedback on my HTML Semantics as well, like the use of <section> tags, <div> tags, and the use of HTML for testimonials. I used <blockquote> tags with headers.

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