XD to HTML & CSS Tutorial (CSS Grid Layout)

okay so we're going to be taking our mock-up that we created earlier we're going to be building out the complete HTML and CSS remember that we did several variations in our previous design examples here just to kind of illustrate a few different ways you can design your mock-ups the one I'm going to be doing in completion is this kind of second one right here maybe this third one so I'll show you when we get to the very end after we do all of this a few simple tweaks you can make to build these other mock-ups as well but always sort of be focusing on this design right here we're going to start out here doing our CSS wireframe we will be making this fully responsive so we're gonna be doing our mobile wireframe as well and it's going to be built using the CSS grid and using CSS flexbox so we're gonna be using some modern CSS technologies so let's go ahead and get started now I'll be referencing this mock-up is several times as we get going here but the first step we need to do is jump over here to your code editor program I'm using Visual Studio code and you can use whatever code editor you want and I've just got here you can see a simple index.html file that is empty and a simple CSS files called style dot CSS that is also empty and these are going to be the two files we'll be working with so we're gonna start over here in our index dot HTML and we're just gonna build out some boilerplate code so in vs code if you just type do C doc and hit tab it will pre-fill all of this content here for you so then you can go ahead and just get started now we're gonna start out here in the HTML and build all of the boilerplate code for our mock-up so let's jump back here to our mock-up in Adobe Eckstein and let's just look at our wireframe here now of course yours will be based on however you designed your wireframe you can see the wireframe already shows the main sections here so you can see from this wireframe that essentially you know up here this is my header area and I'm gonna call this my featured area then maybe this is my I don't know call to action or something this is gonna be my profile area over here you can't really see that and this is the main content area and then down here I have a flirter so one thing to note is that my header so this div one two and three they are 100% wide meaning they span the entire width of the browser where this middle section here right is a fixed-width so that's not going to expand as the browser resizes so we need to take that into account when we're building this so those are the main areas let's go ahead and now flesh those up in our HTML so I have my header and then I'll call this maybe my featured content so we'll come over here and let's go ahead and clear that out and we're just going to do these with some simple div tags now you could use also the html5 header tags and a few other tags but for right now for simplicity's sake I'm just going to be be using div tags so let's say div ID equals and this first one is going to be our header well I'm getting ahead of myself we're actually going to create a wrapper tag so this one's gonna be called the site wrap we're gonna have one tag that sort of surrounds the entire website and that's gonna be called our site wrap tab okay then next we're gonna have one will say div and I'll say class equals header so this is gonna be our header tag and I'm just gonna write in some blank words here for now just to kind of show you the placeholder with values there and then we're gonna have another div and it's going to have a class we'll call this the featured header and you can name these whatever you want I'm just kind of making up these names here as I go here I'm basing this of course already done this ahead of time and I'm using some notes over here to my left and then I'm going to we'll call this next one div we'll give it a class of we'll call this one the featured main and then we have a couple more here so then we have div class equals we'll call this the featured profile so this is that profile picture that we had in our mock-up and then we have here our div class equals content so this is gonna be the main content area of the website forgot to be filling these in we'll just call this profile we'll call this one main and header something like that okay and then we have one more so this one is going to be our last element which is our footer and just call this guy Fleur okay now I'm gonna save and we will refresh the browser over here and you'll be able to see all those elements appear so we have the header and whoops this one is the featured header there we go and you can see all those little elements right there so this is pretty much all we need right now for our main boiler plate we're gonna be starting to do the rest in CSS and as we kind of flesh out those main content boxes we'll come in here and replace all these placeholder words with actual content and our menu and a few things like that this will get us started for right now so now we're gonna jump over to our CSS sheet so lure to our style dot CSS and we're going to do what I call creating a CSS wireframe I think this is a really important step when you're learning web design is to first basically replicate what we have over in Adobe XD so we're going to be creating bright colored boxes exactly like this before we move over here to the mock-up version so this is what I call the CSS wireframe so let's go ahead and get started with that so in our CSS sheet there's a few things we want to do here and the first thing is we're just going to add a div for that site wrap or a rule rather so we're going to be targeting that site wrap remember this one is the ID that's why I'm using the pound sign because I gave that one an ID of site wrap the rest of these I use two classes for so the pound sign is the reference for the ID and we're going to head and give this guy a height of 100 whoops 100 VH that stands for 100 viewport height now in order to see this while I'm coding here I'm just gonna turn on a temporary background color I'll be removing this in a minute but I'm just gonna set it to red here for a minute so we can kind of watch this happen in real time over here now you'll notice that I have set a background color I expect my background color to change over here but it's still white this is a really common error when people are starting out you've probably already guessed the - possibly but the problem is I have my CSS sheet which is an external stylesheet but I have not linked those two together so right now my HTML is unaware of the CSS sheet so I need to of course add the tag to link these things together up inside of our head so we will add that here so we're gonna add the link and it's gonna be a rel equals stylesheet style make sure I spell that right style sheet and the type is going to be set to text slash CSS and then the href of course is the location and mine is just the style dot CSS like so and this is a self closing tag so I still close mine like this with the forward slash like you used to do in XHTML in html5 you actually don't need to you can just leave that off but I'll leave mine in there now notice as soon as I saved sure enough my background turned red and now I know I'm properly linked up now I always recommend you do just a quick little check like that you don't want to sit here and build out a ton of CSS wondering why nothing's changing so right make sure your CSS sheets linked up properly before you continue on so this 100 viewport height the VH means that my site wrap element is going to take up a hundred percent of the height that's why it stretches clear down to the bottom all the way down to there now you will notice that there is a little white border around the edge over here inside of my browser and that's kind of by default all browsers have a default margin set on the body tag so we want to override that override at that so let's go up here and do a new rule we're gonna do this one for the body tag and we are going to set margin to zero and then save and refresh and you can see now that goes full screen as we expect that default margin is gone as well so we're gonna set margin to zero we're going to set the default padding to zero and we're gonna go ahead and set a default font family so we're gonna set the font family again this is going to be whatever font family you want I'm just gonna use the default Arial Helvetica set here and that changes of course the font you can see just changed for all those little words so that looks pretty good and why don't we also while we're here change the default line height so 1.5 EMS so they're spaced out a little bit more when we have paragraphs that are running out that's for a little bit better readability okay so we have our site wrap element now let's continue to work on our site wrap so if we can jump back here to our mock-up so the site wrap essentially is going to be covering the entire site so it's a div if you will right that kind of it covers everything so everything inside here is inside of our site wrap so the site wrap is going to be our master container and it's going to be set to be using CSS grid what that means is every child element of that master container so this one this one this one this one this one and this one are going to be what are known as CSS grid items okay so that's important to remember that that master site wrap is our grid container so with that we need to set up the CSS grid so we'll jump back here to our code and we're going to add the display of grid so that's really all you need to do this now makes that guy a grid element now notice as soon as I save all these guys are spaced out automatically and two rows and that's because the grid has the automatic rows configured so now we're going to be using some of these grid properties now this is we're just going to be using the CSS grid here I'm not going to be doing a lot of teaching about the CSS grid you have a full entire hour just dedicated a video dedicated to CSS grid which is an excellent video I highly recommend you maybe watch that one before you watch this if you want to really learn the ins and outs of the CSS grid so the property we're going to be working with first is called the grid template columns okay because we want to set up our columns so I'm going to declare it here and then what I'm gonna do is just declare this I'm going to do this on multiple lines just so it's a little bit easier for you to see so I'm going to declare one F r1 f r1 f r1 f r1 FRX count those 1 2 3 4 5 1 F R okay and then I'm gonna save now you can see what happened here is this shifted these guys instead of being displayed in rows by default they now shift it over to be displayed in column so I have one two three four five six columns now there's a couple things we need to learn here the fraction unit fr is new and that basically means take up all the available space in other words because I have six equal fractions that's just going to divide my page into six equal width columns now in our mock-up here this is kind of an important consideration so you'll remember if you if you've been watching this series a few videos back when we made the determinations to go with the CSS grid in this specific layout we talked about using columns we have a four column layout essentially so we have one column here in extra I'm going to do this on this other mock-up it's a little bit easier to see on this one you can really see the columns easier so here is one column okay there's one here's the second one two and then we have three and then we have four okay those are our four main columns and of course this area right here for example spans three full columns okay and this area of course spans all of those columns etc etc but we have basically four main columns and we can mix and match those however we want but the thing to note is well we have four columns in our content area this area right here and this area right here is that stretchy area okay so really we have six columns so if we kind of draw this out and we draw a line right down here on the edge or mock up here and we draw a line right down here on the edge of our mock-up this is really what we're looking at okay so we have one two three four five six I drew that wrong there's the sixth one goes out there of course so we have those six columns and this outer edge can stretch this way and this outer edge can stretch that way so the outer two columns number one and number six our variable width where those four columns in the middle are set to a variable size so that is why now let's get a little bit messy here but that is why in our HTML we have six columns here one two three four five six so our entire site is going to be based on this column element now to make it easier for you to see the columns temporarily I'm just gonna do a temporary rule here so I'm gonna say site wrap sub div so this is basically going to make all these dibs appear a little bit better so we're gonna give these guys I don't know a background color of blue just for a minute here and now they're all crams together you can't really see the distance so there's a property in here called grid gap and this determines it's kind of like the margin between the grid items it's actually more in the old school tables it's kind of like cell spacing a grid gap of five pixels and now you can see they all have a five pixel gap between them so now you can really see those six columns remember this one will be a variable width this one over here will be a variable width where these ones in the middle stay the same so now that we kind of understand that a little bit what we can do is I'm gonna rewrite this a little bit so what you can do is I like to write these when I'm doing tutorials anyway because it's little easier to read all on their own lines like this okay so the first one is going to be a one fraction unit meaning just take up whatever space is available the last one is going to be a one fraction unit so these middle four are all going to be the same and what you need to determine here is basically what size this is right so you'll come to your mock-up you'll take for example over here let's just look at this and one so this is the width of all four combined you can see that my width is 1088 so what you can do is 1088 divided by four whoops I can click that right 1088 divided by four so each of my columns needs to be 272 pixels wide eight of those four in the middle so what I can do that instead of saying one fraction on these guys I can say 272 pixels okay and I'm gonna copy this and paste that for the middle four and then save and now you can see what's happening here now I'm gonna zoom out a little bit in my preview here because I'm fairly zoomed in you can see the idea right this one stretches this one stretches and those middle four are always the same so that's kind of the idea here now this allows for is I'm going to go into the responsive design mode here is I can then pull these guys and you can kind of simulate what's going to happen right so those out or two columns will stretch in the middle for stay in the middle so that's kind of how we're we're using that okay now let's submit a zoom back in here just a couple of clicks now oftentimes when you're repeating the same value over and over and over there is a grid property that deals with that and it is called the repeat command so if I'm doing the same thing I can do something like this so I'm gonna say repeat four times , the following so I'm gonna do a min/max I'm gonna say zero to 72 pixels okay and what this basically says is each column can be a minimum of zero pixels up to a maximum of two hundred and seventy two pixels and now when I save nothing should change there that's just a little more succinct way of writing the same thing okay so that deals with our columns next we need to do is deal with our rows so let's jump back here to our mock-up and let's take a look at the rows now in our specific mock-up we have let's turn back on here so we have a row right there so there's one two three four five looks like we have five total rows in this specific mock-up so I'm gonna cover and now set that up in the grid template so let's come back here and we're gonna set up a new property and this one's gonna be the grid whoops grid template rows okay so for the rows it's basically the same thing as the columns so there's gonna be going to be six I can't remember already we'll go back and measure them here in a second so for right now let's just set each one to 100 pixels so we'll say 100 pixels 100 pixels 100 pixels 100 pixels I think we had 5 100 pixels one other pixels okay so we'll save and let's see if that is how many we wanted so one two three for five let's jump back to our mock-up we had one two three four five correct okay so we have five rows so that's looking fine so back here next D now of course this is gonna be different for every single person but I'm just going to use this little wire frame here so you can just click on an element and you can simply get the width and height over here so this one has a height of 104 this one has a height of 215 this one's 373 etc etc right you can just take take a look at your width and height values so we'll start off here with the top one so it's going to be a hundred and four pixels okay so this one's gonna be 104 pixels my next one is going to be 215 pixels so 215 my third one is going to be 373 a next one is going to be 373 as well 373 and my last one you have to kind of determine here my footer area I actually want to fill up the available space so I'm gonna set that one to one fraction so my footer will just expand according to whatever is needed okay now I do have hard-coded values here for the heights of these columns right this one and this one are those rows rather but in the end I'm going to be swapping those out to deal with the content because this paragraph might be shorter or longer and right I might have more or less content in there so I don't want to explicitly set the height that I'm gonna let the height on these two columns be determined by how much HTML content is inside of those divs so eventually we're gonna swap that out here as well but for our wireframe it will serve its purpose spine okay now you'll notice that even though we set up these one two three four five rows I'm actually not seeing any rows here in my mock-up and that's because right now my template doesn't need them the way that the CSS grid works is it lays out your columns in a horizontal manner so it only have one two three four five six divs so they are only fitting in one row because I have six columns I won't see those extra rows until I set up my grid template areas which is where we're going to do next so in order to set up the grid template areas we need to individually set up a specific rule for each of my main areas of my website so basically every one of these main little wrappers we're gonna set up a CSS rule for so we can go ahead and delete now this little temporary rule because we're going to be adding individual background colors here so we'll just start out here with the header so so we'll open up our header rule here and we're gonna say background color um green I'm just gonna start assigning sort of random values here so there's my header probably makes better sense to actually assign these things the same colors you have over here in your mock-up that way you don't get yourself too confused but I'll just do randomness for right now so we have the header and so I'm gonna save that you can see that turns green then I'm gonna copy this and I'm gonna paste it one two three whoops actually before I paste that sorry getting a little ahead of myself I need to add in the grid template area so I'm gonna give this guy a grid area and this is a named area and I'm just gonna call it header so I'm just gonna use my same class name as my grid area name you can name your grid areas whatever you want but now that I have that in there let's go ahead and paste this one two three four five six and we'll just rename all these so this one right here is gonna be my featured a header and we'll make this one I don't know purple or something this one over here we're gonna call our featured main I think we called this yep featured main that's this one right here and we'll make this one orange and then we have our featured little profile picture we call it feature profile blue we haven't used yet and this one is our content we call this guy it'll make it black and then the footer is the last area and we'll make it I don't know grey or something so this one's the header this one it's gonna be just we'll just copy and paste these featured main we'll call this one feature headed profile content footer okay so that should work now we can't see these guys in our layout because when now we need to go set up our grid template areas so we've defined every single one of our blocks and we've given them a grid area but because this guy has a grid area of footer we haven't defined that grid area yet so that's why we can't actually see it in our mock-up so now we come back up here to our master ripe wrapper and we'll define this grid area so this one's called the grid template areas and this one is kind of a fancy property so the reason why we're using this grid template areas we don't have to use grid template names or grid template areas but I think they make it fairly easy and it's a nice visual way for people learning the CSS grid to work so the way the grid template areas works is it's basically it's kind of confusing when you start out but the the rules here basically are a representation of your visual layout this will make more more sense here so for example in side of our XD template our main header where we're calling the right this the main header area it spans one two three four five six columns in other words it spans all of the columns okay so the way you would write that out then in here is you imagine that the first line here is each of your columns so I would say literally I would say header space header space header space header space better one two three four five space header okay and then save and now you can see that that's one two three four five six meaning now my header is spanning six of those columns okay and then we're just going to go ahead and hit return here and then we do our next row so let's jump over here to XD this featured content area is the same way right it spans all six of those columns so I'm going to copy this right here and this will go inside quote so one two three four five six we'll save that and you can see now my featured header spans six columns and you just kind of rinse and repeat I'm going to shrink this down quite a bit here and then pull this over so we can see this and that'll be a little bit easier to see there we go and we just continue so the next row here is what the next area is this one and you can see first one it is going to be blank because it doesn't right it's not a fluid right there so this one's blank and then it's 1 2 3 and then blank blank ok so we can come over here and set this guy up so for our third row that first column is blank to do a blank you say a period then that's going to be this element right here which is our featured main so I'll come down here and copy this so our featured main is gonna span one two three columns right so if you remember that there's one we can see 0 C over here 1 2 3 okay and then after that our featured profile is in that fourth column right that's that div right there so that's the featured profile on the 4th and then the 6th or that's the fit sorry the fifth and then the sixth is blank so then another period on the end okay and we'll save and refresh and you can see how that lays out right blank that one spans the three columns that's the 4th I keep saying 3 meaning 4 in the middle so it's really 1 2 3 4 5 and then 6 is blank yeah I said two three four five two three four then five is the feature do you get the idea all right next and let's go down to our next row so let's just import XD so our next row is this guy so it's gonna be blank and then it's gonna span two through five and then six is gonna be blank so same thing we'll say whoops get my cursor in there blank on the first one and then the content is going to go one two three four and then blank on the end and then we'll save that that looks great and then our last row is our footer so it's going to span the entire area so I'll come down here and copy the footer word and we will go one two three four five six because the footer spans again the entire width notice how now my footer is also going all the way to the bottom of the screen and that's because that last row is set to one fraction so it's going to take up all the available space which is really cool and that's how we're going to be doing our layout so you can see just in I mean that's actually not a lot of lines of code I don't have my line numbers turned on here but in not too much CSS we essentially have most of our CSS mock-up or our wireframe pull this back open you can kind of see how that behaves they're in place so you just want to make sure that everything is matched up to your mock-up so your mock-up right inside of here should be all replicated now inside of your design right here now that grid gap property that we set up earlier is just to kind of help us see those columns and rows I'm now gonna set that back to zero pixels because I want those columns and rows too but right up against each other I can space things out with margins and padding when I start adding content and later okay so that is essentially how you do your CSS wireframe and mock-up from your XD template alright now that we have our desktop CSS wireframe essentially all done we're going to move and do our mobile CSS wireframe now the great thing about CSS grid is it makes it so easy to do responsive web design for your mobile wireframes so what we're gonna do is we're gonna come over here and create a CSS media query so we're gonna use the ampersand and then we're gonna say media media and then we're gonna set this guy to a we're going to say and we're gonna set it to a max width so we'll say max - width again this is kind of up to you I'm just gonna use 480 pixels which is a semi common a value for phone size for mobile phone size so that's going to be the constraint and then let's just go ahead and change one thing to make sure this is working so we'll change our header and well let's just override the background color too Oh yellow okay so at below at a maximum width of 480 this should be our CSS so let's go ahead and see it actually it looks like how to say a syntax error here and it looks like I'm missing the screen you have to declare what type of media so at media screen' and max width for you let's save that there we go now we got our yellow on there so now I can come in here and resize this guy I'm going to pull this up and resize here and you can see when I get above that threshold we go to yellow to green yellow to green so I know my media query is working you always want to test that again before you start writing a bunch of code so now that I know that my media query is working I'm going to delete that little rule and all we have to do is basically override this grid template areas property so I'm gonna copy this fact I'm just gonna copy this whole entire rule and then we'll just delete the stuff we don't need so let's paste that rule down into here and we will delete essentially everything but that grid template areas and that's basically all we need to do so all we need to do is come over here and check and you can see on our mobile design really every column is a hundred percent wide that's all we're going to change so I'm going to come in here and we're gonna add that in now you of course have make them to make some determinations you can see here that I've decided in my mobile version to completely eliminate this div right here which is my profile so it's not even going to appear here so I'm still going to have the one two three four five main rows I'm gonna want to eliminate that one okay so what we can do is just make sure our header is already going all the way our featured area is so this one right here our featured main is just going to go all the way and instead of having the profile there we'll just have featured main two times our content is going to go all the way as well and the footer already goes all the way and then we'll save for that so let's see that's 1 2 3 4 5 6 1 2 3 4 5 6 and that should do it ok so let's test this out over here now so jump back over here and let's some resizing so there's our desktop view right how that's working when we get below you can watch this number right here when we get below 480 s when we should see that breakpoint happen so right about there we go so we snap at that point and it looks like we have one issue here this is the oh yeah the profile is still showing up down there so we need to now do one more rule so we're gonna say for the profile featured profile we're just gonna say display:none so we're gonna just basically turn that div off there we go and now we have that all stacked up on our mobile design and there's desktop and then boom there's our mobile so that's why the CSS grid is really nice for responsive web design because it makes building a responsive website pretty easily you can rearrange those divs in any order you want right in the single property and you're done so that's pretty much it so there's our mobile wireframe there is our desktop CSS wireframe they match up well here to our mock-ups that we designed earlier and we've now taken that website CSS mock-up or CSS wireframe to completion so that's gonna finish out this video in the next video we're going to be working on the actual content so we'll go ahead and remove all those little background colors and we'll start swapping it out for actual content paragraphs images menus links hover States all of that goodies will build all of this menu from scratch and CSS purely and we're going to be using the CSS flexbox to help us arrange things in the next tutorial so join us for part two thumbs up subscribe like and we will see you in the next one [Music]

Channel: FollowAndrew

Views: 12,644

Keywords: css, html, Adobe XD, xd, xd to html

Id: wAUQSuiflbE

Length: 32min 54sec (1974 seconds)

Published: Thu Mar 19 2020

Reddit Comments

[u/wilsmex]

Author here. Released a new video. This covers the entire process of converting an Adobe XD document to a live HTML & CSS responsive website!