Build An HTML5 Website With A Responsive Layout

hey guys in this tutorial we're going to be building an html5 responsive website from scratch and before we begin let me just say that this video is going to be geared towards beginners I've been doing a lot of videos on advanced frameworks with angular 2 and view Jas and so on but I wanted to start to include videos for the beginner many of you have probably seen my web development 2017 guide where I made some suggestions about where to start to learn web development web design and I realized that I don't have much for the absolute beginner so we're going to go over the html5 semantic tags and HTML in general and build a fairly decent small website for a web design company all right so I tried to keep the markup and the styling as simple as possible there's no frameworks or libraries just straight html5 and css3 all right so let's go over what we'll be building it's a fictional website for a fictional company called Acme web design and it's not the best layout and I'm not the best designer but I think it looks decent so it has a basic three color scheme we have this this grayish blue this orange color and then the light gray throughout the site all right and it's a three page site I didn't want to make this too long so I didn't add too many pages basically we have a header at the top with the branding this is a h1 tag but it could be a logo you could easily put an image in there we have a simple menu with an active state and hover state right here we have a showcase area with a background image that could be easily changed has an h1 tag and then a paragraph alright you can obviously add buttons or other stuff in here as well you can put a little form whatever you'd like under that we have this newsletter section with a heading and then just a simple request form that they could put their email in now this form isn't going to work we're not doing any back-end programming it's just you know just the display form and then under that we have three three separate areas with three different images now I would suggest using something like font awesome and using some icons but I didn't want to get into any kind of third-party libraries or anything so these are just straight images that we're going to include here alright so we just have the image the heading and then a little paragraph and then a very very simple footer with copyright text all right so that's the home page very simple I want it I want to keep this really short so I feel free to add more to it if you'd like so the about page again very simple we have still the header we're still using the newsletter part but notice we took out the showcase and then this is the main area we basically have a main column and a sidebar this just has some basic about text than just a little blurb here on the side in the sidebar okay very very simple services page has the same kind of layout as the about page as any other inner page that you add we just have some services which is a UL which will dis little style a little bit and then a get a quote form on the side here alright so you can see it's very very simple now one really nice thing about this is that this is completely responsive so if I go and I start to make this smaller so when it hits right about there it turns into basically a mobile site okay so this is what it would look like on a tablet and you can see it's laid out pretty nicely if we go smaller that would be that's around the size it would be on a smartphone okay so notice that the header has changed there's no more floats we have the menu directly below the logo the the showcase area looks pretty nice the newsletter form no more floats we have the header and then we have the form the button is now blocked that goes full width these are all lined up nicely if we click on a boat okay see the newsletters form is nicely formatted we have the page now the sidebar is no longer floated it's directly underneath the main column okay same thing with the services we have the UL and then we have the quote form down at the bottom alright so pretty pretty I think it's a good example for beginners to start to learn how to add the the html5 semantic tags and a little bit of css3 as well alright so if you don't know anything about the html5 semantic elements or semantic tags basically they were created to let the browser know what content is where so for instance we have the header tag obviously you have some common things that you would stick in the head or the logo things like that the nav tag is obviously for navigation we have the a side which is for sidebar content which is basically secondary content section which is the main area main content article which is used mostly for things like blog posts footer has things that you would stick in a footer all right so these are the main semantic tags so you might want to take a look at this page from w3 schools which is really helpful all right we're going to be using most of these in this template alright so let's go ahead and get started I'm going to open up my editor I'm using atom which is a really nice open source editor I would recommend it if you don't have something that you prefer already all right now I'm going to just be developing write write on my local machine we're going to create a folder and I'm going to call this Acme let's just we'll just call it Acme okay and then we're going to first create our index.html page which is our home page okay we're also going to create a folder for our CSS files which we're only going to have one and then a folder for our images all right now I will I will include a link to the files and that will include the images as well we're just going to have basically the showcase image and then these three icon images here I believe yeah that's the only images that we're going to have so let's go ahead and open up the index page inside of Adam I'm going to just open up that folder which is on my desktop all right so let's open up index.html and with Adam we have we're able to just say HTML tab and that will give us kind of a boilerplate for a simple HTML file gives us the doctype which is html5 our HTML tags our head tags body tags we have the character set which is set to utf-8 and then the title tag alright so let's go ahead in the title and we'll say Acme web design and usually you want to have some kind of reference to what page this is it's the home page so we'll just say welcome all right next thing we'll do is link our CSS file which we need I haven't created yet but we will so it's a link we're going to give it a rel attribute let it know that it's a stylesheet and then the href will point to it so we're going to say dot slash CSS slash style dot CSS all right while we're at it let's create that so in the CSS folder we're going to say new file and style dot CSS okay so next thing we should take care of is our meta tags now we're you building a responsive website it's important that we put the viewport okay so the viewport will set the width of the template of the website so we're going to say meta and we're going to give this meta a name attribute of a viewport and then that's also going to take a Content attribute and we're going to set the width so we're going to say width equals and we want to set it to the device width okay so whatever device the raw mobile device tablet which is I guess a mobile device desktop whatever it is we're going to set it to that with all right so you probably also want to have some SEO so you want a description and keywords and maybe the author so I'm just going to paste that in all right so we have a description I just said affordable and professional web design we have the keywords web design affordable web design professional web design I'm by no means an SEO experts so I don't know if that would be good or not but it's just something to have for now and then the author you can put that and I just put my name as the content all right let's see let me just make sure these are indented properly all right so that's it for the head let's go ahead and save that and then we'll open it up in the browser okay I'm using Chrome and notice that in the tab we get acne Web Design welcome we look at the source code everything is okay all right so let's go back to Adam and now we're going to start in the body and we're going to take care of the HTML before the CSS all right so first thing is the header so we're going to use the html5 header tag just like that all right and if we take a look at the final product we have the logo of the branding and we have the nav all right so within these elements here notice that they're in the middle and you can see there's margin on the side here or some space on the side what we want to do is create a class called container that we can wrap around inside of these elements to keep everything in the middle and keep them from going way over to the side and also to keep them from you know being aligned to the left so let's go ahead and add a div in here with a class of container all right now if you don't know the difference between class and ID everyone is different everyone has a preference some people don't even use IDs and they'll use classes for everything but the general the general rule of thumb is that an ID is for something that is unique okay so for instance the let's just say the showcase area we're not going to have that showcase anywhere else on the page okay or any other showcase element we may have it on a separate page but not in a different element we're not going to have a showcase here and then a showcase here so that would that would be something I would put in an ID all right because it's only occurring once a class however is something that you're going to put over and over so the container we're going to put in the header we're going to put here in the showcase down here so that is going to go on a class all right so that's that's basically how I do it but everyone's different all right so let's see in the header we have the container then we're going to have this branding area so we're going to put another div and I'm going to give this an ID of branding because I don't plan to have this anywhere else all right so in the branding you could put an image logo but we're just going to put an h1 and we're going to say Acme web design and then we have the nav over here so we're going to go under that branding div and we're going to put a nav tag okay so this is strictly html5 right here this nav tag and then in the nav we want a ul which is an unordered list and that's what's used for menus inside the unordered list we want list items okay so this will be the home link so we need to put an a tag for the link href which is going to point to the page we want it to load which is going to be index.html okay and then the text for that link is just going to be home alright so let's go ahead and copy that for the other links so we have home then we're going to have a boat and we're going to have services okay we'll just change these links that'll be about HTML and this will be services HTML all right so let's take a look at that so far ok so that looks absolutely disgusting but that's because we haven't added any CSS yet all right so before we do the CSS we're going to continue to add the markup now if we look at the final website here after the header we're going to have the showcase area which has an h1 and then a paragraph so let's go ahead and add that you want to make sure you go outside of the header and we're going to put this in a section okay so section we're going to give it an ID because I don't plan to have any other showcase sections ok so inside the showcase we also want the container because we want to contain it into the middle there so let's say div class container okay so in the container we're going to have an h1 and that's going to say affordable it's the affordable professional web design all right and I spelt that wrong I think that's why I'm a web developer I can't spell so then we're going to have a paragraph and for this what we're going to do is grab some dummy text from larom epsom our lips some calm this just allows us to generate some some of the sample text so just click generate and let's grab let's say that should be good very helpful just to get something out all right so that is our showcase area let's see under that we're going to have the newsletter let's just take a look at that first okay horrible looking next we'll have the newsletter that's also going to be in a section we're going to give that an ID of newsletter okay so again we want the container and this container idea this is you'll see this a lot in frameworks like bootstrap and foundation a class that will consolidate everything and push it to a certain width and push it in the middle all right so this is also going to have an h1 and this is going to say subscribe to our newsletter okay and then we're going to have a forum all right now obviously this isn't going to go anywhere we're not doing any back-end development but usually you'd have something like action equals and maybe process dot php' or or whatever whatever server-side language you're using but we're not going to do that so it's going to have an input and we're going to give it a type now you could do text but we're using html5 and html5 has really nice input types and email is one of them so we're going to use that we can also add a placeholder which gives it basically some text if there's nothing in the form so we're just going to say enter email all right and with html5 we don't have to close these off like that with a slash if you were using XHTML you would need to do that but html5 is much less strict okay then we're going to have a button we're going to give it a type of submit so that when you click it it actually submits the form and let's give it a class because I'm going to this will give it a class of button one all right and then the text for this will just say subscribe all right so that's the newsletter section take a look at that okay so under the newsletter section we're going to have the boxes okay so we're going to have these three boxes so let's make another section and we're going to give that an ID of boxes and you can call these whatever you like close that and inside boxes we're also going to have our container alright so we have these three separate boxes so those will each have their own div so let's say div I'm going to give them a class of box because they're not unique okay there's three of them div class box each one is going to have an image but I'll put those in in a minute they're going to have an h3 okay so for this first one let's say html5 markup and let's just copy this here put that in a paragraph tag okay and let's just copy the div class box paste it in two more times for this one we'll say css3 styling and then for this last one we'll say graphic design all right so for the images I'm actually just going to bring those in to to our folder so let's say I am G so if I paste these in we just have logo brush local CSS logo HTML alright so let's go ahead and add those so we're going to put it above the heading say image source and that's going to be in the image folder and let's say logo underscore HTML dot PNG okay let's just see if that shows up okay so it's bigger than we want but we'll resize it in a minute let's copy that image I'm going to put one here here we'll change this one to CSS and this one I believe is logo brush okay so there's our images now as far as the markup we're just about there we just need our footer okay so let's see in the footer we're going to put a paragraph and we're going to say Acme web design and then copyright now they get the little copyright symbol we can put an ampersand and then copy and then a semicolon and then 2017 okay reload and there's our footer all right so the markup is complete for the home page now I'm not going to go into the inner pages yet I want to get this the core CSS done first alright so let's go to our stylesheet and I always like to work top to bottom we're going to start with the body okay so let's say font will do font family which I want to be Arial and we'll put some secondary fonts let's say Helvetica and sans-serif okay so that'll change the fonts let's take a look okay and then for the font size let's do 15 pixels and we also want a line height which is the line height is the amount of space between each line I'm going to say 1.5 save that okay now I want to show you kind of a shortcut we could do instead of having these three separate properties like that what we could do is we could say font 15 pixels / 1.5 okay so 15 pixels size 1.5 line height and then put our font styles just like that okay and if I get rid of that reload you see we get the same thing okay just shortens it up a bit now the padding I mean I'm sorry the body I don't want to have any padding or margin so we're going to set that to zero and I want to set the background color go so the background-color we're going to set to light gray all right now we're going to use a hexadecimal value so we need the number sign and then the hexadecimal for the light gray that I want is going to be that F for three times save that and now you can see there's no margin of padding there is above the this the h1 because H one's by default have padding on the top and bottom and you can see the background is now very light gray all right so the next thing we're going to do is the container now the container is a class notice that I have the dot here when you have a class use the dot the period when you have an ID use the number sign all right now the container what I'm going to do is set the width now I want this to be responsive so we're not going to set it to a specific pixels we're going to set it to a percentage of 80% okay so that'll set that and if we reload you can see that now it's cut off here now I want everything move to the middle not on the not aligned to the left so to do that we can set the margin to auto okay that will move it to the middle and then the last thing I want to do here is just say overflow I want to set that to hidden so if something goes outside of a div I don't want to have a scrollbar up here I want it I want that to be hidden and I want the content to be hidden all right so we'll do that now it's good to comment your CSS this is where I want to put anything that's global that could be put anywhere such as the container all right next thing we'll do is the header so let's put a header comment and we can style the header tag itself and let's say we want a background and we want that bluish grayish color so the hexadecimal value for that is 3 5 4 2 4 a so if we go when we look at that now you can see that we have a background now that's a dark back grounds so we're going to want white text so we'll say color hexadecimal for white is f6 times okay so that'll change it to white notice the link color didn't change because those the links we have to do separately all right but for now for the header we're also going to add some padding to the top we're going to say padding top 30 pixels and then I want to set a height but I'm going to set a min height that way when it's responsive and the screen is smaller and the text grow or the the menu goes on the next line we want the height to adjust so the minimum height is going to be 70 pixels and then finally I just want to border on the bottom so we'll say border bottom and it's going to be that orange color which is e8 for 9 1d all right we also need to add the pixels the width which will be 3 pixels and then the style which we want solid okay so there's the header now for the links let's do those so we want to take the header and then we want the all the links or the a tags inside of the header we want to make those white okay we also want to remove the underline which links have by default so we'll say text-decoration:none all right I also want the menu to be uppercase and I don't want to have to do it in the markup we can actually do it with the CSS by saying text transform uppercase alright and then finally I just want to set the font size to 16 pixels save that and there we go okay so next thing we want to do is we want to make this menu horizontal okay we want to display horizontally we also want to remove the bullets so say header and we're going to do ul for the unordered list itself now by default unordered lists have padding so what we want to do is we want to make sure the margin and the padding is set to zero all right and then for the list items themselves so header li we want these to float left okay we also want to say display inline and we're going to add some padding now we want padding on the right and left right now if we do a single padding property like this it's going to be top right bottom left all right so this is setting everything to zero we want the right and the left set to 20 pixels so this would be the right because it's top right bottom left and then this would be the left we'll set that to 20 pixels all right so let's save that and now we have a horizontal menu so the next thing we want to do is we want this menu to be over here all right at least for this screen size so we need to float we're going to take the nav okay if we look at the mark-up we have the div with the idea of branding which we want to float to the left and then the nav we want to float to the right okay so let's say we'll go right here actually go down at the bottom and we'll say header remember the branding is an ID so we want to use the number sign like that and we want to float that to the left all right and then I also want to set the h1 of the branding I want to set the margin to zero so we're going to say header branding h1 okay we'll set margin zero now for the nav we're going to say header nav and we're going to float that to the right all right so let's save that see what we get okay good now I want to move this nav down a little so we'll also add margin top and let's set that to 10 pixels okay now you know what I actually want to do I want all the you ELLs in on this website to not have margin and padding including this nav so what I'm going to do is actually just use the UL so we'll cut that get rid of that and let's put this up with the global stuff okay so this way all you ELLs will have a zero margin and padding by default all right I think that's a better way to do it so our header is almost done what I want to do now is I want the current link to be have that orange color and I also want that the Acme in our logo or our branding to be orange so what we're going to do is go down here and let's say header and we're going to have a class of called highlight so we'll say dot highlight and I'm going to put a comma here because we want another style or another property for this style and that's going to be header and then a class of current and then the a or the link within that class all right and then what we're going to do is say color set it to the hexanol hexadecimal value of e eight four nine one D okay we're also going to set the font weight to bold okay and then what we'll do is go to our HTML and in the Acme we're going to wrap this in a span all right now span is an inline level element meaning that it's not going to make it go on the next line if we were to wrap this in a div then Acme would go on its own line and we don't want that so we're going to add the span with the class of highlight okay so now if we go back and reload nothing happens that I save this header dot highlight I forgot a semicolon there there we go all right and then we also want the current now notice that I have the current class and then the a I'm not putting the actual current class on the a tag I want to put it on the Li all right so right here we're going to say class equals current okay there we go and then finally we want a hover state for our menu so what we can do is say header a and put a colon hover and let's make color we'll do see six times which is a gray color all right we'll also say font-weight:bold okay so now we have a hover State so now that the header is down we're going to move on to the showcase so let's go ahead and put a comment in here let me bring this up more so you guys can see all right so we have our showcase we need that image so I'm going to bring that in to our folder so let's paste that in and let's go back and for the showcase we're going to set let's see showcase is an ID so we want to go like that and we're going to set the minimum height again we want it to be flexible everything should be responsive so we don't want to set a fixed height we're going to set them - 400 pixels oops am i doing 400 pixels alright now for the image in the background what we want to do is say background - image and actually you know what I usually like to do is just save background and then we'll say URL and then here we need the path now we're in the CSS folder so that means we need to go outside of the CSS and then into the image so to go out we're going to do dot dot slash then we're going to go into IMG and then showcase dot P and JPEG I think okay and we also don't want it to repeat so we want to say no-repeat like that okay let's go ahead and save that it looks like when I save it it makes it go to the bottom like that I don't like that okay now that isn't where I want the image to be okay I want it moved up so what we can do is after this no-repeat we're going to say zero-zero is the x-axis so the horizontal we want to move it up this way vertically and we're going to move it up 400 pixels so I'm going to say negative 400 pixels okay reload and now you can see it's been moved up that looks a lot better we also want to set the text align to Center and we want to set the color of the text to white okay now we'll do the h1 in the showcase okay and we want to move this down so we're going to add a margin top and let's say 100 pixels we're going to set the font size of the heading to 55 pixels and we're going to set a margin bottom of 10 pixels all right now for the power graph I just want to make that font a little bigger so let's say showcase P and we're going to set the font size to 20 pixels okay so that looks good that's our showcase next we have the newsletter area so let's say newsletter that's an ID we're going to set the padding on that to 15 pixels okay fall around color is going to be white background is going to be the same bluish grayish as the header so that's going to be what three from three five four those are two for a okay take a look at that that looks good now what we need to do is float the h1 to the left and float the form to the right I'm going to do is move this up all right so we'll say newsletter helps get spell so newsletter h1 we want that to float to the left and then let's do a newsletter form we want to float that to the right save it okay now I want to move that form down a little so we're going to add a margin top of 15 pixels and then we want to style this the the input so let's say newsletter now we could just say input but I want to be more specific and say the type of email an input that has the type of email so using css3 we can just use some brackets here and say type equals email okay and we're going to set padding to 4 pixels we're going to set the height to 25 pixels and we're going to set the width to 250 pixels okay so that looks a little better now for the button now the button remember has a class of button 1 and I want that to be global so that we can use that in other places as well so let's go up to where we have our global styles and we're going to say button underscore 1 okay so let's see what do we want to do here we're going to set the height of this to 38 we're going to set the background to be orange which is e8 e8 4 9 1d let's check that out okay now by default buttons have these borders I don't want any border so we're going to say border zero or you could do border none' we're going to add some padding to the left and right let's say padding left xx padding right xx okay and then I also want the color of the text to be white and that's it so there's our button so far so good now we're going to work on the boxes area so let's go down here put a comment in here say boxes okay that I also got to put a comment for the newsletter okay so boxes let's take the boxes id and I'm just going to add a margin top to move it down a little more so 20 pixels and then for each individual box will say boxes it's a class so dot box and let's see what we want to do here we need to float these to the left okay if we do that let's see what it looks like okay so we need to add a width now remember what this is everything's responsive so this is going to be a percentage I'm going to say 30% okay now what we want to do is add some padding so I'm going to say padding 10 pixels okay and we want it align Center okay now these images I want these smaller so what we're going to do is say boxes dot box and then we want the image inside of it okay we're going to set the width to 90 pixels okay and the height will be Auto as well okay now the last thing on this page that we want to do is the footer so footer let's add padding of 20 pixels let's add a margin top to move it down a little bit 20 pixels let's say color white background so background color and we're going to do ee8 4 9 1 d okay and then we just want to text-align:center save that and there's our footer so our home page is now complete okay not too bad so now we're going to create our inner pages so let's create a new file and we'll call this about HTML and we might as well create the services page as well okay so let's open up about and then what I'm going to do is copy everything that's in the index file and paste that in about alright and then we're just going to change some stuff okay so in the title let's actually just change welcome to about okay we're going to want to change the current class of this list item I'm just going to copy and then cut that out put that on this one because we're on the about page showcase is going to completely go away that's only for the home page newsletter can stay boxes we're not going to have but what I'm going to do here we're going to change this section ID to Maine okay and then we're going to keep the container but get rid of everything inside of it all right so let's save that for now and then just click on about and it should look like that and then what we're going to have is we're going to have an article another html5 semantic tag and we're going to give this an ID let's give this an idea of Maine not Maine will say Maine call okay main column and then in here we're going to have an h1 this will be the page title and we'll give us a class of page title okay in case you want to style that later on and for the page title let's just say about us alright and then under that we're going to have a couple power graphs which we can grab from lips um calm okay so we'll just generate a couple paragraphs we'll copy the first two we'll paste this in now we're going to open up a paragraph tag here paste that in now we have two paragraphs so we want to go to the end of the first one put the ending tag and then start another one and under that put that ending paragraph tag just like that I'll save it take a look and it should look like that now we want a sidebar on this page so we're going to go after the article okay right after the article and then we're going to use an a side okay another html5 semantic element we're going to give it an ID of sidebar alright so in here we're just going to put an h3 we'll say what we do which is just going to be a short text blurb I'm just going to grab some of this text here and paste that in inside of a paragraph okay save that and obviously by default it's not going to be a sidebar it's not going to float so we need to do that the CSS so let's go to style.css and we'll put this right above the footer okay let's say sidebar and it's an a side with the ID of sidebar and we want to float that to the right and then let's set the width to 30% and I'm also going to set a margin top of 10 pixels all right so if we take a look at that it's floated over to the side has the 30% with but we need this to also flow to the left with with a width as well so let's go let's see we'll just say I guess we'll say article or let's say main main call all right so it's article with the ID of main call all right and we're going to float to the left and we're going to set the width to 65% let's take a look at that and there we go now we have a main column and a sidebar now I want this to have a doc background what I'm going to do is set a global style of doc so that we can add that to other things if we want as well so up where we have our global styles will stay dark we're going to set padding of 15 pixels set a background Oh set a background of e8 for 9 1d we're going to set the color to white let's see what else actually no that's not the color background I want that's the orange color we want 3 5 4 2 4 a ok and then we're just going to add a margin top of 10 pixels and it's also add a margin bottom of 10 pixels I apologize if you can hear my son yelling in the background upstairs ok so now we have this class of dark so let's save that and we're going to apply that to see where are we in the sidebar we're actually going to wrap a div and the class of dark ok let's save that see what it looks like alright so now we can put this we can apply this class to anywhere let's say we want to put this on the second paragraph in the about we could just put it on the P tag and say class dark and reload and now we have that which looks pretty nice so that's the about page next we're going to do the services we're going to copy everything in the about HTML and put that in the services let's change the title okay that's all going to be the same this class current though we're going to take that off of the about list item and put that on to services all right and then let's go down here change the h1 to services ok we can get rid of the paragraphs and we're going to put in a ul and let's give this UL an ID of services okay and obviously we need our list items now each list item is going to have an h3 okay so this service will say website design and we're going to have a power graph I'm just going to paste this in okay so we have one power graph with some put some dummy text and then we have another paragraph that has the pricing okay and then what I'll do is just copy this li paste it in two more times for this service let's say website maintenance set this to let's say 250 per month and then this one here let's change this to website hosting and we'll change that to $25.00 per month okay now for the sidebar we're going to change this up a little instead of what we do we're going to say get a quote and then we're just going to put a form in here so I'm going to get rid of the paragraph and we're going to paste this form in alright so if we take a look at it we have a form with the class of quote okay we have a div with a label for name then a line break then an input with the placeholder of name okay then we doing the same thing but with email we could probably change that type to email and then a message which is going to be a text area with a placeholder and then for the button we're using that same button one class that we used in the SUBSCRIBE form so let's save that and go to services and there we go all right now we need to style this list and the form because that doesn't look very good so let's go back to our style sheet we'll go down to the bottom let's go right above the footer and put in a comment here we'll say services and you well I think it had an ID of services and we don't actually need to style that itself we just need to do the list items so put an li in there we're going to set the list style to none which takes away the bullets will set a padding of 20 pixels will set a border around each one with a gray border solid in one pixel and then a margin bottom which will set to 5 pixels and then a background which will be another shade of light grey so II six will do okay let's take a look at that okay it looks pretty good now for the quote form we're going to go up to where we have our sidebar and we're going to say a side sidebar and let's do dot quote okay as a class of quote and then the input I also want to do it for the text err yeah the text area so let's copy that put that there say text area and then I just want to set the width of these to ninety percent and a padding of five pixels reload and then that looks much better okay so the full version of our site is complete now what we need to do is make it look good when it's on a mobile device because right now it looks like this okay now the way that we do this is through media queries we can set media queries basically say that this group of CSS will only work if it's at a certain width if the screen is at a certain width so we usually put this at the bottom let's put a comment here we'll say media queries all right and what we're going to do is say put the @ symbol and then media like that so it's formatted like a function and then we just want to say max width and standard size for this would be 768 pixels that's usually around where tablets tablet screen sizes are as far as pixels let me just move this up alright so anything we put in here will only be affected when the screen is at that size so to just test it out let's say body and we're going to set display to none which will take everything off the screen save that reload and now you'll see that there's nothing there but if I go past 768 it shows up so when it hits 768 that's when those media queries will be in effect all right so let's get rid of that we definitely don't want that now a huge part of what we're doing here is just removing floats because you know if this is float over here when it's a small size we don't want that we want them stacked on top of each other so let's start with the header okay so we have our header branding and what we want to do is just remove the float by saying float none all right we also want to align everything to the center and then we just want to set the width to be pulse-width 100% all right so we want that done with the branding we also want it done with the list items all right so we'll put a comma here let's say header nav and then also the list items themselves so header nav Li okay so let's go ahead and save that and let's reload and now you can see they're on top of each other now I also want the header to have a little space underneath so we're going to put another property here for header and we're just going to add padding bottom and let's do 20 pixels all right so now that adds some space underneath so let's look at the next problem the showcase area there's too much space right here so what we'll do is say showcase h1 which is a hundred pixels margin by default but we're going to change it to 40 pixels okay so there's not as much space so that looks good now for the newsletter again we don't want this to be float either one so we're going to add it up here put a comma and say newsletter h1 and also the form so newsletter form save that okay so that looks much better now if we go a little smaller than that you'll see that the button drops to the next line so what I want to do is make that a block so that it's always on a separate line and then make it as it make it 100% wide so we're going to add newsletter and we want the button okay so we want to say display block display block and we want the width to be 100% save that all right and let's also set this to 100% width I think it's 90 by default so we'll say newsletter form input and let's make it so it's the email and we're just going to set that with to 100% let's also add a margin to the bottom push the button away a little bit that'll be five pixels okay so that looks pretty good now we're going to move on to the the boxes so each box should we'll remove the float so we're going to add that up here as well so boxes dot box save it there we go okay very very simple so now we have a responsive home page so let's look at the about see what's going on here so all we really need to do here is remove these floats so we're going to again add to this article main call and we also want to add the sidebar so a side sidebar save that reload there we go services services looks good you may want to make this button a block as well so let's go here and we'll put a comma and say quote button and we'll do the same thing just make it a block and a hundred percent okay and if you want to do these inputs we can do that as well let's see you'll just add to this we'll say dot quote input and quote text area make those 100 percent as well alright that didn't really do anything that's fine that looks fine alright so now we have a responsive html5 clean coded website alright so hopefully you guys found this this video helpful I will put the link to download the code in the description chin and thank you for watching

Channel: Traversy Media

Views: 2,785,617

Rating: 4.945456 out of 5

Keywords: HTML5, html5 tutorial, html5 website, html tutorial, html css, responsive webiste, learn html, html for beginners, responsive html, css tutorial, css3, html5 css3, mobile webiste

Id: Wm6CUkswsNw

Length: 61min 14sec (3674 seconds)

Published: Sun Dec 25 2016