???? Code faster with Kite, AI-powered autocomplete that integrates into VS Code! https://kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codercoder&utm_content=building-accordion-part-1

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/challenges/faq-accordion-card-XlyjD0Oam

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 with GitHub sponsors: https://github.com/sponsors/thecodercoder

???? Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme

???? Learn to code with a free 7-day trial to Team Treehouse:

https://treehouse.7eer.net/c/1296848/228915/3944

_____________________________________

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 Gear -- https://www.amazon.com/shop/thecodercoder?listId=1LMCKGUTMVYXD

???? My Favorite Books -- https://coder-coder.com/best-web-development-books/

???? My Favorite Courses -- https://coder-coder.com/best-web-development-courses/

_____________________________________

FOLLOW CODER CODER

Blog -- https://coder-coder.com/

Twitter -- https://twitter.com/thecodercoder

Instagram -- https://www.instagram.com/thecodercoder

_____________________________________

#webdevelopment #html #css #learntocode