From Figma to Code / Creating a resume page

Key Takeaways

hi there my friend and friends my good friend Gary Simon recently created this and actually it was a refactor where he started with this and he his video took a look at taking that design and turning it into uh what we see here and he did a few other designs too I'd strongly recommend checking that video out which I have linked down in the description um and yeah he I really liked this design when I saw it and I thought there were some really interesting things going on with it and I said you know what I'd like to tackle that and he was kind enough to share the figma file with me so I could dive in and try and recreate it on my own using HTML and CSS and so that's what we're going to be doing in this video we're going to be tackling this trying to make it come to life writing all the code from scratch and not only that I want to walk my way through my thought process and putting everything together and all the different things there as well because there are some like interesting challenges and stuff going on in here right we have this isn't so bad coming down the left side but like here we have this that's actually scrolling off the side of the page which kind of presents a bit of an interesting challenge because it goes all the way and it's like full BL lead whereas we have it sort of held in a container or something um and there's a few little things in here that I think even just setting this up like it's almost like one of those timeline things that I get asked about a lot so we can look at how we can create that uh and everything else here it shouldn't be too long to do but I think there's a lot of fun things we can learn along the way with it and so if we bring this in here just to show you what we're going to be starting with we have this completely blank file that's right here well blank it's an HTML file but it's the blank boiler plate where we have no content in here yet we're going to be doing all of that and my CSS file is just completely empty so we're going to be starting from scratch to build this out and just in case you're new here right before we do dive into this I just want to say that my name is Kevin and here on my channel it's all about helping you fall in love with CSS and if I can't get you to fall in love with it I'm hoping to at least help you be a little bit less frustrated by it and by building out something like this people always tell me they don't know where to start with projects so I want to make sure this is something where I'm really going from like how do I get started with this what's my thought process behind it to help you be able to do it a little bit more independently and as well and that obviously would help Things become a lot less frustrating so let's take a look and often what I actually start doing when i'm doing these videos is writing all the HTML then going on over to the CSS but we're actually going to flip things over on their head a little bit because I'm going to be starting by in the CSS and then going the other way around and that's because when I usually work I usually have at least a few things in place that help me get started and that are in the CSS and I actually have a boiler plate that I use that actually has a lot of things that has full of utility classes and layer notes that are common and all of that but we're starting from zero here but I really do think having this in place before you start doing the HTML first then you're not working on a really ugly page from the beginning um but it just sort of gets you into the mindset of analyzing the design a little bit more than when you're just doing the HTML on its own so if we jump back to the figma file really fast and what I would start doing is just looking overall at what I want to get from here that's really important and so for me the typography is really important I want to come in and find out what fonts the font sizes and the colors that are being used uh here there's some extra letter spacing that's being placed on a few of these elements so that's important I want to get line Heights to see if there's any weird line Heights though on this one we don't have to worry too much cuz there's not too much text outside of that I'm also looking for colors and things like these are obviously different colors I have the color up here the circles here the line here the background color all of these things are things that I want to try and get font weights as well I didn't say that before with the typography and then also things that are going to be a bit of a challenge and there's two things in here we have the sort of this like timeline thing that's running down the side got to think a bit about how that's actually going to be done and then I have this part here which is kind of interesting since it goes off the side of the screen like that but as a base I'm not stressing about all of those things I just want to gather as much information as I can and because CSS is awesome now we have custom properties I want to bring as much as I can as custom properties over and if you are new to figma and you're you're sort of playing around in in here like here if I click on something I can get the information so I can see the color uh I can get the font family the font weight the font size line Heights on stuff and all of the information from here uh and you can copy it over just by clicking on it so it's nice and easy though I will be turning all of the pixel values I have here into REM uh units for the most part for my typography uh and then we'll sort of go from there now just getting all of this information from a figma file is kind of boring so I'm going to fast forward or just skip ahead to once I have a lot of that that as custom properties all right so here we are and here's all of the custom properties that I got for my colors now it's always possible that along the way you forget something and if that's the case it's completely fine you realize it later on you add another one in there so maybe I missed a color who knows but I got as many as I could Notice off the top uh and brought them all in here I'm using hsl uh just because I find it the easiest one to work with If Ever I need to tweak stuff though since I'm using it from a design it could just be hex I guess it doesn't really matter too much uh everything in this case is using only this font family right there uh and these were the font weights that I found and you'll notice I put font weight regular to 300 and then I have my semi- bold to 400 and the reason I brought that one in is it's not really a semi- bold I guess but this is the only thing that was using 400 know maybe that's just because Gary was going quickly uh so sometimes if you do notice that it could be something you ask your designer about but it is a smaller font and because it's a font and it has a color and it's on a dark background color it's very very possible that was on purpose because the 300 was too light so nor you'd be 300 but when needed the 400 is coming into play so I just called that my semi- bold uh and then all the other bold text is just using a 700 and then I turned all the font sizes I found in there uh into using REM and then for my colors as well as my font sizes here I'm using a numbering system which goes from 100 to 900 basically my base is like my standard this is is my 400 and I just do that based on 400 for font weights even though I don't use my font weights that way all the time um but this is sort of the default font weight so to me this is like my default font size anything smaller goes 300 200 100 anything bigger 5 six 7 same with my colors this is sort of like my neutral primary color and then as it goes darker we go higher numbers and as we go lighter then it goes to lower numbers and the nice thing with this is it becomes very easy to add new numbers to it so if you have a 100 or a 500 I can add those in or if I need something in between those I can just make it 250 so um you know when Gary comes back to me and tells me that we're adding seven new colors to here I'm not trying to find like a 1.5 or something or trying to come up with new weird names for my colors I just fit it into the system that we have now I did say we're only focused on the CSS but I do need to get this font so we'll jump on over really fast to Google fonts uh where I've already found it and in this case we just have to grab the ones we need so I need the light the regular and the Bold so once I've gotten all the ones I need we can just come over to the side here and copy what we have that's right there uh and then we want to bring that over into my links here in my head and I can paste it in uh and there is one problem with using Google fonts is there are some privacy issues around it if you're in Europe there's uh I think it's especially Germany where you're just not allowed to use Google fonts because of gdpr uh and the privacy concerns over just go you know it's using Google servers and stuff so there is this really cool website uh which I will link to in the description fonts. cools.com it's a privacy friendly drop-in replacement for Google fonts and so yeah you can use that and all you have to do is switch out the fonts. googleapis.com with this right here so I'm going to copy that and move that out of the way and then just this bit right here I replace it with that and we still have access to the font and if you had if it's a personal project that you're just doing like I'm doing now it doesn't really matter but if you do need access to Google fonts um without wanting to self-host them though there are benefits to self-hosting and I've talked about that for so there should be a card popping up and a description Down Below on how you can self-host Google fonts as well uh but with this setup there we should be good to go we can jump back over to here we can go back to Google fonts for a second just to get the font family rule that they're giving us which actually I already had that set up here so I don't we didn't need to go back there but now what we can do is we can actually come in and start setting up some base things here uh that we know that we need right from the beginning so on the body and actually you know what we're going to do one thing before we get to the body which is actually going to be on the HTML because this is a dark theme where we have light text on dark background I'm going to come here right away and say color scheme is dark and this is actually going to set all the user agent styles to be dark so if we go and take a look here this is my site just let's come here and just say hello so you can see that it's my site there and it's working um and what's happening is this is basically saying that the user agent styles are dark then we have light and then we have dark and you can actually specify light or dark here or you can actually say light dark um and then it will will go based on the user's preferences so this can be a really fast way to create a dark scheme or light you know switches based on the user system preferences which is really cool but I'm just going to say dark because I want I have a dark theme going on and just by doing that it sets the stage properly even though I'm going to be changing all the colors anyway it's like if I forgot something along the way we have that dark blue text I know at least my default text color is white now and if ever I add a form element those form elements are going to be set up for dark mode already and that just makes my life a lot easier sometimes a little bit less work that you have to do so I'm pushing the user agent Styles into a dark mode like that uh and then we can come here and on the body we want to set a few things so let's just do that fast we can do my font family and this is why I like having custom properties even if I only have one font family cuz I don't have to worry about what it is I just say my font family base and then I have my font size I know that this is going to be my font size 400 uh for line height I'm just going to come in with a 1.5 for now and we can sort of adjust it as we see based on the design cuz I didn't get a line height from the project itself uh the color itself was white it already is defaulting to white but since we have that in the design itself I am also going to come here and say that my color is my VAR color and it's my neutral 100 and it's should look the same but we're being a bit more explicit here one thing that's important is the font weight as well so let's come here and say the font font weight is going to be my VAR and in this case it's FW for font weight which is why I like doing this and we want my regular which is actually the 300 so it should get a little bit lighter now a couple of other things even though we don't well we have those svgs that are going to come in those icons that are going to run down the side but before we get to that the other thing that I do want to worry about here is just a couple of like basic reset things so let's come right here and very often we're going to see the star the before and the after setting a box sizing of Border box and you know what this is so much less important than it used to be uh just because of the way web development is now where we're using flexbox and grid for so much stuff and we're not setting explicit widths with padding and borders and stuff but it still does make your life easier when we do it uh whether you actually need it as part of a reset now I'm I'm starting to wonder but I'm going to put it in there anyway uh just cuz I'm so used to working with it and I feel like if I ran into an issue because of box sizing I wouldn't think of it right away so I'm still including it for now the other thing that I like having in here is doing an image and having a Max width of 100% And also a display of block because it just makes them a little bit easier to work with and we are going to have svgs sometimes having SVG in here can cause problems so you can include it and then see even though I don't think we're going to use our im svgs as svgs we're just going to use them the simple way uh you can also have like picture and video and anything else in here that you need uh but actually for our like because we're sticking with really simple I don't mind just leaving it like this but if you add those extra RA selectors in there it won't cause any harm if they're not in your project and then if ever they were added it could be a little bit of a safety net if you did want to have that but we'll just stick with this to keep it more simple now if this was a bigger project for me I would actually be going and turning making a lot of utility classes right now I love using utility classes for things like font weights for colors for backgrounds and all sorts of stuff like that but on something like this where there's not that much that's really like going on and it's not really the type of project that will grow into like this massive thing if it became something a lot bigger I'd probably be doing a complete refactor anyway uh so I think with what we have now we've actually set the stage for most of what we need and we can actually jump into writing a little bit of HTML now and just having all of that in place even though like we didn't write a lot of CSS so far I like having this here just because it it got me into that like analytical mode of like breaking down the design and trying to figure out what the different pieces were here and sort of scoping a little bit out and now I'm going to go over to my HTML and start thinking about it a bit more so we can get rid of that hello and we can come in here and start start writing some stuff and the first thing I like trying to figure out is what my layout's going to be and we clearly have this section that's coming down the side right here uh and then we have this other piece that's over here and so in a way because this is on the left it sort of would make sense to come first but I also would think like if this did get responsive and we're going to make it responsive but if it shrunk down and it had to stack this would probably make more sense to put on the bottom uh and just logically speaking this is even the way the hierarchy is like this is where I look first is at this and then I come and look at the second so we have to be very careful with doing what I'm going to do here because you don't want to change the order of things too much but always put in your HTML the thing that makes sense or however you're making your Dom um but put in the order here should make sense and then if you are reordering and nothing here is going to be focusable so like if there's a tabbing going on like nothing's going to jump out of order or anything like that then we're fine so what I'm actually going to do is we're going to do a main plus and a side so my main content will be there this will be in my aside but my aside will just happen to go on the left and then what we're going to do let's jump and actually we'll do the aside first just because it's right here and it's a little bit easier and then we'll sort of we have a bit more thinking to do when it comes to this part down here and for my aside the way I actually see this is I'm looking at them I'm going well this is like here we have skills and experience and then the resume is coming here well this is sort of the skills right the HTML CSS scss JavaScript react so if that's your skills it would sort of make sense for this to actually have a title that we can't see and I'll explain that in a second uh but I'm going to put an H2 here and I'm going to give this a class of visually hidden and I'm just going to put my skills because this section to me is that and we could also potentially do that maybe with an area attribute but I like actually and sometimes sometimes it's fine to do that but I find this is just a little bit more explicit like we have a list of skills that are coming here uh and the main reason I'm doing that is visually when I look at it it's really obvious what that is we have a here's the skills running down the side but for say a screen reader is coming on something like this then it doesn't have that visual clue so by having this coming in here we're getting a heading level that's going to be followed by a little bit of information after it so it gives that some context instead of just getting this random list that they don't really know what it's talking about and then this really is a list of skills so I'm going to do an on ordered list and like we could call this like a skills list I'm going to call it an icon list cuz it's made up of icons uh we're going to have to do basically customize the entire thing but just from a semantic point of view it's here's my skills and then we give the list of them so in there we have 1 2 3 four five things so we can put in uh five list items just like that and I'm just using EMT there so Li star five hit Tab and you get five list items and now what we want to do is we want to bring in those images but we have to think about it a bit because I have brought those in I have them in my project here uh and I just exported them from figma as svgs and so what do we want to do here with these svgs well we have to think about it a little bit and like really we we just need these as images we don't need any of the special SVG powers or anything like that so I can bring them in as a regular image and the first one here is my HTML so I can just do html. SVG and if we go and take a look back in Chrome here we can see that showing up and so then you know what I'm actually going to delete all of those and duplicate this for each one of them just because it's going to be a little bit faster where we can do CSS scss JS and I think the last one then would be react and all of the icons come in and now we could come through and give these all alt text and then we have so we have the skills here so then on each one of these I'm just going to come in and say this is HTML this one is CSS this one is scss then we have my Js here and we have react here because we just want to make sure that we're actually describing what each one of these images is is uh an alternative is you could actually consider these to be decorative elements and right they're just these visual things that are showing up and we could use this visually hidden which we'll Circle back around to after uh because obviously my skills is showing up here and it shouldn't we shouldn't actually see it but we'll come back to that uh but we could come in here with a paragraph that is uh class equals visually hidden as well hidden and I could write HTML here now if I did that I would leave the alt here blank because this would actually be what would be providing the information and the alt is required but by leaving it blank you're saying that it's just a decorative element so screen readers shouldn't really pay attention to it so just a couple of different ways that we could approach that and make sure that this area is still accessible now to know the best route to go for something like this if this is a concern for you would be to talk to someone who you actively uses a screen reader and ask them what the best way to do that would be uh you know they would get a different experience depending on if you did it this way or with the alt text here because this would announce that it's an image so it would be like list item then it would announce image and then it would tell say what the alt text is and you know what I don't think that would be the preferred way to go and this is me saying I don't think so it's still one of those things that I think would be worth like talking to someone with and finding out what the best way to do it is but this would be how I would first approach it where I would leave these blank and just put in this visually hidden text for each one of them because I do think it would probably be a little bit more of a straightforward experience so I'm going to do that for this one but I do want to present sort of both options and why I'm going with this one right here let's just put react there and take off that alt and it's all set up now since we have all this visually hidden stuff here we might as well circle around back to the CSS and set it up there so jumping back over to our CSS let's come down here and I'm just going to paste this in because I have it in the clipboard and I'm going to link to an article down below that explains it a little bit but basically you can see it makes all of that stuff that we' had there disappear uh just with how this is set up and it's doing everything it can to make sure that that content is out of flow so it's not taking up any space and everything can go around it and it's just completely offscreen but if a screen meter were to come byy it it would still be able to access that information so we can just include that right there again this code you can pause I guess if you want to copy it but there'll be a link in an article down below about this visually hitting class as well and with that done we can jump on back to our design here so we can start looking at this area which is the sort of the more interesting area that we have to work on so uh when we come there as I said that's going to be in my main and so what I'm going to do is I'm going to do a class of eyebrow and I don't even know why these are called eyebrows but when you have like a little bit of text that's on top of a heading it's just what we call it um then underneath the eyebrow we'll do our H1 which I'm going to give page title uh we don't really need it since we' only have one H1 anyway but I like having classes for those types of things and then we can just have a regular old paragraph right there with nothing else on it this is the one I chose for my base font size if you went with one of the smaller ones you might need something on there just to help make it easier to make the font size a little bit bigger and now this bit down here so we have the paragraph that's going to come in I'll bring the content in in a second but it I like just breaking down sort of the structure that I'm going to have so we'll set that up and let's just come in here with a job experience div uh nothing too fancy experience I think I spelled that right and in here we're going to have it's our it's our job experience and I can definitely actually see this being a UL instead of a div so it depends a little bit how you want to think about it because it's sort of a list of my current jobs the exper you know these are the current jobs I've had um so it does depend on how you're sort of visualizing it and seeing it I think just having this as regular content that goes in order is fine but uh I could definitely see an argument being made to make it a lists but I also know from talking with people who do accessibility stuff that um and that do use screen readers that we apparently do too much as lists sometimes so I'm going to stick with a regular div here uh and then so each one of these will be a div with a job let's just call it job like that so it's an individual job that's inside of there and inside of that we have a year so that's nice and easy I can just do a paragraph and call that year then underneath that well here it's kind of interesting because we definitely need this to be two columns so because I know that it's going to be uh they're going to be next to each other we're first going to come in with another div and I guess that div can have a class on it as well uh so we can call it like job info because it has information it's where you know it's the name of the company plus the role so here we have to think about this a little we have the H1 which is going to be my resume and then to me it sort of makes sense that like sales engineer here and if we look at the original one we're going to use the text from the original one here we had sales engineer sales team lead and then the it recruiter so like as we come down that it's my resume and these are sort of the titles for each part of the resume uh you can see that Gary had added a little description because it looks better that way so thinking of it that way to me those are headings so I can come in here and I'm going to give each one of those an H2 we can just call that the role and so you know that's sales engineer whatever I said I'd bring in the text after but we can put that one really fast and then here would be uh it could even just be a span or a paragraph with a um class class equals company so it's the role and the company they were working at one thing you might notice here I'm not using like a naming convention like bem or anything else I'm just calling these what I need to uh on something small like this I think that's fine if you're doing something that you know is going to grow in the future or potentially will grow in the future spending more time thinking about your naming conventions can go a long way uh but on something like this that I don't think would ever go beyond what we're creating it works um and it's fine uh so you know our role our company we have job experience then job then job info whatever um let's not overthink it too much so yeah we have the job info so that's those two and then we just need this paragraph that is down below so let's come in just with a paragraph um now here we have to think cuz this one is bigger and this one is smaller and I said this is sort of my base font size and this one is a smaller one but now I'm actually thinking I did it the other way around um so this one I might have to give a class to this one looks big I'm going to one second let's just open this up really fast and the font size on this one is 22 and this one's probably 18 then so I got that wrong um that's okay so let's give this one a class then and then I don't have to give the other one of class and um I'll just call this um intro and again because it's small project Namy conventions are a little easier so that gives us our individual job right there and then basically this job experience is what's going to scroll left to right so I think we just take that and then we can paste it in and paste it in again and we have our three jobs that are going to be there and of course we could have as many as you would actually need to have um and the one thing is this one is the current role there to me this is always going to be on whatever the first thing here is so we're going to look at a fun way we can do that with CSS um and just make sure that it's always there without having to worry about putting it into the HTML whether or not you know we could always add something or add a class here as well but I'm just going to assume that the the one at the front is always your current rle which you know maybe you don't currently have a job so it's not a safe assumption but we're going to do it anyway so with that I'm going to take all the content that's here and just make sure I have something in all of all of the stuff here and then I'll be right back all right there we go everything is in place uh put all the content in I believe and we're ready to rock and roll and this is currently what we have and it does not look anything like what we actually want to have so let's jump back on over to our Styles and I realized I forgot something just as I was looking at this cuz we have a black background so on my body here I did forget to put the background color uh which we definitely have so that was my color primary 800 I'm guessing and there we go we get my dark background coming in now normally I have this off screen and I'm going to maybe potentially run out of space but I'm just going to sort of squeeze this down and we'll leave figma down here at the bottom area and we'll have the browser at the top so we can look at both at the same time so the first thing we need to do and I'm going to zoom out on the figma one a little bit just so we can see everything at once um and what I want to do first is sort of get the layout coming together a little bit so we can have the aside and have all of that in place so I think what we're going to do when I think of that um we have our body and we have the main now sometimes putting main things on the body itself can be a little bit problematic so I'm actually going to come all the way here from the top down to the bottom it's very rare that you run into issues but especially sometimes there's third party things that can insert classes or do different things on the body so we can just wrap this entire thing so to do that I'm going to do a control shift p to bring up um my command pallet and then we can write Emit and then we can see it's already there wrap with abbreviation and we can just do main grid um and hit return so we get that wrapping around everything and that's a really nice thing if ever you forget something so you just bring up your command pallet and then just start writing wrap with abbreviation I think as soon as you write wrap it shows up and then you can wrap your selection uh in whatever you want so now we have our main grid that we can work with and we can jump back on over and set that up so so to me all of this here is just sort of generic content basically so we can come down here and let's set it up our main grid so obviously that does mean we need a display grid I mean you could have a main grid that's using flex but I'm going to be using grid for this one just because I think it's going to work pretty well uh and then we're going to use some grid template columns and for this basically what I'm thinking is I have this sidebar that's going to be here and then I have this main area here and when I was thinking about how to set this up I was thinking about having that skill bar actually go underneath this way at smaller screen sizes but it's kind of awkward at the same time because it's going to be so far down we're not going to see it and then it's actually going to take up more room if those icons go next to one another because they're just going to have to like squish so narrow that it actually makes sense to keep them stacked so I fig we can just sort of change the spacing smush things down we don't actually need to have any media queries or anything uh for the layout on this which makes life easier and it's one of those things that if you think that's the right approach to take try it and see if it works and if you find you're running out of space then you find an alternative uh or if you obviously if you have a design that actually has what it should look like it can help but in this case we only have a desktop uh layout so we're focused on that and we're just trying to make things work so just try things out see what happens and if it doesn't work out then you find another thing to do so jumping back here we can set up the columns and I don't need a lot of space on this side so let's just say for now I'm going to come in with a set value but we can play around with that a little bit after and on the other side I can just use an auto now the only problem is you can see that they're the wrong way around so that's easy enough because then I can just say that my main should be on my grid uh grid column of two and that my side should be a grid column of one and you'd think that would fix it but what it actually does is push this down below um because the order of the content and it leaves this whole area empty which is kind of awkward so the two choices that we have at this stage are you can tell them what rows they should also be on so we can assign a grid row of one for both of them and so what I tend to like doing in situations like this where there's a very limited amount of stuff or if I just want to make sure there's no empty cells uh is doing the grid autof flow and just saying dense here and if we do that you can see that this fills in it just moves up and it doesn't leave an empty cell um and yeah that works and the reason it's doing that is cuz we moved this o originally when we made our grid we that moved over because we said go to grid column 2 and then the aside was after that so it goes well I'm going to continue being after it and I'm using this to force it back up and again you want to be very careful when you're reordering things visually with CSS it can Muck Up tab orders it can be problematic for screen readers so just make sure that like visually it sort of makes sense how everything is Flowing here uh but I think it does we've lined sort of everything up where we need it to be and the other thing eventually we might need it centered within the space here so on this main grid we can give this a Min height of 100 VH and what I like doing these days is also doing this um obviously vs code's giving me an error here because I'm declaring the same property twice uh depending on your linting you may or may not get that but the dvh here isn't the browser support is pretty good for it but it's not perfect and it just accounts for the UI elements on uh phones that move in and out when you scroll so it's sort of what we want to have most of the time but if the browser doesn't support it at least we have the followback right there and we can just add an align items of Center um and right now it's centered is kind of broken so I might actually comment that out I was going to start with this but just cuz our layout is so broken we'll set the stage for this part over here and we'll sort of come back to finish it up a little bit after so let's come down and that's what did we call that we can come and look we called that my job experience and maybe that should be job experiences um plural no that's kind of weird we'll go with job experience um I was thinking experiences just cuz we had multiple things in there but I think it's okay like this uh and once again I'm actually going to use display grid for this and even though it's columns that are going next to one another I do like using grid and I'm going to use Grid autoflow in this case and say column which makes it behave more like Flex box normally would where you can see they're actually going next to one another uh instead of going down like rid normally would this forces them to go next to one another uh the one caveat with this is there's no like wrap option like you would have with flexbox so it's very easy to cause overflow but we want overflow so it's actually kind of perfect so if we keep on going with this uh what we want to do now is as I said we sort of fix that issue and so I'm just going to make this a little bit bigger and we'll focus on this area right here now and if we go back to here that would be our aside that we set up so it's a scroll all the way down uh we have this aside and then we have this icon list that we created right there so for that if you're following along with this and you are relatively new and I'd actually encourage you to do is to maybe hit pause and see how you would do it rather than watching me do it because if you are learning through tutorials and other things like this if you're just following along all the time you will get stuck or you still be unsure of how to start new projects and so sometimes pausing seeing if you can figure out how to do something and so we're just doing this one small little thing it's not super small I guess but um you know take some ideas or watch me do it a little bit and then if you feel like you can pull ahead go ahead and do that or maybe you're not following along but you could just open up a quick code pen or something and just try and make something similar really fast just to see if you're able to do it and if you get stuck that's fine cuz then you can see how I do it or if you did finish you can see how I did it and compare notes and see which approach you like better cuz there's always more than one way to do something as well and with that let's let's get this styled up so the first thing we have is they're already lining up this way which is kind of good but we need more space between them and there's a lot of different ways we could do that uh I'm just going to use a display you guessed it grid why because then I can use Gap to create the spacing I want uh and it just makes it really easy if you set this up with margins instead on your Lis it works it's perfect don't worry about it um so look at that that's set up next I was actually thinking for these little circles that I was going to turn them off so do a list style of none and then bring them back in they're kind of where I need them to be so I'm not sure if I will uh it means they might not be the exact same size as the design if I had to I would make them again um and as I say that I probably will actually turn them off and make them again the reason for that is because I need to make this part as well as that that and to line up this perfectly with the dot will probably be a lot easier if I don't actually have a list style so let's say list Style on that is none now if you really want this to be a list it's important here that um again going to assist of Technologies like screen readers a lot there are some screen readers that will no longer read this as a list because I put the list style to none and if you feel like it should still be a list and announced as a list which I do because of how I've set this up you want to set this to have a role is equal to list which will bring that back in despite saying list style none so that's just one of those little caveats um that come in with things if you don't do this on a navigation it might be okay but on things that really 100% like this should read like a list uh I think it's important that we do that and it's not all screen readers that don't I think it's only one of them um it's an opinionated thing they did just because of the overabundance of things that people were using lists for um but in this case I think it's worth keeping so I'm going to put that roll back on there it seems redundant but it is serving a purpose next up we need to style it a little bit more to match our figma design so we need a few things here it's kind of interesting because we need the line that's running down here and again having those dots and trying to line up the line with the original dots would have been pretty hard to do so for that line there's a few different ways you could do it and you might be able to get it exactly where you need it with borders and padding uh very very possible and you know what I just realized something I put this directly on the UL which would be kind of dangerous to do that for all of them uh because we did give this the icon lless class so I going to switch that over uh and put the class on there just to make sure it's the only one I think we have in our page but it's still I'd rather be targeting this one specifically uh and the reason I thought of that is because I'm the type of person when I want to bring in a line or something like that my mind always goes to using a pseudo element now you might be able to do it with a border um my original draft for this had it as a pseudo element but as I'm looking at it now let's just try and this is a big part of web development is going to be trying things and making seeing if you can get it to work uh so you can see the border is showing up there let's just do a margin left of like 10 pixels just so it's off the side of the screen a little bit uh and I am going to switch this to Orange because I think it's going to be less annoying to look at uh whoops now the issue is obviously if we are using a border it's going to be the size of the UL itself now we we're missing that space on the top and the bottom and the idea here often you do a height 100% And then you wonder why it doesn't work so we can come in and inspect that just to see what's going on and the dev tools and we go well I feel like it should be working you know we can take that margin top and bottom off while we're here uh but then when I go here I go okay why use my aside only that high and then you go like notice how there's a difference in height here and it's because when we set up that grid originally I came here and I did an align items of Center and when I did align items of Center that's controlling the height of the aside here so on the aside uh I guess we have two choices we can say that the Align items Center here is we could only do that for the main or we could go to the aside itself and we could say that this is actually going to be uh a line self of stretch and that means it's going to stretch back to being the whole height of the of our main grid so it's the entire height of the main grid uh and then we have this inside is going to match that height now you can't always use height 100% for things um but in this case because the aside is a grid item it's able to work um so just know that sometimes you'll put a height 100% on something it doesn't work for this to work the parent needs to have a height but because the aside is a grid item it pretty much gets assigned a height so it does work now we do have some empty space on the top and the bottom doesn't seem to have any but I do believe if we came here and we say margin that's margin left so we can just say margin of zero uh to get rid of all of our margins and we're left with a little bit of space there and if we inspect here to find out what's causing it everything is going to the top I forgot something when I did my ini initial reset my body still has the margin of eight on it we always forget things right so come up here we can say margin of zero and now it actually touches the top and goes all the way down to the bottom and it doesn't really matter what the screen height is it should always be matching so that is great except obviously the icons should be more grouped together in the middle and so if you run into this situation in this case I did use a display of grid so maybe you know how to do it with flexbox you don't know how to do it with grid you could just Google how do I Center or line things you might find a line items Center and then it doesn't work uh center that is one thing with grid and with flexbox um grid is a little bit different and we have the Align content which will actually work here and now if I stretch this out you'll see they're actually staying centered this way which is exactly what we want uh and then we have the Border running down there all without a pseudo element which is fantastic that's going to make our life a little bit easier than what my original plan was now you might have also used flexbox for this instead of Grid or you might have found a completely different way of doing it that's completely fine you don't even need them really you as I said we have our margins that are between those maybe you use the Pudo element like I did in my first draft of this you could have a hundred different ways of achieving something uh as long as it gets you there in the end sometimes it's more work sometimes you're definitely over engineering things to get there uh but at the end of the day if it works it works um but I do like trying to keep things as simple as possible anyway let's move on with this and what I'm actually going to do is let's set up this margin left a little bit better now and I'm going to go over three REM for now just all I'm doing is creating the space here maybe a 4 REM just to give me the space you can see it's a lot bigger than what we had in the original design or a lot smaller I should say than what the original design was but we'll sort of circle back to that I just want to have something there for now uh and then we'll come back around just setting the color getting the spacing to be good I just want to make sure it's not glued to the edge of the page now and we can go to trying to create these little icons icons and for me that's icon list and then we have the Lis that are in there I never gave these classes or anything else so I'm just going to select it this way uh we could even do that there's nothing wrong with selectors like this they work perfectly fine it Scopes The Styling we're doing here to that so I'm going to go with it cuz it's nice and easy the one thing it does do is it raises the specificity of it but at the end of the day for something like this it doesn't shouldn't actually matter at all um so on that we do need to get the dot and the other right like the center circle and the bigger one so let's focus on getting that Center Circle right there and for that on here I'm actually going to do a position of relative and the reason I'm doing that is cuz to actually make these little dots I'm going to be using a pseudo element and for that one I'm going to actually use the pseudo element that I planned on using whether it's before or after it doesn't really matter uh and I want you to actually again if you're following along with this a little bit or even if you're not hit pause right now and see if you can think of a way of doing it with one suit element and not two cuz we only need one to actually do this and so I'll start styling this up you can continue thinking about it but it is actually pretty easy to do um so here I'm going to say content or simple I should say it's sometimes thinking of the solution is not the easiest sometimes it comes to mind right away and other times you it takes a few a little while to get there but let's just say here we have a width got to spell things right um of I don't know 0.25 Ram you'll notice I use Ram a lot if you're using pixels for things that's not tooo bad just don't use pixels for font sizes um that I would really encourage not to but in general if you can get more used to using Rems and other more relative units it's always going to be for the better instead of giving it a height I'm going to give it an aspect ratio of one or you can do one over one or just one so that just means that the height and width are always going to be the same so if I do need to adjust the size I'm only adjusting one value makes life a little bit easier uh the next thing we want to do is set a background color on it so background will will be my we have that neutral 100 right there and nothing's showing up yet because you either have to give it like a display property or position absolute it basically if you want your suit element to show up along with the content here if you're not used to suit elements or you don't know too much about them I do have a very in-depth video I'll link it down in the description below uh that talks a lot about how to actually you know how they work and all the different things you can do with them so there we go that's looking pretty good now we need them to show up so I'm going to be using position absolute as I already said so position absolute I'm going to move this up because I like having that closer to the top and actually you can see it has showing up and it's a little bit too small so let's make it it's probably in between that we need but it is right there and for now we could actually do this uh background is going to be purple just so we can see it that doesn't stand out on a blue background we'll go with yellow um just so we can actually see them a little bit better sometimes that does make life a little bit easier and then changing it just like I did with my my orange line right there we can make them a circle and then we need to position them so for that we can say that the top will be and I just realized I think we're going to run into a bit of an issue here but we'll see we're going to do a top of zero and now how do we line it up perfectly with the left here because if I do let's see left zero it doesn't move so how can we line it up perfectly with that orange line right here and there's a few different ways but right now we have this margin left of four REM and so