From Design to Code // HTML & CSS from scratch // Frontend Mentor

Key Takeaways

hello my front end friends I've been getting a lot of questions about how I go from just having a design in front of me whether it's a figma file or a JPEG or just whatever it is a file that a designer created and how do I plan things out to make it happen in the code so we're going to be doing that today by looking at this project right here which is a front-end Mentor project that has enough complexity going on with it that I think it's going to make it interesting enough but it shouldn't take too long to do either and we're going to be doing this from start to finish going through the entire process and really breaking down my thought process when it comes to getting everything organized and set up in the HTML it's also going to be a fun exploration of custom properties and some things we can do there we'll be looking at grid and flexbox and hopefully a few other fun things along the way as well and I've time stamped everything down below so if you want to skip to certain sections of it just go to wherever you are looking for and with that let's jump into this and the first thing we want to do is just look at the design and we have a mobile design line and a desktop design in general when I start writing my HTML and sort of breaking down the layout I am going to focus on the desktop design first because it is always the more complex one but you always want to look at both just to make sure there's nothing weird happening with a major reorganization of the content but in this case we're just going from stacked to then two columns so nothing too fancy here so for now I'll leave the mobile design off now we want to start writing some HTML for this and when I look at something like this the first thing that I am looking at is is there anything really tricky or not and I don't really think there is but there is the main thing I noticed is that this we have one big background for this all and then two sections inside of there because we can see the sort of that you know this has the Border radius on it so we just want to make sure that the parent has the Box Shadow on it but we need some border radiuses on this right here we have some interesting things with the colors and everything but the main thing is we have a layout like this and we have two columns so we could either use flexbox or grid to do this it really doesn't matter first thing we need to do is go ahead and create something that would allow us to do two columns so in the HTML I am just going to use Emit and hit tab here to get a basic starter like that we can give that a title then I'm going to go with a main just because we have nothing else on the page even though I won't use the main for this component type thing we're doing we'll use a div for that and I'm going to come in with something just like this where we have the result summary which will be my entire thing that will either get the display Flex or display grid to create the two columns and then I have my results and I have my summary one for each of the two columns or in the mobile they will be stacked one on top of each other now we're going to focus first on the results so we'll clear everything else out of the way and before we do that though we don't even though we're going to be working on this section right now we don't want to completely look at it in isolation because it does live in a larger site and one thing with CSS is it's Global it we have we can take advantage of how CSS works and one thing we'll notice is while these two things right here and right there these are different colors just because they're different colors doesn't mean that they're completely different they have the same font size by the looks of it and the same font weight and other things like that so in that case I'm going to have the same class for both of them and I can rely on inheritance to get the colors set up properly for each side since the two sides are different from one another the other thing to that I'm looking at when I'm breaking this part down is this is sort of like the title of my entire component this is my results I have my results here result 76 great and then I have a summary of those results but this is the big title for the entire thing from like a logical point of view this is I'm looking at all of my results and then we're breaking things down and because we have nothing else on this page if I did I might want a different heading level but it's going to have the main heading level which will be an H1 in this case so we can add an H1 in there nothing too fancy and I've given it a class of section title because I want it to match what we have over here again we're going to rely on inheritance to set the colors and things like that so we don't need any modifier classes on this next we can look at this section over here which is the score and basically I see this just as we have results then we get our score right there so your results 76 of 100 all in one paragraph it could be in a div but the important thing here is I want to span around the 76 this information would be something that could be dynamically brought in through a database or whatever so by this being in a span it does make it easier to select we can put a data attribute on it or something like that but for styling purposes as well we could hook into that span instead of trying to come up with some sort of obscure class name for that like result score actual score I don't know don't have to worry about it we can just use result score and we have a span that we can easily style inside of that next we have this section here so the great and then the paragraph that follows it so we can do Stuart e result Rank and then have a regular paragraph right after that and I think that should work out pretty well I have put all of this in a div just because if if we look at the spacing here this space and this space look pretty big and then we have a small space here so whenever we have things like that I find it easiest to create spacing in elements like this using gaps it's just so convenient now instead of mucking around with margins so I can have a large gap set on those we'll look at setting that up in a second and then this can all be grouped together and this one can have these smaller Gap set on that because we will be using Gap I just tend to use grid for things like this now there are some side effects to grid they're going to work out really well when we get to this side so every now and then you might be better off with another solution but in this case it should work really well so I'm going to add this class equals grid of flow right here and we're going to hook into this grid flow a little bit later on but that's going to set things up well here but when we also have this that I mentioned we'd want to set that up on as well so I'm going to come all the way back up here where we set those results and we can also add the grid flow on that one as well because this grid flow is different though we want larger spacing on it we could either use a modifier class or what I've started doing a lot more which is using an attribute selector so in this case I'm going to use a data spacing of large which is going to modify my default spacing that I have on the grid flow if you'd prefer to go with something else like a modifier class instead of a data attribute that's a perfectly valid solution as well now we can move over to the summary which will be this part right over here and we'll focus on that next the first thing we're going to do is add an H2 again with our section title like I mentioned earlier now I used an H1 in the other section and then an H2 here and the reason I'm using an H2 is the summary sort of Falls underneath results results is the big title now we're creating like a secondary section under there that's going to have the rest of this information so it's sort of like creating a table of contents this is the subsection to my results now once again we have sort of larger spacing here and here and then we have the smaller spacing in between them so for this part right here we can set up a grid flow just like we did earlier so it's going to space everything out with the regular spacing and then on the entire summary we can add a grid flow with the data spacing of large on there so I get larger spacing here and here here just like we were doing on this side as well now let's clear all of this off because we want to look sort of at each one of these individually a little bit more and so for each one of these we do have a few different things going on we have sort of a little micro layout going on within here and these are the types of situations where I see Flex working really well rather than grid like I was using there Flex could work to do the spacing the way I'm going to use grid it just takes an extra line of CSS that's the main reason I went with grid there for these though we have these little guys or the icons might be slightly different sizes and we also have these words some of the words are longer and shorter than each other so I see this as a flex container that then has two things in it we have one on this side and then this one here and then we can just separate the two of them and we can use flexbox for that and then even in here I see these sort of as two columns within the area probably we want to vertically Center things as well so when I see something like that I sort of picture okay that could probably be flexbox as well do we need to group it that way there's other ways that we could achieve the same thing but I think the simplest way to do it is to have this as a div within the larger space so for each one of those four we're going to create a summary item then each summary item will be made up of a flex group that will have our SVG right there and then the H3 which will be our summary item title so we can have our title that's there that will change colors for each one of them and then we also have the paragraph that will be our score over here now just like here when I write wrapped this in a span because that way we could have a data attribute on it make it easy to reference a JavaScript and change that number dynamically we can do the same thing over here with each one of these individual scores and that also gives us a nice easy way to style those as well now in this case with each within each one of these summary items we do have an SVG and there's a couple of different ways we could approach this the front-end Mentor project did give us individual svgs for each one that already have colors on them this is my reaction one I'm going to copy the SVG from here and I'm going to put it in as an inline SVG there are other ways of dealing with inline svgs but we're going to take it the simplest way possible where I'm just going to drop the actual SVG in here we're going to turn off word wrap for a second and take a look at what's set up in here there's nothing that we need to change except for one thing which is when we look here there is a stroke which is what's controlling the color we could leave this here because it's just going to work anyway but I think it's a fun little addition if we actually take this stroke off from here and on the SVG we can add a class and I'm just going to call this summary icon so it looks like there's a lot when we're dealing with this inline svgs it can be a little bit annoying you can always collapse things away if you want or of course just turn off word wrap so it doesn't look so bad so we have our summary icon and then our our title that's going to be here and again I don't have a stroke or a fill set on the svgs we're going to rely on our CSS to do that to make things a little bit more Dynamic so that's just one summary item here if we were using something like react or svelt or view we could of course make these into components rather than having it as regular HTML like this but I'm just going to copy and paste it four times and update the text so I'll be back in just a second so I've brought in all four of them we now have the summary item four times but as I alluded to when I see colors like this and let's clear everything off again when I see colors like this that are sort of different for each one of these the first thing my mind goes to is using custom properties and then I want a really easy way to manipulate that so you'd want either a modifier class or in this case I will use a attribute once again to be able to control the colors on each one of these so I'm putting a data item type for each one so we have our summary item and then the item type is accent one accent to Accent 3 and accent 4 right here which will be what controls our colors and once again if you do prefer using a modifier class rather than data attributes that's completely fine with all of that done the last thing that we do need to include over here is also our button and because I only have one style of button I will just call it button but if you had multiple versions you'd probably want to use some sort of modifier to set things like the background color and other things on it now with that done I'm going to go all the way up and over here we're just going to make sure I have a link to my CSS we can use emit for that where I'm going to do link colon CSS and hit return it defaults to using style.css which just happens to be my file name but if you have a different location or different file name for your CSS file just make sure that you do put the correct path right there now a fun thing with this project is front end Mentor did give us a font file and it happens to be a variable font so that's in my Assets in my fonts folder so I'm going to set up a font face for that and this font face declaration is looking at my font family which is the name that I decide to give it the font display swap is for performance reasons because it's a variable font we list a range of font weights and in this case this font goes from 100 to 900 so I'm just making them all available to me to use in the project and then I'm just putting the path to my font right here and the format of it which is a true type because it is a ttf font if I was putting this in production I would be looking at updating this to a woff 2 font just to help with the compression of the file to make it a little bit smaller and if you'd like to know more about setting up variable fonts and converting it to a woff2 font file there's a card popping up or a link in the description now the next thing I always do is set up my variables and the variables in this case or my custom properties I have set up quite a lot of them as you can see here especially for something that is as small as this but one of the reasons for that is I've listed all of the hsl values as individual values for the colors and then I reference those back to set them up within an hsl so I don't have to write it out every time the reason I've taken this extra step is because we have lots of areas in the Box Shadow the background here the text colors here where we're going to be using one of our hsl values but we need to play with the different opacity levels and having these available like this makes it much easier but if you're using one of these colors and you don't need to modify the alpha value you just need the solid color then it's a lot easier just to have something where your color works and it just works and you don't have to worry about it so here we have the color that I'm setting up and then down here I have the hsl function and in there I'm using the custom property just to map them together we'll see as we go through this though that sometimes we'll be using this version and anytime we need transparency or Alpha values we'll be going through and using these ones right here so it'll give you a better idea of how it works the other things I have mapped in here other than colors is well I did set up a couple of great Radiance we have the gradient here that will also be used in our button and we have the gradient that's right here as well so those were set up so other than my colors I have set up the gradients I guess those are colors as well but these are all just coming straight from the design I've taken the gradient that we have set up here and the gradient that is right here and I put those as custom properties too just so I don't have to start worrying about them later on when I need to use them I just put in the custom property name and it works and I've also set up the accent colors right here which are the colors we're using over here uh I've set up the font family as a custom property because that's always easier to do and I've mapped out some font sizes this is a static jpeg I'm just taking a guess at this point at what those are and if we ever have to modify them later on we can but I uh and one of the reasons here is we have a two five a five a seven five it just gives me a nice range that I can work with when I'm guessing at what my font sizes will be and those happen to be pretty common ones all the way up to two and this looked a lot bigger so I went with a five the font weights front end Mentor told us those are the font weights being used so those are the ones I went with now just before we get into getting the actual CSS a very simple reset for a small project like this I'm just setting my box size into border box I'm removing margins from everything since I'm going to be bringing the margins back in using my flow classes I've also set font to inherit which sets all the font sizes back to onerem including the defaults and it sets all the font weights back I like doing this it just forces people to use classes to declare what the fonts are going to look like instead of using heading levels because people will often use a heading level in the wrong way because it's styled the way they want it to look so this just sort of prevents that it is a little bit heavy-handed but for something like this I think it does work well we don't actually have any images and I don't know if we need this on our svgs but this is a line that I just include basically in every single project I ever do so I've included it here as well so now we move this out of the way and take a look at what we actually have on the screen and we can start styling it up a little bit the very first thing we're going to do is come down and set the font family and font size is in color all on the body these will all inherit through so you can see that everything is set up as at least a decent starting point now when we're on small screens we sort of want the design to take up the entire viewport but when we're on larger screen sizes we do want it to be centered so to be able to accomplish that what we can do is in a media query we can use the Min height 100bh display grid and place item Center so it will Center things at larger screen sizes now maybe everything would work well outside and you know doing it here without the media query but this is the break point I'm going to be using for this project so that's because that's when the layout is changing and I want to ensure at that point it's centered I'm including it in the media query and before we get into the layout one of the things I like to do is set up any of the generic or very simple Styles so the first thing we can start with is those section titles and for those we don't need anything too complicated we can just come in and set them up and once again if we take a look at them the colors of them are different but as I said on this section I'm going to be changing the color of the text on it and we can rely on inheritance to change that as we'll see in a second next up we can also style our button and give it the hover and the hover State once again is coming from the designer who supplied there it is we have the regular and then we have that hover State there so now I have that hover that is coming on there as well all we're doing is setting up some basic Styles here nothing too fancy and I'm using a border radius of 100 VW because that just is a gigantic number it ensures that we get this pill shape it could be a much smaller number but this works perfectly fine and I don't have to guess at it and then I'm just changing the color on Hover because it is a gradient background from a color to a gradient we can't do an animation on that if you did want to do something like that you'd have to actually have a gradient on both of them that moves and it gets a little bit more complex so we're not doing anything too fancy we're just going to go with a simple transition or lack of a transition a simple switch like we have right now now if we take a look here we call this entire element my results summary so we can get around to styling matte even though we will have a few other utility class style things coming in but one thing we'll do is we'll give it a Max width and we're going to give this a display of grid and the reason I want to give it a display of grid is so at larger screen sizes we can have two columns so to be able to get two columns it's nice and easy we can do a result summary grid template columns 1fr 1fr inside of our media query and the reason that I'm using grid here instead of flexbox is personal choice if you'd rather use flexbox you can use that as well though you'd have to select the two children to assign Flex basis to them or Flex of one just to ensure that they have the same size and now looking over here when we're in the small screen sizes we don't actually have that border radius with the Box Shadow on it but here when we're at the large screen sizes we do so that means that we can include some of those Styles in this media query as well so here I've added the Border radius of 2 RAM as well as this box Shadow and you'll notice here I am using the hsl with the variable inside of it the reason I'm doing that is if we simply went with the variable here and didn't use the hsl version but we just used the solid you can see how dark that is because we're using the colors way too dark we need to lower the opacity on that so that's one of the reasons why I like doing it this way where I have access to the hsl version of it so I just have the hsl values getting passed in and then I can control the opacity of that shadow and make it lighter or darker and play around with that without any issues so there we go that's one of the use cases of putting the hsl here and we'll see a few more of them coming along as we go now next up we have the results that's right here so we can set that up and give it the background color and when we were going design you can see that everything in here is text align Center since everything is text align Center we might as well rely on inheritance there and this is once again another use case where we want to rely on that for the color as well where we want to be using our hsl variable to be able to set the color once again so we can control the opacity of the text so here I've set that up but we haven't put the alpha value and you can see it's very very light whereas here we need to fade things out so it becomes very easy to do we just come down add our comma and then we can do something like 8.5 or maybe 8.7 in this case to get the color that we're after now one issue that we've run into is we have a border radius that isn't being adhered to on these sides one simple solution for that is on the element itself that has the Border radius we can also put in an overflow of hidden and by doing that it means those parts that were overflowing get the Border radius but we don't actually get them over on this side and ideally this element is sharing the same border radius as its parent there's a nice easy way to do that we can do a locally scoped custom property so on the result summary here I find it easier to do it up here and so on the parent we can set the Border radius and then when we're using it we can set the variable down there and then we can also reuse that same variable over here on our results and now we have that on here as well as on the parent now we could get rid of that overflow hidden though it's not getting in the way or causing any problems right now after being interrupted by my dog barking and then my kids getting home I didn't have any more time to finish recording so you can see change wardrobe I've shaved we're going to be jumping right back into it but before we do I just want to ask you a quick question and that's about what do you think of this format of video where on these longer form ones I usually type everything out and I'm just walking through my process here it's a little bit more jumpy a little bit faster paced where we're looking at the code and talking about what it does I'd love to know what you think whether you love it you hate it you don't care one way or the other leave a comment down below to let me know to know if I should be doing more of these less of these or whatever it might be and with that let's jump back into finishing this layout we just got our border radio set up I realized we're missing a little bit on the left but you weren't really missing anything so it's all good and we're ready to keep on going with this where we need to add some padding now now this actually presents an interesting scenario because we have the padding here that's on our white background but then clearly we don't want that padding to actually be on the parent because this element needs it as well and if we were to add padding to the parent then we'd run into a few issues along the way but we ideally want the padding to be equivalent on the two of them so once again we can use custom properties for that and here we have our border radius and we can also come in and add some padding this way so this is going to control the padding for the entire element even though it's only the children that have the padding on it so we can add our padding in this way on both the results and the summary and we can see they both have equivalent padding on them now the nice thing with this is if ever we want to change it and we want this padding to be five for some reason we can switch it and they both will change at the same time so it's a nice way to have one padding declaration that controls it everywhere that we need it now if we open our Dev tools and to shrink things down a little bit we could also go in responsive mode if we wanted to but we can also see here that everything's working in the sense that it's stacking properly but the issue is once again with our border radius in the top corners where it's not looking so fantastic ideally the mobile design would not have a border radius on the top so we can fix that really easily by coming down and where we did our initial border radius declaration where I'm just going to copy this here and what we're going to do is we're going to say that it's actually 0 0 and then our border radius two times for the bottom corners so it's giving us our border radius on the bottom two corners and nothing along the the top and then what we'd want to do is within our media query switch that over so we added on all the sides so then we can add this media query in it leaves everything alone here we're using the same breakpoint as we were before and we're adding in the Border radius back to what the original declaration is so now we have the Border radius coming in like that it's also a little bit awkward that it's touching the sides especially with the Shadow and that border radius there so if we go back up to this media query and you could definitely combine all your media queries together if you're worried about repeating code though once you upload things onto the server most servers these days automatically compress your CSS files and repeated code like this it makes a very small impact on the total size so if you'd rather keep everything together in one media query for each component or something like that there's no problem at that but if you do want to separate them out like this so they're all grouped together with the selectors you're probably not going to run into any issues but here within this one what we could do is add in a small margin on the left and the right and so I'm going to do that with a margin in line which is the inline axis which most of the time if you don't switch your writing mode to be a vertical language will always be the left and the right so it just gives us a little bit of cushion when we're on smaller screens but when we have more space it won't have any impact now we want to dive back into here and set up things a little bit better because they're not looking perfect but they're actually not that far off we can see that our font color here is really good we've already done that we just need to space things out basically and get this set up along with that grate right there now if you remember when we set this up we used our grid flow class in two different spaces and we're going to be using that to create the grid itself and space things out and then after that we'll tackle setting up the circle for the element in the middle for the basic setup of this I am setting things up like this and the Align content start is very important here if we use our grid inspector and we look at things we can see that they're actually laid out really well here but if I did not use that align content start grid wants to stretch and it will take up all the available space I know this obviously doesn't create a very good flow class when the Gap isn't actually what's creating our spacing so we can put that on and it fixes that problem it keeps everything grouped together at the start or the top of the element now we did have this data spacing large that we wanted to use in a couple of spots as well so for that the easiest way to do it is to use our data attribute selector and we can set things up just like this this is one scenario where I used to use custom properties a lot to set the Gap to make them easy to rewrite but I've stopped doing that because custom properties will inherit in so if you had a large one like we have in this case on the outside and then a smaller one on the inside the custom property inheriting from the parent could actually impact the child this prevents that from happening and so if we look at the parent grid we can see we have the large gap that's on those now and if we look at the one that's inside of that we can see that the Gap is smaller so the small one is using the one Rim the large one here is setting things up with the 2 RAM which is exactly what we wanted next up what we want to do is focus on the circle right here which is pretty simple we just have a gradient that's set on here and we have to increase the font size there and that's about it so let's get that set up so here on the result score we're going to start with a width as well as a margin in line Auto just to center it within the space that it has we have the background gradient that it already created when we set up the custom properties earlier and I'm also putting an aspect ratio of 1 on here to ensure that it's a perfect circle because without that we would get some really ugly oval shape the one problem is we also need the text to be centered within that space and we could either do that with flexbox or grid to me grid is easier because it is less lines of code so we can use a display grid Place content Center and we get the number right in the middle next up we need to style the 76 that's here so the first thing I'm doing is giving it a display block because it is a span but we want to make sure that it's on a separate line from the of 100 we want to set the font size to be the nice big font size on there a font weight set a line height just to keep the spacing from being too big and of course set the color to white instead of that transparency white that we set that everything was just inheriting within this space really fast with the selector here I did just use the span I mentioned this earlier it makes it a lot easier than having to come up with a class name specifically for the current score or whatever you'd want to call that if you prefer not to use any descendant selectors like this of course you could give it a class instead but for me this works perfectly fine next up we have the result rank that we can style up with just a color font size and font weight on there and everything is good and this is where one place people often run into issues where they go there's too much empty space underneath here and they try and come up with solutions to fix that do not do that yet maybe you need to fix things in the long run but this isn't a problem at the moment the problem is because we have too much content on this side and everything is really spaced out but this is not what the final layout on this side will be these items have to go next to one another it's going to make the space a lot smaller there and right now these are trying to stretch to match each other so before you run off trying to get this thing to be perfect get the layout for both sides to be correct and then see if there's any inconsistencies and things that you might have to fix because remember all of these things live in relationship with one another that's sort of how CSS Works we're relying on inheritance to set things like colors we're also setting up a layout that's relying on the relation ship it has with other things never forget about those relationships we can't work on this in complete isolation we have to remember that it's part of a bigger picture get the entire picture sort of in the right direction before you start worrying about things like the extra spacing that's just matching the height of its sibling now jumping back to the HTML quickly here we have our grid the entire thing set up with our grid flow and our data spacing large which is giving us the spacing in between these and right now there's also a little bit of extra space because we have some invisible svgs that we're going to be dealing with soon before we get to that though we will be doing a few things on this summary item and that's going to set the stage for our svgs while we're at it so jumping back over to the CSS we can move down and we can set things up very quickly here and you'll notice I'm using a display of flex along with the Justified content space between to separate them out side to side like that a line items Center just to make sure everything's lining up nicely a little bit of padding and a border radius on there we can't see those yet but we will be adding background colors so we can start things off by using a display of flex to set the two columns up like we'd mentioned with a Justified content space between to space things out and the Align item Center to ensure that we are aligning things it does not look align center now again because we have some invisible svgs we have a little bit of padding a border radius and for now I've used a filler background color just so we can see these things a little bit and we'll be changing that shortly now just so we can see our svgs I'm going to add this in for now where we're just selecting our SVG that's inside the summary item and setting the stroke to Red I'm using stroke because of all the elements that we had before there was the stroke that we removed from them and I said we're going to set that with CSS so this is the beginning stages of that but obviously we need these two elements to go one next to each other and right now they're not they're going stacked like this and if we jump back into the HTML just to take a look inside this element now we have those inside of what I called a flex group if you had a different name for it that's completely fine but I'm going to style that up next now in the CSS I'm going to scroll all the way back up to a higher section here because this is sort of where we're keeping more utility class style layout things rather than things that are specific for this component that we're building and having something like a flow class or a flex group all seem to be a little bit more reusable they can plug and play them where we need them so I group those higher up in my CSS and in this case we're gonna have our display Flex on there a line item Center a gap and a flex wrap just in case they run out of room it lets them wrap around and there we go we have the SVG icon plus the text right next to it now let's go get those colors set up and the way we're going to do that is we'll scroll down in our CSS back down to this section and if we come and take a look you might remember that we use this data item type attribute on here and we're going to be using those to style the colors and set them through custom properties so we can have our summary item with our data item type accent one and then we want to set the custom property for that if we look at the design here it is our red color where we set all of those up as custom properties up higher and so we're going to set the custom property of item color using the accent 1 color that we had when I set these colors up I only included the hsl values I did not include include like a finished version of it and that's because I knew we were going to be using a lot of transparency in them if you'd want to do that more similar to how we did this where we're mapping hsl values into hsl functions here we could do that as well but for these purposes I didn't really see a need to do it so if we come down here and we have that set up what we could do is actually change the background color on all of these and in that case we could set it up to use our item color now because it was only the hsl values we want to use an hsl function and then inside that hsl function we can put the color that we want and you can see the red is coming through as the background color and then we can just add in the transparency that we need for it and of course we need this to work for our SVG icons as well so for those on the stroke we can use the exact same thing but set those just as the solid color and these ones have disappeared because we haven't declared the custom property for anything other than accent one but we can see that it's working wonderfully there now before we get those next three set up the other thing that we do need to set up here is also set up our titles to be using the color as well and once again we're using the exact same method plus I'm also using my fontway bold here to make the text bold next we can just duplicate this so we have all of them and then here we can switch this to my accent two take these ones switch them to the accent three take these ones switch them to the accent four hit save and all of those colors are set up and it's working wonderfully now this is a wonderful use case for custom properties and the advantage of stripping the color out of the SVG and then adding it back in this way is if ever a designer came back and decided to change one of these values or changes the color and we change this over to maybe a 150 the color will change and the icon and the background they all change together by updating one single value and it's really easy to do of course it's way too bright now but you get the idea of it's really easy to make changes to the colors and everything is impacted we don't need a new asset to switch things out with the SVG or anything like that also notice the spacing between these is correct already that's because we're using that same flow class that we're using before and you're also going to notice that remember before I said things were stretching out and the spacing was really awkward and everything sort of falling in line a little bit better now than what it was before now that we've fixed our layout on this side now one issue does seem to be that this element has a bit more padding in the design on the left and the right side on the sides here than the element does on this side we're going to tackle that closer to the end it's really easy to set up but for now let's just fix up the rest of this there's not very much more to go so this is very similar to when we set up the score on this side over here we can set up the summary score itself we can lighten things up a little bit changing the color on this as well as set up our font weight for the entire thing that all inherits in and everything in there is using it and then the user score once again was in the span so I can just change the color of that span to have that highlighted a little bit better and match our design and with that we can now go ahead and try and match the padding a little bit as I said the padding on the top is the same for both of them and it looks like the padding on the bottom is the same it's only the padding on the left and the right of this side here and nowhere else and if you remember we were using a custom property for that to be able to control things all together and to me that relationship ship would probably be maintained so the simple solution for that if we come back up to here where we set up our padding on everything is to actually break these apart into two different selectors the reason I did it like this at the beginning is it's probably close enough and we don't really have to worry about it but I do want to cover this because it's a nice little trick that I use uh quite often actually so what we're going to do first is we're going to take this and copy that and just come down a little bit further where we'd set up our summary we never actually selected it so we're just going to move this down here so we have that declaration all on its own then moving back up we can then delete all of this I'm just going to remove that delete that because we won't need it anymore and in here where we set things up we can bring in our padding but we want the padding on the top and the bottom to be different from the left and the right so the easiest way to do that is to declare it two times and then on the second one which is our left and the right we can wrap that in a calc and then just give this a multiplication factor of 1.5 so we're increasing the padding on the left and the right a little bit compared to the padding on the top and the bottom if ever we change that padding custom property all of them will grow or Shrink in relation so it still has that connection that we had before but now we're doing it where we're just increasing the one on the left and the right a little bit and it seems by doing that it does help us match the design a little bit more now we can open up our Dev tools really fast hit the little responsive mode so we have it in there and we can just see when we hit our breakpoint that it collapses and looks a lot more like the design that we had for the responsive mode that we have here the Border radiuses are all well set up everything is looking pretty good we're taking advantage of grid which is autumn having these items stretch including our button at the bottom and overall I'm pretty happy with the end result here if you enjoyed this video and you'd like to see me build out more projects including where I'm coding things a little bit slower instead of this style of video you might be interested in the ones that are in this playlist right here where that's exactly what I'm doing and with that I'd like to thank my neighbors of awesome Johnny Michael Ralph Simon and Tim as well as all my other patrons for the monthly support and of course until next time don't forget to make your coin on the internet just a little bit more awesome