Social Proof: SASS + Grid + Flexbox

Hi Fraser,

Great job on this one!

Looking at the preview above it looks like you need to set a narrower max width on the content so it doesn't spread quite so wide. Other than that, design all looks spot on to me.

I'm not sure what you mean about the footer as you don't seem to have one in your html? Have you tried making the body a flex column and setting the main to flex-grow 1? That would push the footer down when you have one. Or grid is an option

I can see you've removed the alt attributes completely from the star images. They are still needed on there but should be left empty like alt="". As voiceover will still announce svg images despite the empty alt tag (annoyingly!) it's best to also add aria-hidden="true" to those svgs.

I wouldn't do the stars with background images as suggested above by the way. In a real project they would be added to the html programmatically and that's unlikely to be done with background images.

Another alt related suggestion is to not say things like "picture of" in alt descriptions. That is already an image tag, so just the persons name will be a fine description.

Take a look again at what the section element is for. I would make this whole challenge one section, as it's all related to "why users love the products". You could make the bottom 3 testimonials into their own section, but if you did that you'd need to add a visually hidden heading to the section.

I hope these pointers are useful. Keep going, you're doing really well 👍

Hi, Fraser Watt! 👋

Nice job on this challenge! 👏 Overall, everything looks great and the page responds well! 👍

A few things I'd like to suggest are,

• Not adding any alt text to the star icons if you choose to add them to the page using <img> tags. That'll make screen readers read out the alt text for every single image, which is unnecessary (and might be a little annoying). 😉 An alternative way of adding the star icons would be to use CSS background images and playing around with the width of the container containing the background images and the background-repeat property. That way, the stars won't show up in the markup of the page as images or anything. But that's just a thought—there are many ways to do the same thing in HTML and CSS, of course! 😊
• Perhaps adding a little more margin/padding to the top and bottom sides of the page (just so that the content of the page still has a comfortable amount of room between it and the edges of the screen when the height of the screen decreases).

I guess you could always use margin or the transform property if you wanted to offset the position more than three review boxes (which wouldn't be so easy to do with flex alignment, like you mentioned).

And sometimes, I just use absolute positioning for the attribution in these challenges (just so they don't get in the way of the design and also because sometimes I like it when they overlap the content of the page).

Hope that helps a little. 🙂

Keep coding (and happy coding, too)! 😁