FAQ Accordion Card Solution

Frontend Mentor Challenge

View Demo  ·  Report Bug  ·  Request Feature

       

Preview

Links

• Solution URL:	FAQ Accordion Card 🎯 [ USING DETAIL SUMMARY - VANILLA CSS3 - BEM ]
  Live Site URL:	https://0xabdulkhalid.github.io/faq-accordion-card/

Pagespeed Insights Score:

• Scored 100% for Both Mobile & Desktop
  Check out Pagespeed Insights 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.

• @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

Let's Connect 👋