Building an accordion with HTML, CSS & JS (Part 1)

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

__________________________


In this video I'll be live coding an accordion from Frontend Mentor, using HTML, CSS, and JavaScript! (Part 1 of 2)

Frontend Mentor challenge: https://www.frontendmentor.io/challen...

0:00 - Intro
0:50 - Set up challenge from Frontend Mentor
2:48 - How to reverse-engineer the Bootstrap accordion
8:12 - Make notes on accordion functionality
15:28 - Adding boilerplate CSS styles
23:53 - Card illustration
38:04 - Styling accordion text
42:28 - Illustration and shadow image
1:06:40 - Tweaking accordion button
1:18:37 - Arrow toggle image
1:27:55 - The finished accordion card styles!

_____________________________________


SUPPORT THE CHANNEL
⭐ Join channel members and get perks: @thecodercoder
🏆 GitHub sponsors: https://github.com/sponsors/thecoderc...
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...


WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/


RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻  Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...


🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter -- Twitter: thecodercoder
Instagram --  Instagram: thecodercoder


#webdevelopment #coding #programming

• #science_technology
• #web_development
• #html
• #css
• #accordion
• #javascript
• #js