Mobile First Web Design build a site from Scratch | Laurence Svekis | Skillshare

Mobile First Web Design build a site from Scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 8m)
    • 1. PromoVideo

      1:23
    • 2. 1 Simple Responsive website from scratch

      2:47
    • 3. 2 Course Resources Used to Build a website

      3:22
    • 4. 3 HTML and WireFrame

      5:25
    • 5. 4 Build HTML structure

      5:46
    • 6. 6 Add Placeholder content

      4:21
    • 7. 7 Add Styling to HTML Structure

      6:20
    • 8. 8 How to turn Unorderd List into a Navbar

      9:00
    • 9. 10 Media Screen Sizes make it responsive

      5:40
    • 10. 11 Responsive Columns

      9:54
    • 11. 12 Clear Floating update sections

      7:20
    • 12. 13 Google Fonts and Customizing

      6:54

About This Class

Responsive Website Template from Scratch HTML CSS
Mobile First Web Design how to build a simple website template from scratch using HTML and
CSS
Learn to build a Website from scratch

Mobile first Web design to build a fully responsive website from scratch

Step by step learning of a real world project, creating a website. By the end of the course
you will be able to expand your portfolio with different website designs. Learn to use HTML
and CSS to build websites

Start with a wireframe website concept, this course covers how to develop that plan into a
real website. Apply HTML structure then add CSS styling. You will be amazed at how easy it
can be to build Modern fully functional websites.

Build websites for the real world, see how HTML and CSS fit together to create usable
websites that are fully responsive and ready for the modern world.

Course covers everything you need to know to build a website from scratch
Learn the tools and resources used to create web code
learn HTML and what tags can do
plan out your website, create it according to your specifications
build your website HTML structure and add styling to make it look amazing
Source code is provided so you can jump in quickly to get started with your own projects
HTML and CSS in the real world presented by an instructor with over 15 years experience in
web development.
This course will present skills and overview uses of HTML tags in a web page design. Provide
guidance on how to apply styling and overview common styling properties to make you website
look good.

I am here to help you learn web development and design. I'm ready to answer any questions
you may have.

Nothing to lose, there is a 100% Money Back if you don't like it

Want to know more, what are you waiting for take the first step. Join now to start learning
to create websites today.

Transcripts

1. PromoVideo: Do you want to learn how to create a website from scratch? Within this course, I'm gonna introduce you how to create a fully mobile, ready responsive website from scratch, typing out the HTML and CSS. That's needed in order percent, a really world website that's ready to go. You can then utilize this template and build out your own website, tweaking it and customizing it as course covers everything you need to know what to build a website from scratch. It's gonna be taught by really passionate Web instructor that Scott, over 15 years of Web experience, we're gonna show you all the different tools and resources that you need to know in order to get started. Talk about HTML different tags that are commonly used to build a website structure. How to plan out your website created accordingly Specifications. Build out your website structure and then add styling to make it look really amazing. All the source code is included. This is a step by step course, showing you everything you need to know. In order to build your own Web site from scratch, you'll be amazed at how easy it could be done and how easily you could build your own website. I'm here to help you learn Web development and left design. I'm ready to answer any questions You may want to know War. What are you waiting for? Take the first step. Join. Now let's start learning to create your own website from scratch. 2. 1 Simple Responsive website from scratch: the next set of lessons, I'm gonna take you through how to build a website from scratch. And most importantly, the website that we're going to be building is fully responsive and it's gonna be built from a mobile first perspective. And this course is gonna include everything you need to know in order to create a website from scratch. My name is Lawrence, and I'm gonna be your instructor for this course. I've been a Web developer for over 15 years working on real world projects, and I really do enjoy creating websites and the freedom and opportunity that you have when you're able to apply your creative knowledge and build out websites from scratch. HTML CSS and JavaScript are the cornerstones of the Web and learning how to work with HTML and CSS. We'll give you the skills you need to know in order, create amazing websites yourself from scratch. So the website that we're going to be creating is gonna be this website here, and we noticed that whenever we re size it, it looks completely different. And this is because it's responsive and responsive means that it's able to accommodate different sized screens. So if we go to the largest screen here. We see that things air stocking in a different fashion. Then when we re size and then resize again and we see that the navigation menu moves and so on, and then this helps accommodate for smaller screens. And then even on the smallest screens, we see that we've got these contents sections, everything stacks nice and neatly, and Brits presented properly on even the smallest of screens. And I'm gonna show you how to build a website just like this from scratch on with all of the resources and everything that you need is gonna be included. Start off with a wire frame. So basic design and a concept that we're gonna try to build out. And this is just gonna be a basic, blocked out concept of where are different sections and how we're going to present those sections and then on the different sized screens. So we're gonna have a mobile one, and we're gonna have a larger one for the larger screen sizes. We're going to start with our original concept, and then I'm going to show you how to apply that html to build it. That HTML structure in order to accommodate all those different sections and accommodate the styling. When we apply styling, then we're going to really bring it to life and position everything and lay out everything presented to the Web visitor as we've laid out within the design. So all of this and more is gonna be covered in the next section in settle lessons. 3. 2 Course Resources Used to Build a website: in this course, we're gonna be building a website from scratch. So I'm gonna show you how to build a fully responsive mobile website all from scratch using HTML and CSS. So we're going to start with the resources we're gonna be using within this course. So I'm gonna be using an editor called brackets. So this is a free open source editor from Adobe. If you already have an editor than you can go ahead and use that. But if you're looking to try something, you and try something that's really effective for editing websites, see glad in check out brackets, which is available at brackets I Oh, so you go over to their website and this isn't Adobe Products. So it's pretty good quality editor, and really neat thing about it is that it's free. I'm gonna be using the live mode here where we can see a live preview. So the really neat thing about this is that I can open up a Web site window and then I can type into it and save it, and we can see that it's already being displayed here on the left hand side. So sometimes it does get a little bit buggy where duplicates it up. But it is a really good way to go where, when you're typing, you can see what's being displayed on immediately how your website it's gonna look. So other resource studying to be using is a browser. So I'm gonna be using chrome as my browser. So I've got that open here and the reason I use chrome. It's got really good Web Dev tools and the Web. Deaf tools You can open up by going thio more tools and then you've got developer tools. So amount of Windows machine So it's control shift. I is the shortcut for it, and this opens up little window here that gives you some information about CSS. It gives you consul errors, elements, the dawn and so on so you can see here. We've got some job script errors on this page, and it's telling us what's happening on the page. Also sources, network timelines and just a whole bunch of really good, useful information. Eso we're gonna be utilizing this throughout the course. Also, we're gonna be using glitchy in order to do our wire frame, so this is ah, tool that you can use you could set this up and tried for drawing and creating wire frames is a bunch of different tools for wire framing S O. This is just to create a visual of what our website is gonna look like and also for placeholder images. So I use Laura, um pixel dot com. So it gives you some really nice, really nice neat images that you can place into your website and then we've also got a dummy text generator. So this allows us to generate some dummy text placeholder text to fill it into our website as we're building it so that we don't have to if we don't have the resources ready and we want to make a website look presentable to clients or just want some placeholder text than this is a good way to go. And this helps build out websites fairly quickly because we don't have to worry about, well, what text we're gonna be using. We don't have to worry about writing up the text of the time when we're designing our website. So those are some of the resources something to be using within the course, and in the next lesson, we're going to start by creating our first HTML and building our HTML structure of the website 4. 3 HTML and WireFrame: in this lesson. I want to quickly run through the HTML. So the basic HTML structure that I'm using to build this website, it's fairly straightforward. So what we're using is Doc Type to indicate what type of document it's gonna be. So this is an HTML five document. We're also gonna be using HTML tags opening and closing. So language is English heading, header open and closed, head tags open and closed body tags. So, of course, the head tags are where we contain our medic information. And if you notice we've got one called Vieux Port here. So this is very important when we're creating mobile websites because this allows us to scale it as a ratio to the device with on our initial scale is one. So sometimes if you go to a mobile site, you might see that the writing is really, really small, and that's because they don't have the view port meta information there. So always include this when you divide designing mobile responsive websites and then here we've just got author and title. This is just some standard meta information here within the head and the body. So we're all ready to go to start building on our website. So whatever contents were placed in their body and we're gonna be building out that body structure throughout the course and we're gonna finalize it by building out are finalized product or website. So in building out a website, what we need to do is going to start with a plan. So just like with anything, if we want to accomplish a goal, we need to lay out what we're going to do and how we want it. Toe, look. So this is where I'm gonna be using glitchy in order to create a really rough estimate of what I want my website toe look like. So I do want to build a responsive website so it may. It's gonna look different on different sides screens, but we're going to start with what we want it to look like as a desktop version. And of course, you can use any tool you want here in order to create the different the different layout. So again, this is going to be really rough, so sometimes you might want to take a little bit more time on this. So basically, this is just gonna be ahead information. So header heading information. I'm gonna put a mean contact, so it's gonna be a two column website and it's gonna have all of its main content here, So maybe this will just stay content. So my core content is going to go there, and I'm gonna have a photo here at the bottom. So I'm gonna just take footer here and then I'm gonna have some menu items here, so maybe we're gonna start with designing three menu items, so we're gonna have one menu item to menu items and three menu items. And again, this is just really rough right now. So we're just trying ti get a general idea. So maybe we want to even space thes out, and it doesn't look like these are the right size. But this is just a general overview of what we want it to look like, so that we could we could add in contents for these menu items as needed as well, So I'm gonna just move it around, and yet we're gonna probably place some spacing in here. And of course, if you're doing a really proper design, especially if you're doing it for clients, you're gonna want to use something where everything is aligned and so on. So you want to make a really nice presentation if you're designing a website for somebody else. But if you're just designing it just to practice, then you could do a fairly rough one here. So I'm just fixing it up quickly and I'm gonna using the grid here to kind of the lay it out and present it so that things are are even. And so this is our general idea of the website that we're gonna build. It s o responsive design. And when we shrink it down, we're gonna have maybe something that looks different. So maybe we could shrink it down to have contents. Here s so we would have a mobile area so I can shift this one over here, and maybe two are heading there on then below that, So we would have the navigation shifting over here. So we have the three navigation items there. Maybe I can write that it's that would be the knave. This would be the header, because we do ideally wanna have all of the columns placed properly and taking up the full with. So that means that also for our main content area, we would want it to kind of to shift in here and take up full with as well. And then lastly of course, are footer. So where we want our footer toe end up. So let's just put a placeholder there for the footer. And then, of course, so this would be content and then this would be footer. So once we have our general idea of what what we want it to look like and with Cliffy there's we can change some colors around toe, spice it up a little bit. And we've got a lot of really need options here as well, to really to design this so quickly. Eso that's our mobile view and this is gonna be our desktop view. So let's get started building out the website in the next lesson. 5. 4 Build HTML structure: we have a general idea of what we want our website toe look like. So this is going to be what we want it to look like as a desktop version or on larger screens, because this is a mobile website. We want to move some things around when the screen size changes, so it shrinks down. Then we want all of these to take up full blocks that are available and stock in this type of order. So we have the header than on the content and the footer. So basically there's some shifting around so the navigation would move into their, the content would move under the navigation and then we have the footer and the content, so generally this would be the same order. But then the content would also be taking up 100%. So let's start building out our HTML. And what I like to do is I like to start with a rapper, and this is a rapper that would contain all of the core HTML. So this would be on the outside and nest, the core content within it, and this is where I like to use dibs so you can use different elements as well. But dibs, air usually fairly standard to use as a container. And I'm just going to give this a class of rapper and this is gonna wrap around my entire content because I do wanna have it as, ah fixed with. So when it gets really big on a larger screen, I wanted to take up only up to a certain maximum pixel with. So this is where I'm gonna The rapper is going to come into play eso next. What I want to do is maybe set up a header and I'm gonna use the header element so open and close so header information can go here. We might also want some h one or H two tags here that contain information about the website . So company website and we also might want to use in each one. So all depending eso We also can use spans as well to really Teoh to style this next after the header. So looking at our design way made a knave So I'm gonna create a knave element here and the way that are you I usually do now is I do a Norden lists and we apply styling with the CSS . So make all that magic happened with the CSS. So I'm just adding in Ah hyperlink here. So this is gonna link over to the main page eso first item in our navigation would be something like home. And then each item here that we're gonna use is gonna be a list item, and that was just brackets beautifying my code. So that's right. One of the features of brackets where you can beautify the code s a next we've got home we've got about and then lastly, every website should have a way to get a hold of you, so contact. So that's where you create that contact page. And then right now, these are list items. So gonna open up that preview here so you can see that the way that it's gonna look like right now. So when I refresh, it s so we see that we've got just some really basic HTML that's being designed here and next. Let's create a main content area. So this I'm gonna use as a div, and sometimes you can use section as well putting abusing sections within this div s. So I'm gonna be calling it a div. But of course you can go out section. You can call it article. So this is all for HTML five. So any one of those elements is except acceptable. So I'm going to give it an I D. And I'm just gonna call it Main and then within here, let's add in some sections so we would have a primary section or we'd have a secondary section, so we'd have to different sections in here, and I'm gonna identify those as well, so maybe we can call it first and second just to be really simple with this, because this is just for design purposes. But of course, if you were actually building out a website, you might wanna have Ah, different naming convention. Here s O. This is our main content area. And then lastly, what I wanted to include is, of course, a footer. So going back to our design, we see that we've got the header. We've got the knave. We've got our main content Div and the Footer. So essentially the four different sections that we're gonna be utilizing within the website and when we go back to our design, So we've got the head of that header area here, the knave, the main content, the footer. And we have the same thing here in mobile. So everything matches up. So I got four main sections, four main container areas of our website. And then we're gonna be moving these around as needed, and we see that everything is contained within that rapper container. So everything from the header that the knave to the content of the footer is contained within their. So the next lesson we're going to start building, we're gonna add in some dummy content and then we're gonna start with styling. And that's what's gonna make things really interesting when we start styling at our website because we're going to really bring it to life than so. That's all coming up in the next set of lessons. 6. 6 Add Placeholder content: So right now our website is fairly plain. So we've got our footer area here and maybe we can do something like coffee rights and then the company information. So I did some footer information and then I'm gonna add in some dummy text in here within this mean section to certain information section. So now going over to the dummy text generator, we can indicate how many words we want, how many characters we want and so on. How many paragraphs? Maybe I'm gonna bring it down to about 30 and I have a couple paragraphs there. I'm going to use the paragraph tanks there. So copy that eight. And just place that in our first section and then also in our second section. So I saved. That s a lot ID since some additional text into there. So now we can see that it's looking a little bit more like an actual website, and just that's just by adding in this police holder information. So one other thing to that we need to do is we want to link it to a style sheet, and the reason that we're gonna be linking it a style sheet is because this gives us the flexibility to link over to the one style sheet and use that style sheet throughout all of our Web pages. So our website is actually gonna have three different pages, and we want to utilize that same styling information on each page. And that's where we set up that link to the style seat. So Ari L equals and this the RTL is a style sheet, and then we need to h ref to where that style sheet is located. So I've got a file called style dot CSS. So I'm just gonna link over to that and close that up, and then that's just linking over to a style sheet, and this gives us the ability to do styling. So if we want to do something like body and we could do background color, so I want to do everything red. We see that because it's attached to that style sheet. All of the all of the pages that are attached the stash eat are now going up the background color red, so I'm gonna get rid of that. But that was just to demonstrate that things are working properly so now we can start adding in some styling. So maybe, actually, first I want to add in an image there just to really spice it up a little bit more eso that's going over to Lauren Pixel. So the number of different websites where you can add in images eso they basically they allow you to set the X y so the horizontal and the vertical of it and how big it's going to be. And it's going to allow you to also select different images here, so different types of images. So if you're doing a restaurant, maybe you want to do food or something like that on we can do color and grayscale. So I'm gonna do great scale and just open this up and I'm gonna place that image within lying here within my texts image. And then I just need to as odd in the source of that image, it's taken for some reasons, taking a little bit of time here to load. So maybe I could do something like this with sports. I'm gonna go over to another resource called place. Hold it. And this one's gonna be a little bit faster school. We're just going to use this one. Instead, it's not gonna be as nice because these air just regular placeholders. They don't actually have images, but we can. Still, that loads a little bit faster. So sometimes I do find that Lauren Pixel does take more time loading. But of course, it presents it in better or more digestible fashion for when you're designing your Web site . Now, essentially, we do have all of our placeholder information, and we're ready to go with adding in styling. So we're going to get rid of all of this HTML default styling, create this into a knob, create a header section, and we're gonna divide up all of these content areas. So it's coming up, and we're going to do all of this with CSS that's coming up in the next set of lessons. 7. 7 Add Styling to HTML Structure: in this lesson, we're gonna be working with the CSS, and we're gonna only be using the HTML if I file to refer to different areas of content. So our first main area of content is going to be our body, of course. And we're gonna work on that throughout the course. But we're gonna work on the class rapper. So this is what's wrapping around our content. In order to access class information, we do a dot and then the class name eso for tags. We just do the tag name itself. And then for I ds, we do the hash and then the i d name. And that's how we access content areas into from the HTML document using CSS. So now we're just doing Rapper and with the rapper. What I wanted to do is I wanted to set a maximum with, and I also want a center that content. So if you are doing because this is gonna be a responsive website, we can set a maximum with of 1100 pics. Just show you what it's gonna look like. So now when I refresh the website, we see that our wrapper is only going up to certain with sides. So maybe I could do a background color or I can do a border so we can better see where the break points are for this. So, Teoh, just do a quick border around it and we're probably gonna remove this later on. So this is just so we can see where that rapper caught container sits and we noticed one thing with this rapper container is that it's being pulled over to the left hand side. So we get to a really big screen, then it doesn't really look that nice. Unless you watch the in your design, you want to pull it over to the left hand side. So I don't want to actually have it pulled over to the left hand side and I wanted to actually move to the center so centering it is really straightforward with CSS and it's just set matter setting the margins and we just set margins to zero. The top and bottom is zero, and we're gonna set the left and right margins to auto. And we see when we add in that that set of properties, the CSS, we get it centered right away, such as dropped it right into the center, there and next. We need to look at just all of the different sections. So we've do have two different areas where we've got content within this main area. So it got first and we've got second. So let's identify those and add some styling to those so the first section and maybe do a background color because we want to make our website really nice and colorful. So the first section that we're gonna be accessing, maybe we want to have background color. So you stick to gray scale when we're unsure about colors and we're building our website. It's always a good idea to stick to gray scale colors. So I'm going to just do first and then this one I'm gonna do second. So this is that second section in the main container, and maybe this one is going to stay as plates. So I'm just gonna indicated as white and with C assesses a number of different ways to add in color. So here we're just doing a short form for the heck so eso typically the hex for white would be f f f f f so six characters there. But you can also do these short forms of that. You can also do these named colors so I can do white. It would see that brackets has actually give me some suggestions here for some named colors as well. So when I'm typing that out, that's where you see this drop down here. So as soon as I do this, Colin brackets gives me this drop down of all these named colors. So which is really handy when you're developing, And if you want to be able to pick out thes name colors, uh, this is a really kind of makes way to do it. So I'm gonna just set this back to White. Our second section is white, and we're gonna add in some padding because we see that when we look at the text there, it's right up to the edge, and we don't generally want to have it that way. We want to set some potting there, and of course, we can do it in several different ways. We can add potting to that main area, so maybe we want to do that, or we want to add it into each different section. So again, depending on how your design looks, you can add that potting in either one so potting, so patting, we're just gonna do a little bit of padding of five picks. We see that that bumps it in all of the content in a little bit more. And because we are adding in the color, we can see that this is the size of that section and because we're doing it that way that we need to add imparting actually directly into that first area and then also when he died it into the second area. And that's because we have that background color, and we're actually able to tell where the edge of that content is, where that container is. And now let's just add in some with. So we want to keep this with at 100% because we want to always make sure that's taking up that full, available spacing eso that really didn't really do anything that we can noticeably see. But it is allowing us to indicate that this mean container is taking up the full 100% and we're going to make an adjustment on that because when we have our full size menu then we want to bring our navigation there to the left hand side. So the next lesson let's work on your navigation. We're going to get rid of this, a Nordic list styling and actually make it look more like a navigation menu, so that's coming up in the next lesson. 8. 8 How to turn Unorderd List into a Navbar: in this lesson, we're gonna be updating our navigation menu to see here that it's sitting here just at the top as a new ordered list or lists items. So we've got our three different lest items. And of course, it doesn't really look like an actual navigation menu that you would expect on a website. So typically, you don't see these listed in this type of fashion. So let's take care of that in this lesson. So we noticed that our main container is now, And if you are using knave the element now again, or the tag now they again Then you might want to be more specific with this one. But for now, we know that we're not gonna be using it. And it's safe to set all of our navigation items that are list items as we know that this is our main navigation area. So let's open up our CSS file and create some styling for now, so we're going to just grab it with the main element or the main tag of knob. So any tags that you do have, or within your HTML document that are naps are going to get this styling So first, maybe, let's just align our text. So text the line and center that text so that they take up that center spacing. And let's get rid of some of this potting here. So I'm going to give it patting at the top and the bottom, but left and right is going to be zero and margin, so by default, because it's a list item s Oh, this is just for the mean container of the navigation stuff. And we're gonna worry about thes list items afterwards. Had to get rid of them. Eso We're gonna worry about those after, but let's just bring in a margin here. So maybe 10 picks zero and for the bottom will do a zero. So this adds in some spacing around her navigation area. It centers the content from our nav. And now let's look at those list items and get rid of those bullet points, because that's what's really ruining the way our menu is looking. And this is really easy within CSS. So there's a property called list style, so let's style type, and we can set that to none, and we see that when we set that that removes that those bullet points eso If you are using list items, you can set different types of bullet points if you want, but we just want to get rid of it entirely so we can do none. And there's also list style, so these they're gonna work the same way so we can get rid of the list style in this way as well. So let's update the padding. So patting is zero, because by default there's some additional padding there. And, of course, there is some margin information there. So we're going to get rid of that main margin here that we have around our a new ordered list and we'll be gonna add in some margins on the right and the left hand side. So next, let's look at the actual list items. So we noticed that they are stacked within this way. So let's update thes and to now list item and will do display. And there's a property called in line, block or value for this property. It's called in line block, and I need to spell display properly, So that's why it wasn't aligning. But you see, as soon as we apply this display in line block. It actually starts looking more like a navigation menu that you would expect on a website where we've got these in line blocks where they're taking up that self contained area. And it's different than, ah block because of blocked takes up the entire available horizontal space. But the in line block on Lee takes up the available horizontal space that not particular element needs. So we've got some content here and then afterwards the block is limited to that sizing. So that really is that magic touch their that allows us to really control the way that these lists items are aligning. And next, let's indicate, because thes air, all all the list items have hyperlinks so we can grab those as well. Or we can just do the parents so we can do now. We could do you l list item A or we could just short format and just do any hyperlinks within the knave. We want to take this type of format and this is where we're gonna do display block. And we're also gonna add in some potting to that maybe 10 picks. So now it looks more like buttons or as you would expect and just going to get rid of that . So maybe shit on that first. So there isn't a lot that this is doing, but this is just allowing us to add that additional padding around those elements to see when I remove it. Then we're getting that full potting there when we add back in, because this again this is indicating that he's hyperlinks are full blocks, and without this in line block, they would be taken up that full spacing. So if I was to Ruthie in line block, we see that they're taking up that full spacing. So now it looks more like a navigation menu and we can also weaken, set up some some effects to it s a Typically, whenever you've got thes navigation items, you might see that. So we've got to get rid of actually the underlines first, and that's text decoration. So text decoration and none that could sort of the underlines. Because you don't you won't normally see those if these are presented as buttons. So let's update this now with ah hover. So whenever we hover over these items, maybe we want to add in some different effects. So Let's let's add that in. So that's now list item. And this is wearing an ad in that pseudo cloths of hover and update that background color and maybe once of that really contrasts or do black and will do the actual color. Two white on. Maybe we wanted Teoh background color here and set that to something like that. So it's a little bit off white there, and this is where we need to specify the colors, the font colors, eso we need to update that. And I'm also gonna add that background color into there as well, So we can now. The reason for that is because it's being applied. Styling is blind, being applied to that actual text eso we see that we've got and when you talk to take us to be black so we can see our text. So now whenever we hover over it, we're not getting the actual effect that we need, because we're still on that list item. So let's just update this to be the hyperlink. And now we see whenever we hover over these, that actually look like clickable navigation menu buttons. Yes, let's how to create a navigation menu And of course, we're gonna have to work on how this being presented, because this is how we want it to look on the small screen. But on the larger screen, when we go back to our design, we see that our original design look different. So we had put the navigation items there. We had put the content there. So we're actually building up from a mobile first perspective where we're building from what we wanted to look like on the actual smallest screen. So we build that out, we see that this is what we want it to look like on the small screen, and this is consistent with our current design. But when we get to a bigger screen, we need to move thes navigation menus around or navigation items. So that's all coming up in the next settle Essence. 9. 10 Media Screen Sizes make it responsive: in this lesson, we're gonna add in some additional styling to really make it look more like a website and to see all the different containers that we have on our website. So when we built this out, we had a clear four different clear sections. So I wanted to finish those off and build it. What we want the footer toe look like So we do just have a footer element that we're using . And if you are you re using footer than Just be careful with this that you're not You're not presenting footer yachting styling to it, and then you want to reuse. It s so let's set a background color to that. And I want to set fairly dark color so fairly dark gray scale color. So I'm gonna set it to Dee Dee Dee, and I'm gonna shrink this down so we can actually see what's happening with the footer, and this is again is going to be from the mobile perspective. And we're also going to show you how you can add in and set up that responsive aspect to your styling. So background color. Dee dee dee, Maybe Let's set text the line because you don't really see that it's pulled over to the left hand side so typically you're going to see it centered. So text the line center and out in some potting here at the top, so I don't want it sitting right near the top there. So potting top and let's add in 35 picks that moves that down a little bit and we can also update the color of the thought that we want to use. So maybe we don't want it as evident and we want to bring the color out, forget that hash there and maybe make this one even later or darker, I should say, because I think that's fairly light. So something like that and I also want to add in the header. So because for the header section we haven't really done anything with that yet. Eso let's update that So that's the header there and I usually like to keep it in the order that it gets presented on the website. So we've got our body, we've got our wrapper and then next would do that header and again, If you're reusing header, then just be careful because we are applying styling to it. So here, I'm gonna add some padding here. So maybe the top and bottom 10 picks and zero for left and right to see what that looks like. Eso we've added in that top and bottom potting. And now we could actually start updating our site and what we want it to look like on different size screens. And this is where the media queries come in. So typically you're going to find the media. Queries are at the bottom of your CSS, and this is where we indicate that we want to specify different break points on the website from what I mean by break points on a show you in a second. But that's when the Web page actually resize is when it hits a certain pixel with We want something different toe happen and because we're working from mobile first perspective were setting minimum with So if the minimum with is let's do 800 picks. So this would be for like, a tablet size eso any of the styling that's within here is what's going to get applied when we hit this minimum with. So maybe what I can do is I can jump back in here and background color, and we can set some really, really visible background colors. And you can see that whenever we're gonna hit thes break points, then we're gonna change the background color. So maybe instead of blue, maybe would do read. So let's see what happened here. Eso taking a look at the styling We've got this cadet blue when just by default, whenever that screen size is a certain with. But we've also added in this media query where we've got sure what happened there. But an extra tag. Eso We've got this background color red, but we don't see that the background color, it's red. Let's try re sizing our screen and we see once we hit that eight over 800 pics, then we actually start getting this styling. So basically, what this means is that from a mobile part first perspective, where designer website toe look like what? How we want it presented on the mobile screen or the smaller screens that are less than 800 picks. But we will also wanna have a different look and feel for it once it's larger than 800 picks. So once it's off of the tablet or on a desktop. We want to present it in a different way to our visitors. And this is where this media screen comes in and we see that it takes effects. We get a black run color of red overwrites that background color of Cadet blue once we hit that larger size. And so basically, this means that this is where we need to set all of our additional styling how we want to present our website when we're on a larger screen. So I'm gonna show you how to add that in in the upcoming lessons. 10. 11 Responsive Columns: In the previous lesson, we introduced media screens and we saw how it works on different sides screens. So with media screens, you can actually add as many as needed. So if I want to set another break point at 1200 picks that I could do that as well. And the really interesting thing about this is that if we're building from a mobile perspective, this is where I need to set my maximum with eso. I don't wanna have my maxim with their but I do wanna have my border. I wanna have it centered. So I'm gonna leave those those properties up there and I'm gonna go down here and added Rapper and update my maximum with so basically what's gonna happen now whenever I shrink or whenever I resize it. We see that whenever that screen size gets past the 1200 pixel point, then that's when my maximum with takes effect. So before that were sitting at 100% across has taken up that 100% available. With eso here, I can actually update this to be Max with, and we'll set it 100%. And this was just to ensure that we are getting that full with across, so anything less than a 1200 picks screen is going to be a full 100% across. So let's add in some additional styling here on as we can see from our original design, I'm just gonna shrink it down so we can see what's happening with the website and how it's The layout is going to be changing as we're updating the CSS because now we're working on the bigger screen, so it's a little bit harder to see. There s So let's take a look at this and see that. Okay, so this is what do we want it to look like for mobile? But we wanted to look different when we're presenting it within our within our larger screens. And what we want to do is we want, actually float our main content, our navigation menu over to the left. So this is where I'm going. Apply that property of float. So float left. We can see that it gets pulled over here to the left hand side and we need to specify that I want to give it a width of 20% because we don't want to take up that full available with . And maybe I also want to add in some borders around there just so that it's more visible. So that's our all of our sections there. So we see that this is where the knob is falling and, uh, we see that's pulled over to the left hand side and with the knave, we you don't really see it done horizontally when it's pulled over to the left hand side. And this is where we I want to actually stock the list items to be displayed block. So we're going to get rid of that small screen where we're stocking them horizontally and here we're just gonna stack them vertically and right away we get a nice stacking of our block. There s so we can add in some padding as well. So let's add in 10 picks and maybe out in 20 picks. So that presents us with a nice, neat menu and let's take up with of 100% just to make sure that we're taking up that full available with so next. We need to update that container section where we've got our contents because we see now it's kind of overlapping there. So we're gonna update that one that has that main and we're gonna treat them as two separate containers. So let's update and meanness while I'm gonna put a border around it and I'm gonna get rid of these borders. But for now, I maybe a better way is to create just the border class and then I'm gonna ply this border wherever I need to apply it. So this receiving trouble and I want to add this into all of my main containers s. Oh, this is just for design purposes. We're not gonna actually utilize this, but this is just that we can see where our main containers are being held. So on the header there on the nav, I'm gonna add that in on the main one and and lastly, on the footer So this presents all of those so we can see exactly where everything is sitting eso When we re size, we see where things are sitting. Eso Now let's go back down into our media era here and we're gonna update this. So we've got the now this floating left. So that means that the main container area should float right so float that over to the right and we see that it's taken up a little bit too much space. So let's try with of 70% eso that stacks nicely there. And remember again, this is only going to be for the bigger screens once we shrink down to the smaller screens . Then we've got it presented in the way that we wanted to. Maybe this is a little bit too small to make it touch bigger there so we can see exactly what's happening. There s so we see, they've got kind of a little bit of a mess here. Where we've got our copy rate is here. We've got this content over here so we might want to, depending on how many items we have in our navigation menu, we might want it Teoh, actually to remove out this entirely and let it stack as expected. But we still are presented with this problem where our navigation is kind of overlapping into our content area. You choices here, depending on if you want the full width than we can stay with with 100%. Or we could remove out that padding because it's actually the padding because we're applying it to the list items. So it's got different, different sectioning than it has where we're actually playing these, these hyperlinks so we can make an update to that as well, if needed. Eso we going back to our main CSS here? We see that we've apply Etched the padding here to the nav A and we've got some default padding there. So we have to make some adjustments to that if we wanted to utilize it. And this is where the media screen gets a little bit tricky because you actually have to remove out stuff that might be affecting your styling in the different places here. So we've got our padding of zero, so that fixed it slightly. We've added in patting again. So there's probably somewhere else where we do have some padding. So does take a little bit of playing around. So we do have are a Nordic lists, has padding as well. So need toe bring that one down as well and bring it to zero. So that is can get a little bit tricky here on. We can see that in. So that gets rid of some of that default padding Let's take a look at sea. Where else we'd have It s o one of the things here. We noticed that it's we were using up a lot of this real estate here, and we generally want our navigation menu to stock properly so we can simply remove it. The padding if we wanted to, and that would save us a lot of trouble. On that end, we can also set this 20 and that would align it into 100% there on then. This is sometimes the problem here when you talk with when you look at pixels and percentages that it's really hard to get those aligned. So, General, if you're using percentages, if you're using these fluid values, you might want to look at just having this ability to kind of set the's default widths. So maybe we want to only take up 90% because we don't want it going all the way over. We wanted to align nicely and so on. So it does take a little bit of playing around and just trying to determine what the best way to present that content would be s so I think that this presents it Probably in the best way. But again, if you wanted to use a really long menu, then essentially, this is gonna be like a two column layout on. Then you'd have to treat it as such Lead have to float this one all the main content area over to the right s. So this should align with what are designers. Let's take a look at that. And we see that our design originally was to take up that full content area. But because we only have three menu items were going to shift our content there t stock right underneath that navigation menu. So we're going to just leave that as is and move on to building out some additional styling here when we're re sizing. We've got two columns here, and this is where I want to attach that to column website feel to it. So I'm gonna update thes as two columns, and we also still have to update our image because if our image waas really big, we could run into potentially some issues when we're re sizing. So I want to take care of that as well. So all of this is coming up in the next set of lessons 11. 12 Clear Floating update sections: let's get rid of this border here and just refresh it. So now we've got a website. When we change sizes, we see that it's stocks nicely, but our image is still a problem. Eso we want toe because we're designing as a mobile First perspective. Let's take care of our image up here at the talk in order to make it that it goes Teoh available with of 100%. So any images we want to set a max with and Max with is different than just with because with forces it to a certain size, whereas Max with tells us that this is where our maximum with is gonna be So this allows our image to resize really nicely. And it's important in mobile design that you take care of. And you worry about these images because we never know what size images we could expect. So I want to also add in another size here for our our layout screens and maybe this one we're go with a really small minimum with and were turned both of these into two columns s Oh, this is just the update. Our design, actually eso what I want it What I want to happen is I wanna have two columns of content, a copy paste not, And I want to have two columns of content, so this is going to make it a little bit more tricky because I'm presenting to two columns there. But then down here, whenever I'm on my smallest size, I only want have 11 column of content or wanted to stock one on top of the other. That's probably a better way to put it. So I wanted to look like this, and this is only on the really, really small size screens. So anything like maybe an iPhone for 80 size screen and less than this is where I'm going to stock that. So let's update our media query and set a 4 80 there. And then this in here is where we're gonna identify those sections. So I had my first section and I had my second section, and I apply some styling to those. Let's take a look it and see how this looks, and this is only for rarely really small screens. Eso for everybody else. We wanna have it to go full size. Let's do something here in the middle and add in our two column website. So we're going to just do them even with and float left. So our 1st 1 is gonna float to the left, and this one is gonna have the same thing, but it's gonna float older to the rate. And let's refresh that. So we noticed that again, we're gonna have all of those padding issues, so we need to we need to take care of those as well were needed. So we do have some padding, uh, that we've got from the previous sizes. So I'm gonna set that at 48 because this is only really for, uh, for the small screen that we're going to stock one on top of other. But then, as we see as we're growing, it's still not stacking properly. This is where we have to clear out those floats. So we know that we've got floats there and when we re size. So there are some issues here with the floats. So let's take care of the floating right off the back there. So with the knave s, we're going to get rid of the float, get rid of the float there. Uh, we're going to get rid of the float on the main section and most importantly, we gotta get rid of the floating on the footer. So let's see where footer is. So it's get rid of the floating there so that this allows us to stock it a little bit better. See what looks like now. So now we've got the float is cleared and go back up to here. And we see that as we're adding in thes styling properties that it's nicely stacking everything. Eso This one had an issue there as well. And lastly, we had our nav. So I'm gonna just stop that in there. So you see that what the clear floating does is it allows us to clear those left and right floats and allows us to stock properly. Now, there is a problem here with the navigation because I'm clearing the float out of there so I might not want to do that. Might want to get rid of that, and it might want to get rid of the float on the main. So see what that looks like now. So we because we're using the pulling over to the left here as well and the floating of the left here as well. Us. We've got to left floats. So we do need to take care of this whenever we've got this resized version here. Andan. This is where we need to deal with the mean. So main would float over to the right and the with would be it's to 70%. And then this is where we can add in that additional padding if we need to just do 80% because we didn't add in any additional patting there. So let's take a look at how this is going to behave now. So now whenever we're re sizing, we seeing that it's re sizing pretty good. There's a little bit of ah problem there, and sometimes it does take a little bit of tweaking here and there just to finalize all of those adjustments. So I'm gonna actually resize it at 5 20 because again, there's probably some padding that's sitting there that's causing that to happen. So now we're back into our full size screen. When we shrink it down, we're going into having the two columns there, and when we shrink it down, everything stocks properly, so it's more in line with our original design as well. When we look at this and we can see that original design actually was odd, the two contents there, So we essentially had a three column design. Eso Essentially, this is exactly what we've achieved here. When we add in some more content, this will be more evidence. Let's just add in some more dummy content and back into the HTML and add that into that first section, and I didn't properly copy that. So let's take a look and see what it looks like now. 12. 13 Google Fonts and Customizing: So now let's look at our website. I'm gonna open it up on a bigger screen here, and let's just take a look at this at the full 100% we see that we've got are essentially, our design is in line with what we had originally envisioned. Maybe we can even add in some additional dummy text here within that second section. So this is always what type of content. So when you're planning out your website initially, make sure that when you've got sections, you've got enough content in each section, so it essentially will line up a lot better on this will look a lot more presentable. Eso if you had what? What we were just looking at where you just had a little bit of content. You might want to reconsider making this a two column. You might want to just keep it as one. And then, of course, this could be really easily done by just updating these sections and removing out that second section and taking this to be 100%. So there's a number of different tweaks that could be done to this template to really to utilize it and build it out the way that you want to present it. Ah, and essentially, this is the default template that we were looking at building. Initially, we have got her head area header informations. Of course, you can add in a company logo, some logo information. We might even wanna have this centered because right now it doesn't look as presentable if it's pulled over to the left. So we can really easily take care of that within the CSS s. Let's go up to here and then this is another question a bit where you want the styling to be applied. So if you want that styling to be applied on Lee on smaller screens, then you would apply the styling in appropriate media screen area on as we noticed, we throw it the lesson. We've built a number of different breaking points here s O for the header. Maybe I just wanna have text align across all of them. So text the line center and save that And let's refresh that. So now our text is aligned center and if we only wanted to take place certain times or if you want to have different views on different break points, we can always add this to text align it over to the left, or we could remove out this text the line here and add it in Teoh, maybe want to align it once it's over. 800 picks. So here we've got our header elements and text the line center. So now it's only gonna align whenever it's big and whenever we shrink it down, maybe want to pull it over to the left. So again, this is depending on what your personal preferences and how you want to design your website . Add in the proper styling, the styling properties as needed, depending on the break points. And I'm just going to readjust this and bring this Bring this down because typically you're going to see the different break points. So we've got the 1200 we've got the 800 so maybe we want to start with the top the largest one first s O. This is depending on how you want to design how you want to lay out your content. Usually you'll see the largest ones first and then 805 20. But again, it depends on how you're designing and your your style that you wanted to use eso. One other thing that I want to quickly add in. And I want to add in how we can add some default fonts into our website. So usually these fonts are fairly boring that we're looking at right now, and we want to really spice this up. And there's Google provides us a really quick, an easy way to update forints if you go to fonts dot Google than you're presented with 808 different font families that get access via the web. So all it is now maybe just taking a quick look through and tip picking one that you want. So I want to take this one here. This indie flower I can updated. I can grab it here. So one for family selected and they've recently just changed this. There's a number of different ways to import it. We can import it as a style sheet, and then we could use it within the CSS. But usually, like I like to import it directly into the CSS file because we are going to be using the CSS file across a different Web pages, so we want to import it directly into the CSS, and then this gives us the ability to grab that and utilize that within our CSS. So they're just gonna do the full thought family for everything to be this front and we can see right away it takes effect and presents our website in a different fashion. So now all we need to do is update and create additional Web pages so we can do that really easily. We could do a save eyes and we can create our about page and we can create our contact page . So now that we've finished our website on and then these were just placeholders So one a thing I did forget to do here is I forgot to update thes thes links. So I should have done that beforehand. Contact up html. But now I'm gonna have to open up each and every one, and I'm gonna have to grab those or I can I can simply received these over. So maybe just do that. So now we're gonna have all of our web page. So just gonna replace that and save over that s O that we've got the new changes now when I refresh it so Now we can navigate to all the different pages, and this goes to where, whenever we're applying those style sheets, we do want to make them that we can attach to that one style sheet from all the different Web pages, because this makes updating our website really easy. So something like those Google fonts if I want to add those in, if we add them in each different page, that would have to link to that style sheet, and it makes it a little bit more difficult toe update, the page styling or the website styling as a whole, as opposed to just the page styling. So there's just some quick design tips and essentially were completed with our lesson and our course, and you're free to take a look at the source code of this. Try it, try it out. See what you can create with that, update your own version and create your own website around the source code and the lessons that we have gone through with in this course. Thanks again for watching and feel free to keep me posted on the different websites that you can create out of this template