Building a pricing block with HTML & PuRe CSS

hey everyone in this video we're going to be building this pricing block from front-end mentor using html and pure css you can follow along with this tutorial or you can find the finished source code on my github linked down below but before we get started i wanted to thank the sponsor for today's video kite kite is a free code completion tool powered by machine learning it integrates with code editors like vs code and honestly has helped me write code faster one of the cool things about kite is that as you're coding it'll give you options that are actually ranked by relevance for your particular coding patterns this means that as you keep writing code over time kite will learn what properties you tend to use and puts those at the very top of the list kite is sponsoring this video but i genuinely think that their tool is pretty great i've been using their vs code integration for several months now and i've definitely noticed that my auto complete speed has increased it is free so i recommend that you try it for yourself and see if you like it the link to kite is down below in the description alright let's get back to this video so in front of mentor if you want to follow along yourself you can go to the front of mentor.i o site and you can click the start challenge free button if you don't want to pay for the sigma or sketch files and we're working from jpegs today so we're doing the free version so when you click that you'll download the starter files which we have open already here so it gives you index.html it also gives you a style guide markdown file which is helpful for colors and font sizes and also fonts themselves and then i started creating a style.css file because we need to add those styles in so let's close that and then i'm going to click the go live button down here in bs code and that's a vs code extension that you can use to create a local server and load your files that way so there's nothing here because we haven't added any styles yet let's start doing that now so in our index.html file we added a link to load the style.css file and i am using pure css in this video i did a poll recently on my youtube channel asking if people preferred css or sas most people said css i think because maybe a lot of people don't know sas yet so i'm gonna do both because i really like sass but we will be doing pure css here so let's add some of these global styles in our css file first thing i usually do is box sizing border box that ensures that adding padding elements won't affect the final width um it'll kind of be included in the final width or height also do font size um 100 and you can see already that the uh intellisense from kite is is giving you the font size 100 as an option um and that's because the ai is kind of learning what you tend to do with properties and i have had kite running for a while on my computer so this makes things a bit quicker so then for the wild card for before and after pseudo elements as well as all elements with the wild card we're going to go box sizing sizing inherit and that will inherit the border box from html and then for body one thing i usually do is i like to do font size one or hold on sorry i do font size it'll inherit 100 from html which usually is 16 pixels or one rim um but i do sort of like adding a line height of like 1.3 just by default just because line height of one tends to be a little close together you don't have to do this this is just something that i personally like doing okay so you can see the site has been changing just a little bit as we have started adding our styles here so it's good because we know that it is working so let's get the font going here i guess you can control click that uh sure we'll open that so this is the karla font so it says weights 400 and 700 so 400 is regular and then i want to do 702 here you go bold okay now [Music] let's see here we go and that should be good so i will just copy this link here add it to the index html up at the top i'll probably add it before my style.css so it can make sure to get the fonts from google in the styles and then font family carla sans serif so we'll add that to the body as well okay so you can close that now and also in our files we have the design images and again we're just working from jpegs so here we have the desktop and then we have the mobile design so let's take a look at these so going on the mobile we have this white joiner community box then we have a monthly subscription box and then at the bottom a why us box so we have three boxes join community subscription ys and let's compare that to the desktop design and see how that stacks up so on desktop joiner community is at the top and it's going all the way across then under that we have the subscription and the ys in 50 columns so the order is the same yeah border is the same but we're probably going to use css grid to control the template layout since we have this going all the way across and then 50 width on those and looks like this box is you know a certain width and it'll kind of be centered vertically and horizontally and the same for this so let's kind of get the let's get our code or sort of laid out the way we want i'm gonna have the styles on the bottom and then the html on the top okay looking back the style guide we want to add in our colors as well and i think usually i use sass but i think this would be a good opportunity to use css variables so i actually haven't used css variables a ton just because i am pretty reliant on sas so this will be a little learning experience as well for me um css custom properties it's another name for the variables okay so you're set using custom property notation and i believe from what i know people tend to like setting them on the root element if that's correct yeah so root and then you can name your variable and then add the color value so let's do that now i'll just add this under everything else so actually i'll put the css on the top and the index html on the bottom i'm trying to have both open with the website on the right side just to see how that looks okay so root and let's see what we want to call our colors here cyan bright yellow light gray and grayish blue so we'll just probably use the same names there i wonder how people tend to name their variables see here we go mozilla developer network okay we'll just kind of create simple names for these i think the first one was cyan yeah let's move this down here so cyan [Music] and we'll do hsl which is just a different color notation and one cool thing about vs code is that you can i believe lets you yeah lets you switch if you just click so this is hex hsl rgb um hsl is kind of i think it wasn't used super widely until sort of recently um i've always used text colors but people like hsl because you can it'll sort of darken and lighten in a more sort of realistic wave and maintaining the color as opposed to sas has like dark and light and functions but it kind of affects the i think the color a little bit so anyway then we'll just call this yellow yellow and then we got i guess i'll say lt gray for light gray and grayish blue we'll say gray blue okay let's check out our designs again um so let's looks like each of the blocks they have sort of different colors i'm guessing the light grays is sort of almost white color down there um yeah and there i think i'm actually going to close the design files here and then open them in an external program all right so we got desktop design here and then the mobile design this is just a like a very simple image design image loading program called earphone view for windows that i use but you can use whatever you want maybe i should have put this in xd file after all um okay so looking at the color of the text do i want to set a default color on the body i suppose i could set it to that light gray color although the first block has um you know it doesn't have a light gray since it's a light background but i think because the majority of them are a green color i'm going to set it as the default color yeah let's do that color and to call the color i want to do the light gray okay is that right all right let's see how the site looks oh yeah there we go light gray now it's gonna just gonna close these as well all right now let's start building i'm going to do mobile first since we try to keep mobile first sometimes i like doing building the desktop first but i think this design is simple enough that desktop isn't like super super different from the mobile version so the first block is join our community so since this is kind of the price block as a section in itself i'm going to create a new section tag and we'll just say price keep it simple right and i do like using vs code a lot because the emmett plugin which it kind of comes with vs code it has all those shortcuts for you so everything's going to be in this section tag and then i'm going to add the top div and let's just call that community then we'll create one for subscription and then one for why why okay um honestly i think i'm going to put everything up at the top i think it's a little bit too little space to try to do a stacked thing so this is fine okay now we are going to use css grid to lay this out so the price section tag is going to be the css grid parent so let's start setting that up so it's going to be price community subscription and why so here we'll say price should i turn css grid on for both mobile and desktop or should i only use it on desktop let's see if i just do yeah maybe i'll just turn css grid on just for yeah just for desktop so that means i want to add a media query so media media oh let's see what we got here and i'm in with it's kind of funny seeing like the different kite things pop up in with is let's just use our calculator to figure out we'll just say desktop stuff starts at maybe a thousand pixels and usually you try to put your media query widths in ems so that's divided by 16. so pixels divided by 16 will get you ems or rems so 62.5 dms there we go so we'll just use that for our desktop media queries so this means that once you hit that 62.5 ems minimum and greater it'll use these styles here for desktop so here we'll turn on grid so before that let's put in our mobile styles okay so in the price block itself it looks like we got some padding going on but i might just add the padding to each of the individual blocks here and it looks like they're probably very similar so let's first get the layout going so going back to our html we're going to say join our community in the first box and i'm going to make that an h2 join our community so we kind of know you know what the heading is and stuff and then what should we call that i guess that could be an h3 so we can do that and then i'll use a paragraph tag for this okay we all press alt z to word wrap in bs code okay that seems pretty good so we'll kind of do the same thing for the other blocks here so the next one is monthly subscription and we got h3 i guess i'll just add the p tag p tag um monthly subscription okay this is actually a little bit different so i don't need the h3 there so 29 dollars per month this one's a bit might require a little bit of work just because the 29 is much bigger than the per month so i think i might need to make that a div i'm going to say subs sub scription underscore underscore price this is the bam block element modifier approach i use to naming my classes even though we're not using sas and we can't do nesting i will still use the same naming convention just because i think it's good so we got that and 29 is bigger so we're going to put that into a span that will allow us to style it to be different than the per month text okay full access for dollar a day we'll put that in the paragraph and then there's a button here sign up and since this is not a form i'm guessing this shouldn't be a button element but rather an anchor link that will style to look like the to look like a button okay sign up that's that for that block and then now the ys block again this will be an h2 and then this looks like it's just a list so i might actually make that into a list even though there's no bullet points or anything so ul and then this is using the emmet shortcuts angle bracket for li and then if you use times one two three four five six seven times seven press enter and there we have it unordered list with seven list elements so that's one way that emmet really does save you a lot of time there we go and you know i probably could also do layout with flexbox you know you can build almost anything in either flexbox or grid that's kind of one of my themes that i like to mention a lot because it's not like one's better or worse they're just different tools and they they do have different strengths and weaknesses but i think i decided to go with grid for this one because it just seemed like it would be a good way to utilize the grid template there we go all right let's check out our site which every everything is light gray so let's actually okay also this link we need to style our links so under here i'm gonna go anchor link and i want text decoration if i can type none i don't want that underline so you can see it disappeared text decoration none and then i will modify the colors and stuff just per block okay so it looks pretty good so let's start styling the first block okay so the first one is the community block community and if we go back to our design community is background is um color hold on this actually looks like the body is the gray blue i'm guessing so we're gonna do this background color var gray blue okay that's not the same color is it no it is definitely not hold on let's check the desktop design yeah it's like a light oh maybe it's light gray let's try light gray how does that look okay that's actually very close i wonder if the gray blue is actually this text here so let's change that that actually makes sense because it was like very um light okay and we got should we i'll make another one from white white let's convert that to hsl okay zero okay so now in the community block background color is going to be white oh that's interesting yeah it's detecting trying to detect stuff yeah so thing about the kite thing is that it'll be kind of weird when you first start because it has to learn from the actual code that you write so the more you write the more it'll be able to see what you tend to use and then it'll filter stuff at the top okay this is good background color is white and then going back to the design so the joyner community is a green color look there's this green which is a bit darker and then this screen which is a little bit less dark yeah i wonder if they missed giving you a color here let me see one cool thing about openview is if i hold down it'll tell it'll tell me the color it's kind of like a color picker oh yeah i'm just going to convert this to hex because that's what earphone view tells you so 2a b2af 29b for b1 4ab ebd interesting i guess i could try to lighten it using the lightness percentage so maybe i'll create a new color here so ctrl d will duplicate the line i'll say light cyan make this a bit lighter and the lightness 100 is white like max lightness so let's try maybe 50. okay we can we can figure that out as we get on there i don't want to be too too light i wonder actually this needs to be a bit darker anyhoo yeah 2b b and this is 2ab so slightly needs to be slightly darker let's try 40. this is gonna be causing me a little different from the design i think but okay so now we have the darker cyan and the lighter cyan so i think the jointer community is probably the darker cyan color and we'll say oh this is funny because um i can't nest because it's pure css community h2 and we'll say color var cyan there we go i think the font weight probably should be bold font weight bold there we go alrighty let me put in the colors and then we'll get those font sizes better okay so the next one is 30 day thing the h3 is going to be that yellow color so just select that press ctrl d to duplicate and change it to h3 i'll change this to yellow i think it's also bold right yeah okay and then the paragraph tag needs to be smaller obviously this is a little bigger it looks like and then this might be a little bit smaller so we're just going to we'll say that this is probably 16 so we'll say font um sorry community pdp we'll say font size is one rem i try to use rams because it's better for accessibility because it allows the user to control the font size by adjusting the base font size in their browser if you set it in pixels then the user can't actually adjust the font size by zooming or whatever so that looks pretty good and then line height needs to be greater i think and kind of see the line height should be 1.5 maybe i think everything is a bit smaller too okay hopefully it doesn't blue screen during this that would be kind of sad it blew screen yesterday all right so if one ram is the base font size looks like this is actually smaller so i'm going to try to eyeball this instead do 0.75 rams little bit too small maybe eight five okay i think that's better and then let's size the other ones as well so font size it is bigger but it needs to be i'm not sure how big this is um this is just taking the default browser styles for h2 tags it looks like it's 24 which is probably a little bit bigger than we want so it's 24 so which is probably 16 is one so maybe 1.25 rams see if that looks better it's actually pretty close we'll keep it at 1.25 rems and that is 20 pixels 20 pixels this h3 is a little bit smaller so font size let's try 1.2 rounds because it does seem actually let's try one rem for that because a paragraph is a bit smaller that actually seems pretty good okay line height i think still needs to be bigger it's like almost two actually 1.75 seems okay and it looks like there's a kind of a max width on this so in earthen view i can use this little selector to estimate the width so it's about 3 10. so let me think about this i don't necessarily want to say 310 pixels because it's not really responsive i'm just assuming that on mobile you know you want it to be smaller so let's actually do this so we can check out what we got here so this is going to be 3.75 so this is 375 total and there's a little bit of padding there right so let's kind of guess how much that padding is well not guess sort of guess using this tool 30 pixels okay so 30 pixels of space between the block and the outside so i think what i'm going to do is on body add padding of about 30 pixels which is trying to convert that to rems see this is why i like sass because uh yeah this is why i like sass because i can create a mix and to convert from uh pixels to rooms but it's all good it's a good learning experience for me too let's just see how much that ends up being body so the padding is 24 so let's make it a bit more 1.75 grams 28. let's try 1.8 28.8 whatever 1.8 is close enough for me so i wonder if i can make some more variables with this so it's like 30 pixels there and then inside the box this is about also 30 pixels on the top and then [Music] this is about 30 also okay well maybe a little bit less 24 okay so it's 24 on the left and right and that's all the way down so i might create a variable for the horizontal padding and then the vertical padding just because i can then reuse it so that's one cool thing about css now is that they have variables so it's one one less thing that you're completely dependent on sas for so we'll say padding padding x it will do that padding x and that's going to be what was it 1.8 rims i said and then we'll make one for padding y for horizontal padding and that's 24 which i think maybe 1.5 grams is relatively close to that so that way for the padding on the body we can just use the var padding x and we'll just do that all the way around there we go all right now going back to the community block so we're doing the same padding in each of these blocks so i think i can actually say use a selector so any direct child of the price section tag so it has you know each of the blocks is a direct child of the price element so what we can do is say price using the direct child selector and then i could say wild card since they're all divs or i could say div i'll just say wild card because we're not going to add any more to the markup so we'll say padding is going to be far padding x for the first one and then var padding y for the vertical so that means every block is going to automatically have this pad that we just created and we only need to do one style rule for that okay so that looks pretty good yeah we're making progress there's a little extra stuff going on here there's more space than i think there should be and i think it's because yeah so by default there's going to be margins added to all the headline tags and that's something i usually like to cancel out so what i like doing is h1 h2 h3 i don't think i'm going to use an h4 so let's go h1 through h3 margin top is zero because i don't want it there we go i like keeping the margin bottom because i just like adding space at the bottom of elements dead space and that's just the approach that i do for everything so i know it's always going to be on the bottom so i don't get mixed up now let's check the design and see if we've missed anything big it does look like there are there's a bit of a border radius going on so i don't want to add that to just the block because you know they're they shouldn't have the border radius when the blocks meet each other so it's going to be on the price thing itself border radius it wasn't super round this is probably like five to ten pixels maybe so let's try 0.5 rams that's eight pixels see what happens and i think i need to add a uh overflow hidden this is because the overflow hidden means that it'll hide anything that goes outside of the bounds of the price block and since the background color for the community block it's white and so it won't sort of adhere to the border radius since the border is set on the parent but if we set overflow hidden means that the border radius will sort of almost like a cookie cutter it'll like go straight down and trim off the community block and the other child elements as well this is looking pretty close um let's see we got here the spacing looks okay looks like it's slightly more for this let's see what we have here so the margin bottom is 16 pixels about and then on this one it is 16 also so we'll add a little bigger margin to the h2 margin bottom and we'll say a little more than 16 maybe 1.25 grams okay that's a bit better this looks pretty close to the design i think i think the line height on the h3 needs to be a little bit less also for headline tags it's good to have a smaller line height than you do for the rest of your copy just because paragraphs i think because there's more of it you need that extra space to make it more readable but for headlines it's actually better to have it less because headlines tend to be you know one to two maybe three lines so if there's too much space in it kind of it doesn't read like it's one sort of cohesive thing so i think the line height for the headline tags 1.1 okay maybe a little bit tiny bit more 1.15 okay this is pretty good so you know working from the jpegs we just have to kind of eyeball and estimate a lot of things um you know in a work environment you do kind of need to work from the design to get the exact spacing and font sizes and stuff so you know if i was doing this for work i would probably need the actual design but we're just using the free version of front-end mentor which is good enough if you're building this to you know demo in your portfolio or something okay so i think that is pretty good um there's probably looks like there's a little extra space down here and that's probably because yeah the paragraph has a margin added i might just remove that this is the only paragraph tag i'm just going to remove the paragraph margin bottom zero okay this like thing is like a little too much sometimes [Music] okay it's like helpful to for intellisense but sometimes the tooltips are a little bit much i think there's an option to turn them off um let's see settings json file i can't remember what the setting is let's look it up sorry this is a little bit of a tangent but um it was driving me a bit crazy disable tool tip because i want the like the intellisense options but i don't want the actual like tool tip window it's a little bit annoying and you can see that i've been to this link before here we go what if i added this property nope didn't so we'll just add it in here editor hover enabled false okay let's see if that worked so let's try typing the style out again margin oh thank goodness autumn it was just like really getting in the way before but now it seems better okay because before i think if you just hover over a property it'll give you that tool tip and yeah the only bad thing is it won't it'll turn off the hover for everything including the colors but we have the colors ready so i think it is fine i'm back to the website or i guess price block thing it's not a full website okay so this looks good let's move on to the second block and this one was called subscription so we'll sort of do the same thing trying to eyeball if the join our community text is bigger than the monthly subscription in ys ys monthly subscription seems the same join our community seems slightly different so i wonder actually if i should make monthly subscription in ys h3s and make this 30 day thing just like you know a subtitle or something yeah let's do that so let's change the this h3 to a div i'll give it a class like a subtitle is good enough there we go so now instead of community h3 this community subtitle make sure the styles are going through by inspecting that okay yeah excusing these rules so now what i'm going to do is i can then add some global styles for the h3 tag in terms of the font size and it'll affect both monthly subscription and ys uh oh why is it popping up again i guess it just there just isn't enough room to go underneath so that's why it's doing that whatever so font size um let's say a little bit smaller than h2 i think i actually want to do i want to move the bowls so if i hold down alt and do arrows you can move properties like that yes i'm going to make the font weight bold for all h tags and then for h2 we'll hit the font size there it'll be a little bit smaller not by much though so we'll put 1.15 rims that means we can remove the font weight bold from okay so it's not there anyway okay good good good okay so let's go back to the subscription block and we want that background color to be i guess cyan so we'll do background color var cyan and then we want the color to be far light gray that's good they'll do the same thing for these down here too it's interesting it seems like there's a few different colors like this per month seems slightly darker than white so we can maybe adjust that with the lightness thing or maybe the opacity [Music] so i think i might actually do a compound selector for both subscription and the ys because you know just writing a few less lines okay so that looks okay monthly subscription oh this should be h3 yeah it did seem a bit big right okay so change this to h3 and also the one ys so now it's a little bit smaller oops oh no i closed it no i just minimized it hmm i think it needs to be a bit smaller okay 1.1 seems good and honestly this 29 thing it almost seems white we'll just see how it looks with that light gray color okay so we got subscription background color is this the cyan now let's do the 29 dollars per month so what we did here was we did subscription under square underscore price and then the span is bigger so we'll take this selector add a new rule and we're going to say the default style we're going to do the per month thing which looks like slightly more than 16 um i'm just going to guess 1.5 rems oops that's way too big let's try one rim one rim seems good and then for this span oh there we go yes see i like not typing stuff which is why this the kite intellisense is pretty good um okay font size is gonna be much bigger and probably bold also so let's say one let's try 1.5 rams again see how that looks yeah it needs to be quite a bit bigger maybe two rims even that actually seems pretty close font weight bold okay now you can see the alignment is not quite there we want it to be centered so what i'm going to do is figure that out with a little bit of flexbox so i'm going to make subscription price display flex and then i'm going to say align items um center so there you have it we centered things that were different sizes and this i have to say it's so much easier with flexbox because before flexbox i would have had to do an absolute positioning thing where i would like absolute position probably the per month thing and then i would have to position it manually with like pixels to put it to the right of the 29 thing but this is so much more intuitive it's pretty great okay so let's add that space so we're gonna add the margin right to probably the span large and right and it seems like it's maybe one ram or so that looks a little bit too much 0.8 okay i'm pretty happy with that and we want to make the per month text a little bit darker yeah a bit darker less white so i think there's a couple ways we could do it we could make a new color variable but i think what i'm going to do is just use opacity [Music] just make it a little bit less 0.9 let's see how it looks so i'm going to save let's try 0.5 just make sure the opacity works oh i'm doing the wrong thing um okay that's a bit annoying i think what i'm gonna do is i might have to use a color we're gonna be a bit hacky here and just go oh the color hover thing did work i guess i just wasn't hovering over the right thing before so how can i do this in the fewest lines of the fewest rules possible the 29 thing does need to be the you know light gray i wonder if this span should be on the per month thing instead so that i can um yeah i might have to do that span so now it is yes the cells are now reversed that's fine [Music] and i will have to change this margin right to margin left because the span is now the per month text and then font weight normal oops font weight normal and now i can do the opacity thing there we go okay that's good enough i think alrighty so next up we got the full access for less than a dollar a day looks like there's maybe some margin stuff going on here too oh it's because of the paragraph let's get rid of the paragraph margin top two okay so now i might need a little bit of space under the price thing we'll say margin bottom not too much space 0.25 rems maybe okay that looks pretty good and then now the next thing is the hold on that text needs to be a bit smaller so we'll say subscription p font size it's a little bit less a little too much okay i think that's okay let's style this button here um so it's an anchor link and we'll just say this is the only button so i'm just gonna go subscription a if there were other buttons in this design then i would have to make these styles not in a subscription selector but it should be fine now anchor links by default are display inline so if we want to add padding and stuff i think we need to make it display block but we can just sort of i can show you how that looks if you don't set it um okay so the color is yellow background color yellow and then color is probably the light gray i feel like that is not a very good um i think that's a little too small contrast to be honest so maybe we'll just not do that let's try color our um gray gray blue oops hold on people actually don't really have like another thing we'll make it white to try to make it more contrasty okay i think that's better i don't know this is a design it's not my fault okay so now what we want to do is we want to add padding so padding vertical padding we'll just say maybe 0.75 rems and then looks like the button just kind of takes up 100 of the width that seems fine so you can see that the because it's in line the margin from the bottom of the paragraph is not taking effect and adding space so i'll show you what happens when you set it to display lock so now the the thing the padding takes effect let's take a look at the desktop design real quick and see how that how it looks on desktop okay so it's still taking up basically 100 of the width on desktop i think it's okay to leave it display block the display block will automatically take up 100 unless you explicitly set the width to be something else so i think that's good now we want to center and let's see what else you got to do some border radius as well i think it's less than the outside border radius how much was that 0.5 rims so we're doing about half of that which looks pretty good i think it looks like a little bit of a box shadow as well so box shadow rgba zero zero zero to make it black and then we'll add a little bit of um opacity so let's try fifteen percent um wait i forgot so the color is the last parameter the black shadow box shadow needs to be maybe zero zero and then the color i even do that right let's find out and it works okay so the first two parameters are the horizontal and the vertical offsets so horizontally i think i just want to keep it in the center vertical i do want it to be moved down a little bit you can see in the design it's a bit heavier on the bottom side so we'll say 5 pixels yeah so you can see that and then there's one more parameter for these spread so how sort of diffuse it is that one can be greater so let's try one rim for that so you can see now it's a lot more diffuse um that looks alright so five pixels let's try 0.3 rams let's try 0.5 grams okay that looks a little bit better cool um let's see so we need a little bit more space above the button so say margin bottom looks like more than one ram so 1.5 rams maybe a little bit more 1.75 that seems good okay this looks close to the design so i'm pretty happy with it so we got the joiner community monthly subscription and then the last one is the ys and i think in the markup it was yeah class is just y why wait where's the text for that um is it even showing up here maybe it's the same color yeah it's the same color okay so i need to make the background color the light cyan there we go looks a tad bit lighter than the design so let's make it just a little bit darker so that was 50 let's try 60 no wait higher is a lighter color let's try 30 uh no it needs to be 50 it's a little bit darker than that let's try 45 okay actually looks pretty good okay so this it's kind of nice that um immediately i didn't have to write any styles outside from background color and it already took the h3 styles that i set globally and the padding so that's one benefit to you know setting kind of style that'll affect more than one element if they're sharing the same thing because i could let's say if i set the padding individually in each block the ys subscription the first block i could do that and like it would look the same but then what if the design changes or it turned out you did it wrong you would then have to go back and for every time that you wrote that padding that padding rule you'd had to change it every time so the fact that i did the padding sort of globally in the block with this rule here makes it much better for if you have to change things later on um and it also reduces the amount of css that you're writing so i try to do that as much as possible with these sort of rules that will affect more than one element okey-dokey i'm just i'm just lazy you know i like making things as easy on myself as possible so i don't want to write the padding rule like 10 different times okay so obviously we need to take away most of the list styles here and then it looks like the text needs to be smaller for sure so why ul i think there's probably some margin and padding we need to get rid of here let's check that out yes we got um the top margin i will i would like to remove and then that left padding as well margin top zero padding i guess i just say padding zero because i don't want padding anywhere and then y u l l i list style type nun there we go so now it's just a list okay let's make the text smaller for sure font size is i mean this is smaller than i think anything else in this design oh maybe it's the same size as the gain access thing what did i set that to oops i need to add spacing there okay let's get this font size first paragraph was set to 0.85 rims we'll just do the same thing in a separate rule just because i don't know they're pretty separate from each other and we need to add spacing under the subtitle one rim maybe okay i must have just like removed it with something else okay so it looks pretty good let's finish this here so why us um space under ys seems okay i think i'll add a tad bit more space between the list items very small amount zero point maybe three rims two rims zero point two rams rather okay and it looks like it's also sort of not quite white i don't know if that's just because of the jpeg um honestly i think i'm just gonna just for readability just imagine this is a real world thing i think i will keep it this color okay that looks pretty good i guess i could add a hover state here so let's just do that too subscription a hover so let's see maybe we'll make it a little bit darker um for the background color so i guess i'll just have to make a new variable for dark yellow dark yellow so lesser number is um darker let's try 44. oh wait i forgot that um i think on mobile it's not going to give you hover state there we go it's a little too much um maybe just 50. so we'll just darken it by four percent it's not quite enough okay i think that's good and then i also want to add a little transition so it's animated transition um [Music] background color actually i think i already shouldn't transition properties except opacity and um like transform so i could actually instead of making a new color let's just comment this out for now so ctrl k ctrl c will comment let's make the opacity less 0.8 and then we will transition the opacity property and the reason for that is like other properties like especially ones that affect the position of things on the page if you change that on hover you're causing the browser to have to repaint the entire thing so it's more performant to only transition opacity transform and there might be a few other properties but those are the two main ones i believe so we want to transition opacity and we'll say 200 milliseconds ease so now it's the only problem with that is that it's sort of the whole thing kind of i don't like how the background color changes but also the text you know the text is affected by the opacity too uh let's look it up css transition background color and then performant see if we get back anything um i'm just trying to see what people are saying in terms of what is better let's look up perform okay didn't show up at all [Music] maybe look up css what properties can transition [Music] all right see what mdn says so you shouldn't you really shouldn't do this because it's not great for the performance of your browser i mean that's just what i've heard and i i've heard it a lot so i think it is true um you know what i think maybe i think maybe we can train we can do the we'll just do the background color one because it's not it's at least not affecting like the layout so if i'm wrong about this let me know in the comments all right so now we got the background but the text is remaining white so it's much more readable okay so now we got the main blocks going what we have to do now is adjust the grid template for desktop so this should be pretty uh fun to do with css grid so going back up to the price it looks like all the font sizes are the same between desktop and mobile yeah i think they're they're close enough that it's not really worth writing the additional styles okay so here we go price so now we're turning on display grid and we want the grid template columns i don't necessarily want to repeat but um okay so for the template there's going to be two columns because these two blocks are taking 50 percent the top one is just going to take two columns so i guess we can say repeat 2 1 fr and that's a fractional unit which will divide the available space between the number of items so each of them will be equal which amounts to 50 when there's two of them i guess i'll do grid template rows too for template rows are they the same even this is about 218. this is two so they're different so i think good template rows repeat two and i think i can set it to auto [Music] so now we need to kind of try to trigger this oh wait hold on let's make sure it's turned on oh um i forgot that we have to do media queries differently for pure css so in pure css you need to do the media query first then you add the selector so it's kind of opposite in sas um yeah pure css is fine but i would i would always use sass in like a work environment just because there's certain things that make it much faster to write styles for but they both work so it's all good right so let's make sure this um oh that's weird let's reload okay it must have broken something when i uh did that grid is not kicking in yet so let's zoom out a little bit there we go i'll make this a bit wider there we go so now this is the point where it'll kick in okay so because we just made the grid template columns and rows it just kind of auto places things so we need to explicitly say that the joiner community is going to take up two columns so what i'm going to do is maybe i'll just add all the desktop styles under here so we'll kind of add this and we'll just leave it up here so price and then community and we want that to be grid um i think i'll just do the grid shorthand and say we want to start it at the one and then end on the three line and that didn't work probably did something wrong oh grid column there we go see i don't remember everything i have to look up things quite frequently that's one reason why i like doing these live coding videos because you can see that you know people still have to look stuff up it looks like there's a max width thing going on here so it's about 640 pixels so we will add that max width to i think the price block itself yeah let's do that max width is 640 pixels so i want to convert that to rems since i don't have my nice little sass mix in we'll use a calculator 640 divided by 16 is 40. and i know that people like to use the uh 62.5 for font size for things but um i feel like i i don't know it seems hacky for me for some reason and i think that was it was a really good workaround before like sas came around but i think nowadays it's better to just keep it at 100 and use you know sas or calculator to add the the proper rem value okay so now it is capped and we want to center it so we'll just do margin auto there we go [Music] okay this looks pretty good um wait is that it is that all i need to do i guess so wow cool so let's test this again so if we go this is the desktop view and we'll just kind of get rid of that this is the desktop view as you get smart smaller it'll go to mobile and it'll keep that padding so nothing kind of overflows in a way you don't really want it to cool all right and that's the pricing block for the next few videos we're going to be doing a bunch of building stuff so if you're interested in that stay tuned and don't forget to subscribe and turn on notifications thanks for watching and we'll see you in the next one

Channel: Coder Coder

Views: 32,515

Keywords: web development, html, css, learntocode

Id: DGYMErzcflw

Length: 66min 5sec (3965 seconds)

Published: Mon Feb 15 2021