How To Code an Accordion - HTML CSS JS - Frontend Mentor

This is my solution to the FAQ-Accordion challenge from Frontend Mentor. The hardest part of it for me was deciding how I will position the images. For the most part I stuck to using grid, grid-areas and a smidge of position: absolute. I tried my best to keep the Javascript minimal, hopefully I succeeded 😁. - - - Code Resources - - - FEM Challenge: https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam FEM Solution: https://www.frontendmentor.io/solutions/faq-accordion-thoughtful-approach-to-layout-vanilla-htmlcssjs-KnXZZK35R Github Repo: https://github.com/grizhlieCodes/faq-accordion Codepen: https://codepen.io/grizhlie/pen/dyVbgbP?editors=1100 Clamp calculator: https://grizhlie-clamp-calculator.netlify.app/ - - - Learning Resources - - - Clamp(), by Kevin Powell: https://www.youtube.com/watch?v=U9VF-4euyRo&t :is(), by Kevin Powell: https://www.youtube.com/watch?v=McC4QkCvbaY - - - Chapters - - - 00:00 - Introduction 00:14 - Downloading and saving files 01:20 - Analysing Figma 02:28 - Opening in VsCode + removing FEM code 03:00 - Setting up CSS files 03:31 - Explaining font-size: 62.5% 04:08 - Showing what extensions I used 04:35 - Setting up variables and font import 06:15 - Quickly discussing clamp() 07:08 - Color and index variables 08:00 - Writing HTML 12:25 - Styling body 12:52 - Styling FAQ Section 15:23 - Styling (Images) - Image-Container 17:19 - (Images) - Quickly discussing various grids 18:07 - Styling (Images) - Main Images (woman-platform & shadow) 20:48 - Styling (Images) - Box Image 21:46 - Styling (Text) - Text Container 22:33 - Styling (Text) - Heading 23:17 - Styling (Text) - Item Summary 25:20 - (Text) - Explaining :is(.active) 25:57 - Styling (Text) - List Detail 27:11 - Styling (Text) - fixing Item Summary padding-right 27:50 - Cleaning up HTML for Javascript 28:05 - Writing Javascript to activate the list-items 35:06 - Final code review and discussion