Frontend Mentor - Scoot website solution

This is a solution to the Scoot website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site

Screenshot

Links

• Live Site URL: Scoot-multi-page web site

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Parcel.js - sass bundler

What I learned

for the accordion , each accordion will have an aria-expanded set to true or false. This has to be controlled used using javascript. Here is the js snippet to achieve that:

 var x = document.getElementById("p2").getAttribute("aria-expanded"); 
  if (x == "true") 
  {
  x = "false"
  } else {
  x = "true"
  }
  document.getElementById("p2").setAttribute("aria-expanded", x);

• read more from the following article How to toggle aria-expanded

• Accordion example accordion example

• Bootstrap accordion inspiration bootstrap accordion

Continued development

• refactoring the components and css to be reusable
• animation using gsap tutorial - scrolltrigger
• scrolltrigger documentation

Useful resources

• accessibility - making anchor list accessible when there is a decorative element. Use a span that is visually hidden but can be read by screen readers.

Author

• Website - Chamu Mutezva
• Frontend Mentor - @ChamuMutezva
• Twitter - @ChamuMutezva

Acknowledgments

• Frontend Mentor community leaders for providing a platform to engage with fellow learners and mentors. This makes the learning exciting.