From design to code - HTML & CSS tutorial [ part two ]

Key Takeaways

already and welcome to part 2 of this series where we're coding up this design I designed it using figma a week ago if you missed that and you want to see how I designed it I went through not only how to use figma but I also looked at some tips and tricks and design in general in that one you can go and check that out if you missed the last video I'd really strongly recommend you check it out it's right at the HTML in this video we're starting off with the CSS we're looking at the legal screen sizes so I'm going to talk a little bit about the decisions I'm making because we don't have a mobile design I just gave us a desktop design to base it off of and we got to start mobile the reason I'm starting mobile makes your life so much easier there's so many less decisions that you have to worry about you're just doing all the really basic stuff there's no complicated stuff it's really pretty straightforward now one of the things I will not be doing is doing a drop-down menu or anything too complicated there just because that would be a video in its own and I've done a whole bunch of videos already on navigations I've put links to all of them down below if you want to see how to do a mobile navigation or something that you know drop out or pull down or whatever you want to call them I've done it before they end up being pretty long because there's lots of different parts and moving pieces to those we are going to make the mobile navigation different from the big screen navigation though so we will be looking at all of that in this one as I said we're setting the stage or emailing at setting up our custom properties gathering everything going and then in the next video we're going to look at really making it fully responsive but for now let's go and set that stage alright so how do we turn that into this or this into that I should say so the very first thing I'm gonna do is let's come over to here and before we even get into the body before we even get into styling anything up there's two lines of code or one line of code I always write and then there's a second line of code that we you know it's I'm always reading these days as well before I can't talk and code always at the same time because I'm trying to do this and I'm just throwing myself way off but I do my star and my start before and my star after and on this we do a box sizing order box I think I have a video on this if I do that would be card popping up on what that is if you don't already know basically it just makes our life so much easier and the other thing that I want to do is we're gonna come into here we're gonna go to route and we're gonna set up some custom properties people have commented that I'm using a lot of custom properties lately I just love customer properties so much if you deal if you do need backwards support on it I haven't made a video for it so let me know if you'd be curious on that leave a comment down below but you can use something called post CSS and that will help you make sure you have good support in all browsers and you can still use custom properties which how did we ever write code before custom properties I started using sass just because of variables and then I fell in love with other parts of sass we're not you know here we're just we're doing regular CSS but sass is still amazing but the reason I liked it was because of variables so we have them in CSS now which is amazing so the first ones I'm going to set up or for my colors I'm gonna sort of speed this up and then maybe explain it a little bit in one second so I'm gonna my color accent okay so I think I got all the custom properties that I need are the ones I'll be using so here I my three colors and my three font weights normally I might have other things in here as well like font families but in this case I only have one font family so I think this is all we need for this design because it is pretty simple and the idea here of what I want is the different things I'm gonna be reusing throughout I always start them with the color or the font weight or font size I could make some properties for but the font sizes are all over the place here if this was a full design I would definitely have some custom properties for font sizes as well though because you probably be reusing them a lot if you haven't used custom properties I do have a six-part series on it that you can definitely check out the link for it will be in the description below let's check this out for a second so here we have all of this looking good and then so here we have all this looking here that's a good good description of what's happening here Kevin so basically it just lets me reuse these and I think some people Google isn't this redundant or like do we really need to put this to the white but what if the brand changes a little bit they want to keep a light color but instead of a white if they're switching it off to being like a light gray it's nice if I can only change that in one spot it updates throughout the site or what if these change you know I'm doing bold and black that's what they are but what if the design had like a 600 and was doing an 800 here I might still use the terms bold and black just because semi bold and semi black however it would be is kind of awkward and this leaves it really easy to update without having to use some awkward names I've also seen like font weight 400 font weight 500 600 but I don't know I like having it more like this it's how I work definitely come up with however you want to name your custom properties I find this system works really well for me it's back from the day when I was using sass a lot this is sort of the system that I developed so here what do we want we want this to be cut that delete the comment off the top and boom right away our site should probably be looking a lot better just because we have a nicer font and so I think it is I'm actually also going to break this off and do its own tab or its own window instead of being in its own tab now that we're doing the CSS so I can see what I'm trying and what it actually looks like writing markup we don't really care what it looks like too much we just want to make sure the contents there but as soon as I start my CSS I like knowing what I'm actually trying to get the thing to look like you know what it should be actually looking like all righty so that's what we want it to look like actually this is where it's a little annoying I will be I'm gonna bring this one down with you the reason I want both of these is because sometimes I'm gonna be checking this for like some information but just having this in this and especially I'm in a really small screen space right now to be looking at it is a little bit complicated ideally it would be like fullscreen or very big on one spot you could just leave it in this view the whole time but for our purposes I think it's a bit more user friendly like this so we can see everything that we're up to so it looks good I'm gonna change I think my font family was 18 did I go with 18 I did so my font size font size to be 1.125 rimmed why do I do this instead of doing the HTML at like 6 to 2.5 percent I do it because I don't want to overwrite somebody's thing if they chose specifically to have a bigger font size if they set something bigger in their browser I want to you know accommodate them there's not many people doing it but if they're actually taking the time to do that I want to accommodate them also if they do it the right way your change in the HTML might not be working anyway so you're wasting your time you know the one you get used to doing this I know what they are these numbers make sense to me so it just takes a little bit of practice you'll get used to writing R M and M and have no issue with it font size I just always use a ram and then you have a bit less issues all right so that's a good start I might also make color the color overall through most of the site will be color color dark it looks almost the same but it is a very dark blue and I'm also going to come on here and do my line height of I'm gonna do 1.6 I don't know if that's what I actually used if you have a design you have to match it exactly you just come here my font size was 18 my line height is 25 you could open up a calculator let's get one open 25 divided by 8 up in there I went with a tight line height really I don't think so that's not 1.38 let's just see what that would look like that looks really smooch to me maybe it's what I did but I'm gonna bring that open I'm making an executive decision to pump that up a little bit now we can keep on going let's go back to this just we can look at the overall thing usually I like doing all my typography here at the top but I'm just gonna start we're gonna start up right here with my mine so that is my nav so my nav has a background color might as well be explicit and that is var color light these are a little bit long to write if you do not use to cuff some properties sometimes you might find it annoying but once you really start harnessing them you will be very happy that you did I just realized I did one thing wrong or not wrong but for my setup here to line these up depending on how you want to do it I wasn't really thinking straight because here I have let's just turn off word wrap I have my image I have my nav and then I have this div I don't have a container class anywhere so I'm actually going to come up here and create a grid I don't know what my grids gonna be yet so let's just put in like one fr for now and we're gonna play around with that a little bit in coming up because I'm gonna use a grid to sort of define these areas and then we're gonna use the same grid up here as we're using down there eventually we could put all this in one big thing use sub-grid it's gonna be fantastic I'm so excited but we're not quite there yet I will be having some content on sub grid in the not-too-distant future though Firefox is supporting it so we might as well jump in on that hypetrain okay so background I do want some padding on this so padding and actually for now let's start off by making this trigger drew I'm just opening up my inspector which is really huge so we got to move that down a little bit and I'm gonna click in Firefox it's this little guy but in chrome it's this little guy it will to be next to this guy is this button is just on that side in chrome you click that and you can get into responsive mode so let's just set this up for an iPhone that that's good enough and one cool thing with Firefox you can close this and it stays there if you close it in chrome it will exit this responsive mode and let's just get as much screen real estate as we can here okay so I'm really just worried about the navigation for now one M let's see what that looks like oh I forgot something I'm sorry Student Code pins margin of 0 um all right and you know what I'm going to do on my body for an out background of let's just put that gray back Gary I wonder what Gary would give us just we can see what's happening oh I'm doing that Kevin header there we go I think we're gonna go with a really we're gonna keep things really simple on mobile and then we're gonna make it a little bit more interesting when should we try to think okay we're gonna see I haven't actually planned this out and I wanted to talk a little bit about how we were how I would approach things because I had a lot of questions about how to approach making things responsive or make like how did how do you approach it and how we can approach things like this at small screen sizes and the changes we can make to them um so my nav let's start off by doing the nav itself is display flex and then we have my nav whoops this should be dot nav I'm gonna have my nav list which is going to whoop sigh this on the wrong spot I don't know if we need this actually display flex margin of zero and padding of 0 and a list-style:none awesomesauce and you know we're not doing anything too crazy I can check my font sizes on my navigation but I could always modify but I kept them pretty small actually they are a size 14 so font size 14 I don't actually know cuz it's too small so let's bring up the calculator point 875 0.875 rim text text transform can be upper case and of course the font weight can be my VAR font-weight:bold bold I think it was bold and if I didn't do it I'm not sure but I'm gonna put a little bit of letter spacing on this one pixel cool cool cool text you notice I'm doing a lot of that on the list itself and not on the links like this I find comes a little bit redundant a bit but where you put it and I have link here I'm just gonna do the ones I need to so text deco raishin of men what else do we want on that the color will be inherit and I think what we're gonna do for now is just here I did my display flex already we might as well just do justified content space between I'm not doing a complicated like mobile nav and header text-align:center I'm not doing a complicated mobile design this is gonna work to like really small screen sizes like where's 360 that's the smallest or 320 like that's good enough for me I think I'd be okay with that the one thing that's not working is actually my color dark I was wondering the color looked off there we go that looks a little better you guys probably were looking at that the whole time wearing what is he doing when I told you it changed and it didn't actually change like it's it's cuz it didn't change Kevin and so I think you know for me that works perfectly fine ideally would you make a little hamburger menu or something like that yeah it'd probably be a good idea but I've done no just doing all of that takes a long time and it's if you want a video on how we can do that I have a couple there will be links to those down in the description there should probably be a card popping up now if I remember to put that as well um the one thing I'm gonna do on my nav list though is I find they're way too close together up and down so I'm just gonna have margin top of one M just to space that out a little more and I'm gonna bring this up here with this margin if you prefer doing the shorthand of everything that's fine I'm just going to keep it like that as far as the order of my CSS some people prefer keeping everything alphabetical personally that drives me nuts because especially if you're doing a whole bunch of flex stuff like I like keeping Flex things together and then my margin my padding together and then my tech stuff tends to live together I find for me that's how I like to work if you have another approach perfectly fine yeah and sometimes it gets a little messy I'll often leave it messy and then if I have time to go back through and actually clean it up and make it more how I prefer it I will do that and this little guy is gonna be interesting I think we're gonna keep it looking like that all the time so that was my dot weather and I'm gonna do a display of grit on this but shouldn't change what it looks like now we're going to do a grid template column of I'm gonna do a min content when fr columns you have to put columns there we go again probably not changing anything but we do have our little icon there and we'll give this a background of a juju juju juju var color dark so now we should be able to see our icon awesome just realized I made a little problem I put padding of 1m but that's gonna give me this on my header so instead of doing that we can't have that there we go on my nav list I will have to put my padding so we can do padding of 1 a.m. on all sides and we'll also have some on my logo dot logo I think I'll just do a margin top one in there we go supa dupa and just talking about design like see this big space here and we have a little space here that's really bugging me so I'm just gonna see where that empty space is coming from my nav list oh my margin top I don't need that we don't need that I'm gonna leave this open actually because we're gonna need it again in a second color is their color and B my bar color light so I can actually see my text awesome and we will want some padding on this padding of once again we'll go with 1m I'd use that as a starting point and then I just sort of go from there and but just based on what I'm seeing here I think that's pretty good so I did my doodoo template columns I put commas there's no commas there we go that looks a little better and the reason I wanted to leave this opened is because we have a great inspector I have a video on that as well oh I have lots of videos so if you want to know how to use the grid inspector check out that video but we can actually see if I close that it's going to disappear so I think what I'm gonna do is actually break this off separate window so in my separate window I'm just going to turn that on so we can see there it is and then I'm gonna move it out of the way so it's not blocking our view so drew drew drew I'm not even be able to put the padding on here anyway you can see that the padding is gonna cause some issues with this box that's okay so actually we'll take that off right away all right so we have my weather icon oayk one and what I want to do with this is I want to start from here but I want to go all the way down to that so for that I can say it's a grid row of 1 over span - and even technically I think could we just write span - on that that we could there we go let's shorten it up so it's spanning both columns let's give it the background that it needs so background color will be my bar color primary and padding it'll be my juju padding will be 1m because that's where using everywhere and actually in this case that might be too much let's just do a point 5 it's more from the left in the right that I'm looking at cuz to Center it I'm actually into a display flex on this because by doing that I'll look at that it fixed itself I was expecting enough to do more because of the way SVG's work it is working out good and now I think I can actually turn off this and we can see that it's looking a lot like what I want it to but it is taking up a little bit more room than I really want it to I think a lot of that I'm not sure yet but I think a lot of that is from my weather weather info if you remember my weather info is actually the paragraphs I have here so that's the to the text because their grid items the margin in between them no longer collapses the fun of collapsing margins and when they do or do not collapse so here margin on both of them can actually be 0 SuperDuper and hmm now this is the fun part because I need space on the top of one and space on the bottom of the other one so we could do a few different things since I didn't actually put these in a div I think the first thing I'm going to do is my weather info and let's just do first of type and this could be first child to know it can first of type so the first weather info that is within a parent will have a margin top of 0.5 M good and then we could take the same thing and this one could be last of type so we'll take the 1 all the way at the bottom and this one will be a margin bottom of the same amount but what I do want to change a little bit on this is the text aligned on this whole thing weather info will be a text-align:left it was inheriting the other part the the text-align:center from that whole thing and this could be age we could add in here like a margin left of 25m I'm doing point five everywhere just so it's consistent but it doesn't look consistent so we're gonna boost that one up a little bit because I want to look like it's the same all the way around the sides there now most of the time I like selecting classes but you can see I am sort of cheating a little bit with these first and last of type another thing I'm gonna do on here is the opacity of these will be lowered because if you look at this I know it's really small let's zoom in a little bit you can see that it is a reduced opacity on those so what I'm gonna do is reduce the opacity here opacity will be whoops I already have that 0.5 and the font weight of our font weight bold there we go no maybe I didn't do that I'll have to check it looks more bold here than it looks there for sure so I um but definitely I want a text transform of uppercase a letter spacing of 1 pixel just to spread things out a little bit and let's go check out whoops I'm in the wrong spot let's come back here and just check what font sizes I use because I do believe it was quite small oh I just realized something mmm-hmm-hmm I'm not gonna do it like that current weather is which my font size oh I did it as small as 10 pixels Wow okay so weather info font size is oh maybe we could actually I'll show you a cool trick um font size is 10.625 rim that's super small we're gonna boost that up a little bit tens too small for that let's just do like a 0.75 I know I'm this is my own design so I'm making these decisions here because my spacing was with M's that spacings reduced along with it this is one of the few times where I think I would actually go with rm4 all the spacing just so it doesn't change based on the font size to see now come on wait font-weight hopes bar font-weight:bold looks more bold but I think that's what I did and now the fun part it's come to here I guess and do my weather info span so that's gonna select the the six degrees and the 35 centimeters um so in here I'm just gonna do the opacity one it's that gonna work shoot oh so I made a bit of a mistake here because these spans are inside of this paragraph I can't do the opacity here up to one the reason for it is the rapacity is one like if i put this down to like 0.5 they're gonna become half as transparent as that because it's sort of like this compounding factor so they can't become more opaque than their parent so in this case I think I've actually have to grab the color which was this right there so here instead of playing with opacity font weight opacity I'm just gonna switch the color to this RGB value which will fade it out a little bit it's not my favorite way but it works and then here we can just do color is var font weight of color light this could be turned it into a variable or custom property if we need to use it a little bit more now you can notice here I've lined those up on the right side we're gonna try something I don't know how well this is gonna work we're gonna try of doing a display flex on these guys which shouldn't really change too much except I think we lost a little bit of empty space there and then these spends margin-left:auto hi did work cool without this the margin-left:auto wouldn't work as spans or in line so you can't really use the margin left like that but because now there are flex items instead of something else and I think these font weight we'd actually not font weight font size and just see I think I had it a little bit like that a line-items Center will do the trick and obviously I don't want them stuck all the way on the edge there so we can do a well do it whoops with my other margin here margin right 0.75 Ram maybe that could even be a little bit bigger but I think that works really well the last thing we need is this little line that's coming in between them so you could either do it on this one or this one I'm gonna do it with this guy here but we're just going to do that as a first of type after if I did it on this one I'd probably do it is it before the one thing that does mean is here I'm going to need to put a position of relative so I can use a first we need a Content and then I can do a position of absolute on this guy so I need it if so I need this position to be declared as something other than static so I can actually control it properly so the background on this I'll just use the VAR color color light except on that one we can do the opacity now of like a point two five this time we can get away with that it's going to a height to the height can be one one let's do it like three pixels let's see what that looks like and with over one hundred percent so we can see that it is there it's not quite where I thought it would be to be honest with you but that's okay bottom bottom of zero it actually be the best that's actually not bad except it's a little bit bigger than I wanted it to be something like that the only problem is 100 percent is going all the way to there so I could actually do one here at calc of 100 percent minus 0.75 rim and that should line it up perfectly look at that what I'm actually gonna do though is the margin that's okay that's okay I just want a bit more space in between them if this wasn't the way I set it up with the Flex I think it would work but um we can just add a bit margin-bottom 0.5 ram it's the sea and then I could play with this number a little bit um bottom 0.25 Ram negative there we go that looks pretty bang on I'm just doing this to be half of that number yeah that's why I did that is because the margins gonna be taking up all that space like from here to here should be that 0.5 so I want that position right in the middle it'll probably be like 1 or 2 pixels off perfect center but visually to me that looks pretty balanced my span where's my span one last thing text transform not often I use this but none the reason I'm doing that is because I wanted the centimeters to be small instead of that to be all cap cool now we can keep on truckin with this we can keep on going we're getting to this part now one thing you'll notice is because my big line height this does not look so good so I want to definitely bring that closer together and we can bring in our background image so let's get rid of that we can leave the gray color on there and we're gonna color it cover it now anyway so I have my main content area I was at Maynard I call it main content main and main ski so main I'm just gonna put we're gonna use our grid on here so we're gonna do a display grid no we're not gonna need it right now that's gonna come with our media query but what we can do is display drew drew what do we want I'm just going to give it a whole bunch of padding padding of top and bottom will be 3m left and right can be 1m remember this is for small devices and then I had my main title line height will be one just to bring that nice and close together the font size is obviously going to be a little bit different in this case my font size is 48 that's probably pretty big for here this is 48 let's do the font weight first font weight because I know that one is my bar font-weight black the font size in this case font size 48 is 3 REM that's not that bad actually I don't mind that too much and that's actually looking pretty good I think we're almost done with this to be honest so we had my main main ski I want to put her background image on it so background image URL and we want to put in our go back a step put my images folder and grab my skier and as a default that's not actually terrible you might be saying but I can't see the skier well that's good I can't see the skier because if I could see the skier I wouldn't be able to read any of my texts so the positioning of that is already pretty good but one thing I know I'm going to need is a background size of cover as well so that might mess things up that's making it hard to read a little bit at the bottom probably so we might have to play with this a little bit so I'm just going to drag that to be fullscreen I'm a little bit worried you know here it's starting to break running into some issues along the way I'm actually going to increase the padding on the bottom so 3 and then put 5 rim here at the bottom you know what though I don't well that's gonna change with a media query once that goes to two columns anyway this is all you see that it's not looking good we're gonna tackle that not right now though let's worry about here okay it's looking a little better yeah okay I think we can get away with that actually his these buttons I'm gonna stick with that and these buttons here we haven't done any of our buttons normally even for like this on my these things here what I would do is all the way up here with the body I would have like h1 h2 h3 line i1 maybe there's a few other things I want to do on those as well and another thing because this is sort of like a typography area it's a reusable component so that type of thing I would have my butt is up here so BTN if we go and look at my bt ends they have some padding so are actually the first thing I'm gonna do is cursor:pointer in this case we don't need it but a button class should be able to actually be applied to a real button which we want this on so cursor:pointer i also want to do a with the padding i think can actually come next so padding was gonna be I don't know point to 5m and one M we'll start with that and we'll see it's probably enough to be adjusted you could get like the spacing in between things can we get it here it doesn't wanna give it to me there might be a way to force that it doesn't want to give me the spacing between that and that which is cool actually this is a component oh here we go the padding's 1527 because i made that into a component and with that i always forget what they call it that cool that cool thing you can do with them we looked at that in the last video so I could pull those exact numbers of our one two which it's a lot of padding on laughing right let's go with my font size on here seems like one thing I love about this display flex like why anyway let's don't grab position and other stuff and don't do that from these this the font stuff is where it's at 16 so the font size is a little bit smaller than what I was doing up until now so font size can be one rim so really this is I'm gonna stick with this just based on my gut instinct and we'll see what happens and then I have my BTN primary and this is why I like splitting it into different classes so I don't have to rewrite this code anywhere actually on here we have a text transform upper case upper case as well and letter-spacing of one pixel okay so by button primaries gonna have the background color of our color primary oops not light as well as a color of our color light and just a you know I didn't build out a whole system here so I don't have my hover and all of that so we're just gonna do a really simple hover on this of the background color switching over to our color dark because it's nice and simple okay so let's save that and take a look at what we got Oh a text-decoration:none would be good next deck goal declaration declaration none and I forgot one thing that one to do you can see things aren't looking fantastic upper text transform uppercase needs a semicolon at the end and what I want to here is a display of inline block and just because it fixes everything and you know what I did need more padding so I was wrong my instincts were wrong 5 and 1.5 that looks more like what we wanted and even this one maybe could be a little bit smaller there we go I think that looks alright and that works for me so now for the other one dot button BTN outline let's just see border it's a pretty thick one three pixels solid VAR color primary so the font weight also I didn't do that button font weight of our font-weight:bold that's looking a little bit better now one thing we could do is I think I'm gonna leave things actually really similar but one second button outline the color my VAR actually know what a cool thing we do here no it's not going to work of our color primary obviously we need some space in between those so all my buttons could get a margin bottom margin bottom of 0.5 M I don't think it's gonna break anything ever if you do something like that having a little margin bottom it's like a paragraph or the margin bottom so that's never gonna break anything I do want to but note line hover we're just gonna fill it in background become far other primary and that means that the color will have to go to our color like see these custom properties I go a little crazy with them I love them so there we go I think that works perfectly fine you could have that switch to a dark color as well for consistency so the background can be the dark then you'd probably also want to change the border color to be the bar color dark as well so it you know they look very very similar now there's one problem that I did here on purpose but we don't see it yet and where we're going to see it is when those buttons actually line up next to each other see how this one looks bigger than that and it's because we have a border on it and the borders adding to the total size which creates this problem so one way you could get around this is instead of using a border you could use an outline now the outline is going to look exactly the same at the beginning except the space in between them is reduced a little but on the outline we do have an outline offset so you could do it for the same amount of size that you have on there so now it just gives us that but here border color would be outlined color and there we go it's working perfectly I like doing that a little bit outlines are a lot like borders but instead of taking up space they don't you know if I did an offset here of like 50 pixels it it it overlaps content it's not actually pushing things away like a border could and you can do offsets on them which is really cool do you cannot do on your borders so for small screen sizes I think this is working fine obviously we could do or we didn't set up a hover on those maybe I'll do that off screen because it's pretty straightforward but I think on the small screens it's working pretty good this is starting to fall apart pretty quick though and then obviously once we get to big screens we need to fix a lot of this up all right we're getting there we just have one left to go where we're gonna take this whole thing and actually make the magic happen and make it work across all different screen sizes a lot more decision-making to go in that one we're gonna be looking at CSS grid we're gonna be looking a little bit at flexbox as well and making we're you're gonna see you're gonna see it gets a little bit interesting I fix some mistakes that you know we sort of have to force grid to work the way I was hoping it would work you're gonna see when we get there make sure you're subscribed so you do not miss out on that one if you did like this video and you're enjoying it so far you can see how I can fight with grid how we can make it work for us because sometimes it doesn't want to do what we want it to do that's in the next video though I look forward to seeing you there and until then don't forget to make your corner the internet just a little bit more awesome