Social Proof Section made with HTML & Flexbox CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 1 year ago

  CSS

  1. Always include a modern CSS reset at the start. More info here on Andy Bell’s site
  2. In my opinion this is a really terrible dangerous practice and you shouldn’t do it: font-size: 62.5%; I’ve written more about why the Rem font hack is bad
  3. If setting max width on low level elements like headings and paragraphs, generally avoid doing that in pixels. It’s often better to use ch units or even rem so it stays responsive even when users change text size settings etc
  4. Rather than using width in % it’s better to use max-width in rem. If you really want to use width at least use clamp() min() or max() functions so you have more control. This design is extremely narrow on my small mobile phone, leaving a lot of white space at the sides and i think this will be caused by the width 90%. It is much more common to use a re-usable wrapper class (named whatever) that sets a max width in rem, margin auto on the sides and adds a little side padding so nothing touches screen edges.
  5. Media queries should always be defined in rem or em. Never pixels
  6. You should never need to use media queries defined as min AND max width
  7. Never limit the height of text containing elements. All that max-height is doing is making this break and be completely inaccessible for some users. Remember, people resize their text A LOT and change the font families and increase line height and do all sorts with settings. Max height is a bad idea here
  8. I’m surprised you’ve not used CSS grid here. It’s an ideal challenge for it in multiple places - for example instead of the different widths all over the place, some using calc to create 3 columns, a grid with three 1fr columns and gap would create what you need. You could use grid for the whole page with its 3 distinct sections, you could use it for the reviews or ratings wrappers… worth exploring as an option.

  I’m only on mobile tonight so can’t examine responsiveness fully but it definitely looks like the widths and some other items I’ve mentioned above will be causing problems.

  I hope that’s all helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 1 year ago

  Hi

  Well done on this attempt. You’ve got it looking pretty close to the design but there are some foundational issues you need to address in html and css.

  HTML

  1. Header is a landmark for repeating content on every page of a site. As this is some kind of solo landing page or set of components that would sit within a full web page it has no appropriate header content (like a logo or nav). H1s never belong in a header as they are the title for the content on one specific page only.
  2. rating-container should not be a heading unless you give it a visually hidden h2. Sections would always have a heading. The only reason you’re splitting it is for layout, so it’s fine to use a div
  3. The alt value on all of those stats must be blank. They are purely decorative as the text says “5 stars…” already
  4. Similar to no 2 - if you want the reviews section to use a section element it must have a heading
  5. Similar to no 3 - “avatar_reviewer” is not appropriate alt text! Image alt shouldn’t ever repeat and it’s job is to give a human readable accurate brief description of a meaningful image. These images are meaningful content in my opinion but they should at least name the person, preferably with a brief description. For example: “Grace’s face. She is white, has long dark hair tied back in a pony tail and is smiling.”
  6. An unordered list is not appropriate semantic markup for the reviewers name and fact that they are verified. Think about what all of this content would be with no styling at all and that helps to decide what each element should be.
  7. I recommend changing the reviews markup too: a figure element. The persons name (heading), image (img) and verified status (p) can all go in a figcaption. The review itself can go in a blockquote. Both figcaption and blockquote can be the direct children of the figure element.

  Hopefully this helps you think through html more and understand its importance for communicating meaning. Search engines and assistive technologies are reliant on your html being correct for the page to be usable

  0

  ---

  

  Kirsten ✨•460

  @ofthewildfirePosted over 1 year ago

  @grace-snow Thank you for your feedback! I dont really know a lot of the things you mentioned, so I will go look for resources to study them. I also didn't use Grid because I haven't learned it. I am like beginner beginner, hence the Newbie challenge. Not NASA website building here.

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 1 year ago

  @ofthewildfire yeah definitely try to make these changes, looking up each one in turn if you have trouble. They are beginner level topics but sadly most tutorials and courses don't bother teaching HTML properly. Good luck

  0