https://github.com/agataliberska/faq-accordion-card

Responsive FAQ accordion component
https://github.com/agataliberska/faq-accordion-card

bem-methodology faq-accordion rwd sass-mixins vanilla-js

Last synced: about 2 months ago
JSON representation

Responsive FAQ accordion component

• Host: GitHub
• URL: https://github.com/agataliberska/faq-accordion-card
• Owner: AgataLiberska
• Created: 2021-02-01T20:01:04.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-08T20:43:39.000Z (almost 4 years ago)
• Last Synced: 2024-11-22T19:14:10.517Z (about 2 months ago)
• Topics: bem-methodology, faq-accordion, rwd, sass-mixins, vanilla-js
• Language: SCSS
• Homepage: https://faq-accordion-card-eight-omega.vercel.app/
• Size: 92.8 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Frontend Mentor - FAQ Accordion Card

![Design preview for the FAQ Accordion card component coding challenge](./images/desktop-preview.jpg)

## Goal

The Goal of this challenge was to recreate the above design as closely as possible, using any tools.

My personal goal for this challenge was to practise SCSS, as well as BEM methodology.

You can find the final result [under this link](https://faq-accordion-card-eight-omega.vercel.app/)

## Approach and Technologies Used

* HTML 5

* SCCS (following BEM methodology)

* Vanilla JS

For the stylised scrollbar, I used [SimpleBar](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar)

Design-wise, I started working from the mobile design, building up to desktop.

## Lessons learnt

This was my first personal project in which I used an external package - which defnitely made me appreciate a thorough README!

Thanks to the feedback from mentors and my own research, I learnt a lot about making design accessible to all web users. This is definitely a topic I want to explore and will practise more in future projects.

## Feedback

Feedback is always welcome! If you have any comments at all, [please let me know](mailto:[email protected]?subject=[GitHub]%20FAQ%20Accordion%20Card)