Responsive site using CSS Flexbox

Hey, really good work on this one. The layout is really good in desktop and mobile. It is really responsive and it is a really good solution. Well done!

Regarding your questions: If I were to do that, I would just use flexbox as well like what you did, since the layout for the testimonial does not really have a complicated alignments.

If you were talking about the testimonial cards, the 3 of them, well yeah, grid could be use so that the names won't be shifted when the above text gets wrapped in another row, I sometimes use grid for that matter so that the content is controlled, if only justify-self works on the flex items right, it would be easy like grid.

Some suggestions would be:

• On the header the website logo, lose the word logo on the alt text. screen reader will already say that it is a "graphic" so you don't need to add words that relates to "graphic", like "image", "icon".... Though, I won't put the company logo inside a nav since you didn't treat it as a link. I would separate it from the nav.
• The links in the header could have used ul tag, since those are list of links, it also adds extra information for screen reader on how many links there are, because it will say how many items are there in a link if a screen reader navigates to it.
• The alt text on the arrow-down-icon could have been left empty like alt="". If an image does not add any content, use alt="", if it adds meaning, then use a descriptive alt text.
• Wrap the main content inside a main element. This creates more structure to your html, also it guides screen reader user to where they are, since main are landmarks along with header and footer. I would structure it like:

<header />
<main />
<footer />

• The alt text for the person images in testimonial could only used their name like alt="emily r". The testimonial cards could also been wrap inside an article or a blockquote.
• I would wrap the name of the person along with their position in a heading tag. The reason is that, if I navigate using screen reader in the testimonial section, if I read a heading tag of the person, I would know that the next element is the testimonial that they said.
• footer website logo, lose the word logo in the alt attribute.
• Links in the footer could have been wrapped inside ul.
• The social media links could also been inside a ul element. Also, the a tag that wraps the icon should have aria-label. aria-label is piece of text that is read by assistive tech when they navigate on that element. You typically use aria-label to an element if that element does not contain any text like that social media links. it would be like

<a aria-label="facebook">
  <svg aria-hidden="true">
</a>

• On mobile layout, the hamburger menu could have used button and not a tag. Since it is not a link, it is just a control for the navbar dropdown. Use also a aria-expanded attribute on it. You use this attribute to inform a user that the toggler has expanded something, you use javascript as well to change this value. You can search more about this one. You will use this a lot when there are element like dropdowns.

Aside from those, really great work. This is a great work really, it is also pixel perfect, awesome.