Skip to content
OverviewSolutions
3
Comments
3
Vickie Vien
@vickievien

All comments

  • Nathan Ray•230
    @NathanRayMSubmitted about 1 year ago

    Hello Everyone.

    Here is my solution for the Social Proof section challenge. I did find positioning the elements challenging but am excited that I am learning more and more CSS and HTML. As always.....any feedback that can help me improve is welcome.

    My solution to the Social proof section challenge

    1
    Vickie Vien•150
    @vickievienPosted about 1 year ago

    Awesome job! It looks really good and super comparable to the solution! A few points to consider:

    • Alt text: include text instead of leaving it blank for accessibility purposes. It allows screen readers to read what this image is, if not, they'll have no idea it's a star. -- e.g. the stars could be something like alt="yellow star" or "yellow star rating".
    • Semantic HTML tags: I would try to swap out some of the divs and use section and article for accessibility purposes also! It also helps with SEO down the line! -- e.g. updating the top container and bottom containers to be section and each review box to be article

    Hope this helps. Happy coding!!

    Marked as helpful
    0
  • Vickie Vien•150
    @vickievienPosted about 1 year ago

    Design looks near flawless! I would include more semantic HTML by breaking out the code you have, instead of having everything within <header></header>.

    At a high level, something like this:

    <body>
  <header>
      [HUDDLE LOGO CODE GOES HERE]
  </header>
  <main>
      [ILLUSTRATION MOCKUP & TEXT BOX GOES HERE]
  </main>
  <footer>
      <ul>
          <li>[SOCIAL MEDIA ICON]</li>
          <li>[SOCIAL MEDIA ICON]</li>
          <li>[SOCIAL MEDIA ICON]</li>
      </ul>
  </footer>
</body>

    This way, it'll help define the different sections better and help with SEO. Hope this helps.

    Happy coding!

    Marked as helpful
    0
  • Vickie Vien•150
    @vickievienPosted about 2 years ago

    For the counter and add to cart functionality, consider updating the orderNumber only when addToCart is clicked. And this orderNumber should be the SUM of what is already in the cart plus what they want to add (I had it like yours until a family member made a comment about how it should be adding up not only a counter)

    So something along the lines of this:

    • capture the count (like you have with the +/-)
    • create a cartSum variable (or whatever you'd like to call it)
    • on click of the addToCart element, addCart function should be a sum cartSum += count then append the cartSum to the orderNumber (something like this: addCart.innerHTML = cartSum += count)

    Syntax may be a bit wonky but hopefully these steps give you a high level of how functionality could be improved!

    Marked as helpful
    1