Vanilla CSS and HTML Pricing Card Challenge #fullstackroadmap Ep 8.3

welcome to the first code challenge in my css crash course this crash course spanned three videos um they're in the playlist that's in the description and it's part of my full stack web developer roadmap series where i take you from complete beginner to deploying your first full stack web application so that involves learning javascript html css and a whole host of other things if you want to learn more about that check this video out it gives a great introduction of what the series is all about all right i don't want to waste any more time let's jump in this is what we're going to be building here it's going to be a nice way to practice a lot of those basic css and html skills that we've just learned there's nothing crazy going on here but it will give us that good opportunity it looks like we've got a few different font styles um font weights a little bit of color in here and then even a button down here that we can style and maybe add a pseudo class hover effect too so it'll be a great comprehensive introduction to writing html and css this code challenge comes from the frontend mentor website which is a great resource that you can scroll down and see a bunch of professional web designs for different things that will challenge you to use different skills in html css and javascript the one that i picked here is rather simple it's kind of on the the easier side of this but we are going to walk through a couple others so as you see this grid and the crowdfunding product page those two will be coming up in future video challenges for this video i've purposely not looked at this yet and figured out how i'm going to do it so this is completely raw and uncut i really want to just show you my thought process we talked about this four-step system for writing html and css in the actual css crash course and i really want to apply this and walk you through my thought process of how i take a design such as this one and think about how do i lay it out how do i style it and what resources am i using to do so i'm not the best at writing html and css in the world far from it there are plenty of people that could come in and critique what i'm about to do in many many ways but my goal here is to show you just a realistic look at how we go about building something like this consistent with what we've been doing in the prior videos we're going to be using the codepen environment so you can start a blank code pen document and just follow along as we go through this challenge i think our first step is going to be going over to the frontend mentor website we don't need this page anymore but if we go ahead and click the visit challenge hub for the single price grid component which i'm going to leave a link in the description to this so that you don't have to go searching for it you'll find some starter files a design file that we don't need this is more on the side of you know if you're using figma or sketch or even photoshop or something like that to mock up the design it might be useful to see what are the components and layers going on there but like i said in the crash course this is not about graphic design or wireframing we're solely trying to take a pre-existing design and turn it into code scrolling down you can see that this is the newbie difficulty level so it should be relatively straightforward to solve almost 10 000 people have tried it and about 2 000 have finished and i fully intend to be in this bottom category as should you and the brief that we're given is pretty simple so it says your challenge is to build out this pricing component getting it looking like the design okay you can use any tools that you'd like we're going to use vanilla html and css we're not bringing in anything additional except maybe a google font or something like that it says your users should be able to and what i want to call out right here is this is called a user story and we've touched on it previously within this crash course when we built the html challenge but a user story is something that you will write down in the requirements gathering phase of building a web page or web app and it's basically saying okay let's come up with a list of things that the user should be able to do if this is implemented correctly so the first requirement is that we should be able to view the optimal layout for the component depending on the device's screen size we have not yet talked about responsive design that's i believe going to be the next video in this series so we may leave this part out i'm not quite sure yet we'll see how long it takes to build the first part but basically what that's saying is as we resize the screen or if we look at it on desktop or our mobile device it should you know look good to the user the second one is you should see a hover state on desktop for the sign up call to action so in other words what they're talking about is this button down here when we hover over it we should see some sort of interactive thing happening whether that be the button gets larger or changes colors opacity something like that so we can get a little bit creative with what we're doing there it says download the starter code go to the readme file this will give you further details the style guide will give you the colors and the fonts that we need to use so i'm going to go ahead and open this up you'll see that we have some folders and some files if we open up the readme it's written in markdown which is kind of hard to read here so what i'm going to do is open all of these files in a tool called visual studio code which is the code editor that we will eventually be using within this series but for now like i said we're going to be using this codepen environment because it's a lot more interactive and you can see the changes happening in real time so let me get that opened and then we'll look at some of these files i've got all the project files open in visual studio code which again you'll get very used to as we go throughout this course but basically we're just using it to see the the files for now and if we open up readme you'll see that it's written in markdown if you don't know what markdown is just go google it real quick to understand it basically takes um these little two hashtags for example and this would become an h2 element within html so i've got it open in the preview it's a little bit easier to read than you know the stuff going on over here most of this stuff is not new the one thing that i'll talk about here is down here in the deployment section so they recommend that you use get version control to host this and push it to your repository and deploy it with for sell now we're going to just put this up on github pages and we're not going to actually be using the git utility because we haven't covered that in the series yet but i do want to you know give you a way to see it live on the internet and github pages is a really simple way to do that i'll show you exactly how that works but it will not be the focus of this tutorial the style guide we don't really need to go through this all that much right now but we'll be referring back to it when we have to figure out okay what font are we going to use how large is this card going to be and what colors are we putting in there so this will be a good reference so let's close that out and i think everything else looks like we have design these are just preview images to reference and then images we just have a favicon which is going to be kind of up in the browser tab and finally we have this get ignore file which has to do with the get version control utility we're not going to talk about that and then finally in index.html which has some predefined html boilerplate to start with but once again we're going to be using codepen instead of doing that just because it's a little bit more interactive for us all right let's get started uh coding this thing so once again we'll go back to this four-step system for writing html in css and for this i use this four step system on a component by component basis so in our case we're just building this simple card so we can pretty much use it one time through but if we had a much larger project we'd kind of iterate and do this process multiple times so the first thing is how do i want to arrange these html elements on the page that is basically talking about this design right here so how do i want to design it we've already have that done for us so we can go to step two how do i make this arrangement look using html so the way that we can figure that out is primarily by experience just knowing how you can write html that will be turned into something like this but i'm going to walk you through my thought process and just kind of start to give you that experience so just taking a look at this design the first thing that i'm thinking about is how do i lay this out with html so what are the container elements that i need to use and as we talked about a div element is a great you know container type element so what i'm thinking about is there's probably going to be four main containers that we're looking at from a high level the first one is going to be the entire design itself so that will be one div then we'll have something for this white box right here the bottom left box and then the bottom right box so really what we're going to be looking at is something like this and excuse my poor drawing i'm using a mouse so this is kind of tough but if we break it out like this and then we draw something around it this top one is going to be a div and then we'll have another div here and we'll have a div here and a div here so we're going to have 4 in total and that's going to represent our entire design as we move down to this this bottom left section which will be contained in a div it's going to be a little bit trickier than this top one because of this part right here so you see how we have some text and some more text styled right next to each other horizontally and as we know elements are block elements by default usually so we're going to have to find a way to lay that out so that they're both on the same line and they have two different styles so that'll be interesting to see how we do that and then finally at the bottom we've got a button which will spend a little bit of extra time on because we need to have a hover effect on it and then in the bottom right we have a pretty straightforward design where we just have a heading and then it looks like an unstyled list so it's not necessarily paragraph text it looks like this is a list without bullet points so i'll show you exactly how to do that and then finally we have some different colors throughout but that's not really related to this step so we've gone through steps one in steps two so what i'm going to do is actually take step number two and lay this out with html as we just talked about so i've got my design here on the right and my code pen here on the left so let's go ahead and start with this the first thing that i'm going to do is make a main div that we're going to call the container or more descriptively we'll call it the card because this is what we call a pricing card card is just terminology for something that's like all contained within a box then furthermore i said that we're going to have three more divs so let's lay that out and we're going to give i don't know we'll we'll call it an id so maybe let's be more specific with everything here because we're only making one card um in a real css project you might want to make a card design and then apply it to one class that you can you know use with multiple elements but for here we can just use ids and be super specific so we have a card then we have the top section and then we'll come down make yet another div this is going to be the bottom left section i'm just being super descriptive here and then furthermore we're going to have a bottom right section so let me expand this so that we can really see what we're dealing with it's not going to show anything on the screen yet because we haven't put anything in these divs but one thing that i just noticed that we probably should be doing is this bottom right section here we probably should wrap that in another div just because they're horizontally next to each other so really what we can visualize this as is we've got one section up here and then we have one section down here and then within that we have two more sections like that so over here in our html we're going to wrap these two in a div so let me take the bottom two sections and put those in a div as well and make sure that we have some good indentation so that we can see exactly what's going on pretty easily let's give this one an id so we'll just say bottom section so if you look at this on the right my extremely messy design we have this top section which is this big box and then at the bottom we have the bottom section which is the big box surrounding these two little boxes and then the two boxes down here are represented by the bottom left section in the bottom right section and then everything is encompassed this is getting extremely messy with a card right here all right so let me go ahead and disable this that we don't have all that drawing there but you can kind of see how this layout is going to map over to this design at this point let's put something in here so that we can start seeing this come to life at the moment we have an empty web page because we've got a bunch of div elements or containers that we've laid out but there's nothing in them so what goes in these sections let's start with the top section so right here contain contained within this single div and what we're going to put in there is it looks like a heading so that looks to me somewhat like we'll call it an h2 heading and it says join our community so that will be our first heading right there and of course this is not going to look anything like the card at the beginning we're going to use css styles to make this a lot prettier in just a second we'll come down here and this looks like maybe an h4 heading that says 30 day hassle free money back guarantee all right so that is the second part and then the third part is going to be some paragraph text so gain access to our full library and i'm going to stop talking so we can speed through this alright so we've got our top section already created and once again it looks nothing like the top section over here but we will get there in due time now we'll come down to these other sections here so we need to finish the bottom left section which we're going to put in this div right here and then the bottom right will be going in this div so with the bottom left section it looks like we have an h4 tag so similar to how we use for the 30 day hassle free money back guarantee we'll go ahead and use that same one for the monthly subscription because it looks close we can always change it later so we'll put in monthly subscription and then like i said once we get down to this little area so if we circle these two pieces right here this is going to be what i think as another container div so let's go ahead and make another div and then within that div we want to have we'll say i guess we can just make another div that says 29 and then one more div that is going to say per month so this is going to this total container is going to wrap that pricing component and then we're going to take these two divs right here and make them go horizontal to each other as you can see they're you know block elements so they're breaking to new lines but you'll see how this comes in handy in in a little bit so let's go to the next part get rid of these lines here and you can see that after the pricing it gives us a small um text down here so we'll we'll put a paragraph and we'll say full access for less than one dollar a day and then finally at the very bottom let's space this out once more we're going to need a button that says sign up and you'll see that this button comes on the page here and then finally this is where it gets a little bit confusing since we haven't added any css yet but this container on the far right is going to be next to the container that we just created but for the time being since everything is a block element by default it's going to go right under here so let me go ahead and write this out it looks like we're using the same kind of header here so we'll stick with the h4 and say why us and then down here as i said you could interpret this as paragraph text you can make a bunch of paragraph text that breaks to new lines or we could just make a list and then take the bullet points out later with css so that's what i'm going to do i'm going to make an unordered list and then each list item is going to be what we're seeing on each line okay we've got it all written out we've got all the text and elements that we're probably going to need for this entire card but as you can see this looks nothing like the card that we have on the right and believe it or not we're going to use just vanilla css to take this ugly looking thing and turn it into the card that we see on the right so in reality if i was building this myself and i wanted to do it as quick as possible um what i would do is probably not lay it out like this where i've got all of the text on the page at once i would probably do it in pieces but i wanted to lay this out to just show you how we can visualize a design of course you need a little bit of experience to do this but we can visualize a design and turn it into html elements and we can take what looks like nothing special and turn it into this card on the right but let me go ahead and walk you through what i would do in real life so i've basically created a clone of this and what we're going to do here is we're going to delete all that text that we just put in here so we'll get right back to where we started and as you can see we have just the layout that we had created earlier where we have the whole card we have the top section bottom section and then the sub sections within those and realistically what i would do first off just to get everything laid out on the page correctly is start giving some dimensions and some borders on this so that we can visualize it and then i would put in the actual text elements so let's go ahead and do that real quick and you'll see exactly what i mean so if we were to come back to this four step process this step number two can involve some css as i'm about to show you so we'll open up the css pane and what we want to first do is target the overall card so to do that with an id you use that hashtag and then supply the id and now what i'm going to do is just give it some sort of width and height and also tack on a border so that we can see it on the page so let's go ahead and give it a width of 200 pixels and a height of 200 pixels and then a border will be one pixel solid red so now you're starting to see and i'm going to actually make this three pixels so we can see it better you'll see just a basic container on the page now the next thing i want to do is go see what the specifications for the size of this main card is because this outer container we are we're calling card should be the total dimensions so if we go back to visual studio code and see our specifications so we're in the style guide right now it says that the designs were created to the following widths so like i said we're not going to be getting into responsive design in this tutorial so if you were to look at the desktop design it looks like this and that's what we're creating but there's also a mobile design which you can see has a slightly different layout and in real life what we would be doing is we'd be designing on desktop to look like that and then when we resize the page so as we you know resize the page in our codepen environment we would expect this design to change but for this one we're staying simple since we haven't learned about responsive design yet and we're just creating this one right here so the specification for that desktop is going to be 1440 pixels but if we came to codepen and we gave it a width of say 1440 pixels it's going to go completely off the page so we're going to take a little bit of liberty here and make our own design based on the size of our code pen editor which i'm guessing is going to be around we'll call it 700 pixels maybe that's a pretty good size we're probably going to want to give ourselves some some width here to work with so let's make it 600 pixels which is going to give us all of this space right here and then for the height we're just going to eyeball it because they haven't specified exactly what that height should be so let's look at the desktop design again you can generally grasp the aspect ratio here and you can tell that we're off by a little bit so let's maybe throw this up to 350 pixels and that looks like generally the aspect ratio that we're dealing with right here so nothing nothing perfect but it's going to get us close now the next step since we have our main container laid out and we just see it visibly we're going to do the same thing with each of the sections so you can see that we have our top section which we can come down into our css and target and for this section we're going to give it a width of 100 percent because we want it to be filling up the entire space of its main container and then we're going to give it a height if i can spell that right we'll give it a height of 50 percent because well maybe not 50 percent it looks like the top section is call it forty percent and the bottom section is about sixty percent so maybe we'll go in that range where we give it a height of forty percent a width of a hundred and of course we can't see anything yet because we haven't given it a background or a border so let's throw in a two pixel solid green border so you'll see that pop up in the top section here and that that looks pretty good so far now there's one problem that we're seeing already that i want to fix right off the bat before we get any further and that is this box sizing so as you can see when we put the border on this inner container you're seeing that it's kind of breaking out of the parent container on the right side here and the reason that's happening is because our box sizing is set to the default content box so what we're going to do is a basic css reset that's going to make every element on the page abide by the border box box sizing and we talked about that in the first of three lessons in our css crash course before so go back and review that if you have to to apply the border box box sizing to every element in this html document we'll just come to the top of our css file and paste in a predefined html or css reset so we're saying on the total document we want the box sizing to be border box which will as you see it will make this box go within its container and then the second rule is just basically going to say i want to grab every other element and apply or inherit that you know root level box sizing so by just adding these two rules you can see that our boxes are fitting nicely within each other if we comment them out it's going to be breaking out of the box again if we comment them back it goes or it should update i'm not sure why it's not updating let's refresh the page there we go so it is within the box with that fixed we can go to the bottom section so let's let's go back to our design here for a second we've got our top section bordered out now we have this overall bottom section so we will write a css rule to target the bottom section div which is right here so you can see the bottom section which has the two subsections within it so let's come down here and just paste in these properties because that's all we need but it's obviously going to be the wrong heights and widths for now so we do want a 100 width we want it taking up all of that but the height that we want is going to be 60 rather than 40. because as you see with 40 it doesn't take up the full uh height of the entire container but now that we've made it to 60 and then we'll turn this to call it blue you'll see that we now have a outer container in red our top container in green and our bottom container in blue now the last thing that we have to do to get this layout um perfect is going to be adding these two containers in the bottom section that will be side by side i'm going to add them one at a time because it's going to require us to do something a little bit tricky because they go next to each other so let's target the bottom left section first so we'll copy in this id into our css put that hashtag in front to target it and here we're going to copy in the same properties again just to get our border now this is going to be incorrect at the moment because we're giving it a width of a hundred percent but really what we want is a width of 50 percent because we want that to take up the first half and then the height that we want is going to be 100 percent now i'm using these percentages because we have these already broken out within their containers so let's put a different color on here maybe we'll put on what's contrasting to blue we'll say orange so that we can see that pretty nicely within that container and the reason that this works is because the width um the width of 50 percent is going to be relative to its parent container so if we look and ask ourselves okay what is the parent container of this bottom left section well that's going to be the bottom section and the bottom section is outlined in blue right here so rather than saying 50 percent width of the entire document we're just saying 50 width of the bottom section which is already outlined for us and you can see um that it's occupying perfectly 50 of that now if we did the same thing with the bottom right section so let's change this id to the bottom right section and then i'm running out of colors here but maybe we'll just give it a 2 pixel solid black border now we're running into problems here because now that we have a bottom right section it's breaking down onto a new line because all of these divs are by default block elements and they occupy their own line so in order for this to work we actually have to make both of these you know subsections inline block elements so we don't want to make them inline because inline elements don't respect the height and width properties which we want them to respect but we do want them to be up on the same line so what we're going to do is come to both of them and say display inline block and then once again display inline block now at this point you're probably wondering why are these boxes not lining up next to each other we've given one of them fifty percent with the other one fifty percent width and we've turned them into inline blocks which basically means that they both can sit on the same line unlike a block element now the reason that this is happening is probably going to make you pretty mad um because it made me mad when i found it out for the first time and a lot of other people and it's kind of just a quirky thing about css so when you make an inline block that respects the white space within the document and believe it or not if you come up to this html where we have the bottom left section in the bottom right section there's actually some white space between these two elements so this this space right here is considered white space for inline block elements so if we were to just backspace and bring this right next to each other it's going to bring this box up within that container and it's going to fit perfectly now i know what you're thinking um like i said this is kind of infuriating that this is the reason that that was doing that and that's kind of you know coding in general sometimes you just find things that are completely ridiculous and what i will say is that there is some hope so in the next couple of videos we're going to be talking about css grid in flexbox and both of those will be a much more optimal way to make this layout like we've done here and you won't run into these weird quirky problems that just exist as a part of kind of the older method of writing css all right so just keep that in mind we have taken the divs that were nicely uh laid out in our html above like this and we've just removed the little white space between them and now it's going to work just fine so that's hopefully the only little hack that we're going to have to do throughout this project and like i said it's just it's a little bit frustrating but we have to do it here and until we know css grid and flexbox at least but this would be kind of your old way of lining these things up now the last thing that we have to do here because we've got our layout so if we come back to visual studio code you can see that we've got our top section bottom left and bottom right section all outlined with these ugly colors and and whatnot and at this point we can start putting html elements within them so let me go ahead and grab some of the text that we created over here just in this ugly space and i'm just going to copy the exact html and put it into each of the sections that it belongs in so we're going to see some html go up here and of course it's not going to not going to fully fit at the beginning we will fix that i promise and then let's come down here grab this put this in the bottom left section and you'll see that we have some some spacing that we're going to have to address here and that is partially due to the the default margin that is given that is being given to h2 and h4 elements and in paragraph elements and then finally the bottom right section will copy that and paste it into the bottom right section okay so we've got all of our elements in here and now we have to fix a few things one of those things is the default margin that we're getting on these elements so i'm going to actually inspect the whole page it's going to look very weird for a second but if we hover over some of these elements you'll see that we have this orange margin on top and on bottom of those h4 elements and that is because it's just a browser default it's something that just it you know happens by default and if we go over to this page you can see that all of our text is is spaced out pretty nicely and that is because of those browser defaults but obviously over here we don't want them to be in effect because we want our document to have no spacing around we want to add our own spacing so all we have to do is come up to the top and to our html or sorry css reset where we're just you know resetting default properties i'm just going to grab the h2 element and the h4 element that we have as well as the paragraph element and give it a margin of zero so hopefully that will fix a few things you can see that we have no spacing around here all right the last problem we're dealing with here it looks like we've got all of our text without default spacing so that's nice and the last thing that we're worrying about is this orange box which is oddly just sitting there floating in space and if you were to right click and inspect this and you start clicking around looking at this there's not going to be any you know obvious reason why this is sitting down here there's no margin or padding or anything going on here so you kind of have to ask yourself what is going on and from experience i just know that when you have an inline block element it follows different rules than a block element and there are different properties that will allow you to modify how those rules are applying to your html now that's kind of similar to all css so when you change display properties and box sizing there's just different rules of the game so if we were to come over to the mdn documentation and type in vertical align this is going to show us a property and it says the vertical line css property sets vertical alignment of an inline inline block or table cell box so this does not apply at all to block elements which is the default type of html element for pretty much everything but what it does is it basically says this is a pretty good visual right here if you have two inline block elements that are sitting right next to each other on the same line they can be aligned at different vertical positions and by default i'm not sure exactly what the default is here um probably the baseline or something like that but anyways we want to make sure that this gets the top alignment because if we come back to our challenge here we want these two inline blocks to basically lock up to the top border of their container so if we go into each of the sections um and for the bottom left section that's behaving oddly if we type in vertical align and then say top it's going to bring it right back up and snap it to the top edge of its container now the bottom right section just so happens to snap up there naturally but let's go ahead and add the vertical line top for consistency's sake and this will also snap that to the top so at this point it looks like we have a nicely laid out card and although it is pretty ugly we've got everything that we need all of the content in there and we've got the layout that we need so at this point it's all about styling so in our four step process we looked at number one that was just looking at the design in some cases you'd actually do the designing in step two we asked ourselves how do we lay that out with html so we templated everything out now in step 3 we have to ask how can i use css to achieve the layout that i want and that's exactly what we did here we just used a few basic css properties to put some borders and really visualize the card component that we're trying to create and now finally how should we style each element and this is kind of the fun part where our ugly layout example is going to turn into what we see in this example a nice styled card so i think the first thing that i want to do let me go back to my example here since this is just called layout example let's let's copy all the html here into our original code pen and of course all of the css we'll copy in there too so this should get us back to where we were there and i can go ahead and close this out so we've just got this one example and i think what the next step here is going to be is to get these background colors put in there so we're going to start to get something that doesn't look so ugly so just looking at the colors let's just drop these into google because i'm really not sure just they're saying cyan bright yellow light gray in a grayish blue and to be completely honest i don't know what that refers to here it looks like this might be the yellow i'm not sure where the gray is maybe this text right here let's let's go ahead and type those into google real quick so we'll go rgb and there should be something rgb to hex maybe okay this is what we're looking for just the color picker on google and all we have to do is go back to our style guide and let's see what this cyan color is so we'll paste in these values right here i'm not sure why they're giving us hsl values because that i really haven't used those all that much in web development you usually stick to hex and rgb but they are so let's go ahead and convert those to something a little bit easier to use so we'll grab a hex color here and let me just replace this just so we have a reference and then let's paste in the hsl for this yellow color that we're working with which to me looks more green maybe i'm colorblind who knows go for those hex values at the end here just for reference and then we'll do the same thing for the remainder because i like working in hex and i've never really worked with uh hsl so we'll go back and put these in here now to me when i look at this these bottom bottom left and bottom right boxes they they look like different colors to me this one looks like just a lighter version of the left and in the style guide i'm not so sure that they've given us two of those options so if we came in and looked at the cyan color so let me paste that in here it looks like that would be the bottom left color that we're dealing with or maybe even the bottom right color so what i'm going to do is just drag this that we have different colors maybe i'm missing something here but let me just drag this so that we get a little bit lighter color that we can work with and then i'm going to grab that hex value and paste it into the style guide so we'll put put that in there as darker and then lighter and at this point we can grab these color codes and start using them so we'll grab the darker color and we'll come back to our code pen and just put in a background color property so for the bottom left section we know that we can use the background color property and paste that in there and we should be getting that darker cyan color alright so at this point we can probably remove that border and that looks a little bit nicer for us and i'm also going to remove the bottom section blue border okay so we're looking a little bit better here and now i want to fill in the background color for this right section which as i just got a slightly lighter hex value so we'll go to the bottom right section get rid of the border and replace that with a background color and paste that in and it's looking like it's it's a little bit lighter but compared to the example it's there's more of a contrast here so let's go ahead let's play with that a little bit let's make it even a little bit more light grab that hex value and see what that looks like okay so that's that's a little bit better i like that contrast and you could even come over to adobe color and we'll go to this this adobe color tool and what i could do is i could grab the bottom left section hex code which is the darker cyan throw this in the middle here and then i want some shades of this color so uh we could grab maybe this shade over here which ensures that it's gonna you know nicely go together and let's put that one in the bottom right section just to get a little bit more complementary uh colors here and then i'll go back here and and replace this just so we have a reference of it okay so we've got these two the top is going to be white and then at this point i think we can remove all of the borders just so that we don't have those ugly colors going on so let's let's go up here remove the top section green border everything looks good and then the red border around everything and boom we have ourselves a nicer looking layout now as you'll see in the example design it is kind of standing out against the background and you'll also notice that there are some little corners that are rounded so i want to do that just so that we have something as a reference here and i also want to kind of make this come out from the top left corner of the page so all we'd have to do for that is just add some padding to the body so if i go here and just add some padding of 20 pixels to the body you'll see that that uh comes in a little bit so remove it add it back and you can see our card just shifts inwards so that we can kind of visualize it a little bit better and then finally for the card because that is the main container around everything what i'm going to do is add a box shadow and this property is going to take i believe five different arguments and they're all kind of referencing where the shadow's gonna go so i can open up a tool called box shadow generator uh for css and there's a a couple tools here i don't know which one's the best and they all should work but as you see this css box has a box shadow around it and you can you know drag these sliders to get different sorts of box shadows applying to this so this is a good visual tool that we can use to to see what we want and in our case we probably want a a much smaller box shadow so let's let's go ahead and actually know we want to stay close to zero so we'll go around 4 pixels and maybe 3 pixels or something like that and make the blur radius a little bit smaller and the opacity that we want let's make it down to like point two or around that area maybe a little bit more i think that looks pretty good so the codes that we need it's showing us that uh we need to paste in all of these these webkit and moz box shadows are just for like other browser support we don't necessarily need them so i'm just going to copy in this rule right here and we'll paste it in to the cart and now you're going to see around the edges we're starting to get a defined edge to our card so let's go back to our design and you can see that we're getting a little bit closer here what i want to do is round the corners now so all we have to do is say on the main card we say we want to border radius of call it 5 pixels all right so we've got our border radius on here but what you'll notice is that the bottom right corner and the bottom left corner do not have a border radius and you might ask why because we've given a border radius of 5 pixels which should apply all around that container element but the problem is because we have these two inner container elements that are perfect you know squares and they occupy a hundred percent of the space within that main container so as we make a border radius we're actually um those inner boxes are actually breaking out of the main container now and what you're seeing there is those those uh child containers there's a couple ways that we could fix this but a cool little trick that you can use and i i know this is not necessarily obvious but if you do enough googling you would find this out if you set the overflow property to hidden on the main container element you'll see that those borders go rounded and basically what that's saying is we want to take those perfect square children containers and since those are breaking out of the main container we want to say to the main container css style okay if you have anything that's breaking out of your borders just hide it and so that's what allows those bottom border radiuses to apply so just a cool little trick it's also one of those frustrating things about css where it's doing things that you would not expect and that is literally the name of the game with css is figuring out how to get around the things that you're not expecting to happen okay so we're getting a little bit closer here um the next thing that we can do that will just add a really nice touch and make this look a little bit cleaner is some padding i think so let's jump back to our design and you can see that all around the content here so around every bit of content there is this space this nice padding in here and what we could do is we could come in to our code pen and we could just say on the total card we want to add some padding of say 20 pixels but that's going to mess us up a little bit because although it adds nice padding around everything now these are not occupying 100 width and also we want some padding within these sub little containers so what i'm going to do instead of adding it on the total card to get padding like that i'm going to add them on each individual section so we'll call it a padding of about 20 pixels that's a pretty standard amount of padding to add and we can just look at this little space between the edge and the text on the top and the left to get an idea of how large that padding is and that looks pretty in line with our design so i'm happy with that and then let's copy that rule down into the other section so not the bottom section because that represents everything here but i want to do it in the bottom left section so we get that nice padding and then i also want to do it in the bottom right section which will make the padding nice there too so at this point we've gone from a completely ugly layout design to something that actually makes sense visually we obviously have a lot to do with the text styles and colors in that button but we're getting a lot closer let's go ahead and change the text color you can see that everything in the bottom is a text color of white and then the top has varying text colors so we'll start with the top and you can see that the the heading is the same color as the bottom left or at least it appears to be so let me grab that bottom left color and we'll go ahead and apply that to our join our community text block so let me collapse the js here and we'll go up to the join our community and what you could do is you could target everything in the top section that's in h2 and since we're not planning on changing the html structure anytime soon i'm pretty happy with that you could also throw an id you know that says title and directly style it but in this case let's go ahead and practice our combinator skills our css combinators to style this so we'll come down here and at this point you'll see the css is getting pretty busy you might want to rearrange it and organize it by section but for now let's just keep going and what we'll do is we'll say the top section is the pre-selector that we want and then we want to grab every h2 element which is simply that first title and what we want to do is style it a color of that bottom left so now we're going to get the correct color let's go back to our visual studio code and see what else we have so we have this kind of lime green yellowish color as the next one and that is going to be this hex code the bright yellow so going back to our code pen you can see that this is the only h4 that is sitting in our top section so we can grab a similar rule as we just did except this time we're grabbing h4s and giving it a color of yellow so there is our yellow color and then finally we should have some sort of gray color and let me get to our visual studio code this this paragraph text is gray and in the style guide i believe that is the light gray that we're looking for so let's copy that hex code and then make all of the paragraph elements in the top section equal to this light gray color okay so that is that is very light i'm not sure if that's what we were supposed to do it appears pretty pretty good here but it's pretty darn light when we're looking at it here so i'm going to go ahead and make this a little bit stronger of a gray maybe it's the grayish blue actually let's try that instead ah okay so i think that's what they meant for this style yeah i think that's what we're looking for here so the grayish blue looks a little bit better we'll we'll stay with that now we just have to add some uh some spacing between these so if you remember at the very top of our html we did a reset that said for all h2 h4 and p elements we want to add a margin of zero so that removed all the default spacing and now we can do it custom and since we've got all three of these elements selected with these combinators we can just drop into these rules and do so let's take a look at our design it looks like there's a good amount of space just by experience that looks about 15 pixels between the top and the next one let's go ahead and try that by adding a margin bottom of 15 pixels and you can see that's a nice little spacing there um what i'm starting to see is that our top section now that we've got this laid out is a little bit small from a height perspective so i think i'm going to adjust our our total dimensions here previously we had said the bottom section has a height of 60 percent in the top 40 percent i'm going to change that to 45 and 55. and you'll see now we have a little bit more realistic uh breakout between the two sections i'm pretty happy with that so the last thing we need to do now that we made that change is add some spacing between this these two text elements and then we've already got some padding at the bottom so we'll go down to our rule of the h4 and add a margin on the bottom of 10 pixels which seems about right so comparing that up i think we're getting pretty close and and now that i'm looking at it we might actually need a little bit more padding around this uh than we've given it so let's go to the top section wherever we did that and let's increase that padding to say 25 pixels and that that looks a little bit better for us and then we'll go ahead and update that to 25 pixels in the other two spots that we had added that okay so we're doing pretty good there and it looks like our total card size is it's starting to break out but i'm gonna wait on that before i try to restyle because the text is going to get a little bit smaller when we set the font size and change the font style so the last thing we'll do is come down and since everything in the bottom it looks like is a color of white we can just go to the selector that we used for the the entire bottom section so rather than trying to style the text in the left section and the right section we can just go to the entire bottom section and give it a color of white that looks pretty good i think that should work and then you can see the button color is not being styled because that is a separate element there so what i can do is actually target all buttons because there's only one button on the entire page so we'll we'll style the button and we'll give it a color of white and that's going to give it a text color over white we'll make that show up a little bit better once we add a background color which looks like that lime green but i'm going to wait on that for just a second the next major change that i want to make is getting this text to be the right font family right now we're just using the browser default whatever that is i don't actually know off the top of my head but we want to make this a different font completely and if you look at the style guide it's going to say the font family that we're looking at is carla and if we go to this link we can see all of the different styles that we need now the question is what what font weights and you know styles do we need well we can go and look at the spec it says we need weights of 400 and 700 so let me take the font weight of 400 and select that style and then the font weight of 700 and select that as well we will grab the link tags that we need we'll go back to our code pen over here go up to the settings html and in the stuff for the head element so since codepen gives us our own little environment we don't actually have to make the head element or boilerplate so we can just paste it here and by doing this and saving and closing we now have access to that new font but it hasn't changed anything because we have to actually select it within our document so up at the root element we want to give a font family of carla and you can see that it changed our design completely and it says that the overall font size is going to be 16 pixels so let's go ahead and say that the font size in the root element is going to be 16 pixels which is just going to apply to those paragraph elements as i'm flipping back and forth between these two designs looks like we still need a little more space after this so let me do that real quick before i get into anything else we'll add 20 pixels to there okay and then i'm i'm thinking that we're running out of space vertically and since we came up with an arbitrary height at the beginning i don't mind changing that because they didn't specify what the height should be so let's go ahead and turn that to 400 to give us some more space and i think this looks a lot closer to the card that we're working with here so just adjusting that gives us a pretty good look and now we've got our font family styled here i think the next thing we have to do is figure out of that font family they had us download the font weight of 400 and 700 which means that some of these should have a font weight of 700 or bold so let's look at our design and see which ones that would apply to it looks like to me this 29 dollar uh call out is the only one where the font weight is you know extra bold so let's come down and because the default font weight is going to be 400 or you could also specify it in the route so we'll say 400 but that's once again going to be the default so it's not going to change but if we came down to our price right here we're going to have to actually put some identifiers on here to enable us or let us select it with css so i'm going to say price price container and then this will be an id of price and then this will have an id of price frequency or something like that so now we have ids to basically select each of these little components here and if we come down to our css we need to set the price to a font weight of 700. so we'll come down to the bottom we'll set our price to a font weight of 700 and you'll see that this gets a little bit bolder so if i uncomment it it's not bold if i comment it back it's going to be bold and then while we're here just give us a ballpark font size let's go ahead and say 1.4 rem which is basically going to be 140 percent of the root elements font size which we know is 16 pixels so do 140 times 16 pixels and that's how many pixels we just made that font size too all right looking back we're getting closer we're not we're not too far off i think the next obvious thing that's going on that we're missing is this button because our button looks terrible in comparison so let's go ahead and make a button that is about the same size here and also has that background color we've already selected the button so that we could give it white text but now we can just go ahead and grab this color code that we used for the h4 up here and apply it as the background color to the button so we'll give the background color that light green you can see that there's by default this border that looks pretty terrible so we can set the border to be equal to none that makes that look a little bit better and then there's more spacing than we have here around this text so that's a good use for padding so all we need to do is come in and add we'll say 10 pixels of padding that looks roughly correct and then finally you can see that this has a border radius so the button has curves around the edges and it's equal to kind of the size of that container so remember we put some padding around the edges of this container so the new size that we're going to have is we should be able to just say a hundred percent i believe so let's say the width it's going to be a hundred percent and yes that's going to get it get us equal to that uh parent container so at this point we just need to add a border radius of call it 5 pixels and i think our button is looking pretty good so it looks like we're a little bit wider than this right here but i'm not too worried about that we have the perspective uh pretty good and the most important part is that it's a hundred percent of the container so i think at this point we have all of the colors in place let's just check that yes we do so we have all the colors that we need and our font family is correct now we just need to do two more things we need to to get the font sizes and font weights a little bit better and then we also need to get everything spaced out in this price and the frequency horizontal to each other i'm going to go ahead and say that this top section is completely done it's not you know perfectly aligned with this design but it's very close and part of this is we're looking at a much larger version of this so we're never going to get it like exactly perfectly it's just not worth our time but down here let's go ahead and start working on this bottom left box so this monthly subscription that looks okay maybe a little bit heavy in font but i'm not too worried about it but there needs to be some space between it and the price so let's target this right here and put a margin at the bottom of it and the way we can do that is go find in the html the tag that we want so the bottom left section and like we did in the top section we can just target individual elements so we'll target that and then we want to use a combinator to say that we want to target the h4 potentially let's see what we have here so we have the monthly subscription as an h4 and that's the only h4 in this entire section so we're pretty safe to target it with the combinator and now we want to give it a margin on the bottom of call it 20 pixels i think that's pretty good maybe a little much so maybe we'll go with something like not 5 but 15 pixels okay i like that and now the next part is we're going to take this per month and drag it up onto the line that the 29 dollars is on so to do that we once again target the bottom left section and actually no we're not going to target that we now have the this individual price container so that we can work specifically with this layout and what i want to do is grab the price frequency right here so we'll target the price frequency and i want to display this as an inline block because i want it to come up on that line next to the 29 and at the moment it's not doing it because the 29 dollars is not an inline block so we can target both of those we can say price frequency and the actual price to both be inline blocks and now they're coming onto the same line and since we have both of those elements within this div container the price container we can just say on the entire price container that we want a margin on the bottom of call it 20 or 10 pixels what you'll see here is that the per month is kind of aligned to the bottom of this 29 dollars in a quick way to do this you know if you if we were using flexbox this would be super easy but a kind of a quick hack to change this is set the position of this element to relative which then allows us to basically if you remember from the first video of the css crash course we talked about how relatively positioned elements you can set them basically relative to themselves so if we give it the top property and then we want to bring it upwards so we basically want to do a negative amount of pixels and we say we want to bring it up maybe three pixels you'll see that that per month kind of goes up a little bit so watch the per month and i'm going to uncomment or i'm going to comment this out it's going to go back to the bottom and then i'm going to put it back in there and it goes up to the middle so i kind of like how that's sitting and then furthermore on that price frequency the font size should be a little bit smaller so we'll give it 0.8 rem so that's a little bit closer and then you'll also see that it has a little bit more space between the 29 dollars and it's also a little bit lighter so it's not quite as uh punchy of a white color so all we would have to do here is maybe give it a or not transparency but we could give it an opacity of maybe 0.8 and that makes it a little bit lighter for us maybe even 0.7 okay i like that and then finally a margin to the left of it of maybe five pixels and you can see that spaces it over to the right so i'm pretty happy with how we've got that spaced out that's relatively relatively close in style and position and i like the size of the 29 dollars so i think we're done with that little sub component of the top of the bottom left container next up our full access for less than a dollar a day that's a little bit large in my opinion because it looks like this text is even a little bit smaller than this paragraph text up here so we probably want to make this a little bit smaller in relation to the paragraph text the way that we'll do that is this is the only paragraph element within the bottom left section so once again we will grab the bottom left section and maybe even just copy this rule right below here and target all p elements which will be a single element and give it a font size of maybe 0.9 rem units and that gives us a nice size maybe we'll make it even a little bit smaller so 80 percent of the the original text size of 16 pixels and then finally we just have to bring this button all the way down to the bottom so we have a couple ways of doing this but one of those ways would be you know taking this p element and just putting a margin on the bottom of maybe 40 pixels and that should bring the button down now flipping between these two i'm seeing that this these text right here is kind of in the middle of the top in the button so i'm going to change a few of these alignments here i think we need a little bit more margin below the monthly subscription so let's add maybe 25 pixels instead of 15. and that gives us a nice little layout there so it's not perfect not exactly the same but it is fairly close and we've gotten all of the functional and layouts pretty good here so at this point i think we're done with the top we're done with the bottom left and now we just have the bottom right which should be relatively simple to do so the why us piece is already pretty good i like how that's sitting it's in alignment with monthly subscription same size as it so so that's good and now we just need to take the bullet points off of our list item and align those two to the left of each other so let's see that how we would do this so to really show you what's going on here let's open up the chrome dev tools and try to just rearrange this so that we can see everything it's a little bit weird debugging html and css in a codepen environment because you've got all these different windows open but really what this right side elements is doing is looking at this html page so if we were to click this selector up here and come down and grab the entire list that we're looking at you'll immediately see that there is some sort of you know padding and margin around this list by default so the margin is fine that doesn't bother me at all but that green little box on the left side of all the text is some default padding that is added to list because generally you want those lists to kind of be indented from the main text so that's what you would want but here we don't want that so if we go over into this style right here and we basically say padding is equal to zero you're going to see that everything goes to the left and it lines up with the text like we want it now the last thing is there's bullet points that we don't want there and you can actually set the list style property and set that to none and by doing that all of the bullet points go away and so those are the only two changes that we'll have to make to get this to work so let me go ahead and refresh the page so we get this reset because those changes we made were actually temporary and then we'll come down to the very bottom and since there's only one list in our entire html document we'll just target it by tag and we'll say the padding is equal to zero and the list style is none so we've removed the list styling by using this attribute or property and remove the padding on the left so it's all lining up just like our design here but what we are missing is this looks a little bit smaller and it also isn't so such an intense white color so it looks like the opacity of it might be a little bit lower similar to this per month piece of text so all we need to do there is say font size and we'll bring it down to what did we say this one was um 0.8 rem so 80 of the root element size or 80 times 16 pixels and then we can bring the opacity down to 0.8 as well and i think that looks pretty pretty good there it's not exact but it is it's pretty much in line with uh with everything at this point i think we're pretty much done the only remaining item that i can think of is this button right here so the button is currently not doing anything when we hover over it and i want to change that especially because that was part of the requirements so here's our button styles in this block right here and in order to style it on hover we need to give it the pseudo class of hover and once we do that this was something that we talked about and i think the first lesson of the crash course and the first thing that we always want to do on hover is change the cursor to a pointer so you can see how the cursor changes as i hover over this button and that's just to indicate to the user that hey you can click on this so from here we also probably want to change the color when we hover over it because the cursor is not obvious enough so we could just take this background color right here that's already on the button and make it a little bit lighter or a little bit darker so let's grab that hex code and bring it into our color wheel of adobe color and let's just see if we can find like a shade of this that would work i think something like maybe this one on the right would be okay and if we bring that in and we change the background color to the hover state to that little bit darker color it's going to just have an effect where it's showing us oh hey you can click here and it's going to do something and to make that even more pronounced there's a property that you can use called transform and there's plenty of values that you can pass here but one of those is going to be the scale function and we can just say like 1.1 or something like that so we can scale it 110 and you'll see that it you know gets a little bit larger when we hover over it and that's that's even a little extreme maybe we'll just do 1.02 or 102 and i like that that's a nice little subtle indication to the user that when they hover over and click this it will do something now right now this button doesn't do anything but just for fun just to add something in there we can come up and use what we've learned in the prior lessons of this full stack road map and come up to the button and add ourselves an on click listener and we'll pass the function alert user which we have not created yet but we'll come down to the js section and say alert user and then we will pass an alert that says hey you clicked the button so let's finish that one up and now when we click this button it's going to alert the user that they clicked it so obviously not you know useful but it's a nice little addition to make this a little bit more interactive now the final thing that we could do here is make this mobile responsive and what i mean by that is if we drag this right side over to the left you'll see that it just disappears right here and it just flows off of the page which is a terrible user experience if you're on mobile so this would be about the size of a mobile device so if your user you know looked at this design this is what they're going to see which is completely useless to them so what you would want to do is make it a mobile design and as you see in the front end mentor challenge it tells you that you need to design something like this now we haven't talked about mobile and responsive design quite yet and i'm gonna cover that in a completely separate video i think that might be the next video after this one so for now we're gonna keep it just desktop only but in future challenges future front-end mentor challenges we will make that uh we will make this mobile responsive now there's one more thing that i want to do because it's quick it's easy and it will give you at least a little bit of a win here in terms of being able to share this and show it off so if we come to github let me open up a new tab and go to github if you followed along with this full stack roadmap from the very beginning i had asked you to create a github account because you're going to need it as a developer no matter what it's just kind of expected of you to have a github profile so if you've already got one great if not go ahead and create one and let's go ahead and click create new repository right here and we'll say pricing card frontend mentor challenge is what we're going to name this repository and we're going to call it an implementation of the front-end mentor code challenge and we're going to make it public and you don't really need to initialize any of these but let's go ahead and add a readme i'll just show you what that is and you click create repository so we're going to go through version control and how to actually get this within the terminal a little bit later in the series but for right now we're just going to use github's uh ui or user interface to post our code and then deploy it to github pages and what github pages is going to do is it's going to allow you to host this challenge you just created on the web and share it as a url so here's our initialized repository every repo or repository is going to have a readme or at least it should and this should give an introduction to what this repository is all about and oftentimes when you're building a web app the readme will give instructions on how to run it locally and how to develop it and you know you get the point so within the repository we obviously could make files on our local computer and then use version control to push the files up to this interface but for right now we're just going to add a file and we're going to click create new file and this one is going to be called index.html so this will basically be all of the html that we just created and index.html is the default html document that github pages is going to look for when it's trying to serve it on you know the live url so it needs to be named this and from here if you were to go back to our html and copy it all and paste it in here we have the body section implemented but since codepen already implements the head tag and the body tag that's not going to be here so we need to add those pieces in order for this to work so the first thing that i'm going to do actually let's let's come back and write out that structure so basically we'll come to the top and we'll say that we need an html tag and we'll copy this one and put it at the very bottom and then furthermore let me zoom in a little bit so you can see what i'm working on and then after this we will need the head tag and we'll just we'll call it my front end or no we'll say pricing card will be the title which is going to show up in this little tab when we're viewing it live and then we'll close out the head tag we'll come back to this in just a second to add those fonts that we put in and then we've got the body tag which is going to be closed all the way down here at the bottom and then lastly let's just indent everything to a proper level and now you can see that we've wrapped everything together in this html the last thing we're going to need to do here is link up all of the style sheets and the fonts so if we go back to our pricing card go to settings html we're going to need all of that stuff that we had in the head and we're going to put that right after the title so you can see we have these two link tags and then furthermore we're going to have to link up our css stylesheet that we'll put in in just a second so the way that we do that is another link tag and i believe the href is going to be style.css which we're going to create in just a second and this will be a stylesheet so we'll close that off and what this means is basically i want you to pull in uh the file called style.css in the directory that is basically hosting this index.html file you'll see what that means in just a second so for now let's go ahead and commit this new file and go down to add another file and this one is going to be style.css which is what i just talked about how we linked up to that within our html and from here we should be able to just paste in all of this css right here that we had created so nothing nothing else to do here we can just go ahead and commit that file and then finally we need to add our javascript file so we added just a few lines of javascript down here but in order for that to work we need to actually connect it up to our html and the way that we're going to do that is go back to our html file click edit and then come down to the bottom of the body and this is where we need to have our script tag to do that we just type out a script tag which is not self-closing there's actually two pieces to it and we need to give it a source and we're going to say let's say just index.js is what we're going to call our javascript document so commit those changes i believe that should work so long as we go to the main file here or the main directory and add that javascript file so we need to name this index index.js as we just referred to in our html and then we should be able to paste in that function that we created commit the file from here this is a complete repository i believe unless i missed something but we'll find out in a second now the only thing that we need to do is add another branch now this is um a little bit complex we're getting into version control branching but basically the rule here within github is if you make a branch called gh dash pages or github pages it's automatically going to look for you know the index.html file on that different branch and it's going to deploy it automatically for you so it does a lot of the heavy lifting and you can for now kind of just think of it as behind the scenes magic but we will later learn how this all works so we're going to create a branch called github pages and we're going to create it from the main uh branch so it's going to copy all the files over okay so at this point we've got all of our files in github pages and if i did everything correctly which usually does not happen in coding it should show up down on this github pages link so let's see if we click view deployment awesome it looks like our card actually did deploy correctly with the styles because it's all styled and if we click sign up hopefully we'll get the alert so awesome we have our deploy link which you can just copy and paste this link up here and share it with anyone and they can see the project that you just worked on you could also submit this to front-end mentor if you wanted to to get feedback on your project so awesome we've got something deployed and shareable so if you enjoyed this tutorial and it helped you out be sure to give it a thumbs up that really helps me out and if you want to share your project hit me up on twitter at zg underscore dev and show me what you built so looking forward to seeing those projects and i will see you in the next lesson [Music] you

Channel: Zach Gollwitzer

Views: 739

Rating: 5 out of 5

Keywords: learn to code, software development, learning to code, learn to code for free, learn programming, how to learn to code for free, css tutorial for beginners, css tutorial, pricing table html css, how to make pricing table, pure css price table

Id: zwBoEwUD__0

Length: 88min 31sec (5311 seconds)

Published: Mon Mar 01 2021