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

Key Takeaways

welcome to another live coding video where we're going to be building this accordion block from front of mentor the only problem is i don't know how to build an accordion block i mean i sort of do but i also kind of don't but that's okay because i'm going to show you how you can reverse engineer code from any website for your own projects and here to help reverse engineer is our sponsor kite kite is a machine learning powered free code completion tool that integrates with code editors like vs code it'll learn your coding patterns over time and will give you completion options ranked by relevance this means that you can code faster and more efficiently i've been using their vs code integration for a while now and i've definitely noticed that my auto complete speed has increased thanks to kite it is free so i recommend that you try it out for yourself and see if you like it link to kite is down below in the description alright let's get into the video [Music] alright so to start off let's check out the challenge at the front of mentor website so you can see here this accordion challenge and for free we are going to work from the jpeg files um not the figma or sketch files so if we go over here we'll go to the download starter files if you click this download button it'll prompt you to save this zip file which i've already saved so what i've done is in vs code i have created a just a project folder and i've basically put in the files that we've gotten from front of mentor so they give you an xl html file with some of the copy in there already and also a style guide markdown file which is pretty helpful um so it's telling you things like the size of the layouts as well as the colors that are used and also the fonts so this will be handy when we're adding all the styles in they also have images folder with the svgs for the design and another folder for design files so these are just jpegs again of the desktop as well as the mobile view and there's another image for the active states which is helpful as well now since we're not using these the um sketch or the figma files what i usually do actually is if i'm working from jpegs i'm going to open up adobe xd which is free and i'm going to just put the jpegs i've put the jpegs in this file already now we can't really it's not like an actual design file we can't look at this and get the actual font sizes and other styles that you normally would but i still like this because it's pretty helpful being able to see the mobile next to the desktop design so you can tell the mobile style the image on the top will then be on the left side for desktop and you can see other differences as well and it looks like for the accordion the accordion functionality seems pretty much the same between mobile and desktop which is pretty good one thing i wanted to sort of cover in this video is how to reverse engineer code so let's say you're given this accordion task at work or for school or you know whatever it is you just want to do it on your own and you don't know how to build an accordion so what do you do right well what i usually do is i will try to find either a tutorial or something or reverse engineer from an example that i think is you know following good practice so for this accordion i'm going to use the bootstrap accordion example bootstrap is this responsive framework that comes most people use it i think for the grid to lay out stuff but they also have some pretty helpful plugins and the accordion is one of them so if we check out their accordion we can try to look at the code and make an educated guess on how everything will function you know we know for an accordion you click something usually the title and then when you click it it'll open and kind of expand the content down and you click again and it'll sort of fold back up and it has this nice animation let's read through this bootstrap page and see how it works so how it works section so the accordions collapse internally to make it collapsible so let's read up a little bit more about this collapse thing so it looks like they have some classes and javascript that do the collapse functionality so they have an example here with this button okay so this is doing the same thing as the accordion was doing and it's telling you that it adds the collapse class to hide content the collapsing class during transitions so i'm assuming that's when it's opening and when it's closing when it's animating and then when it's open uses the collapse and show classes on the item so with that in mind let's look at this accordion again so i'm going to inspect this element i'm just going to scoot this up a little bit so we can see more of the actual code try to zoom in that for all of you probably watching this on your phone or something so let's see how this accordion is built here's the accordion example and if we highlight over that it's covering over all three accordion items in this accordion div there are three items one for each of these titles here and if we click on the top one let's see what happens in the markup so we got the accordion item highlighted here so we can see that it's adding and removing classes and on the closed state this looks like this div here is the content of the accordion that gets hidden and shown so yeah so this accordion collapse div then has the accordion body it has a content here and when we click to close it looks like this is a button so the whole the whole item here which includes the title and the arrow which looks like the arrows in an after pseudo-element the button changes so it looks like this class just kind of controls the button pointing up or down yeah that's my that's my guess and then we also notice that in the accordion collapse and this is the content of the accordion that gets expanded or collapsed if we look at that when we're clicking the button we can see this is the element where they add those three classes so when it's closed it has the collapse class when you click to open it goes from collapsing to then when it's open collapse show so that's pretty interesting and let me see if i can get this to be a little easier to see what's going on so collab i'm just manually editing this in the browser adding the collapsing class and see what styles show up here okay so this will tell us another clue so when we have the collapsing class the height is set to zero by default overflow is hidden and the the transition time is 0.35 seconds so let's make this a bit slower just to really emphasize it will say five seconds which might be a little bit painful but let's see what's going on so now you can see it's opening oh and we can see here that while it was opening this according collapse class is getting the height i'm guessing this is the height of the final content sort of hard coded into the element via javascript so we can see if we open it again yeah height is set to 153 pixels yeah so 152.6 so it's like rounding up to 153 pixels so that is kind of what i'm guessing is that plus a transition is telling us i guess how far to slide down right and then when it's finished showing it will remove the height and then if you remember the according collapse class collapsing height is set to zero it's a little confusing sometimes um but you know you can kind of see these clues of how things work so what i like to do actually is i like to make some notes here so we'll just maybe up at the top we'll start making we'll just make another artboard here just for notes and let's see okay so we're gonna take some notes on the functionality accordion it's a little small i'll make that bigger in one second functionality notes so we know that there are those three classes which is kind of how the function works what was the first class first class was collapse collapse is the default state when everything is closed so three classes collapse accordion closed then there's collapsing opening and closing we'll say animation and then when it's open it is what was it again collapse show collapse and show open accordion opened then if we go back to this we can start taking some notes on what exactly is happening okay so according collapse collapse this is the default state it is display none so this is again the actual accordion content because the button is what we click so this is the content that is going to get display none so add some additional notes here display none okay so it looks like that's probably the most important thing right yeah so collapse without the show class then collapsing height gets set static or hard coded with javascript so let's write that down before we forget height of content set via javascript on element so it's an inline it's basically an inline style set there and then what else happens let's go back to the collapsing class when it's opening okay so oops three collapsing so height is set collapsing so i'm just gonna hard code the style so we can take a little bit longer to look at it so collapsing height is by default zero overflow is hidden so let's if we uncheck those we'll see what happens so height right now is set to zero and that is what's hiding it here so this is kind of the if we didn't have the animation this is kind of what it would look like right so if we uncheck the height and uncheck overflow so the overflow is important because it looks like when the height is zero and overflow's hidden that means none of the content inside will you know sort of show up on the page and then there's a transition on the height property and i have heard that you're not really supposed to transition properly other than like transform and opacity but my guess is that this is just kind of the it's it's the exchange right if you if you didn't transition the height there wouldn't really be a way to sort of animate the accordion so even though maybe it's not the most performant thing i'm guessing that this is just kind of what you have to do and it's not the end of the world i think you know if you had like tons and tons of accordions all constantly opening and closing that wouldn't be great for your browser but if it's just one accordion then you know maybe it's okay so okay so collapsing high to zero overflows hidden and this is what has the transition of the height i'll just say default styles height is 0 overflow hidden to hide the content and transition height property my guess on the height 0 is it is needed because when we're opening it it's setting the height on the element right and then it's transitioning to that from zero then when you're closing it doesn't have the height set anymore so then you're closing it transitioning the height back to zero so that's why the height set to zero is in is in the default styles okay so i think that's good for collapsing and then collapse show let's see what's going on there um so click that to do collapse show so change from collapsing to collapse show and what styles are associated with that um okay can't find anything for the show class i wonder we can check maybe accordion body has anything nope so my guess is the show class is really just used for that first yeah collapse not show display none i'm just trying to think if there's another way of doing that because you could do like closed collapsing and then show but for whatever reason they decided to just use the same collapse class for both open and closed and then use the not selector and css to add the display none if it's not collapsed show meaning if it is closed okay so i think we have a sort of decent idea of like how this works right i think the issue of like code plagiarism is a thing i'm not going to you know copy and paste bootstrap css i mean obviously it's free so i'm assuming they probably don't care that much if you copy it but being able to look in the dev inspector try to figure out how things work based on how it functions in the browser and also what styles you can see is a really good way to reverse engineer things and figure out how they work so then once you understand how the accordion works or whatever it is you're looking at then you can build it on your own and tweak it and do different things with it there's always some lessons to be learned and for me i really enjoy learning from existing code i think it's a great way to learn it's almost like you know taking taking apart the radio and putting it back together to figure out how it works or you know a clock or anything like that i think we have enough info now to start building this card oh yeah so collab show display none if doesn't have show class okay so i guess there wasn't anything in addition for the collapse show notes but now we have a guess of how we want to build this thing if we're going to sort of use the bootstrap example right okay so let's get going building just the actual card itself so the first thing we want to do i think is do this gradient background so let's see what the style guide has to tell us it's the background gradient soft violet and soft blue that's good let's put this on the bottom for a second and then we're going to start adding some styles here i think i want to save these colors as css variables so let me add the boilerplate styles that i tend to use for everything so html box sizing border box and then that's going to get inherited in wild card before and after elements box sizing um inherit also going to do font size 100 that's for accessibility and then for the body element we'll just add some reset so i'll just say margin zero padding zero you can see that the kite thing knows what i tend to write so it's giving me that option closer to the top and we also want to set the font size or the font family rather um so let's get that font it says sans and i think we needed regular and bold so we'll select regular and bold copy the link tags then i'll go back into our index.html and put it in there and i guess i'll just put it after the title and we also need to add a link to our css file itself so link css and yeah it's loading style.css and i am putting it after the google fonts because we're going to use the rules from the google fonts in our style.css file so just want to make sure you have that first so copy the font family then we'll add the font to the body so now i think i also need to create a javascript file so script script.js and then i will add a [Music] script tag in the body script.js and i'll just add a little console log here test just so we can check that it's working now in our index.html file one thing that i do to load the website is i use the live server extension so if you don't have that you can go in your extensions menu and type in live server once this is installed when you have an index.html file open you can click this go live button down at the bottom here and it'll open the website in a local server here it is you can see that the custom font has been loaded which is great and let's check the console and make sure that yeah so you can see this little test message that we have here is getting loaded so i use live server i'm also using prettier this is in kind of like an auto formatter thing i've set it so that when i write a style when i hit save it'll automatically format it according to the settings so it'll put compound selectors on their own lines and stuff like that let's first make variables in our css file for our colors and i guess i want to put this at the very top so root element and i'm going to create styles for the colors so let's see if i remember this here okay so primary text colors there's a dark desaturated blue and then a soft red so i'll just say maybe i'll say text text blue oops text blue and that's going to be i'll copy this over is that right i haven't used css variables a ton so okay that seems right yay and then you call it with var and then whatever look i'm used to using sass okay and we'll say text red copy that over and then what else the gradient and i'm guessing we're not using these colors much yeah they're not getting repeated so these gradient colors are just for the gradient so i'll say gradient violet gradient blue else we got here oh okay text very grace blue dark grayish blue me add it under the text styles here text dark blue and then text i'll say extra dark blue dark blue and you know you can obviously call your variables whatever you want okay then there's a light gray i blue i'll add it to the bottom divider blue okay so now we got our color set okay it says the body copy font size is 12 and i think that's all the info we really need so close that up okay so let's do i think we wanted to do the background gradient first so it looks like it is horizontal gradient and the top is purple and then going down to i guess bluer color you can kind of figure out what that is when we get there and that's going basically through the whole body so i think i'm going to make the body min height 100 vh i'm in height 100 vh and we'll set background image linear gradient and let's see if they give us any clues here yeah so i guess violet to blue so we'll say gradient violet um i think the variable should still work in um linear gradient right i don't see why they wouldn't but all right let's check out our site and see what it looks like here we go okay so it's going from the purple to the more blue purple color yay okay the next thing is let's look at this svg images background pattern desktop looks like it's hard to see but it looks like a line kind of thing oh this is interesting this is like the shadow thing i guess you can see this okay so this shadow and the lines are for desktop and then just the shadow thing for mobile okay that's interesting um okay well that's good to know and then icon arrow down is it's really hard to see but it's the orange arrow for the accordions and then preview it's hard to tell what this is oh there we go so it's the box thing with the shadow so this is actually a separate thing i wonder if it's separate on mobile too i'm guessing it's separate on desktop because it's sort of overhanging the card like that so it needs to be separate from the rest of the illustration oh yeah this is just illustration box is only for desktop so my guess is if we prove this mode mobile one yeah it has the box built in and desktop doesn't have the box but we need to position it right above that little shadow there all right this seems fun okay so let's work on that card illustration so first we'll make the card and then we'll add in the background image for the lines and the shadow thing for desktop and then we'll add in the main image and then the little box for desktop and then for mobile we'll just do everything except the separate box let's see here so first things first i think i want to make the card and we'll just say we'll give it make it a section and i'll just say card because you know we're going to keep things pretty simple here so the first thing i want to do i just want to make this card and then i guess put all the copy into the proper tags so my guess is for desktop i maybe want to use flexbox or something flexbox or grid or the image on the left and the text on the right and then mobile it is image on top and text on the bottom so i know this seems backwards for the whole mobile first thing but i actually like building a desktop version first and then doing the mobile later but it's still mobile first because don't worry the css styles the default styles will be mobile for these things i just happen to like building the desktop version first i'm not really sure why okay so in the card i'm going to add those two sections so i guess i could just make the section card the flexbox parent we'll see how far we get with that then i'm going to make a div for the card image on the left and then card text on the right and we'll add the accordion in the card text element let's see so the card image i think i'm gonna make the background image here part of just in the card itself then i'll put this image in the card image section hmm should i use an image tag i guess i will try to use an image tag let's see how that works and then we'll do desktop first um it's gonna be this one women online desktop so what i think i might need to do is add two image tags so one's gonna be the image on mobile and one's gonna be the image on desktop and then i'll use css classes to either hide or show oops alt in online desktop and then the text here is going to be the accordion stuff so we'll say faq i'll make this h1 and then i'll add the according copy under it faq and then i'm just going to put the text in here for now but we will you know add the market for the accordion later on so the second thing we want to do is make the card styles so right now we've got card card image and card text so we'll just add it underneath here so card we got card image and card text i like using flexbox by default for layout so we are going to have to add a media query for this so i think i'm going to here we go media min width and we'll start adding the media query at maybe around a thousand pixels or something so 1 000 divided by 16. this is to get ems the reason is for that is 16 pixels equals one ram or one em 62.5 ems is a thousand pixels so add a media query for the styles for card on desktop it'll add all the card desktop styles in the same media query okay so for card then i want to display flex and we'll say card image i'm guessing they're going to be the same and card text will be each flex one and that will make sure that they are the same they take the same amount of height of a width we'll just set it for now we'll see how it works okay now let's see how it looks on the website okay let's reload okay so something is not quite right um let's see if the styles are taking it all okay so it's just the media query breakpoint is up here so i think this is because i'm zoomed in a lot so i'm gonna make this let's do 900 pixels instead 900 time divided by 16 is 56 there we go so now the break point is right here so for desktop things are to the side which is good and this svg is very big but don't worry because we are going to resize it and i think i also need to make the card itself i'm just assuming the background is white and border radius is gonna be something it's fairly round so let's say maybe two rims all right and here we go okay so i probably don't want the car to go all the way out to the side so this was 1440 so it looks like it's about maybe two-thirds or so i'm just gonna use my little handy-dandy rectangle tool and just try to guess or sort of measure how how wide it is oops so it's about you know give or take 923. so i'm going to do is set the card to max width of 900 pixels which is i guess 900 is 56 ems so we'll say 56 rems because em's one am roughly equals one ram unless you know depending on where it's nested but if there's no parent that has a different size set then one em will equal one rem and i'm gonna set margin to auto actually i need a little bit of margin right it's actually a fair bit how tall is that margin it's about 126 so it's gonna kind of seven rems i'll just say six rooms there we go now okay so now we have a nice little space going here and the card is 896. so you can see now when it gets wider we probably want a little margin for mobile as well so this is going to be for desktop so for mobile we'll just say margin is going to be i'll just say three grams all around there we go we we're going to tweak these mobile styles later so we could also do is maybe set padding so instead of giving a margin to the card i can add a padding of three rims to the body because now we know on mobile yeah it'll be spaced out just a little bit all alright so this is looking pretty good let's size this image a little bit better if we go back to xd i'm just going to sort of guesstimate how big i think this image is okay so it's about i don't need to be super exact here but looks like it was about 400 width and 359 height so let's think about this it's gonna be about half the width here so i think i want to set this image to width is 100 height is auto and then max width will be was it 400 pixels yeah there we go this will ensure that it's a little bit more responsive so you can see here that adding width 100 in height of auto when it's on mobile it's going to get size down let's add that to i think we're gonna have to add a class to this i guess card image image will work so card image image and max width i do want to add that in rams so 400 divided by 16 is gonna be 25 rims so let's see how that looks okay pretty good there we go so now it's not overly big on this thing here next we want to do is i think we need to align this image in the middle i'm a little bit worried because i think the height of the card may change when you you know open and close the content in the accordion and right now it looks like this image is maybe in the center of the card but it's also kind of lining with this background image of the shadow so what i could do is make the image aligned to the bottom but then give it a margin so there's always going to be a little bit of space between that and the shadow so maybe the first thing we want to do is actually add that background shadow and i do want to add that to the card itself i believe so we'll say background image or actually want to add that in the uh media query for desktop background image and it's going to be url images background pattern desktop and what we'll want to do is say back background size i think i want to set it to cover we'll see what happens background repeat no repeat background position and this is important i think i want to set it to the left side right so background position will say zero for horizontal and then middle maybe center or what am i doing i think it's left center so left horizontally and then center vertically so let's see how that looks okay so we can see it it is very large let's see what this image actually looks like um copy url okay so it's quite large um i can't tell if the white space down there is part of the svg or not but let's find out so okay looks like it's not so it goes all the way to the edge like that okay so i think what we can do is maybe say contain oh that looks much better it looks a little small actually it looks like it's overlapping a bit so i might need to set the background oh yes overlapping over here too so i'm trying to think i might need to be responsive meaning i might need to set the background size to like a percentage or something this is actually kind of hard i guess on desktop the image isn't going to change the image itself is not going to change so you don't necessarily need to size the background image to fit it so maybe we need to figure this image out first and then sort of size the background image accordingly to it it's not funny like i don't know things are always a bit trickier than you think right but that's kind of the way the way the world when working from designs you have to make things work and so things that you thought were really easy are not necessarily going to be that easy okay so we established that this image is going to be about you know maybe a little bit less than 400 but about 400 pixels wide but we also need space between the text and the end of the card so what i might do is where's the halfway point on this card anyway so that way point is right where the text starts so i'm going to add some i think padding to the left side of the card image so it's going to be kind of like this and i think that will help with the sizing issue it's a card image um padding right and we'll just start with two rims so you can see here just so you can see it better i'm going to add a border solid red so you can see this is the border is right where the text starts so now there's some padding and i think it'll help to when we make when we style the accordion text because it'll be taller so i'll start doing that now so first let's add that padding so we want it only on desktop so padding right two rims okay good um and let's style the accordion just just to get the card sort of the height we think it's going to be so if we go back to xd you can see each accordion item has a bottom border and some space there and it has that arrow thing so let's do that first let's get the text working all right so index.html file we'll start making the accordion so i'm going to say accordion div of class accordion and i'll put everything in there so let's go back and look at our bootstrap example so if we remember accordion was everything and then each item was an accordion item and i'm probably going to copy some of the markup classes but not it's not going to be like an exact exact copy but i think i do like this accordion item thing we'll do accordion accordion i'll just do underscore because i'm following that bem thing so then i think the questions are like try to separate these out hopefully prettier won't mess this up there we go so there's one two three four five items so actually let's do this accordion underscore underscore item times five this is using the emmett shortcut pretty handy so now it's messing me up feels like the top thing is a heading h2 heading which makes sense and a button okay so that's going to be the question so the question is going to be according item one will be the first question so i think i am going to kind of copy that h2 then in that it's going to be a button i think it was accordion we'll say according question there we go and then what else do they have so after the h2 was the accordion collapse an accordion body that's interesting i'm guessing the they are having using two different div instead of one because of the i think having the padding in the element that is collapsing will sort of mess up the animation so this has no padding at all and then the accordion body does have the padding so i guess we'll do the same thing here so according collapse and i'll say accordion i'll say accordion content okay it's kind of weird that they have these there's like weird line breaks going on here i don't quite get it okay whatever that's really bugging me though there we go oh my just because i wrapped the lines we'll turn the word wrapping off it's fine okay so we just have to do the same thing so i think actually what i'm going to do is two three four [Music] all righty now we got stuff in the proper markup let's see how it looks okay so okay this is because of the button but now at least the card is taller so we'll come back to the faq stuff when we do the accordion but let's kind of finish styling the thing here so obviously background size cover is not quite let's see 100 maybe so this is going to be maybe 50 for desktop at least i guess the question is where we want this to like go i'm curious to see what it'll look like if recording content if we just hide it all there we go so now this looks a little bit more like the card right i think maybe i'll just align this in the center so let's do accordion sorry card image for desktop card image and we'll say this is going to be display flex align items end there we go so this is at the end hmm maybe center will be better it'll just stay centered no matter what card image line item center i guess that makes a little bit more sense depending on how so the image will always stay in the middle okay let's do that and it looks like the thing is like it's also off screen a little bit it'll change the background size of that background image so we'll see i'll just say 50 for now okay so that's we're getting there so now we want to make this go off screen a bit so i think what i'm going to do is do a transform translate y negative one rim oh sorry negative translate x rather okay so how far does that need to go off screen looks like it's almost halfway across the shadow square thing [Music] so we'll do that and then i think we're going to have to do a overflow hidden so it's like that oh how are we gonna position that square thing then maybe overflow hidden will be set on the card image there we go and we can make the square thing outside of cart image okay we're getting there so transform translate x for rems negative four rems and then card image overflow hidden wait a minute oh the transform should not be on card image but card image image there we go oh there we go now let's position this shadow thing so let me think about this okay so the image is not this image is not going to resize on desktop so i think we're okay with that so we can sort of size the card image background just to be you know whatever we need so let's size it correctly first that looks roughly correct i'm gonna position it oh yeah we're getting close it's getting better you know what i think that's okay background position so background size 45 background position negative 13 percent hmm maybe background size should be something more static since the max width is 25 rams so maybe we can use that because we're kind of assuming it's going to be 25 grams on desktop it's kind of weird how it's changing like right there hmm what if i could use clamp here clamp was it four rims okay i guess not okay just out of curiosity i i used clamp for font size stuff i'm not even sure it depends on the viewport with okay that is fine we'll just kind of i think that's okay okay honestly i think that's good enough okay everything's saved now let's do the uh cube thingy okay so we want the cube to be outside of the card image element because it needs to be outside like the overflow hidden so it's going to be i think a child of the card element itself and we'll probably use absolute positioning so let's do card box i guess i can make an image right image card box images there we go card box okay then we will add some styles for that and because it is not showing up on mobile card box say display none by default and then for desktop we will add styles for it so we'll say display block and then we'll say position absolute and we want to be positioned maybe left 0 and then we also want it to be sort of halfway out so transform translate x negative fifty percent so that's negative fifty percent of the width of the image itself and because we did position absolute here we need to set the parent which is card to position relative so that the absolutely positioned element will be relative to the card itself otherwise it's just gonna go outside of the card hey okay and then i also want to center it vertically so translate y negative 50 and we're going to go top 50 so what this does is um okay i'll tweak that a little bit but just to explain this the this is positioned absolutely so the let me just fix this so if we go top 50 it's gonna go 50 down from the top but the 50 line is going to be the very top so we want to have the middle of the image be in the center line so that's what the translate y negative 50 percent does so this is one way to center an element that is absolutely positioned relative to the parent i used to use this a ton but nowadays i just use flexbox um and align item center justify content center so it's a bit easier but this is this is definitely helpful if you are working with absolutely positioned elements we also need to fix the z-index thing here and this is under the card image because the card image is coming after so it's coming after the image of the card box and if you don't explicitly set z index it's going to make later images be on top of former elements so to fix that we can just say z index of one and now it's on top so it's also kind of adjust that looks like it's coming out a bit more too i think we need to oh it is actually quite a bit more out because i guess that's just how the shadow works so maybe we're okay because i can adjust it with the translate y thing maybe let's do it with the top thing and that seems that seems pretty close to the design maybe we'll do a little bit more okay hey that's good enough for me so top is 57 okay oh yeah i forgot to say the z index thing um card image image no that was a card box there we go there we go looks pretty good that seems okay okay let's do the mobile card thing now so going back to our handy dandy design okay so it looks like it is the whole thing is sort of centered up there and then we can probably use the position absolute method for that as well then it has that shadow and i don't remember okay background pattern mobile is from mobile so let's take this so it's a card for mobile um background pattern mobile use these same things so actually this doesn't need to be set on desktop again because we're already setting it on the mobile version and i'm guessing the background position is going to be like top center or something maybe center zero percent i think that's going to be top and background size i'm not really sure i'll say 50 for now okay there it is now let's see for mobile because there are different mobile widths like there's you know phone is gonna be about 375 then you got tablet which is a lot bigger i think it might be safest to keep this image at about this size because if i set it to something relative like 50 or 50 vh it's gonna be really big on tablet and i don't know if you necessarily want that right so this will be about 240 wide so let's see how we want to do this i guess we can set the max width to something different right so about 15 rems and margin auto display block and i guess we could use a negative margin to uh move it up to the top right let's set this first it's a card image image card image image i'll move this max with 25 rems down to the desktop okay cool i usually just like to put display block and stuff up first all right let's see what we got okay so in the design the corner of the card sort of line up roughly with the card top so let's do negative margin oh wait do i need to set it to position now relative i can't remember anymore okay why is that not working um margin let's just try to isolate margin top what is going on it's just kind of moving the whole entire thing uh weird margin top negative one i'm so confused right now this card is like this maybe i need to push an absolute it okay i guess i'm doing that so going back here we'll set position relative on card in the mobile styles so we don't duplicate it and then card image image was it absolute for desktop no so we're gonna have to reset that if we set it on mobile reset it for desktop i guess top of zero for now um and the margin auto center won't work because it is positioned absolute so we'll have to do left fifty percent transform oh yeah saved it didn't save it here we go yes thank you okay let's try that again oh wait i think card image is what needs to be display position relative so we'll put this back then set card image two position relative and that is wrong there we go position relative oh boy okay now this is working i need to make space so the text doesn't start till later so let's just kind of guesstimate again 136 height so what i could do is for card text on mobile set padding or maybe margin top to something okay i don't know what's going on here why is the whole card moving i'm like really confused okay i guess it needs overflow hidden on the card um but i didn't want it for desktop for the box thing because now this is hidden oyvay so here's the card card image i think i need to set it to a height or something i don't i don't really know what i'm doing i hope i don't lose subscribers over this um so what i could do is set card text to have a padding top let's try that okay oh it's working sort of good enough okay so we're just gonna set this as a placeholder just so it's not in the way card text and here we go and then we're gonna undo it for uh desktop styles and we'll worry about this later who would have thought a little card would be so difficult so i think this width looks pretty good for this image yeah i think it looks alright so now i think i'll do top maybe negative 50 percent that seems okay although now it's off the screen [Music] so i'll just do this make the padding bigger okay now where were we top negative one rem maybe six point five okay that seems pretty good this is for the card image image on mobile this is going to mess up stuff on a desktop i think i'll have to reset the absolute suspicion relative okay oof all right what's messing it up here i need to cancel the left and then i think that's okay okay uh wasn't that bad okay so here we go image this image looks pretty good okay so maybe on really short with i think this is a little bit too much padding i might have to sort of max size on that let's fix this padding thing though okay so this looks okay and really small widths actually 375 what would that be i think because i'm zoomed in it's so i think this is actually okay this is this is the mobile mobile view just zoomed in it's not going to get much smaller than the 375 is about here so i think that's okay we don't have to set a max width or anything for mobile now let's see where did our shadow go to oh it's like under the thing here and that's on card yeah here we go yeah i set the size to this so what was the size set to here width is a hundred and max with is 15 rams so i should probably do the same thing for that background image okay good um so that will be for card on mobile let's just make sure a card on desktop okay it's already set to something else so it's good all right i think maybe we can make the patty on body doesn't need to be 10 rems oh yeah why is this margin why did i add this margin top i don't even remember i think it was initially to add space on top but since i added pad to the body i think i don't need that anymore there you go okay and now i can adjust the padding of the text so about seven rems or so for mobile so here we go all right now we're getting somewhere okay you know what i am reasonably happy with that so now let's style the accordion buttons and things because right now it just has the default button styles and you know we want it to look like this where we have the text and then the active state and then the content right so we want to add textiles add that line at the bottom as well as add the orange arrows so right now since this is the whole thing is a button for the top we need to sort of cancel out those styles and add in the styles from the design so selector is going to be accordion underscore underscore item i guess i could just make it accordion underscore underscore question right so let's go into our code editor and do that okay so everything here is desktop right so let's add the new styles here under card underscore underscore text accordion and i think it was question just double checking that here we go so accordion accordion item and then an accordion question so according item contains everything so it has a question as well as the collapsed content so okay according question first thing we want to do is for the button probably get rid of the border so border none i think probably background can be we'll say transparent hopefully get rid of that so let's see how that works all right so that looks better already and then it looks like there's some padding involved yeah so there's like eight pixels of padding so i'm gonna reset the padding as well padding zero okay much better so now let's go back into our design and see what font size and stuff this needs to be and again since we are we're just kind of guessing here since we don't have the actual design file where it's working from a jpeg the style note said it was 12 pixels for body copy but i feel like the this is probably a bit larger so let's try just one rem which is 16 pixels to start also i just want to make sure that we have the font loading for the button so okay so it's it is inheriting the body font family the suns so this looks okay i don't know the font looks a bit different for some reason let me just see what happens if i explicitly set it on this thing oh it was different yeah so i think for for some reason for buttons they will just take a default button font style not exactly sure what it is but we need to explicitly set the font family on it in order for it to uh be different there we go okay that looks more like the design right okay so that looks maybe a little bit smaller instead of one let's try 0.875 rims did that even change hello weird let me try changing it in the styles let's just try two rams just to make it super obvious okay so it is working so 0.875 rams might just be something with the reloading thing okay it looks a bit better the faq actually seems pretty close size wise so i think we'll leave it like that um let me just check the colors as well because very dark grayish blue dark greyish blue that might be this very dark grayish blue might be what we want to use so that is actually might be this text blue very dark desaturated blue yeah so we'll just set i actually might make this the default color for everything on the body there we go let's see what the color okay cool now let's size the content it's going to be quite a bit smaller so accordion content is going to be the selector we'll use for that font size zero point this five rims it's a little too small how does that look line height needs to be bigger too so let's just experiment with that line height 1.3 maybe 1.5 let's try 1.4 i think it's a little bit smaller let's see what 12 pixels actually ends up being so 12 divided by 16 is 0.75 i mean i think that's pretty good so we'll set this on accordion content [Music] so accordion question accordion content and with the help of prettier the indenting is automatically added okay this is kind of the basic styles for the the text at least now i'm not going to actually add like the javascript and everything for the collapsing logic but i'm going to try to style things for how they're shown in the expanded state so right now looks like there's quite a bit of space here that's probably coming from the h2 so maybe we'll get rid of that and this is one thing i do often do we don't we're not using h3s in this but what i usually do is march and set the margin top to zero because i like just having margin on the bottom for text so okay so now we just have that bottom margin so let's see about how big that padding is going to be or how much space there's gonna be with that line so okay let's think about this so the line there's gonna be a line on the bottom for each of the accordion items so because the contents included in that we're gonna add the line there so then when it's closed it'll still be there but it's just because the content's not showing that the line looks like it's under the title okay so first let's get the space between the title and the content and again i'm just completely guessing here so it says height is 15 pixels tall over here and i will just say maybe one rem one ram of margin bottom for the h2 oh boy oh the button also has oh i add it to the button so um i'll just say accordion item and add some styles here accordion item h2 orange and bottom zero just because i want to add all the styles to the button itself as much as possible okay so spacing wise i think that is okay now let's add that line and we're going to add this to accordion item now let's add that line and we're going to add that to the accordion item so accordion item oops accordion underscore underscore item border bottom and i'm going to say one pixel solid and then it's going to be that light gray color so let's guess which one that is this is one reason why vs code's awesome is it actually gives you these little color swatches so you can kind of guess my guess is it's going to be this divider blue color and here it is accordion item var divider blue okay let's see how that looks okay and then i also need to add some space so let's think about this the problem is if this according kind of by default is set to display none the space there's a space between the title and the line because of the button margin bottom however when it is showing there's no space yet there so i think i need to add another margin bottom to accordion content so let's do that so again it's about one rim i would say so we'll do the same thing to the accordion content there we go so now you can see here that it is there's there's enough space whether or not it is showing or not so now we need to con consider the space between the line and the next item so what i probably want to do is just add um maybe i'll add a padding top to each accordion item and we'll probably do one rim again so we go up here recording item padding top one rim so now we can see that there is padding there's space between each of these items so if we sort of use the browser and hide and show looks like everything is good there cool next thing we want to add is the little button toggles so let's go back to the bootstrap and see how they build it okay so here's a toggle it looks like the button goes all the way across which i need to do i need to set display block for my button because right now it's not going all the way across and looks like it's sitting on the after el yeah the after suit element of the button which is what i was kind of assuming so let's go back to our button so you can see here it is i think by default probably display inline block which means it'll by default take the width of the the text content so if we set to display block now goes oh doesn't go all the way across this button thing is a bit strange maybe because it's in the h2 i'm not really sure oh yeah text line needs to be left because i think it's centered by default okay so let's just copy these over to the button and i usually try to put my like positioning and spacing stuff at the top and then textiles at the bottom that's just how i organize things okay so the button is here so now we can add according to underscore underscore question um probably before or maybe after so let's do that maybe after since it comes after the content so one thing for the pseudo-element is that you need to set the content to an empty string if you're not setting it to you know an icon or something otherwise this thing won't show up at all i think i also probably need to let's see let's just set the svg and then we can sort of position it correctly so it's icon arrowed down i'm pretty sure so i'm going to set this to a background image images icon arrow down no repeat background size cover and then background position center okay so this exists however um i need to set the width and height explicitly because it is empty this is very small 10 by 10. display block width will be 10 pixels i think that's 10 divided by 16 0.625 and then the same thing for height so i did a control d there to duplicate the width line so i could just change it to the height i think i can i don't think i need to do that position absolute for this because i think i can use flexbox so let's just try it here so display flex um and then i want to make the arrow all the way at the end so i'll say justify content space between so that puts both the child elements all the way to the edges as you can see here button and then the pseudo element here and i think i probably want to center it vertically so line content center does that do very much that didn't do very much oh why is that not maybe because i need to is it a flex property no you think about this i mean i guess i could just set the height to the text size oh gosh why is it it's like sizing very strange i think background size let's say contain it was i think skewing it to to fix i set background size to cover okay this seems better so we sort of a little hacky thing to center it by setting the height to the height of the text but i think that is okay okay so change the height to one rem for the after pseudo-element and then for the accordion question we're going to do display flex um justify content space between thank you kite align item center oh yeah background size contain okay so that looks pretty good okay so let's also think about we do need to style make it bold for when it's open so i'm just going to add the styles so when it's open [Music] what is it collapsed is closed so i think my default is accordion collapse um let's think about this because i think i might do it slightly different from what bootstrap is doing when it's closed the button has a class of collapsed i guess my question is why are they using the collapse class versus adding open to i think i'm going to do a bit reverse than what they did so i would add a class of open so according question open accordion question with a class of open we'll say font weight is bold so 700 and i've just hard coded it in the index html just so we can see you know what things look like okay so now it's bold so now without when it's not bold when it's not open it'll be like that okay let's just make sure the padding is okay here obviously we need a little more space up here um see how much space that is where's my little rectangle there it is so height of 70 and i'm assuming it's going to be about the same for the bottom and then there's padding on the left and right as well it looks like a hundred on left and right 70 on top and bottom and i guess i can add it to the card right yeah now i need to make sure i'm not affecting the image here so let's add padding it's already added padding right to rims which is 32. so i think it needs to be maybe a bit more for i'm assuming desktop so padding what did we say 70 pixels on top 100 pixels on the right 70 on the top and then i guess zero on the left would it change if i did like 100 yeah it would affect it so we do want to leave that at zero okay now let's convert that to rems 4.375 and that's going to be on the card oh for desktop here we go so we'll replace this padding right property and then 100 6.25 four point three seven five on the bottom and then zero on the left and we'll probably update the padding for mobile as well okay so there's more space here now cool um let's check how much padding there's on mole yeah so much less i'm guessing that was maybe the two rims or so 23 so that's about 1.5 maybe let's say what 24 1.5 yeah 1.5 on left and right and then 46 2.875 so add it to the mobile styles there's no padding yet so add it here and i totally forgot what it was gonna be um 2.875 i think it was on the bottom and maybe top and then 1.5 on left and right so let's see how that looks so this is a this is about what mobile would be that looks pretty good actually okay i am pleased with that alright and that's part one of the accordion block if you want to make sure that you'll know when part two goes up subscribe and turn on the notification bell i also want to give a shout out and thank you to my github sponsors you're awesome while you're waiting for the next video check out my other videos on building a two column layout using flexbox and using css grid thanks for watching and we'll see you in the next one