Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xabdulkhaliq/faq-accordion-card
Solution for "FAQ Accordian Card" Challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/faq-accordion-card
css css3 frontend frontend-mentor frontendmentor-challenge html javascript woff woff2
Last synced: 11 days ago
JSON representation
Solution for "FAQ Accordian Card" Challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/0xabdulkhaliq/faq-accordion-card
- Owner: 0xabdulkhaliq
- Created: 2023-04-07T09:07:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-08T14:36:20.000Z (over 1 year ago)
- Last Synced: 2024-08-14T03:38:13.468Z (3 months ago)
- Topics: css, css3, frontend, frontend-mentor, frontendmentor-challenge, html, javascript, woff, woff2
- Language: CSS
- Homepage: https://0xabdulkhalid.github.io/faq-accordion-card/
- Size: 339 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## **Preview**
## **Links**
- |||
| :----- | :----- |
| Solution URL: | [FAQ Accordion Card 🎯 [ USING DETAIL SUMMARY - VANILLA CSS3 - BEM ]](https://www.frontendmentor.io/solutions/faq-accordion-card-using-detail-summary-vanilla-css3-bem-PfVhpYym1r) |
| Live Site URL: | [https://0xabdulkhalid.github.io/faq-accordion-card/](https://0xabdulkhalid.github.io/faq-accordion-card/) |
|||
## Pagespeed Insights Score:
- | Scored 100% for Both Mobile & Desktop |
| :-----: |
| 
|
| |
| Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-faq-accordion-card/c7lfd2qg4h?form_factor=mobile) to get live score |
|||
## The challenge
- The challenge is to build out this FAQ accordion card and get it looking as close to the design as possible.
- The users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See hover states for all interactive elements on the page
- Hide/Show the answer to a question when the question is clicked
## What i learned
- Usage of `woff` and `woff2` formats for font files, because i'm unaware of these formats and used `ttf` as a primary font format to utilize the effective usage of `variable font`.
- I switched to `woff` and `woff2` because they saves users bandwidth with awesome compression ratio.
- The below css snippet will help the browser to load `woff2` font format if it supports, if not then it loads `woff` as its font format.
- ```css
@font-face {
font-family: 'KumbhSans';
src: url('./fonts/KumbhSans.woff') format('woff')
,url('./fonts/KumbhSans.woff2') format('woff2');
font-weight: 1 999;
font-display: swap;
}
```
- You can see the file size of each format (metrics are compared to `KumbhSans` font family)
- | TTF | WOFF | WOFF2 |
| :--: | :--: | :--: |
|161.03kb|93.53kb|74.56kb|
## **Built With**
- 
- 
- 
## **Tools Used**
- 
- 
- 
- 
## **Acknowledgment**
* Challenge was provided by [Frontend Mentor](https://www.frontendmentor.io)
## **Let's Connect 👋**
