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

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: 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: 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: github.com/sponsors/thecoderc...
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука