/FAQ-accordion

This is my solution of the challenge - FAQ accordion from frontend mentor website

Primary LanguageSCSS

Frontend Mentor - FAQ accordion solution

This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • Hide/Show the answer to a question when the question is clicked
  • Navigate the questions and hide/show answers using keyboard navigation alone
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

Screenshot

desktop view

desktop view screenshot

mobile view

mobile view screenshot

Links

How to run

Prerequisites:

Node.js and npm (or yarn): Download and install Node.js as it includes npm (Node Package Manager). Alternatively, you can use a package manager like yarn.

Steps:

  1. Clone or Download the Project:

If you have Git installed, clone the repository using the following command

    git clone https://github.com/DarekRepos/FAQ-accordion.git

If you don't have Git or prefer a manual download, download the project's ZIP file from the source (if available) and extract it to a folder on your computer. You can also use ssh.

  1. Install Dependencies:

  • Navigate to the project directory using your terminal or command prompt.

  • Run the following command to install the required dependencies listed in the package.json file:

    npm install

(If you're using yarn, use yarn install instead.)

  1. Start the Development Server:

  • Run the development script using npm:

    npm run start

This will typically start a local server (usually at http://localhost:8080 or a similar address). The exact port number might vary depending on your system configuration or other running processes.

  1. Open the Project in Your Browser:

Open your web browser and navigate to the URL displayed in the terminal output after running npm run start. This will usually be http://localhost:8080 (or the specific port used).

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Eleventy
  • Nunjacks temmplating engine
  • Accesibility

What I learned

I learned how to set up an Eleventy project from scratch. I improved my use of grid and flexbox, but I'd like to work on more projects to become more confident with these box layout. I also learned about accessibility best practices for decorative elements. I learned more about sass variables and learned how to use basic components with javascript and nunjucks.

Continued development

I want to create an extended project or template using Eleventy. This could be a portfolio website or a blog template. I'd like to practice more techniques for creating Eleventy layouts and components for static site builders.

In addition to accessibility, I want to ensure my code is compatible with all major browsers. I'm also interested in learning more techniques for creating non-standard elements and using CSS animations and transitions.

Useful resources

  • MDN Web Docs - this help me mostly with html and javascript part like optimizing javascript and images.

  • Sass, Eleventy Documentation - it help me with issues like mixin and deploying

  • Lighthouse and Performance Insights Tool in Chrome - i use this tool to check performance and how my website behave on different screens (mobile, desktop, tablet)

  • Can I Use - this is excellent website that help me check if some css like text-rendering support all browsers

  • Figma - Paste your design image to check the size of containers, width, etc.

Author