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

__________________________

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

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
👏🏽 Hit the THANKS button in any video!

WANT TO LEARN WEB DEV?
Check out my courses:

RECOMMENDATIONS

🔽 FOLLOW CODER CODER

#webdevelopment #coding #programming

[simon.sprogoe]

im slightly disappointed... I thought we were programming an actual accordion :'D

[AaronCruz-gkrm]

I love these type of programming videos. Its great to see how professionals work and think.

[archiem]

Exactly what I did. Purchased a radio, take it apart then learned to put it back in place. Well said.🤠

[stevenc]

I started off programming by learning Python. It's still enjoyable, but after finding your videos I'm going to dive into CSS. I love the combination of design with coding. Keep up the great work!

[StyleLessDesign]

These videos are amazing, these are such a help for beginners. Please keep creating these kind of videos✌🏾👋🏽🤓🤗

[tyjjjj]

I love how you get widths from adobe xd instead of eyeballing it. It helps to get precise measurements easily

[frosti]

I love watching you code, especially with that chill music in the background 🙏🏽👌🏾. Great videos.

[RidiculousMohit]

Lifesaver, got stuck at making project after hearing i have to use accordion. Well explained

[saen]

You have a great back story from everything now. I'm inspired by it!

[pranavgoel]

Finally a new series 🔥
Loving the details in the video, can we expect live stream anytime soon.

[thearaav]

I don't know at first glance, I Think you are the fun developer I have ever seen.

[reyserafin]

who the hell would thumbs down this video? you're such an inspiration for newbies like myself! keep em coming!

[dominicklaic]

This is perfect! I just finished this challenge about 2 weeks ago, so I'm very curious to see someone else's take on it.

[samuelodan]

Man, I remember really struggling with this and that was because I took up the optional challenge of doing this without JavaScript.
Dayumm.
I eventually used the details and summary tag and the [open] attribute in CSS.

[ckernest]

Hi Jessica. I enjoy every videos you teach about front end. let us know when you release your paid classes I will definitely buy them. you and Kevin Powell are the best teachers in front end dev.

[iagas]

Thank you so much for this. I was doing this challenge independently and I (weirdly?) found the image sizing to be the most difficult part. This helped me.

[RetroWill]

Way to go, Jessica! Much love from Fort Worth Texas!

[pavelchernomorets]

Thank you for sharing your skills ! its nice to see real process of study-building

[webdecodedwithfahad]

Please make crash courses on JavaScript and js frameworks.Yiu have amazing teaching skills ❤️

[lezboy]

Hi! I love the tutorial, it has helped me a lot. I saw that you are using the calculator for converting px to rem/em. I've found this plugin a few days ago and it has made everything easier. It's called "px to rem" by Marco N, all you have to do is select any text that contains px or rem, then pressing ALT + Z and it will be converted. Great video btw!