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

Key Takeaways

hello there in last week's video I designed this using figma in this week's video we're gonna start coding up the design with HTML and CSS hi there my name is Kevin and welcome to my channel where we learn how to make the web and how to make them look good with weekly tips tricks and tutorials if you new here please do consider subscribing if that sounds like something that would be interesting to you now last week as I said we coded up that design using figma and a lot of people asked me to go ahead and actually code it up and I was sort of thinking about whether I should do it or not but there was enough people asking me to do it that I thought it would be a lot of fun especially because one of the things that came up was the responsiveness of it how would you make that responsive so that is going to be part of this project the very first thing I'm gonna do is show you how you can take the figma link that is down below so you can actually extract the assets yourself you can code along see if you can do it better than me I'm going into this one a little bit blind usually I like preparing things a bit but in this one I'm just going in this is the raw version of me coding up to something when I have the design so you get to see a few mistakes that I make but I also think it's important to see how I fix my mistakes and get around it part one you won't see too much of that though we're just going to be doing the HTML so it's a little bit more straightforward so here we go now I've put a link down in the description below that has a link to this design file it's open to anybody so if you click on that it should bring you here but if you do not have a figma account you're gonna get something like this where it's gonna tell you to sign up with either email or Google and when you're here this is a view only so I can't see like actually let's just move this out of the way for a second like this is the one ROM logged in and I can see a whole bunch of information and actually you can see my mouse moving live in the other view so that's one of the cool things the figma of it is very good for collaboration and but in the one where I'm logged let's make this bigger so you can actually so it's not confusing there we go and block everything else out so we can see that here I can view everything but I can't get any information from it this is the little anonymous guy right here I have my actual account which is the one where I'm logged in Kevin and I have a Kevin number two that I created which is right here so this one is what you can get if you're logged in you can't edit anything if I try and drag something nothing happens but I can get the text I can get different the font size and get line Heights I can get colors all of that information and I can also export if I click on this background and I click plus you can see that it's gonna export that background image in this case I can get it as a JPEG I can preview what it's going to look like if I want I could come up here and grab the SVG which is a little tricky so just click on anything and then you can click on that and I can choose that as my SVG right there and get a little preview of what my SVG might look like and then I can export that once you you know I want just that as an SVG I can click on export 15 weather and it's gonna ask me in this case I want to save my file I'll do this all really fast in a second so you can save everything up and then in two seconds we're gonna get going and actually start coding this alright so all I've done is I've downloaded them already now and I drop them into here which is my you can see I have my images this is my amazing mountain folder that I'm gonna be working I would have right here add to coat it all up and I've already got that going so let's jump board vs code now and start coding it up all right so here we are in vs code so the first thing I'm to do is just come up to here and create a new file called index.html because we need to have one of those I'm also gonna make a new folder called CSS and I'm going to be working right from there so let's make a new file in there called main dot a CSS or just yes I sorry I'm used to writing a CSS and right away I mean I'm in vs code so this does have Emmitt so you could do like in html5 like that and push tab and it's gonna give you a starter for HTML you could even just do the exclamation mark and tab and as long as you have Emmet going that should give you the nice little starter template for an html5 document there and we're good to go if you're not using vs code you can get an extension for Emmet if you don't already have it the very first thing to do is just link and this is more Emmet I'm gonna push right link and push tab and CSS slash main dot s CSS and what I'm gonna do is I have the live server installed so I'm going to click and just a test if it's working we'll do an h1 here hello and there we go we can see that it's working so really really cool we're off and running so whenever I'm doing my coding up I like looking at the design first now one thing that drives me a little bit crazy with figma is you can't see much because you have the two things here and you're blocking so I'm just going to push play and opens a new tab but it's gonna get rid of all that extra stuff and I just have the design so from here you can see I only have the design I should be able to zoom out on that scale down to fit there we go so I can just see everything that I'm working on so the very first thing we have is our this chunk at the top that has our navigation in it and also has a little bit of weather information over there so I'm going to call that my header so in the header here we're going to have a couple of different things you can see that I sort of have this container thing actually what I did this I didn't think about how I was gonna set all this up to be inline with everything so that could be a little bit interesting we'll figure it out though as we go through this so let's first have our I'm just going to do this as an image dot logo and I didn't export that so we're gonna have to come through here after but it'll be in my images once I'm done forward slash logo SVG cuz I'll exported as an SVG in a second in this case I'm not going to put any alt text now for alt text you can put some but the Alta is generally to describe if you have an image and you want to see what's happening in the image in this case this is more of a decorative element obviously it is the logo people don't really need to know that I'm going to turn word wrap on here if you're wondering but any shortcuts that I'm using along the way I do have a video where I look at a whole bunch of shortcuts in vs code that I find really really useful so you can go and check that out now the next thing I have is my nav so I'm gonna do nav nav seems a little bit redundant but I like selecting as much as possible with classes rather than elements if you disagree with me that's fine everybody has their own approach or in every ul I'm gonna give this a class of nav list I'm gonna have my inside of that we're gonna have Li with a class of nav list item and for that we're gonna need four of them and this is all Emmet and inside each one of those we will have a link with each link we'll have a class of nav link and if I push tab now that will spit out a whole bunch of stuff here let's just turn wordwrap off for a second so we can see it a little better so there we go I have my I have a list item nav list item inside each one of those my link with the class of nav link so that's my nav with my nav list and then the last thing we have that still inside my header is the weather so I'm gonna do a div just a regular div with a class of weather yeah I think that makes sense then inside there we're gonna have a few to do we're gonna have we're gonna have how how should we set this up I'm trying to think this I think this could definitely be done with flexbox if I were to put this in its own that's one div with a background color on it and then here I'm gonna have one div then ends up getting split into two but could that be one big div I think just for fun I'm going to actually do this with grid instead of flexbox so we're gonna have a div of weather icon and inside that div we can have the actual image which is going to be my roof it's in my images images slash weather icon SVG I do think so I just turned word wrap back on there I could give this some alt text but this would be something where the ideally the alt would actually be updated you know this would preferably by dynamic this icon could change depending on what the actual weather is and then the alt text could be updated with that so here could be like partially partially cloudy even maybe current current weather is partially cloudy or something like that so you're describing what the little icon is but again this ideally you know if you turn this into a react app or a view app or spelt or whatever you're using and it updates with the current weather that could be kind of cool so that's this div here let's turn wordwrap off again so this div right here is my big block and then I'm gonna have this year which is gonna have my two paragraphs in it so I think this is gonna work so paragraph with a class of weather info times two inside each one of those paragraphs we can actually just write the text so the first one is current weather and then we'd have a span and in the span in this case - six Celsius and I just copied this from off-screen but so I think they get a little degree symbol there and then the second one will be the recent snowfall span 35 centimeters we go and I think this is going to work out perfectly this could all be on one line I'm just trying to make it so we can see it you know I'm working in a small space with a big font size right now so it's easy for things to sort of fall off the side but so you know if we need to move over we could a little bit but I think that's gonna work perfectly there if we're using grid if you wanted to be a little bit more compliant we're a little bit more browser support friendly and grid you can't be pretty browser support friendly I'm gonna do a video on that one of these days but for now if you do want to just do this with flexbox you definitely could but you probably have to wrap this in a separate div around that so close header and then we're gonna have our main content area so we just do main and you could give this a class like main content or main or whatever you want it's up to you or even you know what might make more sense here's the background image might change to you know everything in layout wise might change this it stay the same but the background image would change depending if you're in ski golf hiking contact or something like that so this could be like main and then main ski or something where you have the basic like layout stuff is being handled by this with the padding all of that stuff but then the main ski is what's actually applying the background image so I think I'll do it like that if you're curious about that with the double underscore and the double - I'm doing here this is part of BEM it's just a CSS naming convention if you don't like it some people love it I love it I think it's fantastic if you do not like it I get it it's not for everybody you can name things however you want so down into this section it's pretty easy we'll do an h1 we'll do an h1 with a class of what should we call it let's just call it main title because that makes a lot of sense um I'll bring the text in in a second then we're gonna have our paragraph and our paragraph I'm gonna give this a class - even though you know idea hit for this design we don't really need one but we can just call it main intro or main body or something I don't know we don't have the rest of the design to go because this is all I created so depending on what we have through the rest of it this this class here might change even this could just maybe be title and you know typography doesn't have to necessarily be something that lives because I mean if I'm doing them actually I would have it more like that we'll stick with the BAM main title main intro but I don't always adhere to this I might have like a title and then if something has to change it could always be like main title main as well there's anyway I don't wanna confuse there's lots of different naming convention and different approaches we could do to that such as my buttons my buttons I'm not going to here to putting them in the main these would ideally be things that could be reused throughout the rest of the site so to do that I think what we're gonna do is come in here and say we're just gonna have in there links right since just links that look like buttons so a with a class of BTN and I'm gonna do a second class of BTN primary and then my next one here let's come down and we can have our a BTN BTN ghost and then BTN outline I'll do it outline it lends a little bit more straightforward ghost is you know you'll often hear things like this called ghost buttons but you know we'll stick with that I think it's a little bit easier to see what's actually going on already understand what's going on and then I'm gonna come back to here because I did forget to get that so we'll save can i expert that we sure can as an SVG let's just preview it and make sure it looks good and we can export that I'll move it over in a second off screen but the main reason I'm here is because this is fantastic when you need to get text out of something you don't want to retype anything so we can just come in and copy and paste this directly from that design so if you do want to work from this I'd strongly encourage you to go ahead and sign up for a free figma account you can work up to three projects as many drafts as you want it is pretty cool and you is it this is all in the browser you can completely design you everything in the browser a few people have asked me if I switched from XD to figma no I have not I'm still a big fan of XD I think XD does some things really well I think figma does other things really well and both of them seem to be really really solid I wanted to challenge myself to start learning figmas and so that's the main reason I started learning it one of the best ways is now that I've learned it I want to start teaching it to really encourage you to do the same thing if you start learning stuff start teaching it it's really good way to reinforce what you're learning along the way I mean you have to start describing how to do the things that you're learning how to do it just makes things sink in so well alright so that is done and a lot we're gonna a few finishing touches here I do need to get my google fonts so I don't need that I need this one which is they're all work saws in this case the font weight is 900 this one I think I just went with the normal so normal would be 400 down here I'm just double-checking this one's bold so that would be 700 I just want to see what font weights I actually used I think there's nine and seven so I'm gonna come over to Google Fonts oh there's a new google fonts I didn't even know this must be part of their 10th year anniversary with the variable fonts I haven't even really gone over yes I'm so excited about this there will be a video coming up on variable fonts I'm have to change my schedule to get one of these in there I'm so excited about that but we're not doing that now so how it works on let's jump into work songs Oh they've really changed this okay I want to get this one the regular I want to get my 700 and I want to get my 900 realistically oh there is no italics anyway okay awesome so I don't want to download I want to embed and we can just grab this right here copy that and I'm just gonna put this before my own CSS file so we'll put this here we'll put a comment Google Fonts paste that right in there turn word wrap on so we can see it'll and then I'm gonna come down a little bit put another one and my CSS awesome so we're getting there were getting there I'm gonna hit save and we're gonna come over to my CSS file and I'm just going to put a little comment here at the top to put this in here so we don't forget before we go though let's go and actually see what we've got oh no I think I closed my port or was it on this one we were back in the incognito so we can see there's not too much coming here logo SVG I'm gonna bring that in before we get to the next part and the other icon we can't see cuz it's white on white let's just make sure that the other icon actually came in we can give a body background gray and there we go we can see that that icon has come in so I'll fix that other one will fix that link alright we set the stage we're ready to go we're ready to start coding everything up I'm looking forward to seeing you in the next video which will be up tomorrow or if you're watching this in the future it is ready for you to watch right now so you can go ahead and do just that if you like this so far and you don't want to miss the next two parts and you haven't yet subscribed please consider subscribing so you don't miss out on any of the fun here a big thank you for watching this a huge thank you to my patrons for helping support everything I do here at my channel it really does make a difference thank you a second time for watching and of course until next time don't forget to make the record of the Internet just a little bit more awesome