HTML CSS Easy steps to create a web template from scratch | Laurence Svekis | Skillshare

HTML CSS Easy steps to create a web template from scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 3m)
    • 1. Intro Video

      1:13
    • 2. 1 How to make a website template course introduction

      2:37
    • 3. 2 Resources used in the course

      2:52
    • 4. 3 How to make a website template HTML structure

      5:16
    • 5. 4 attaching style sheets

      4:43
    • 6. 5 How to make a website basic HTML5 page struture

      6:08
    • 7. 6 How to make a website add a navbar

      6:55
    • 8. 8 How to make a website setting ids

      3:07
    • 9. 9 How to make a website template Box model padding

      6:22
    • 10. 10 How to make a website template hover colors

      5:21
    • 11. 11 How to make a website template CSS floats

      7:02
    • 12. 12 How to make a website template center fixed width

      3:33
    • 13. 13 How to make a website template mobile ready

      7:37

About This Class

HTML CSS Easy steps to create a web template from scratch

Complete easy to follow guide to create your own web template using HTML and CSS Quick Crash course for beginners

Crash course to learn how to create HTML and CSS web templates. HTML5 web template design from scratch.

Learn to create your own web template from scratch in 1 hour!!!

This course is designed for anyone who wants to better understand how to create their own websites, within this course we show you how to make a basic web template from scratch. You can reuse and update this template to make unlimited websites.

Step by Step guide

Learn how to create HTML code
How to structure an HTML5 web template and common tags.
Add a nav bar for navigation explained
connect HTML and CSS ids, classes and tags
Box model explained
Floats and fixed width
Make it RESPONSIVE and mobile ready
This course is designed to be easy to follow along, its encouraged to practice the code being presented through out the course. Resources, source code, and everything you need to learn to make websites is provided. Start with simple HTML structure as we explain how it integrates with CSS.

Learn about web design and its core concepts and much more.....

We walk you through step by step with detailed explanations of code and more.

quick lessons get right to the point
fully covered topics with real world examples
source files downloadable to work along
challenges and lessons and code samples
code snippets
Links to top resources to save time
30 day money back guarantee
new course material added regularly
trusted name in education since 2002
full HD easy to read source coding
quick response support to students
regular discussions
We teach you the latest techniques and tools to use in order to create amazing web content. Everything you need to know is included in this course. Learn at your own pace, lifetime access to this course.

Transcripts

1. Intro Video: welcome to our step by step course how to create a website template from scratch for you. Show you, HTML and CSS how to structure your c html and apply CSS. In order to create your very own Web course, you're gonna be familiar with concepts of HTML CSS and websites structure. I've been a Web developer for 14 years. I'm gonna be sharing my knowledge with all of the source code resources links to everything that you need in order to get going quickly. Building out your own HTML CSS templates isn't with course. We're also gonna be guiding you step by step through. This course is designed for beginners or anyone that wants to learn more about how to make HTML CSS Web templates and Web sites. This course is the perfect introduction to HTML and CSS. So when you're ready, let's start building some Web temples. Let's speak 2. 1 How to make a website template course introduction: welcome to our website template from scratch HTML and CSS Course. My name is Lawrence, and I've been a web developer for over 14 years. I'm gonna be sharing my knowledge with you. We're gonna be using tools like Note pad and code Pen I'll so you can also follow along by downloading note pad or using your own editor. Or you can work with one of these online editors, such as Code Pen I'll in order to write your HTML and CSS code and build out your own template where would be starting from scratch with a blank page and talking about all of the different HTML elements that were going to be adding in in order to design this fully responsive website and from there, once the website is built, you can begin to customize that your as your own and continue to build out websites and Web pages. Using this type of templates structure, it is encouraged that you do fall along. We're gonna be providing all the source code resources links necessary in order to follow. Along with this course, we're also gonna be going step by step. So when we build out our HTML page we're gonna be adding in our navigation bar, header side menu, content area and footer. This is gonna be a typical website structure. And once we've built that out, we're going to begin to style it with CSS and really begin to make it look like an actual website and a Web template that you can work with and build out mawr content on S O. This is just the code for the navigation, the menu, the main content footer. And then afterwards we're gonna be talking about how to make your Web page responsive, so mobile, first thinking and have it actually resize and readjust when the screen sizes smaller. So we're gonna be finishing off the course with that and as well, we're going to be providing additional resources and links as they become available and updating this course as new material becomes available. It's also encouraged that if you have any questions or comments, you do post them in the forum. I check them on a regular basis or if you want to contact me, feel free to message me anytime. So when you're ready, let's begin courting and creating our own HTML templates. 3. 2 Resources used in the course: within this course, I going to be showing you how to make a website template from scratch using HTML and CSS. Now, within this lesson, I'm gonna be going over the tools that I'm gonna be using in order to create this web template. One of the resources that I use is code pen dot io. So this is a free resource where you can go and you could type in html code and whatever you type in, you immediately see here within the preview window within the design area here. Also, we cannot in CSS and we cannot in javascript, which is going to be useful for this template that we're going to be designing for editors . If you want to download an editor to use on your own computer, there's a lot of different ones available. I'm gonna have a list within the resource section of this course, but we're also going to be using note pad within this course, um, on a windows machine. But you can use note pad on a Mac as well, or you could download one of your favorite editors. So all we need to do is have the ability to type in code type and text and receive it. Ah, and what you want to do is save it as an index file. So index dot html is the ideal file. And then when we opened that up in the browser, we're gonna actually see the output of that HTML file within the browser because the browser is the one that's gonna be rendering out that content. I'm gonna be using chrome as well throughout this course, but again could use your favorite browser. They're all gonna be able to render out html CSS and JavaScript code. So again, there are a lot of different text editors. And as you progress with your web development, you're probably gonna find one that you're gonna be most comfortable with and then continue to use that one ongoing. So note pad is a great place to start. There's a few other ones, such as brackets and a lot of different open source ones that are really good as well. And they actually even help you guide guide you with the code, so they're gonna be allow you to create code quicker. But when it comes to HTML, CSS and JavaScript, it's fairly basic language that we're gonna be typing in. We don't have to render it. Whatever we type in the browser can actually interpret that. Bring that code in and out, put it as actual cold within the browser for the user. So when you're ready, you could either use code pen or download note pad or your favorite editor. And let's begin with the course, creating our own Web template from scratch. 4. 3 How to make a website template HTML structure: So now that we're ready to start creating our website, what I'm going to be doing is I'm gonna be using note pad in order to create our basic structure off our website. Now, I've got Alexa opened up here in the background, and I had originally gone to Alexa toe. Look at the top websites that are out there and as planning on may be trying to copy out some of the structure of a website in order to create a template for this course. Eso what I've also got here on the wire. I've got a wire frame tool and wire framing is when you dry out without all of the content what your website is gonna look like and this is a great way to start out with your website and website design and coming up with the concept of the site and eso I've chosen to do a site similar to Alexa where we've got our head information up here with maybe got some search navigation bar, two columns. So the left hand side column and a content area here on the right hand side. So it's going to be bigger than the left hand side and then it's got a clearly defined footer as well. And this is a really good typical website design. So we're gonna be building out something similar to this. And when I look at the source of this, I can see that all the websites that actually open up the same way So they've got this doc type dot html and this is going to indicate that it's an HTML document. This is the new format for HTML five, and this is indicates that it's a brand new HTML five doc type. And then after that, we've got our opening HTML tag indicating language English on. Then we've got head opening and had closing. So it's over here and then we've got something called body and that opens up and then we've got her body closing there at the bottom and then html. So this is a really good typical website structure eso again a really good thing to kind of look at and get a better idea of how the websites air structured. Now all websites are gonna be structured in the same fashion, so we're gonna go ahead and start creating our web structure. So the first thing we want to do is declare the document type. So this is just doc type html and this is gonna let the browser No. What type of document it's gonna be expecting. And it's an HTML document. Now, just as what we had looked at in the source code, we got our opening HTML and we have our closing HTML. So anything in between these tags is gonna be HTML and this is gonna be part of our HTML document. And now every HTML document should have ahead and it should have a body. Now, when I say should have it doesn't necessarily mean that if you don't include this, that your HTML won't work because most of the modern browsers actually smart enough to interpret if you're missing some of this structure or if you just simply type hello world, it will render that within the browser. But it is, um, it is ah, good practice. To get into Teoh, structure your websites properly and when it comes to web structure, this right here, these five lines of code or um, different seven different tags here are going to be a typical website structure that you can begin to start to create any website from, So we're gonna sleeve this, go out to the page when I refresh it, I'm actually not going to see anything. And then there's one other thing that I want to make sure that we include within this lesson before we continue on. And that's actually entering some additional tags within our head section of hte R html document and the one that I wanted to use that you should also be including within every page is going to be a title eso by default. If I don't indicate a title, it's gonna give the file title name appear within within these tabs and as well within search. It's going to show up as title. So it always is good to have a knack actual title for your Web page, and you can see here that even with Amazon, we've got or Alexa, we've got our title area here and again, very important to remember to include title within our website. So there they have the title there and again, opening and closing tags. So opening title and then content between the two title tags is gonna be the page titles. I'll just call it page title and then I got close off the title tags and save the document . I refresh it and I can see that I've got page title now at the top and we're ready to you begin adding some more tags and building out the structure of our website. 5. 4 attaching style sheets: within the last lesson we looked at how we're gonna actually we came up with our wire frame for what we want the website toe look like. And again, this is a great starting point for any website. Before you actually begin doing any code, you should actually have a written out or a drawn out plan of what you want to do and what you want accomplish. And this is gonna help you work towards that and created a lot quicker than if you were to working to be working off the top your head. So again, this is the type of structure we're looking at. We're gonna have a head area, navigation left hand, call them, and then a right hand column and a foot or area and then off. We can also add in the rest of these elements at a later point as well. So we want to create a basic template that we can reuse over and over again within our websites. And this is a really good structure to begin with. So opening up note pad again. What with what I've done here is I've created a typical style CSS peach and the good thing , the the good I The idea of creating separate CSS pages is that you can actually link to that one CSS file throughout all of your website. And then if you do make some changes within the website, you don't have to actually go on every single HTML page and update the CSS. So that's the whole idea of actually linking out to a separate source file for styling and as well for JavaScript. And of course, there's three different ways to bring CSS on your page so you can actually type in the CSS as an HTML tag and close style. So this will. This can actually hold all of your CSS and then as well when we get into the different elements, the page elements, you can actually apply styling right to that element directly. Eso We're going to show you that in the upcoming lessons as well, so I'm gonna just simply remove that out, and I want to actually just link out to my style sheet. And so what it's called. It's called style sheet type. And here is where we indicate the type of content it's it again is gonna be So. This is again for the browser in order to determine what type of content we're expecting. And then we do an H ref. So this is the same way that we do actual links within our HTML code, and then we just type the location of the resource of the the Earl of the Resource and because this is going to be located on the same directory, just going to style dot CSS. But if I was actually linking out to ah file somewhere else on the Internet, I could be very well linking out Teoh, http and then the domain and then where the file is located. And so I'm just gonna close this off. And there's one thing to note here that when we're looking at this, you might realize that. Okay, well, all of these other HTML tags we've been opening and closing, but this particular one it because it's gonna hold all of the attributes, information within the actual tag. We're not actually opening and closing, and there's gonna be actually no content that's gonna be between these tags. So these air not content tags, their attribute tags, and they hold all of the information that the browser is gonna need within this particular one tag as attributes in the tie, and that's gonna be an important difference between the two different types of HTML tags. So now when I go over here, I can actually linked to the CSS so I could do something like background for me. They can do background color, so you can also get into this later on all the differences and I could do red. And now when I refresh the page, we see that we have linked out to the the CSS and it's making our Web page red, which is exactly what we've done here within the code eso This is how you attach the style sheet, and in the next lesson, we're actually going to start building out our our Web template. 6. 5 How to make a website basic HTML5 page struture: So within this lesson, we're going to start working with code pen I'll and the reason that we're using no pad earlier is because Code Pen io doesn't require the header information. So it already directly links to the CSS page. So if I was actually go over to the CSS and if I was to take the body and then go back over to my web page and contain the body information, we see that it's already pre contained within code pen i o. And this is why we didn't have to actually link it out. So I'm gonna just turn this down a little bit color wise, we do still keep our background, but we're going to keep ah, little bit just off white background. And of course, we're gonna be updating this later on. So now we're going to get to the important part about the HTML, and then afterwards we're going to look at how to structure the HTML using our CSS. So the first thing that we want to do is use what's called a diff and dibs are gonna be one of those common elements that you gonna use within HTML. And I'm going to give this Div on I d. Now, the way that I DS work in HTML is that every page you can have one element can have an i d to attach to it. You can't have multiple elements with the same idea attached to it because ideas are gonna be used in order to identify it within from CSS or from JavaScript. And typically we might want to call it something like our container so that we understand that this is our main container that's gonna hold all of our website content. And a div is another one of those HTML tags that opens and closes and all the content in between there. This is gonna be related and contained within this def. Now with each TML five, we got the introduction of header. Previously, we would do something where we would have headers and we would have different would have dibs and we would give them ideas of headers. Eso Now we're just going to use the header element So header and now section footer, they're all gonna work the same way as dibs. It's just gonna be something new that's been introduced with HTML five and again and it's just a better way to structure websites, just something that makes sense. So I'm gonna go up and close off the header, and these all need to be open and closed. And the good thing about code pen. I've got this tidy here, and this helps me reformat my code, so it looks a lot more presentable. The next thing that I want to enter in is knave. And so now this where we're going to place our navigation bar. And when we go back to our wire frame, we can see that we're actually started to build out our website exactly what it looks like here in our wire frame. So our container is gonna be what contains all this information of our web page. And we do differentiate that from body because body is the entire contents there. And if we do wanna have something that actually flows out of our main container area or isn't contained within the container area, then we were able to do that a lot more effectively by breaking it up and creating a separate container that actually contains all of the HTML code that we need for our page. So I know it's probably ah, long explanation, and of course, you can always structure things the way that you want to structure them. But this is just a good practice to get into tohave one that's a container. Or sometimes you might see it called rap or rapper. And when we go into our we go into Amazon. Alexa, we see that they also have the same kind of structure here where they've got the body and then they open up with a header on the giving the header on I d. And here they actually do do something different where they have a div with a class for top . So obviously they're site is quite a bit more complex, and probably hence the need to break apart some of that. Some of those dibs where they might want to contain them and separate them out eso for us. We're just gonna have one main rapper. So it's gonna be just the div i d header navigation section and so going back to here. So we see that we've got our section information here, and what we actually want to do is we want to create a signed so again with HTML five. We got the introduction of a side and the's are gonna all work the same way as dibs. Eso It's not, actually, um, just a way to present the code better html format, html five format and then lastly, we've got our footer and then are closing footer and I'm gonna simply clean this up. And right now, this doesn't really look like a whole lot. But in the next lesson, we're going to start doing all the really cool stuff and actually building up, placing some content in here, creating navigation area, updating that and then, uh, we're gonna finalize it with the CSS, and it's gonna really come to life s Oh, this is Ah, this is the starting other HTML template and coming up, we're going to get into some really interesting stuff 7. 6 How to make a website add a navbar: So now within this lesson, we're ready, Toe, actually start adding some content and having something show up here on the right hand side instead. Just some code eso What? The first thing that I want to do is I want to add in each one tax. So these air headings a different than headers and headings are HTML code that is actually highlighted and brought out. There's six different heading sizes, so I'm just gonna call it my heading, but we can see here on the right hand side, it's showing up eso there are a bunch of different sizes, So if you want something a little bit smaller, you can go to h two and so on and you could go all the way to each six, which is going to be the smallest one. But for s e o purposes, it's always a good idea to have these headings showing up large on your website. So we always have this typical set up where we've got not sure if this is in each one, but it probably is or this isn't h two. So in typical fashion were either using an H one or in each two depending on what size we want and then building down from there. So going back to our code pen, we're just going to start off with an H one. And if we had some additional headings on the page, we would could go down from there. We could go h two h three h four and all the way down so highlighted content here. And maybe we could just call this company so it looks a little bit more relative to what we're doing now. Typical navigations. What we use and navigations are a nor did lists. But we flip over to our Alexis site. We see they do the same thing, so they use on a northward list, which is indicated and indicated by a u. L So you can also have an ordered list, which is an ol, and they're all gonna be the same way that they're going to contain list items. Eso list items are actually gonna be what will actually places the content within the list . So when I just do something like UL and close off the UL, it doesn't actually show up, has anything within my Web page because it's still waiting for list items, so I'm actually going to just copy out a few these list items. And these air also opened up with Ally and then closed up with Ally and typically within a list item. We're gonna also have these hyperlinks us. This is one of the reason that I want to actually pull these in and then with CSS is actually where we style it as a navigation bar. So typically these air just list items, and these are some pretty good typical on. So maybe I could have something like contact here about us and maybe get rid of a few of these. That's a little bit tools and really pricing planning not just tidy that up. So it within our menu, we're gonna only have four different items navigation items in her menu and tidy that again and again. These are gonna be opening and closing. And, um, we've also have ability here tender in attributes, just like we do with any element in html. Eso it got. We've got what's called classes and the thing that different classes were used. I d up here before, and what differentiates classes and I d is the amount of times we can actually use it so we can use classes over and over again as much as we like, and we can actually use thumb. So here they're in list items. We can use them in the footer. We can use them in that dibs. We can use them anywhere we want in order to apply that class styling to that. So just to show you more better example, so within our CSS if I wanted to identify a new I d element, I do the hash and I give the element names, so it's actually container. So if I do something like this and I'm gonna switch this back to read so that it really stands out, we see that it's no longer applying this red background or the colored background to the entire body. It's only applying it to the container. So this is different. And if we actually have a class, so if we actually give the use class nef bar something like that, something relevant. So here they have class active, and that's gonna be relevant when you using JavaScript or J query when you're adding an active classes, and that gives you that ability where whatever is actually selected gets highlighted. So here, see here that the tools is darker than the rest. And let's on the active one there. So I'm going to give it a class of naff bar, and I'm going to get rid of calling over to the I d. And I'm gonna call over to the class. And so how you connect with the class within CSS is you do a period and then the class name , and we see here that it's only accessing once that actually have that class. So if I change the class name, we immediately drop off our CSS styling to it. So those air the three ways that we connect with the various elements here in html s so we have the ability to do it by class. We also have the ability to do it by I d within this type of format, and then we have the ability to do it by tag. So if you want to do something like header, we don't have any additional any additional. All right, prefects us in front of it. We can just pick out any header elements within our HTML. Are you now going to get picked up and get a background of red. So almost looking at this and we had a slight error, their with quotation marks. Suddenly site that's fixed now and then as well. Within the navigation, you also gonna have all of these as hyperlinks. Eso We're gonna be styling those in upcoming lessons as well on were also in CSS. We're gonna actually make it look like a navigation bar. 8. 8 How to make a website setting ids: So within this lesson, I'm gonna add some additional content and I'm just gonna do h two here. And this is gonna be the actual sidebar h two. And so we can see that we're gonna add in that as a placeholder on and then this one is gonna be the actual content. So welcome to buy website Here is where So here is where the content will go. And then this is my footer and footer in food Quantock a copy, Right? The loser Just some typical things that you place into the footer s O. This is our typical website structure and now we can actually begin to start adding some CSS to it s So now we've got so right now, it really doesn't look like a lot of got our header there. And we can't really differentiate between it, and it's gonna be the actual CSS that's going to allow us to create that differentiation between the actual the actual HTML different elements within the HTML. And one other thing that I want to do here as well is that I want to actually be able to pull out the different items here, so I'm gonna just give header and I d of header just in case I usually like to do this just in case we re use header again because header and footer are typically allocated for sections as well. So in a section I could have a header and a footer within the section on. That's how the HTML five is structured. So if I still want to identify all of these different pieces, I'm gonna add in ideas to them eso I'm actually gonna be able to select out to them. So I'm gonna call these list items going to rename these toe list items and you can see here that when I changed to naff bar So naff bar is actually gonna have a class here, and then it would have an I D. As well. So I've given it an I d. There s Oh, this is this gonna be the sidebar is gonna be maybe another menu or something like that. So given an idea of menu and then this section is gonna be my main content area, So I'm just gonna call it being content and then here I'm going to give him an I D off footer And this is just so that I can better identify each one of these specific ones within CSS and in case I start if in case I reuse them again 9. 9 How to make a website template Box model padding: So the first thing that I want to actually work with is my navigation bar. I want to just update that and set that notice that I do have a nearer their those Those aren't actually hyperlinks there. And I do want to keep them as hyperlinks because they are gonna be navigation items. Quickly save this pen. And now I'm actually going to go out and start applying some styling to the knave bar and update this because this is an I D. That we're going to be actually grabbing eso. I could actually access this in two different ways. I could just do now, but I want to be really specific. So I wanna have with untidy of knave bar, and that's why I'm gonna be using a now bar. And this may be something that, depending on your preference, uh, how you want to be able to set up as well. So, backgrounds, I'm gonna give it a background color. And so I like to use grayscale when I'm unsure about which colors I'm going to use. And I'm just gonna actually get rid of that because that's not gonna match in with what I'm trying to do here? Eso What I also want to do is I wanna So I've got some nested elements within this navigation bar. So the parent is naff bar, So I'm gonna just reuse the nav bar. But I want to really pick down to pick out all of these different elements within my naff bar. And so the first ones that I want to actually access are ones that are a Norden list list items. So I could actually very well just do list items. Eso I don't necessarily need to do the an ordered list because if I want to apply to all of the Children of this parent, the parent is now far. The Children are list items that are nested within their and I do apply a display. So we've got this option to change it into in line block, and that should should format them horizontally. So now they're horizontal across there and we see that we are picking it up with the list item or I could do on on ordered list list item. It's gonna be the same thing. It's still gonna pick out all the list items within this I D. But if you want to be really good with the structure, you might want to stick with the an ordered list and then list items. It's also gonna add in some padding here eso with padding. There's actually if we go over and we do and inspect element, this is one of the reasons why I was actually going to be using It's gonna actually be gonna be using chrome because it's got this really cool. Dev tool Here s so this just opens up here. When you click anywhere you can go inspect, control, shift I as well and open this up and we can see all of the source code and then down here underneath the source code will look at elements. We got styles and within styles. We've got a new illustration of the box model over here s so this is the central point central content. Outside of the content, we've got padding and then outside the padding, we've got a border, and this is where border This is where padding and margin are different because margin is going to be outside of the border. Padding is going to be on the inside of the border. So if I apply a background color to here. It's gonna go all the way up to the border and it's not necessarily going to go outside of the border because this is where the main contents are sitting with it. Eso with padding. Utkan we see here, we've got on option here for top padding. We've got right bottom and left padding. So it works in a clockwise fashion. You can set padding individually so I could do something like padding talk, 10 picks or something like that and we see that right away. If I pick up those elements, I've got my potting. I need to inspect it a little bit better. There s so I've got my list item there. I've got my padding of 10 picks there at the top Now with padding. The really cool thing is that it's got this short form for patting as well, so I don't necessarily need to type in patting top padding left patting bottom. You see what happened there When I removed that out, it actually took the 10 padding all the way around. And this is what the box model shows us here on the right hand side that we have the ability to actually pick up and set different pad ings for all four spots were able to differentiate them. And we can also differentiate them within this short format as well. So I'm gonna actually give this 2% and so 2% is gonna be applied to the left and the right . And if I continue here, I can do also tend picks and then 2% eso writing this short form is gonna be the same thing . Eso I'm just gonna leave it at this, that 2% because I want this to actually adjust depending on how much content is available in the size of our page. But I want the actual height, the padding at the top and at the bottom and between the different items in the list toe always be student always want that 10 picks. And I don't want this adjusting depending on the size of the page s 02 different ways to apply numeric values to how much spacing you wanna place. And as you can see here within Google chrome, it actually calculates that out. So I just the page that 2% of the page actually changes its actual pixel pixel pixel calculation and this is all done within the browser, so you don't even have to worry about that. If you list out 2% you're going to get 2% of the page and whatever pixel value that actually comes to. 10. 10 How to make a website template hover colors: So I'm going to continue now. I'm gonna actually close this up. Close up, are deaf tools, and we'll take a look at that later on as well. Eso what I wanted to do now is eso there? It's actually looking a little bit more like a navigation menu. And of course, I want to get rid of these underlines because people are actually gonna know these are gonna be selectable items cause air within our navigation menu. So this is something that's already unknown. Yes, well, I want to actually keep my navigation items separate off of my list items, so I'm gonna go back down and select it all the different elements picked down to hyperlinks. So these are a tags, and I got to do something called text decoration, and I was gonna set up to none, and that immediately got rid of the lines underneath. And I also want to just this color because it's a little hard to see, So I'm gonna actually set up to you to be white. And also, I want to make the thought size slightly different. So community fought size and study using picks. I'm gonna use e ems because those are gonna be mawr mobile friendly. So maybe I'm gonna do one e m. And that's gonna be a standard 16 picks. So maybe I want to do 1.5 just to make that really stand out. And another thing since I removed those text decorations what I want to add in is, I want odd in when I hover over those I want something else to change. I want that I want actually the color to change eso that I know that it's it's selectable. So I had to do background now with background again. You might have seen that I'm using background color on, and also you can set the color by background. So now with HTML five, it's got a short form for backgrounds, so we can actually just do background and we can write out a color and this will, um, this will be interpreted as background color eso We don't actually have to worry about typing in background dash color, but this is the proper way to do it. This is the older way to do it. This is the new way to do it with just the short form and here of course you can add in addition, additional background informations if you have images and so on. This is a short form much like what we were looking at with the padding and with margins, short way short form of doing it. And actually, when a shrink this down a little bit to find that that's a little bit too large and also so , I see that I do get these backgrounds. And maybe another thing I want to do is change the color of the font eso when it's hovered over, maybe wanted to. So this won't be exactly as Aziz bright as the white eso just changing things a little bit up. And also maybe I want to add in some padding on this level here as well eso again. This is all depending on how you want to set. It s so I'm gonna remove at some of the padding on the list items itself. I can add it in on the girls or I can actually add in some patting down here. So if I do something like patting five picks or something like that just to see what that looks like, it looks a little bit better looks more like a navigation bar and might want even shrink some of this down. Now that I've added that in eso Now this size is going take up the full spacing And again, this is up to personal preference. You can re calculate it. You don't have to believe this much space in between. So it can also even set this to zero. If I wanted to, I could also set that to zero, and we can see that where Maybe it's bring that back to 2%. So again, a lot of different ways to approach this do 1% potting. That's not gonna work. So I've got to set that at zero. Just so we get that hovering over effect and in the next lesson, we're gonna actually be starting to structure out that content and create the two different columns and then separate the header and footer and then we're gonna be ready and set with our template. We're gonna bring it into no pad, put it on our web page 11. 11 How to make a website template CSS floats: All right, so now we're beginning to be We're ready to actually start making our page look more like this. Where we've got on the two columns here s O the way that would do that. And again, looking back at our HTML. So we've created one called a menu and one called Main Content, and I'm just gonna access them down here. So I'm gonna use this one because we're not actually using i d. We don't have an i d. And I'm gonna set this one up for the upcoming lessons. And then we had another one here that we called main content. So, actually, how to create two columns, a typical two column website and what you use is use something called a float. So I want to float my menu on the left hand site, and I actually have to give it a width. So I'm going to give it Ah, fluid with so much like what we're doing at the top with the navigation bar where we had 2% there. I'm going to give this eyeball it here. So roughly 25% of the size, so 25% is gonna be my left hand menu. And I'm also gonna add in some padding eso gonna do padding as a percentage as well, and I give it 5% padding. So again, this isn't going to affect the actual size. If I went margin, that would actually push outside of the boundaries and that actually have to take up 30% instead of the 25% that I've listed out here so again, difference between padding and margins. Eso this one. I want to actually float over to the right hand side and I want to send me with for this 1 to 75%. So that's going to take up the rest of space that I have there. And for this menu, I'm actually going to give it a background color. And I gotta set the background color to the so much what we have at the top there and again . Remember, this is gonna be our footer there, so maybe I don't want it exactly that dark and also again looking at this page, we do have ah split between the content here at the top. We do have something else here in the middle. Eso again, depending on personal preference. You could move this all the way up to the top. So if you didn't wanna have any padding there, we'd have to actually take care of it on the menu as well. So we could do something. So going up to the naff bar if actually added a border? Eso this. This is because we're using a naff bar. Um, and this is actually where that space is coming from because the knave bar is setting that default spacing by default because it's a naff bar. So if I want to add in ah, border or something like that, we can see that right away we lose our white space and that spacing in between there s so if you do want to get rid of that default spacing, you can, um you can remove it out of the nav bar. We can set a border. You can actually set less spacing and so on. And in this fate, we actually do see the padding a little bit better as well. So you could remove out this a Norden list padding from the top and bottom, and remove out on begin to reduce that spacing. But for this purpose is of this course and this lesson. I do want to keep that spacing in there because I like to separate out the knave bar separated out from the rest of the content. And so lastly, we've got our content here in the right hand side, and I'm actually going to do the same thing that I've done here for potting because I don't like it that I've got my content automatically right beside their. So I just realized that are welcome is down at the bottom. And that's because the calculations are off for the padding, so I can actually decrease this to be 2% and 2% plus 2% is gonna leave me 21 there. And over here, I'm gonna change it to 71. And this would bring us back Teoh taking up that full percentage and then for the footer itself, I want to set a with of So we're using 2%. So I had to set this to a width of 96% and I'm gonna give it potting of 2% as well and save that and just see what that looks like. And because I am using floats here on the left and the right. What's happening when the footer comes along is it's trying to actually float it as well to the left hand side. So what I want to do here is I want a clear in and clear out both, and that's gonna move my foot or down to the right spot on. Also, I only give the footer on background, so I'm gonna give it a background color. Do black and I do color so white for the text. And I'm also gonna get give it a margin. So just I want a margin there at top. Sandhu 10 pick at top and the rest is gonna be zero. Actually, what I'm gonna do is I'm gonna bring that down to there, to be 20 picks margin at the top. That's gonna look a little bit better. Save it, tidy it up a little bit. And so now it's turned to look more like a website and a Web template, and this is the CSS for it. And now I can continue to format out ahead section as well, which we're going to be getting into and finalizing this source code in upcoming lesson 12. 12 How to make a website template center fixed width: So I want to finalize this code by updating the header. And then I also want to update my entire container. So I just copy that out. Bring that down because these are the two that I want to work with. Within this lesson. Eso What I'm looking at is my container. Right now it's a fluid, so it's across the entire page. So even when I resize it, it continues to grow. Eso I want to actually update that and I want to set a max with for it. And typically you go C Max with something like 1200 pixels or something like that. So that that way, once it gets to a certain size and I should actually shrink this back down to the regular 100% we see that it actually contains itself and it doesn't flow outside of given area. And also what I want to do is I want to center it so I can center it by adding in margins, and I want to add in a margin of zero. But I also want auto margin, the left and right, and that's gonna actually center that content. So when it shrinks down to less than 1200 picks. It's centered. And if I get or once it shrinks down to less than 1200 picks, it's going to be fluid once a larger than not it's gonna be it's gonna be a fixed with. So that's Ah, that's what I wanted to add in and as well for the header I want to add in maybe a background color. So just so that we can differentiate that as well. Eso I'm gonna actually set and again working in that gray scale, um, and setting the color. So maybe I really want this to stand it. So I'm gonna stick with with white. And there's also short forms for instead of previously I'm just doing a bunch of characters repeated characters. So you do short forms like this. So this is the same thing as the six EFS. You can do three on these air just short forms for these, uh, longer repetitive, repetitive hexi decimal numbers for the color combinations. And then oh so well, we were doing some preset colors, was typing and red and blue, and so on. A bunch of preset colors that are ready to be used within html and CSS. So now I'm ready. I'm just going to do a quick tidy another quick tidy. And I got a copy this code and go back over to my page here. And I want to copy everything between the body area here and then as well. I want a copy of that CSS. So go over to CSS Paste that in, and I can go over to my page and refresh it. And I see I've got the exact same thing that I have in code pen when I resize, I've got the different sizing and so on. So actually notice what I'm reciting this sidebars over overriding that. And it's not actually scaling really well for mobile. It's not responsive yet. Even though it does resize and it does scale, we have to make some adjustments for mobile, which we're gonna be showing you in the upcoming lesson. 13. 13 How to make a website template mobile ready: So I'm just looking at the bootstrap CSS. And this is a really good guide for when we should break for responsive. And we can see here that small devices it's got this number off 7 68 and smaller, and this is where bootstrap is breaking it. So boots drop. If you're not familiar with bootstrap, it's the most popular CSS html JavaScript Ah, framework available. And it really allows you to create websites, quickly works on this grid system, and when you shrink it down, you have the ability to customize the different functionality depending on the grid. So the grid system is bunch of different columns and these air the set sizes. So on small devices, it's got this thing called the media here, and this is where you actually able to customize the break points. So we're gonna be applying the same thing to our website s when we shrink it down. What I want to do is I want to adjust Thies to go into stock one on top of the other. Instead of being a horizontal, I want to be vertical, take up the full width and also I want the sidebar to maybe stock above the comments there . Or maybe we could do it. Vice versa eso or we could just completely hot. What? What we'll do is we're going to completely hide that side bar, and we're just gonna leave that content there. Ah, and allow this to take the full with eso the way that we do that. So they're gonna open this up, and usually the media stuff is added at the bottom. So what it iss in just two media screen. And so this is indicating for the screen. So you got this thing called men with and you've got Max with So men with is for anything up to that size and smaller. So what we want to use is Max with, And this is where we're gonna set that max with, I believe a 7 68 picks. So anything below 7 68 is going to get these attributes added to it s so the first thing that I want to do is, instead of having this in line block, I'm gonna make some adjustments to that, and I'm gonna just change it to block, refresh it and just show you what that does. So whenever we shrink down to a certain size thes actually begin to stock and this is actually gonna work quite a bit better. Look quite a bit better. I don't need to repeat that, but I can do something like with 100% and totting so refreshing this it should take up the full 100%. And of course, our styling is still there s so we might want to remove those or adjust those as well eso that when we hover over. So I'm gonna take this one as well. Update it s Oh, I want to keep that text decoration None. I want to keep all of this stuff except twenties, parting 20 and refresh it and see if that looks a little bit better. So that's working out better looking a little bit better. We said the problem with the sidebar. So what I want to completely do is maybe hide that side bar. So aren't Sidebar was just called menu and we're floating it to the left. So we want to actually ideally remove that, uh, float. We want to add padding. Teoh. We're just gonna actually hide it so we can do display none save that refresh. So it's going to get rid of that. And then one other adjustment that we do need to do. Eso We want to update this main container because we're actually gonna move this over. We want it to take up 100% 0 padding and float their refresh it. So now our content is taking up 100% space. And so now we're a lot more more vital friendly s so we can see our website. If it's coming being viewed on a desktop, it's gonna be full size. When we go mobile. We have a more mobile friendly version and another thing, maybe what? We want to update this heading texts because it's not really adjusting very well. There's a few other things to add in with mobile, and we go over to bootstrap. We can see that it's got this view port tag. So this ensures that the rendering and zooming is at initial scale of one. So we do want to add this in, and we had this in right at the top of our document within the meta section there. And also I'm gonna add in this one s Oh, this is disabled zooming capabilities out in user scale. No eso this again. This is for mobile first, and it's going a lot help out with mobile devices, although you probably won't see much of a difference if you go to the page and refresh it itself. But if you do go on it on a mobile device, you're going to see quite a bit of a difference, because it's gonna be scaled to 100% Eso lo one last thing we did wanna just that heading so that each one so maybe we can adjust that each one size. So just do fought size, and we're just gonna bring it down to 1 p.m. So it's gonna resize quite a bit better and look a lot better within our mobile device. And I guess we still have to move this, uh, this stuff over. So we still have some styling, and a lot of times this is you do have to play around with this eso We've got some kind of styling that hasn't been adjusted here. So pouting. So going back over to this, we can see that what we want to do is pull the an ordered list. So the parent over on we see that it's got a margin before of one e m margin afterwards and we want to completely get rid of that because that's coming in a default for a new ordered lists. So going over to the UN Nord list, we want to have remove out those. So remove out the margins completely and remove at the padding completely. Refresh it and this should bring it over to the left hand side. And now, if we wanted to, we could even center the text so we could do something like text align on. Center that and refresh that So they're text would be centred. Eso a number of different options here, depending on what and how you want to style, it s so that's how you handle responsive and make your website and web template responsive