Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Create the Basic Shell

With our template prepared and images exported, we’re ready to start coding. We’ll start with the basic shell: creating our required documents, adding basic HTML, linking in our stylesheet, and loading the fonts we’ll need.

The last element of our groundwork is to set up some base layout classes we’ll use throughout the content of the site.

Related Links

2.3 Create the Basic Shell

Hey welcome back to Figma to HTML. In this lesson we're gonna go ahead and create the basic shell of our site. So we're gonna create the essential files and put in a bit of the essential code that's going to form the basis of our site. I'm working in VSCodium here as my text editor, you can use any text editor that you prefer, VS Code, Atom, Sublime, whatever you prefer. And I've already opened up the folder that we've been working inside this text editor, so it's showing me the sub folders that we already have as well. In here, I'm gonna create a new file, gonna call it index.html, and then while I'm at it, I'm also gonna create a style sheet and we're going to call that style.css. All right, so inside our index html file, we're gonna add in just the basic wrapper of code. If you're working with VSCodium or VS Code code, or if you have Emmet installed in your text editor then you can just put in an exclamation mark and hit Tab and that's gonna give you all of your most essential code. Then we can create a new title, let's just call this Travel Site. And we're gonna load in the style sheet that we just created. So create new line, type in link hit Tab. Now we could just type in the name of our style sheet and the next thing we need to do is load in any fonts that the design is going to need to use. So if we go back to Fgma we can start looking at some of these texts elements and see what font is being used. So if I hold down Control, I can click on this logo, and you then over here we can see it's Roboto, same thing on the text here. However, you'll notice that the font weight has changed, so gonna need Roboto medium. Just go back and have another look at this. You're going to also need, double click to edit in here, bold. Light, so we're gonna need light, medium, bold. Up here we need regular Roboto, so these are all Roboto, but just using different font weights. Roboto is a font that's available on Google Fonts, so we're just gonna load it in from there, so let's just search for it. There it is, so we'll just add that. Now, we'll open up this little box so that we can hit this Customize Link here so we can decide which weights we wanna bring in. And we saw that it was using light. Regular is already pre-checked. It was using medium, and it was using bold. We didn't see any other font weights and we didn't see any italic text, so that will do. Now we can go back in the embed tab and we can just copy this link here, and now we can paste that in, right above our style sheet. All right, so now let's add a little bit of basic CSS and a couple of basic layout divs into our site. The first thing that we're gonna need to create is some type of a wrapper. If we look back at our design and we'll just zoom out so we can see it all. Of course, we went through and modified this layer, so that the main content of our site would be encapsulated in this rectangle with a light border around it and would be separated from the main background. So we're gonna create that wrapper by making a class and naming it Wrapper and applying it to a div in our site. So inside our body, we'll just type .wrapper, and then hit Tab and that's gonna create that main wrapper div. We'll just save that out, and now in our style sheet let's create a new class, we'll call it Wrapper. We're actually gonna give it a width of 100%, and we're gonna control the width that it shows up on the screen with the max-width property. So we know that our layout is 1440 pixels wide and that means that we don't want our content to ever get any wider than that 1440 pixel amount. So we're gonna say max-width equals 1440 pixels, or if we wanna have that as a rem value, and again, I would link to some courses and tutorial materials on benefits of using rem values. And we can divide that number by our base font size which by default is 16 pixels. So if we say 1440 divided by 16 equals 90. So we'll change that value to 90 rem. And now our central pillar of content will never get any wider than 90 rem, but because we're also setting the width to be 100%, it also has the ability to flex to 100% of any amount of space smaller than 90 rem in width. Now, we also need to center it, which we'll do just by adding margin 0 auto, and that is the basic code that drives our wrapper. Now we wanna be able to check on our progress as we go along coding up this site. For that, I recommend the extension Live Server for VsCode or VSCodium. With that installed, all you need to do is select the file that you wanna preview, and then just hit this Go Live button down the bottom. It will spin up a local host server for you, and open it up in your default browser. So now if we open up DevTools, we can see that our wrapper is in here. If we hover over this box model representation of our wrapper, we can see that it's centered, and we can see that it's coming at 1440 pixels wide. All right, so now let's flush this out a little bit more. The first thing that we need to do is a couple of little tweaks to the html and body element. You'll see there's a bit of a space above where this wrapper element is appearing. And that's because by default, on every body element straight into the browser, there's gonna be an 8 pixel margin. So I've selected the body in the inspector here and you can see here we have an 8 pixel margin. So in our CSS, we're gonna create a body element and we're gonna set the margin on that to 0. And while we are at it we also wanna make sure that the html and body elements are always taking up 100% of the available height. So we're gonna create a new style tag in both of those, and setting both of their heights to 100%. Now if we go back to our site and we select our wrapper, you can see that it's no longer got a space above it anymore. Now let's actually add in some of the styling that we need. First up let's set our overall background color which will apply to our body element. So if we get back to Figma we can select that out of frame that we created before and copy this color code. We know that most of the sections in our main content area need to have a background color of white. So that's the first thing that we are gonna add in and we're actually gonna use CSS variables to drive our colors. You don't have to do this but it can be quite handy using CSS variables for colors if you decide that you need to change your later you only need to change them in one place. So first up, let's define our variables. So we're gonna add in :root. And now let's make a new variable, it's gonna be our main background color for our main content. So we're gonna give it two dashes and call it --background_color_one. And we're just going to set that to be white. So now down in our wrapper, let's add that as our background color. And here we're gonna say va, put a pair of brackets, add in our two dashes, start typing out our variable name, and VSCodium will auto-complete it for us. And we can select the one we want and end our line. Now, let's set the background color that's gonna go all around our content. So if we go back into our Figma design and select the outer frame, let's copy our color-code here or we can go into Code up here and copy the color code from there instead. Define a new variable, this one we'll go background_color_two. And then we're pasting our color, I'm just going to copy this line into the body section. That's gonna make it just a bit quicker, and change it to background_color_two. Now, let's temporarily give this wrapper a minimum height of 10 rem so that when we look at our preview we can see how the wrapper's looking. All right, so there we've got our wrapper with the right color, and the main area with the right background color, so that's all looking good. We still need to add in our border color that we set up before, so we're gonna put that all the way down on the left side and all the way down the right side. So let's look at Figma again and we'll find our rectangle that we set up before. Here's the border that we need for them so we're just gonna copy that whole line of CSS. Go back to our CSS code and just gonna paste that line in. And we don't actually need this border to be at the top and bottom of this wrapper we only need it to be at the left and right. So I'm just gonna modify this line so that it says left and copy and paste the line, and change the second one to say border right, so that will give us a border on the left and right sides. All right, so there's that border, that's come up just fine. And then we're just gonna change the box sizing setting on this so that the borders are appearing on the inside of our box. So let's change it to box sizing and we'll go with border box. And there is the border coming down the right and left sides so that is all perfect, just how we want it. And also if we go into responsive mode here, you can see how these blank outer areas that we set up before are working just how we planned. And as we crunch this down then the rest of the content is gonna crunch down with it. Again, we're not doing a full responsive build with this site just to keep the focus on working with Figma and some of the CSS techniques that we're gonna be using. But by combing that max width and 100% width settings you've got the foundations there for a full responsive build to be done later. And then the last thing that we're going to do, because we know that the Roboto Font is used on all the text in our site, we're gonna load that in and apply to the body element. You won't see it work yet because we don't have any text elements in our site but we're gonna load it up anyway. So we're gonna say font-family and then, we're gonna use one of these built in font stacks, it gives us a whole bunch of different fall backs just in case our Google font doesn't load. We're gonna choose this Segoe UI and end the line. And then, before that we're just gonna add in the Roboto Font, add a comma, and now our Google font is being loaded in, and there's a full back stack as well. And there's just one more basic layout class that we are gonna create, and that's gonna be a class called Inner. We've set up our wrapper class to take up this width that we set up before to be fixed at 1440 pixels. But if we look at the content inside, there's actually an inner area that the content itself doesn't go outside of. So inside our wrapper class, we want to create another element we're gonna call Inner that will keep our content confined to this inner space here. To do that we need to figure out what width this inner content is and for that, select that knife treble frame that we started with again and then over on the right you can see that this design is using a layout grid. If we turn on the columns, it shows us the width that we're working with here. So, we're just gonna use a quick and dirty way to check the width of set of columns. We're just going to draw out a box, make sure that it snaps to the edges of these grid lines. Then we're gonna look at the width, and we can see up here that width is 1170 pixels. Let's delete that again, and turn off that grid. Now because we're gonna be using rem values instead of pixel values we're gonna take 1170 pixels, divided it by 16 and that gives us 73.125 rem. So now let's make another new class and we're gonna call it Inner. We're gonna use this same type of code that we used on the wrapper where we have a 100% width, everything is centered and we're using a max width, and then we're gonna replace this rem value, with 73.125. And the way that we're gonna use this class, just refer back to our Figma design, is we're gonna create a div for each one of our sections. So, for example, this one might be called top underscore header, then we're gonna put another div inside that and we're gonna apply the inner class to that. Now these outer divs, like top header, they might have a fixed height, and we want the inner div to take on that height. So for that reason, we're also gonna set our inner class to say height, inherit and then it will always expand to fill the height of its parent element. Let's give it a quick test over here. So again looking at our Figma design, we're gonna have three different headers here. They can all get nested inside a header element, so we're gonna say header. Our first element is gonna be called top_header, so let's add that in. And then inside that is where we're gonna be putting our inner class. So now, let's take a look at our preview. So now, our header has shown up here. And if we expand inside, there's our inner element and you can see from the box model projection, that just as we intended this has come out as 1,170 pixels wide and it's centered inside our wrapper element. So now that is all our fundamentals ready to go. The essentials of our code are done, and now we're ready to actually start coding out the individual sections that comprise our content. We've made a bit of a start on the headers and that's what we're gonna move into it more depth in the next section of the course and we're gonna start by creating the top header section of our design in code. So for that, I would see you in the next lesson.

Back to the top