Building an Accordion With HTML, CSS & JS

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn to build an interactive accordion component using HTML, CSS, and JavaScript in this comprehensive tutorial video. Follow along as the instructor live codes a Frontend Mentor challenge, demonstrating how to reverse-engineer a Bootstrap accordion and implement custom functionality. Explore essential web development techniques including setting up boilerplate CSS styles, creating card illustrations, styling accordion text, and implementing toggle functionality. Master the process of tweaking design elements like buttons and arrow images to achieve a polished, professional look. By the end of this hands-on session, gain the skills to create a fully functional and visually appealing accordion card for your web projects.

Syllabus

- Intro.
- Set up challenge from Frontend Mentor.
- How to reverse-engineer the Bootstrap accordion.
- Make notes on accordion functionality.
- Adding boilerplate CSS styles.
- Card illustration.
- Styling accordion text.
- Illustration and shadow image.
- Tweaking accordion button.
- Arrow toggle image.
- The finished accordion card styles!.