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

[@KarlKatten]

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

[@TheCoderCoder]

That'll be the next video 😆

[@NaveenKumar-wc1ec]

@@TheCoderCoder when. waiting ...

[@mcmurdostation7134]

It is your homework lol

[@dunder9444]

i feel you bruv

[@bills1967]

Same 😂

[@AaronCruz-gk2rm]

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

[@archiem6323]

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

[@stevenc6618]

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!

[@frosti173]

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

[@saen6593]

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

[@StyleLessDesign]

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

[@TheCoderCoder]

So glad they can help!

[@P.D.V.J]

Really awesome to see your thought process behind this! I learned alot :) TY

[@0mrbel558]

Awesome work! I was having some issues with positioning the images but your video helped me a lot. Thanks!

[@pavelchernomorets3519]

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

[@tyjjjj9730]

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

[@DesiMinnesotan]

You're really inspirational!! Looking forward to learn more from your videos

[@AkinGundogan]

Yayyyy live codings are back! 😊👍

[@soumyam9503]

Awesome !!! Please make some more videos like this ⭐️

[@gon769]

I really love watching your videos! Amazing teaching skill.

[@iagas9]

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.

[@user-jx2cd2vb3p]

i just love watching your videos, it helps me so much, i'm learning new things because of you :D, greetings from Belgium ♥

[@hopeless8462]

Awesome job! Your videos are always efficient!

[@TheCoderCoder]

Thanks so much! I try :)

[@dominicklaic6872]

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.

[@TheCoderCoder]

Cool! It has been a pretty fun challenge :)

[@Bisson156]

thank you! Amazing 🙌 I improved my coding skills watching you 🙆‍♂️

[@pranavgoel29]

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

[@TheCoderCoder]

I do want to do live streams at some point, not sure when yet 😂

[@pranavgoel29]

@@TheCoderCoder Ok waiting for that day then 😂

[@mind_of_a_darkhorse]

Another great coding video from a great coder! Keep it up!

[@TheCoderCoder]

Thanks so much! :)

[@pinhoug]

Your Channle is underrated, i learned from you Coding and you motivated me

[@unaibasif2313]

Thank you so much for making this tutorial it's helps me a lot

[@dave371]

hi, your videos really motivate me to code!!

[@MohitK96]

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

[@Samuels691]

This was really fun!

[@reyserafin443]

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

[@TheCoderCoder]

Thanks for the support :)

[@SylarKilmister]

I love these live coding challenges

[@RetroWill]

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

[@thearaav6670]

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

[@gouthams7825]

I like this series a lot.

[@webdecodedwithfahad4414]

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

[@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.

[@alfredopablo3462]

Quede realmente sorprendido, LIKE!!!

[@samuelodan2376]

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.

[@ComputerScienceSimplified]

Amazing video, keep up the great work! :)

[@TheCoderCoder]

Thank you!!

[@min-of8cv]

One of my most favourite front end dev channel

[@TheCoderCoder]

Thank you!

[@Njarttime]

Thank you for the awesome videos keep it up

[@sumitmehra5119]

That reverse engineering concept was new to me and I loved it how you did all the things♥️♥️♥️

[@TheCoderCoder]

Glad this could help!

[@jdavidallen]

Great content. Thank you!

[@anuragnagpal]

Yess!! More reverse engineering videos plz ✌❤

[@TheCoderCoder]

Glad you liked it!

[@PrinceDalsaniyaYT]

Ya plzz more of this. This helped a lot.

[@adipradhan3506]

I just started this challenge yesterday.. did the mobile one but I have having some issues with the collapse things.. this'll help a lot ✌️

[@TheCoderCoder]

Awesome!! Hope this helps!

[@adipradhan3506]

@@TheCoderCoder today I followed the tutorial and I learnt a lot of things like it wasn't about the project that can be done anyhow interesting was to see your thinking process the way you solved the problem that was very informative.. Very grateful for your tutorial.. thank you 😄

[@rahuls7039]

❤️ 🔥🔥🔥❤️ ...This is helpful... Teach me Master ... 🙂

[@Shakeel714]

Dear CoderCoder, thanks so much for your awesome tutorials. Could you please let us know when will you upload part 2 of accordion tutorial?

[@syedumair9554]

Love you work and accent

[@shivcharansinghrawat4224]

I like how so much thought is given while naming of this channel 😅. Anyways , Great Content.

[@rangabharath4253]

awesome as always :-)

[@TheCoderCoder]

Thanks so much!!

[@lezboy5385]

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!

[@lezboy5385]

@Paul Maximus Got it. Thank you so much!

[@CarmelleCodes]

love this. the code plagiarism thing always freaks me out, because we are all out here copying each other lol

[@robertmacwan8144]

Thank you.

[@kepjohann5176]

This is awesome..

[@shahriajamankhan1760]

your videos are awesome! how do you edit all your videos? Its crazy~

[@jagadhisshdeveloper1689]

Nice explanation

[@BTSPeach1469]

if you dont mind sharing what is the background music? it's really peaceful and i would love to have it playing it while i code/study :D

[@webverse3442]

I liked the project... Esp. for someone like me who is starting.👍🏻

[@andrualmas9665]

I love that video and the music used for it, can you link the songs?

[@mohajore]

I finished html and css and I will start with js soon

[@groovebird812]

Hi, is it good to name variables like colors or is there a better solution? What if the color is changing from blue to green?

[@youtubesubscriberguy5196]

Awesome!

[@drafercuber9943]

Hey, I want to make portfolio websites, should I use react js or normal html Css

[@siladeboy4406]

intro ui ❤

[@huynguyendang1405]

i'm from vietnam i really love you so much. please teach git and use github

[@mgusa9372]

You are awesome. Thanks for doing that. Killer.

[@TheCoderCoder]

Thanks for watching!!

[@mgusa9372]

@@TheCoderCoder THANK YOU!!

[@williamphilip6893]

Nice Video, thankyou so muchh jessica

[@TheCoderCoder]

Thanks for watching!

[@julianvelez6563]

Hello yessica greetings from colombia

[@Robert-xw5ro]

I dont understand , how you keep the illustration position so well when changing to desktop to mobile?

[@hoihoi7409]

its easier to just go mobile first

[@SeanCarter]

Oooooh! I was going to do a live video similar to this but I might have to change my idea since it'd would look like I'm copying you 😂

[@techtipsuk]

Coder coder, do you still use Gulp or have you moved to Webpack? Just wondered if you had any thoughts on this? Really like your style of video. No BS just down to business.

[@hungantruong4709]

Can someone tell me what software she uses to measure the dimensions. thanks a lot

[@oluwayomioke5862]

Hi, I'll like to know the tool you were using for those measurements

[@ahmedbalady1262]

That's Adobe XD

[@ElbinBinil]

Which javascript framework do you use

[@artofphoenix9554]

may i know your vs code theme. it really looks cool.

[@innatecloud]

is materialize a good framework to learn ?

[@akshaykumar8300]

Hey and one last thing plss make playlist on Node.js from basic to advance 🙏🙏🙏❤❤❤👍👍👍

[@samcodes2912]

always ready to reverse engineer😄

[@SADDAMHOSSAINsaddamcrr7]

Eagerly waiting for the part 2 ?!

[@_parassolanki]

You don't have to place script tag below all the HTML if you use defer attribute in script tag. It will load JS after page will load.

[@TheCoderCoder]

Thank you!!

[@abdelmoulapod7099]

38:00 I think you should set the padding right to the card image class not to the card am i wrong bc you just set it to the card-image class in the inspector section i'm confused why you apply it then to the card class some one help please.

[@shaqueal9535]

Hey Coder Coder , D o you know anything about flutter.

[@abdelmoulapod7099]

Please, can anyone tell me why using rem unit is preferable

[@somebody-17546]

More pls

[@stephenajulu]

Hi Coder Coder, can you please create a course or help me find a good course, Interested in web development and design.

[@mohamadghadieh3605]

why are you adding the style to .card__image img and not to .card__img only at 32:59?it didn't work when i tried to put the style at .card__img but i don't understand why? Thanks

[@TheCoderCoder]

The img tag is inside the div ".card__image" so the selector has to be ".card__image img". You are using ".card__img" which doesn't exist, unless you add a class "card__img" to the img tag itself. Hope this helps!

[@rockyislam4222]

plz use bootstarp as well

[@rosenosilva7369]

thats cool

[@pranavgoel29]

Are you back to the mech keyboard from the ergo one? as I heard some clickty clackty 😁

[@TheCoderCoder]

haha no, still using the Ergo. I guess I was typing loudly! 😂

[@pranavgoel29]

@@TheCoderCoder ohh you type hard 😂 I felt like it was a mech

[@mrlectus]

FEM. Can you make a video for "Time tracking dashboard"

[@simonandrejko3036]

Hey Coder Coder, Im making a website and I dont know how to make a search box, an actual search box that will let you find stuff you want by typing keyword into a search box, please make a tut on this topic.

[@mgmahi5]

what's the browser you are using?

[@sofiyasami9278]

Which theme you're using ? Vs code

[@omarosama225]

I did everything as u did but it still shows up the text under the photo now next to it 28:07

[@coconut1465]

Mai tới chỗ làm xem

[@i-deegamingvideos6016]

Can someone tell me how to record your computer screen while coding? Want to start a youtube channel about my programming journey and Don't Know how to go about it.

[@Ethan_404]

pls part 2 .... coder coder

[@TheCoderCoder]

coming in a couple weeks!

[@MBXD001]

Heey, SO is your course still coming out ?

[@doenaldjonathan862]

What's the BGM? It sounds so soothing

[@alisbai4376]

The challenge is classified as for newbies on the frontend mentor site. It was hard to make for me. What about you guys?

[@shubhpratapsingh1794]

which vs code theme is this????

[@neilchumber3172]

Anyone know 2nd part of this series??? Help