Create a Responsive Website Using HTML5 and CSS3

hi guys this is Christian from first web designer calm and as I promised you in my html5 and css3 articles I will today help you through this video tutorial create a fully responsive html5 css3 theme and before starting I just want to tell you that there's no way you're understand much of this tutorial if you didn't read my previous two articles so please um go out there if you didn't and read my html5 css3 tutorials if you do not have any prior experience with this to a coding languages otherwise you will not understand much from this I created a theme that's how the idea for this tutorial started um and the theme you can see right here this is what we're going to work with and it's extremely simple um as simple as it gets and because the reason the reason behind this is that I do not want to create complicated stuff to confuse you I want to create it as as simple as possible to be able for you to be able to follow me and that's why I chose a very very simple theme which we can work with today um and before jumping into it I also want to tell you that although in the beginning I thought I will make the theme available for you to download I decided against it although I will make it available at a later point in time and this is because I think if I make it available for download you will just gonna download it and you know you won't learn much about it the best way to learn is to actually code yourself so what I'm going to do is that I'm going to show you how to create this framework how to Grady's webpage on your own and then in a few weeks I will put the theme up for download as well but until then you will have time to practice with your own theme and so on this theme is is actually my plans are actually for this team to be an ongoing work and it will be ongoing work because after we will create this together I want to go and I promise you we'll have some other tutorials about html5 css3 and gonna add things to this thing so it is ongoing work and another thing is that I do not want this I do not ask today to spend three hours on this video tutorial and because you know there are lots of things that you can do it on your own like styling the theme and so on and I'm gonna allow you to that but what I'm gonna do today and what I got to show you how to do is actually how to it's actually how to create the HTML framework for it and then basic very basic styling as you can see this team is responsive and that's what we're going to create today umm well before starting just want to mention one more thing and I am a very fast coder and I'm a very fast OS user so I use a lot of keyboard shortcuts and sound if it's at some point in time it gets confusing for you do not hesitate to answer to ask a question and ask me what I did in comments below because because I'm gonna be here I'm gonna answer so let's just jump into it um well I use coda a2 to code instead of Adobe Dreamweaver or anything else and I like very much like code I very much so what I'm going to start with is duplicate this team that you just saw here on the desktop and then go into it desktop yes and then open both index and style and erase everything from here so we have a blank theme to start with and save it and you see the preview it's empty so what we're going to start with it's actually we're gonna what we're going to focus on it in the HTML part in the beginning and then we're gonna take the CSS in the end and yeah we're just gonna jump into it and start coding so let's start with you know those things in the in the beginning of the page that basically can just copy from a layout to another one we're gonna write everything now and what you're gonna you're going to be able to use these things from now on so the doctype is I told you in the in the tutorial is it it's very easy to to remember and yeah it's just doctype HTML it's as simple as that and then a your list you would want to give a language to your webpage it's for pretty much for CEO purposes and then close the HTML tag I usually like to close the HTML tags as I open them and then just come back here and add things after HTML it's obvious in the head um where we're gonna add different things like for example we're going to add the title and let's say the title is going to be a html5 css3 responsive theme close the title and then after the title we want to add you know some some other basic stuff like meta charset which in this case should be utf-8 yes and after meta charset we want to add we want to link the stylesheet obviously that's again basic things which you should know about already my style is called style.css and it's in the main folder in the core folder and obviously the type of it is going to be text with CSS yes and then this is something that you might have we might it might be something new for you but in order for this well in order for this framework for this grid to be responsive to work on other devices they're going to have to add something called middle name if you port it's just something that tells the browser well you have to think of this web page as responsive and you have to consider it as a responsive team and then content is going to be a a width device-width and then yeah I usually write here initial scale it should be 1 so this is this is something basic that you're just gonna have to remember it it's just just how it is well that's the header it's it's not Mott Street more em so so we can just continue with the with actually creating the body body of the webpage as you can see I'm very I'm not messy at all and I like to use indentation and so on so I assume it's a good idea to do that and I advise you to do it because it's going to help a lot not only you but also if others were going to come and look at your code that's going to help a lot so using sedation we want to give a class this body and I usually I usually call it body because it's much easier for me to remember all these names and classes that I'm going to use today those are just things that you can just you know rename in your own way I just we're gonna I'm gonna call them as I as I'm used to call them because it just makes the work easier for me um yes so we have the pony in the body if I show you the theme yeah let's go here index.html in the body we're going to have three main containers we're going to have the header which is which includes the logo and navigation we're going to have something called main content which is this whole a container which contains a smaller which I which actually contains two smaller areas it's the content area and it's a sidebar or the sidebars and then the third part the third main area is going to be obviously the footer so we're going to start building this header with with logo and navigation and we're going to do that from here into using the header tag and give it a class I'm going to call it a main header because you're going to see I'm not calling the class header because a bit later on we're going to use some other header tags and might use header there so this is the main header I'd call it like that so you so you always know it's the main one when you go in style in CSS any we want to introduce a picture you know which is which is a the logo and I already have it it's it's a log it's a jiff a gif a logo in the core I think it's at the core isn't yeah but we can as well it's not this one we can as well move it into images yes so image core sorry image logo and then after the image you you will want to start with navigation the navigation instead of calling it like before in HTML 4 0 1 div id equals navigation now we call it laughs M it's that that makes work much easier for us and then here we close the UL and we close the nav and then we we have the list items which which are pretty much links let's see let's not give them a target right now let's call this one home and close the anchor we close the list you can just copy those so we don't have to write them all again and just rename them so they'll go you we have we already have D D header that's the header it's as simple as that and now after Heather we're gonna move into into into the main content this one we're gonna it's a deep it's a div ID and I'm going to call it main content and then I'm going to close it right away m and in the main content as I showed you in the theme and I can show you again you have the articles on the left side the sidebar on the right side which means that we're going to start coding the articles first then M you have a class called content which is which is the class where all the articles will will will come in and in this class called content we're going to have an article right because you learn that well that's how we we we represent articles from now on or content we represented by using this this new tag called an article and we're going to give it a class and then the class we're going to call it top content and I do this because we have another article below we're going to have two articles and that one is going to call bottom it's going to be called bottom content so we closed the article here again and in the article you have another header in this header you're going to have this information is the header of the article a container it's not the main header like this one is this is the header of the article container I'm gonna we're going to have the title here and let's make it an h2 and obviously it's probably going to be a link um yeah and give it title first post and then that should find a thing in the say first post yes and then we close the headline or the header um yes and then M we also close this header because we are done with that what it might be surprised about right now is that you can see this information about the article work we're going to call it footer we're going to have a new tag for it like we had a header tag for this information for this information we're going to have a footer tag now you might think this is where because footer for you meant something else from from from the past HTML you know footer was only used for for this part but that would something else now it's youth for CEO purposes because if you put this information in a fuller tag like we are going to do Google for example it's gonna interpret it as a footer and what do we know about a fuller well the footer is created to give some extra information so what Google is Google is going to look at their code and we're gonna see well you have this article and in the article you have a footer tag yeah well photo tag right and they're going to Google it kind of thing everything that's right here in this tag in this container it's some information about the respective content and that's good for it Co purposes so we're going to use the footer in although it's not in the footer um yeah it's just a paragraph basically and we're going to give it a class called post info because we want to just to style it you see differently and then then the rest and then we're gonna say this post is written by Christian and then close the paragraph and that's it and then now it comes the content the content we actually have a new tag in html5 for it called content so every time you insert something in this content tag Google is going to interpret it as a text as blocks of text and that's good that's only good um so we're gonna we're going to create this in this content we going to create the we're going to put some something but because I don't want to write too much I'm just gonna use some lorem ipsum I know it's cheesy but um but I don't have time for that is this has to be quite fast tutorial and so let's let's just put it in and then let's copy it so we have to and that's it you already coded half of the page um we already have in the Articles and then the header so we have half of the page now we need sidebars and footer and those are also very easy to create so we get out of this div because this div as you can see here is the main content here main content stops here see intonation helps helps a lot when you need to navigate through your code and we want to get out of main content because main content is only for for the articles in we're gonna we're going to want to create the sidebars and there are going to be some they're going to be they can they can be dibs or they can be something called a side which is a sidebar and we're going to give it a class top sidebar and then close a side again in and what why we give it a class is because we have several we have three different sidebars and we want them to be to be different maybe at some point in transit it's a good idea to do that in this sidebar you will have different tags and one of them it's uh ooh I received an email and so if I have and one of them it's article because it's going to have some content again you know like like we had like we had up here we knew that everything that's in the article is some content we're going to call it article um yeah and in the article you're gonna say we're going to have a title so let's say top sidebar enclosing today it's to tag and then underneath let's have a paragraph with some lorem ipsum yes and now you have the top side but what I want to do is actually copy this through times and rename it rename this because pretty much the sidebars will be the same in the HTML in or at least for now when you don't have any content you only have some some lorem ipsum okay and now what I want to do is create a footer in the footer you're gonna you're going to create the footer by using the footer class avoid by using the footer tag obviously and give it a tag called or a class or a called main footer like we called it up here we call the main content this one is going to be called main footer and close it and then in the footer we want to have a paragraph which will say copyright copy if first web designer gone across departments and and they yeah we might want to add a link here just for the sake of of it with the title its first with this I and yet that's it guys we already coded the page in HTML so let's go and preview it that's our place right now you have the HTML code it's exactly the same probably exactly the same code as it is here most of it is the same oh I don't like that now I like it and yeah okay then we have exactly the same content now we need to start install it and installing it it takes a bit more time because you know there are different things you have to take care of but but basically it's not that difficult so that's the first part of the article of the tutorial sorry we already coded this this HTML page you see is not responsive it's not or actually it is but it's responsive because or text is responsive because you use those tags article and so on and html5 knows what those tag means and it's responsive from the beginning but you see the the image is not damaged is not responsive on the top so let's get the into CSS now well when you start coding it it's always a good idea to to start with some standard tags like body and I only start with body because I want to give it a background image and I have this image in a folder that I showed you earlier and that's how you link it it's in the folder image and it's called BG dot PNG yes so see now I have a new background M yes more brightness it's nice now we want to give a color to the text and then yeah um let's let's give it a color called zero zero zero three zero five which is yeah well doesn't change now but you're going to notice it a bit later on when we're going to get back on it's on okay a font size another important thing and and in the theme that I coded I used eighty-seven point five percent you might ask me why according percent while I call in percents because um I wanted to be responsive I wanted to to be I want this phone to be fluid or to be it changeable so I call in eighteen percent and just so you know the base font size is usually 14 pixels so you're right now your font size is eighty seven point five percent out of forty pixels and if you're a math genius you're going to be able to know what that is a fun family yeah obviously you have to to name - name your font and let's just take something basic basic electric Arial and let's take Lucy the lucida sans unicode' let's say you know yes um I'm a line height freed so I'm going to put a line height of 1.5 and you see already things start to change here and then you obviously want your text to be aligned to the left and that's pretty much it and this is a thing that you can just copy and use all over the place besides maybe the line height maybe you're done like that and you have to modify the font and the font size but in the color and URL and so on but but these things are are the things that you probably would want to have in every page and and what you need to do now is go back here and start with all the classes that you have or yeah we don't have IDs with all the classes you have just take it from the first one the first class we have is body so let's go and yeah style the body what you want to be what what you want to do with this first is you would like because this is going to be on in the middle of the page you would like to give it a margin:0 auto means that everything will be censored and you can't see it now because and the width of this body is 100% but this is the trick our weight is going to be 70 percent only um so already you see em we have a container of 70 percent with and you might want to use clear:both although it's not very dangerous in this case not to use it but you always want to have it there for different purposes clear:both is what it does is that it makes your container in such a way that no floating elements will be on the left or on the right side of it so it's gonna be there's not gonna be any floating around it okay let's go back let's now we now we we pretty much have the main header but before the main header and actually it should be here we should style the links I only spy links first um it's always a good idea and I hate text decoration I hate when the links are underlined and see they're not anymore now um and we will use a bit later or rule the style thumb links and then we'll style visited links in different colors we don't have those colors yet but we we will have them and then we're also gonna style links that you hover and then the links that are currently active yes we're gonna leave them like that for now but you will want to we will go come back to them as I told you I showed you earlier a main header is the first thing and what's under main header it is the image so we want to style the image which which is our which is our logo so we we want to go here and style the main header image first and what we want from it is to give it a width of another 30% so it's not going to be that big anymore and then a hide of auto so it's gonna be just automatically adjusting and we might also want to give it a some margin on top and bottom and then nothing on the side and what I do that is because if I wouldn't give any margin this image I can actually show it to is much better to show it you is it it starts right from the top and I don't want that because it doesn't look too good so let's keep it a two percent in zero and yes after the main header the thing that comes afterwards is the navigation so we're gonna spend some time on the navigation and there are many adjustments to do so let's just jump into it main header navigation we have right now and what we want from navigation is if we look at this theme we want it to look exactly like that and so we want to give it a background color of the navigation and in the color that you saw there is is 666 M yeah and we will want to give it a height let's say 40 pixels there's no problem that you say pixel now instead of a percent and I'm going to show you you're going to realize why when we're going to start with media queries because we're going to call this height in a different way when we're going to code for the air for the further four for a narrow width screens so what you're going to see that later on so for now 40% is finding what we're going to create it's going to create some border radius because you can see here pretty much every container that has a background color has it's easy to notice that they have the same border radio it has a border radius of five pixels and we're going to use that really in the in the hole and in the hole yeah layout what we want to do just to make sure it's is to copy this twice and in front of this just put Moz and in WebKit this is for Mozilla and the first one and this is so that we are sure that these borders are easy to our visible in in process based on and WebKit yes so we have the navigation see that's how it looks now we have this this image this actually we have the background color on the navigation and what we want to continue with em it's the main header navigation and ul as you can see we if go back here we started with the main header image then we we continue with main header navigation you will and afterwards are going to continue with main header navigation you will Li so we're just going to continue styling in this way I think it's a good idea to call it main header with capital H and the mistake usually do that M yes and here too so let's let's see what we want from the list for the unordered list and what we want we want to get rid of those bullets in front of it so it's it's list-style:none in yeah so we got rid of those right now and we want to give them a margin of zero also when you're gonna see that later it's just gonna fall into place a bit later on and without without it I can show you it's a bigger margin here we don't want that because we want to be able to control all the margins we have and this one this margins here is a 2% from the image you can see it's a 2% bottom the top is the same as here this same is here we don't want another margin here so that's why we we said margin:0 auto here um we're going to continue with the main header you will navigation you will and now with the list items and what do we want to do is we want them to flow to the left to push each other to a left and then we obviously want to display display them in line yes that's why didn't work and remember that a CSS is case-sensitive so this doesn't work if it has a small age by the working capital age and good now we have depth we they are in line in what we're gonna do now is we we want to to make them look look nicer yeah and we're gonna we're gonna do that by by working a bit with with the with yeah with the link basically and so let's say main header navigation and all the links in the navigation and we also want to do the same for M for you know main header navigation all the other visited links so if they're visited they should have the same style and yes in here we want to give them we want to make them white instead of the standard blue we want to we want them to be displayed inline block em just just so we're sure that all its fade in line once giving my height and some padding so let's just give give it first let's give it a padding want to give a padding of I know 30 pixels and bottom drop although it's too much 20 pixel bottom top let's say in the 25 pixel left try let's see how that looks I think it's too much because what we want to achieve is have the links on them in the middle of the navigation so 20% is too much let's let's try 10 percent until pixel sorry 10 pixel is just for just fine and what we want to do as well is to give the links of height because as you can see right now it's impossible to see what Lynx you have to give them height so let's give it a high let's give the Lynx a height of you know ten pixels but that's very difficult to observe right now if it's right or not so what we're going to do is we're going to we're going to we're not going to give a height here but we're going to come back to it it's always a good idea when you have something when you're going to come back and just say come back here to assign height yes and we move on what we move on now is we want to to work on the on the Lynx who we want to hover over them and see your color or something like that and so main header we also want it's a class we also wanted to work with the ones that are active in yes I think in in order to yeah I skipped something when we created HTML because one of the link is obviously active because well you're always on one of the page solely let's say we're on home right now and give it a class of active so we're gonna have we're going to be able to style the active link that the link you're on right now um yes so we will also want to style main header navigation and all the links that are that have the class activity we will actually want to style the the active you know class for all the normal links and then main header navigation active for the visited links so how are we going to style it well first we're going to give it a background color as you can see if we go here they'll have an orange background color and and and we're going to do that background color that color that you saw is it's an orange cf5 c3 if you wanna mistaking it is yes perfect em and then we we want to give the text white color it is already white in so this is really not necessary um and then get rid of any possible text shadow that this might have see it works just fine the only problem is that it's a bit higher than the actual size of the navigation so I have to come back here and assign it a height is we said we will let's see 25 pixels it's too much let's say 20 20 it's perfect I was fast and another way you can you can calculate this because because it's pretty much math is you can go here and see the navigation has 40 pixel height and then you have a padding of 10 pixel bottom and check pixel top and that leaves the actual height of the link to 20 pixels so it's pure math and you don't have to be a math genius to that another thing that I might want to do is I add some border radius and because I don't like them so straight when they are in Internet in a container with the border radios the good part about this is that we can just copy this and we're just going to continue copying this all over the page because it's exactly the same thing we need so let's go to let's style a main header navigation list sorry ul Li and a because we want to style the link yes and let's let's just add this we don't need much more than that it should work anything you see it's already in it has this this rounds around corners and all of them have good which starts to get Travis shape you see it's knife okay now what we want to move on is the main content you see after the nav to the header it's the main content we have something to move on into to style so um yeah main content yeah what we want to do to the main content is them uh yeah have a borders anyway well I want the borders and I'd be able to see it because there's no background color you want you probably want a line height to it to let's say 25 pick pixels that's not quite good think good um so the main content I usually add some other it's just a standard thing that I added overflow:hidden Lily and you see it has a small and effect you can go and read more about overflow:hidden on the w3c web page but what it basically does is that if if two containers happen to be over each other if this overflow:hidden controls the behavior of the David of how the browser sees this code and it does is in such a way that one of these two containers gets clipped em and then what's underneath it it's visible good now well now we move on to the actual content which is M which is where we have the articles so we have main content now we move into this class content and what we want to do with it is give it a width and want to give it a width you might ask why it's because we want the content to stop around here because it has to be placed for the sidebars so we're going to give it a width of 70% so that's quite about right um and what we wanna do is give it a background color I think or no actually we're not going to give it back 100 we're going to keep the background color for for for a bit later on we want obviously it's very very important it needs to flow to the left cuz otherwise the sidebar will not be able to push it to push this container to the left side and with not it's not going to fit in here so float lift all the time very important and then we want to you know our borders which basically cannot see here and yeah they don't have to be here okay have to get later on and yeah then you have then you have this top content and yeah we'll only have top content here I forgot to to add a second content you know because we need to article so I'm just going to do it now I'm just going to take this article and copy it and call it bottom content no second post second post great so now we have to contents there are two an article sorry yes M so we want to style top content a bottom content D likely need to be styled the same because they're they're representing the same so we style the top content and then just duplicate it then rename it and here we want to give it a background color a white M what else you want to do well obviously want to add yeah want to add a borders sweet M yes might have to add some margins and padding's but we're going to look at that a bit later on so looks quite right a thing sub content let's copy it and rename it bottom content so now both articles are like that yeah we will want some padding because we don't want the text to start like that so just let's go here and add some padding and let's say 3% topping in the yeah top and bottom and let's say 5% in the sides should be around should be quite fine looks much better I think another thing is that you need way to give them a margin and so to the first post which is it's at the top content we're going to give it a margin top of let's say 2 pixels and then we want this one as well to have a margin top of 2 pixels so what we want to do now is them if you know it take these sidebars and put them into their place where they should actually be and make them look nice and they are called a top sidebar middle fibre and bottom sidebar and luckily we just have to just have one of them like we did with the content because they should be the same and what what you want to do is give them a width of a node let's say 25% from now and it and make them flow to the left and let's give them a background color let's make them white and then you just copy this two times and then call the middle and bottom let's see how it works it doesn't work mmm oh yeah it's probably because of this overflow:hidden I assume it is yeah it's because because that overflow:hidden is something standard that I had and sometimes it works sometimes it's not useful at all we're just going to delete them it from here and that's it so go up there and delete and what we want to do right now is add a border radius to to all these three sorry so they look like everything else and we want to give them a once you give them a margin or pretty much a margin left yeah margin left we're gonna have to give them like a five percent which is quite a lot I think and let's make this twenty seven percent and see what happens if we give them a margin left of three percent so it happens that you can see it's aligned perfectly the reason why it's aligned perfectly it's because we have twenty five twenty seven percent which the mark with the margin that is three percent that's thirty and then you already know that our main content M which is here is seventy plus or our content sorry it's seventy percent of it so it adds up to 100 that's why it's it fits we also want to give some padding inside I assume once you get you look nice so we're going to give a padding of let's say two percent three percent should be fine we're not going to concentrate on styling it right now anyway and then when you have this padding you also have to think of the fact that and you need to to cut from the width so you have a padding of six in total three left three to the right which means that your total width is going to be twenty one percent and so now you have it and then we we once a margin to the bottom to all of them and let's see margin bottom a to two percent and then we want the first one to have a margin top and I'm going to show you a trick now if you didn't know it once you have it margin chopped and 2% oh that's not good it should add up here and but yeah whatever we're gonna work on the own style word now and what I want to show you it's something very nice it's instead of writing three lines of code I can teach you how to write the same thing in only one so we're just going to say margin and first I'm going to write and then I'm going to explain it to percent 0 2 percent 3 percent what this represents this is these are all the dimensions all the margins top right bottom left clockwise starting with the top this is top this is right this is bottom this is left so you have top 2% which is this one you can just clean it from here you have the bottom which you have to the nothing to the right you don't want margin so right you have the bottom which is 20 sorry 2% we have it here so you can delete it and then you have left which is here and so there you go and yeah I don't know why doesn't that up I'm but but that's something that I would normally figure out after creating this thing now we want to go to the footer in the you know style it so we have made fuller and then we have main fuller paragraph those are the last two things that I and then we still have to work on in the main folder we would like it to have a width of a 100% of its container we want obviously to flow to the left we want it to have border radius the same we want a background color 1 the same background color is a navigation which far as I remember was 6 exists and then we want a margin on top of two percent let's see how it looks I think it looks by quite fine and now we're going to edit the part of the actual paragraph and of the main footer so we make it looks know look nicer in the style text and what we want is is a width let's give it a width of 92% of its a parent container and then a margin of zero order because we want it to be centered let's see how it looks and that looks just fine but we don't want a margin of 2% it was my mistake what a margin of I know let's say 2 to 2 percent now it looks better and another thing that I want is to go to main footer and give it a margin bottom of 2% because you know and we have the space here it gives some space and these two as I taught you earlier can be written in a single line so let's do that a margin 2% and 0 and that's only in case you want to instead of calling all the four you know top bottom left right instead you can call top bottom left right and combine them like that so you have top bottom two pixels and left right M 0 yes that was not what I was looking for what else you want to do well we're going to want to give it a color we want to make the text white and that's for sure go away yes and then the links are still like that in I told you earlier that we're going to go back to the links and edit them so let's go up here to the links and then give them a you know give them some colors instead of that that blue we want to make them we want to make them orange like like this kind of orange and so let's go here and say color and the color was C cannot remember it see a 5 C 3s yeah see if I said Prius C already there like that which it's a big difference look much better um we also want the same when they are home when they are active and when you hover over them and see now when you hover over them you have like that in the navigation and that's how I want them to look like here but right now they do not because well we didn't say that the we didn't say that we want a background color so instead of saying color this is going to be background color and the color of the text is going to be white so when when you're going to hover over it the text gets to be white because otherwise obviously this will happen and you will not be able to read it anymore so have to make the text white too and then a another thing that we it seems to forgotten ow I just remember it is this footer if you remember we call it footer here and we called it the post inviting yeah it's in the footer into the P and up in a paragraph class called posting from one style that and we want to go right here and style post info and let's say we're gonna make it italic so font-style:italic yes and we want to get a little bit different color let's give it a gray and 999 for example and what else we want to make wanna make them smaller because from a design point of view this this is you know helping for a here key you can see clearly what's more important in this one you can see that this is the least important a quite the most important and quite important and so yeah I think it looks quite good 85 percent let's say maybe 90 percent is maybe too small yeah I think it looks good and then we have you guys yes that's what seed and we might want to go to the footer and yeah I'm not very happy about the fact that that it has you know this has forty pixels and that's the footer is it's bigger than 40 pixels and I do not like that so let's say height of 40 pixels we see if that works yes and then we have to work bit with a rhythm yeah with a with this one one percent should be fine yeah it's not a good it's because when you work with pixels and since they get a bit a bit confusing but you can always say a margin of 10 pixels it's going to be in right on the center and again I did it by math it's 10 percent at 10 pixels up and down that's when it's until and until 40 percent well until 40 pixels is only 20 which is the height of the paragraph yeah that's it guys we have it let's make it responsive now how do you do that well not as you can see it's my response you know not in not responsive enough anyway it doesn't look too good I might say and so what we want to do is create this layout right so we're gonna put the navigation on top of each other we're going to make this image the whole size we're going to put sidebars under content yeah and we have the footer here and only thing we want to do is make use of more of the space because here we only make use of 70% of the space you see it's 15% here 50% here field here we make use of 90% because on a narrow screen you want to make use of more so so we're going to go here and then start with media queries well media queries were quite simple and I explained it to you in the css3 tutorial how they work I think so you should you should know that they're quite easy to implement and well we're going to work now with way with a width of minimum width of 150 pixels and a max width of let's say 600 pixels yeah and then we're going to do that I plan I usually keep it like that so it's everything that comes inside it it's in the media equation basically what you want to do is take this a this whole code and you know transform it the body is usually the same so you know that you don't work on that in the links I want them to stay the same because well I want the page to be similar so what we're going to start is going to start with the body and we're going to take it here and you know look at it yeah so I want the body instead of 70% should be 90% as I told you now you can always see before we refresh it that we make use of more space than it was before it's only 15 percent on each side so that's pretty much the only thing that we want to want to do with the body and it's very important to remember that if a variable is not changed or you do not want to change it it's a quite a bad practice to rename to name it here again and so that's why we're pretty much here we're going to we're going to delete this because it's the same clear:both is the same so we don't want it as you can see if we refresh the same nothing happens so yeah can always come back here and in for trouble work on the font size we might want it to be 90% it's a bit bigger as you can see or 95% because it's on mobile and you want to read it or can actually make it 100% you know it's it's a bit too big 9 90 95 % it should be fine that's not what I wanted to do yeah 95% should be fine yes and then we move on we go back up here what's the next will is the main header image we copy that we'll bring it here uh with as I told you want to make it 100% with because we want the logo to be on a whole width of the object container and then the height and the margins you do not need them because they're the same so as you can see it already looks the image is the same all right now we have to work on the navigation so we're going to copy everything that's up here called main header nav so this all of them some of them will be deleted at some point in time because you don't need them but you know you can copy everything now so we have everything now and then we're going to delete what we don't need so have this main header navigation and what we want to do with it well first we want to we want to keep the same background so we delete that and want to work on the height that we want to keep the borders to we delete that you can see the borders they remain the height we want to make it a four times just because we want them to be under each other so 5048 n by four is 160 so that's how we want it to look as you can see here looks like that because navigation cut over the the list is actually not inline anymore not displayed inline anymore then we move a Mainer navigation you will we want a list style non so we keep that what else we want margin:0 also we want that too so we have it and so we don't need to to mention it again but this time we want a padding left of zero because we want everything to start on the left side right from the margin and AB you will align now is this one they want them to to float to the left and we want them to be displayed in line which means that we don't need these two but what we need is that we need a walk weights of 100% because we want the link to be 100% right what makes what now it you can see that they are under each other but there's not enough we still need to do some things we want a margin of zero order because we want this one that takes to be centered and and then yeah text-align:center actually I don't think it's it's required for this one is it no which is not required you can actually delete that so the text-align:center that important next line instead of yeah it display:inline-block that's fine and this looks fine padding padding yeah penny might be different so it's true we're going to delete them we don't need them anymore but the padding might be different I'm not by much and the height is going to be probably the same I think I think we're going to keep it like that for now Lulu looks just fine and so let's move it here a background is the same one the same color six shadow non so we want to delete that actually don't need them anymore at all see nothing gets changed here you only have some you know some border radius we don't need them anymore another thing that we still need to do is if you see as you see this is not right this should be it you know on a whole the link should be is wide as its container and although it says here that it's 100% it's it's not really enough because we forgot to put something we we forgot to go back here and say display we want to display there's a block and that's pretty much pretty much makes it a work is the way we want it to work uh yeah there we have it we pretty much have everything right now so late in the nether so let's move to remain content and no content let's just copy this for now put them here and yeah let's start with the main content - it's not much to to modify the main content you pretty much one in the same you want the same line height probably or if we want to work with the line height we can well know modified here let's say 30 pixel line height or yeah 28 whatever um but basically you can just delete this because we're not working on style right now you can style it yourself content there are some changes here because now we don't want the content to be 70% anymore we want it to be 100% we wanted to use the whole way wide we're width of the of the page right and the float is left we let's see if I had imagined chop what happens here looks much better I think yeah much better definitely then we want to work with with no sub content and in bottom content um but to be honest there's not much to work with because they look quite okay already a thing that you want to do is you want to take so bottom condom in top content that can be deleted but we're going to keep them because I might want to do something to them a posting for you remember this these things on mobile you don't really want them because they are information that maybe it's there it's not so important so what I usually do just put it display:none and they already disappeared because on mobile you just want to focus on the important things why I still wanted to keep this a bottom and sub content is because I'm not so happy about those margins and I'm a freak with margins so let's go here and say margin top let's give this one a margin top of 3% instead of two and then to this one also a margin bottom of 3% looks much better I think none yeah although it could give you four percent well I said am I going to style it right now because I don't have time so I'm just going to move on what do we need to do right now is copied the sidebars and again they will look the same and this should be here but here yes so we want to copy this three sidebars into the media queries mm and why do we wanted what do you want to modify it's not much but we clearly want to give it a width so that they will you also use the whole width of the screen and we have to think of the fact that it's not 100% width as you can see it because we also have these margins and padding's so what we need to do is give it a width of let's just calculate where we have margins and padding's let's add up and see what it gives we have a 3% on the left side here so it's already it should be a 97 percent or or actually what we could do is keep it to 100% or we should do keep it to 100% and give it a zero margin here and you can see it's already where it should be then it's still bigger but that's because we have this padding waiting inside padding of 6% 2 times 3 so there should be 94% it should look just fine and it does and that's pretty much what we want for anything else for all of them I want them to flow to the left but you know you know don't indeed need those anymore we want them to be the same that's good we can actually spare some space by using this because now they're really the same before they had some small differences but now they're really the same so we can just spare some and no ten lines of codes or something like that and keep them to say great regarding the fuller there's not much to modify right now and I'm quite happy with how it looks so we have 230 lines of code here and you know almost 100 here so I with under 330 lines of code you created this layout it's done guys it's that's how it looks like sure again there are still that things that you need to work with especially style you see there are many you know pixels here and pixels here and the missing and not exactly so sharpest I want it to be but I don't have time to spend on that right now um so that's it yeah it's so easy to actually create a responsive html5 css3 theme I hope you found this useful and I as I promised you in the beginning this is going to be a theme which is going to incorporate some more ongoing work so I'm not going to make it available for you right now because I really want you to go out there and code it yourself instead of just you know copying it or downloading it and just using it right away we have no problems with you using them but we want you to learn because that's our purpose here at first web designer so just go out there and code it yourself try try try to do yourself if you have some questions don't hesitate to add it to ask in the comments in the bottom and and I promise I'm going to answer as fast as possible and yeah I'm going to keep an eye on your on your feedback to this tutorial and I promise I'm going to use your feedback to to make the next tutorial better so please don't hesitate to tell me what you liked about it and if there were things you didn't like and if you like me to talk I know louder or um one my screen brightness to be lower or whatever tell me because I would one to improve this and I promise I'll improve it by the next tutorial which if I'm not mistaking its going to be about html5 contact forms creating those contact forms so we're going to fill in this contact this contact page and we're going to make the contact form responsive to a so whenever we go to the contact page on mobile it's gonna look very nice that was it guys that was for me I hope you had fun and I hope you learned something that's my main purpose for today that was my main purpose for today again my name is Kristian Vasily I am editor at first web designer comm and I'm really looking forward to to hear about your about your feedback

Channel: 1stWebDesigner

Views: 1,966,145

Keywords: css3, Cascading Style Sheets (Programming Language), Responsive Web Design (Industry), Website (Industry), HTML5 (API), HTML (Programming Language), Web Design (Interest), Design (Industry), Programming Language (Software Genre)

Id: eOG90Q8EfRo

Length: 66min 30sec (3990 seconds)

Published: Sat Mar 16 2013