Slide 3

Latest Updates

In a world of infinite possibilities, Ability is everything. We develop Website & Mobile app for Business.

How to build an accordion with HTML, CSS, and JavaScript (Part 2)

(Source Youtube)

???? 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-2 In this video I'll be coding an

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

0:00 - Intro

0:32 - Kite AI autocomplete tool!

1:07 - Overview of the functionality for JavaScript

2:12 - Starting to add CSS styles for the different accordion states

8:00 - Fixing focused style on button

13:19 - Adding styles for the accordion content

14:19 - The button focused style strikes again!

21:41 - Adding JavaScript for clicking to open accordion

23:33 - Researching getting parent/sibling in JS

40:34 - Adding JavaScript to close accordion

44:00 - Researching getting height of elements

1:05:10 - Adding JavaScript for closing animation

1:09:46 - ???? FINISHED! Seeing the whole accordion work ????

???? Watch Part 1 here: https://youtu.be/FboXxLxg8eo

Frontend Mentor challenge: https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam

_____________________________________

???? 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

_____________________________________

#accordion #html #css #js #javascript

Why you’re not progressing (and how to fix it)

Blog

01-26-2021

Why you’re not progressing (and how to fix it)

After seeing thousands of designers go through our courses, there's something I've come to notice that makes or breaks a designer. A well-rounded designer who is pretty

Slide

From a small room table to large meeting rooms

We’re working with companies of all sizes ranging from startups to large scale business industries! We have extensive experience working with companies in Canada, USA and global to help them build a great website and effectively improve their ROI.

Slide