MyTeam Multi-Page. Built with SCSS/SASS & JavaScript

Hi, Nyrell! 👋

For the director section, I recommend using repeat and minmax functions to create the layout. Doing this allows you to create a responsive grid layout with no media queries. I wrote how I did the layout on the README of my solution (#responsive-grid section).

For the card functionality, I recommend selecting all the buttons by using querySelectorAll. Then, add click event to each button by using forEach. After that, create a function to toggle the director's quote based on the aria-expanded state of the button.

The buttons need aria-expanded attribute to tell screen reader users whether the quote is opened or closed.

I recommend removing the setTimeout function. Let the users close the quote by themselves. For me, I can't even read the quote within 1000ms. It's not a good experience.

Here are some more suggestions for improvements.

• Alternative text should not be hyphenated like code.
• The alternative text for the logo should not contain the word "logo". The semantic meaning of the img element is good enough.
• I recommend writing the "myteam" with capitalization ("MyTeam") to improve screen readers' pronunciation.
• There should be only one HTML markup for the mobile navigation and desktop navigation. I recommend refactoring the HTML markup. I recommend taking a look at the README (#accessible-menu-component section) to guide you set up the HTML markup (with some ARIA attributes).
• There is icon-hamburger.svg file for the hamburger menu icon.
• I recommend creating the "line" with a pseudo-element instead.
• For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
• Never skip the heading level. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users can get confused.
• I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
• I recommend reading "5 Handy Sass Code Snippets" article. In that article, you will find some useful @mixin to help you write Sass.
• Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.

I am just taking a look at the index.html file to give feedback on the HTML markup. I recommend learning more about HTML. Currently, your HTML fundamental is not good. For example, on the contact page, there is a label element. But, the label is not labeling the input because the input doesn't have the id.

I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

• Manuel Matuzović - Lost in Translation - YouTube
• Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
• Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

I suggest visiting the Solid Start website. It gives you an overview of web accessibility.

I hope this helps! Happy coding!