Build A Responsive HTML & CSS Template With FlexboxGrid

hey guys welcome to another front-end project in this video we're going to be building an html5 and css3 website or website template with flexbox grid now fluxbox grid is a very light flex box base grid system very similar to what you'd find in bootstrap 4 okay without the rest of the framework if you want to keep things light I'm also using it because I don't want to use a full framework because I want this to be geared towards beginners that are just getting into learning html5 and CSS this is actually a really good video to follow up after the html5 responsive website video that that that's pretty popular so we're going to look at the project we're going to talk a little bit about flexbox grid and then we'll get into it this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development bootcamp intended to get you a full time job in the industry to learn more visit dev mountain comm or click the link in the description below alright guys so let's take a look at what we'll be building now I'm not a professional designer I mean I think it's alright but it's just a basic template it's not made to be something that you know is going to go into production but very basic very clean so up at the top we have our header with just an h1 for the logo and then we have our basic navigation on the side here alright we're going to have a home page which is the main focus of this project and then in about services and contact page so here we have a giant showcase image very high quality this is a free stock image so you're free to use this it's going to be included in the files and then we just have an h1 and some sub text here with a clear background or a background that has some transparency okay we also made the the radius the border is really rounded and then down here we have some icons we're going to be using font awesome which is gives us a whole bunch of different icons to work with and pretty customisable we can we change the colors we can make them bigger or smaller and these are just some basic core features all right and then right over to that we have this section here with this background which i think looks pretty nice and then we just have a stock image of an iPhone and then just some core features and an unordered list with some checkbox icons or check marks and then for the footer we have this area with three separate columns with one with the contact the about and then just a simple newsletter form okay no functionality in the forms this is just strictly front-end and then just a simple copy right so that'll be this is this is where the meat of the project will be now for the inner pages they're very simple for the about page we just have this who we are section and that's what we do and then we have the footer all right we also have this sub header area on the inner pages so this is the services it's basically just a UL it's an unordered list with some some background color we're using css3 so we can color every odd or even list item and then the contact is just a very very simple form with name email and message alright so we're going to try to squeeze this into one video I may have to do two or three but I'm pretty sure we can do it one I just like to keep it under an hour so all right now flexbox grid is the reason I'm using this is because I want to keep this very light I don't want to use a full framework the main focus of this is going to be learning html5 and CSS and building a UI building a website but this this this is just like the bootstrap for grid system it uses flexbox obviously and it even has the same class names if we look at this we have a div with the class of row so anytime we want to row we're going to wrap that now a row could be anything this could be a row this and this could be a row with 2 to column divs and if we look at here it has some examples with these blue boxes and the class names are the exact same as bootstrap I think it's missing one I think bootstrap has an extra large as well but basically call excess is extra small small medium and large and this pertains to how big the screen is so if we go here this is this is large so this particular div would span four columns if if it was viewed in this screen size if we go down to about here that would be medium so that would be six if we go down what's if we go down to around here that would be small so that would be eight columns this div would stretch and if we went really small extra small it would be twelve columns which would be the entire width of that element so for instance this right here would be a twelve column this would be two six column divs all right this would be it looks like a ten and then a two column and just has to add up to 12 okay because it's a twelve twelve column based grid you can also do fluid lengths so this would be percentages you can see it works with flex flex styling behind the scenes simple syntax see offsets just like with bootstrap you can do call and then the sides and then the offset for instance this one here looks like it's a one column that's offset ten are offset eleven this looks like a Levin column offset by one you can also do auto width which is really nice so if you want your all your columns in that row to be the same size you don't even have to specify the size you could just do call XS or call MD or LG or whatever nested grids you can also put grids inside of other grids or columns inside of other columns and then this here alignment is really nice this is what's really nice about flexbox is that we can easily align it by saying for instance this row we would want all of the columns to be aligned to the left which would be start if we wanted them aligned centered we could do Center and then the size and if we wanted them aligned to the right we could do end so end excess or end MD and then you can also align them vertically so you can do top middle and bottom all right and then you can also you can control the the the padding and margin and all that so you can apply distribution you can do around between all the stuff that you can do with Flex blocks you can do with this framework it's just easier alright I would suggest after doing this looking at the Flex box in 20 minutes video and that will give you some some good insight into how to actually use just flex box so enough of the explanation let's go ahead and get started we already we already go through quite a few minutes here so we're going to do everything basically the easiest way possible we're going to just download this we're not going to use Bower or any package managers we're not going to use SAS this is geared towards beginners just getting into HTML and CSS alright so I'm going to create a new project folder let me just go into my projects folder you can create this wherever you want and we're going to call this app theme okay let me actually get my other keyboard it's a little quieter non-mechanical alright and we're going to create an index.html file which will be our home page and let's create some as well create the folders here so CSS and images okay no JavaScript maybe we can do that in another video but this is just strictly HTML and CSS alright so let's let's open this up I'm going to be using Adam for my text editor which is really nice it's built on top of electron which is a framework that allows you to build desktop applications with JavaScript so it's really nice and then we're just going to open that folder and add it as a project so I want to go to my projects app theme and select that folder alright so now we're going to add some basic HTML tags so if you're an atom you can do HTML tab and it'll give you this base structure of a document and then let's put in app bean for our title and then we're going to need to include our CSS files so we're going to download flexbox grid so let's go to download we're going to do it the easiest way possible which is just grabbing the zip file and we'll go into that now this has all the source code as the the production code it has the documentation all kinds of stuff but all we need is in the CSS folder we want this flexbox grid dot CSS so let's bring that over to our CSS folder all right well close that up and then we're also going to create a custom style sheet called style dot CSS all right so now let's go back to our HTML and let's add will say CSS slash flexbox grid dot CSS and then we'll copy this and then we want our custom style sheet just like that alright so we're going to start off with with the head with the header so let's take a look at the finished project here so we have this header and if I open up chrome tools and click inspect it'll highlight the divs the element so this is a ten column div you can see it stretches ten columns wide and then this is a two column okay so what we need to do is create a row this is this whole thing's is a row and then we have a two column and a ten column all right now the only time it's not ten and two is if we go down to extra small and then you can see each one is twelve columns width which reaches across the entire thing so we need to specify that as well just remember that so let's go into our HTML here and I'm just going to add in a comment here so to say this is going to be the header and this is going to be we're going to use the header tag which is an html5 tag now when we style this we could just grab on to the header element but if you have multiple header elements like let's say you have an article or a blog and you have a header at the top of each article we don't want it to style that so let's give this an ID of main header all right now the difference between IDs and classes a lot of people get confused when they're just starting out you want to use an ID for something that's unique so for instance we're not going to have a main header anywhere else in the website so that's something that you would put in an ID a class however is something that you'll probably reuse throughout the site and I'll show you an example of that in a minute so in the header we're going to put a div with the class of container and what that does is it consolidates everything into a certain a certain percentage of the screen now for some reason flex blocks grid doesn't add a margin to it so it doesn't push it into the middle but so we'll have to add that but I'll show you what I mean in a few minutes so in the container we then need a row all right so let's say div class row and in here we're going to have two divs which are going to be our columns this is where the logo will go and I'll add the classes in a minute which is going to be an h1 it'll say app theme and then we'll have another column or another div which will have the navigation so let's put in a nav tag here and again I'm going to give this nav an ID so that we can specify this particular menu and then in here we'll have a ul an unordered list and then some Li tags with some links inside so this is going to go to index dot HTML so that'll be a link to home and then we're going to have a couple other ones so this will be a boat this will be services and this will be contact okay so let's let's go ahead and take a look at this so we'll open it up I'm just going to use the file system I'm not using a server or anything and notice how the the menu is aligned to the right okay if we didn't specify that this was a row it wouldn't be so if I were to change if I were to just get rid of the row class and reload then you can see it just goes on one out one under each other but since we added a row it's going to float everything now we you know you only don't want to specify a column if they're all if they're always going to be equal and they're not we're going to have a two column and then a ten column it's not going to be for instance you know three three three so we have to specify in here that we want this to be will say call MD for medium size medium size screens and this will be two okay it's also going to be call SM actually no let's do I want to put it in order I want to have extra small small medium large I sound like the more water in McDonald so call SM to call MD to call LG - okay and remember when it's when it's extra small when it's the mobile version we don't want this to be a two column we want to go all the way across which will be a twelve column so this will be called XS twelve all right hopefully that makes sense and then I'm just going to copy this and go here and then this is going to be ten columns except for when it's extra small it'll be twelve columns all right so now let's go back and reload and let's open up the chrome tools and inspect and you'll see that this is ten columns this is two columns but when we go to extra small it goes to twelve columns each okay which goes across the whole page now I want this to be aligned to the middle like I said for some reason flexbox grid doesn't add the margin it does add the boundaries you'll see that it ends so what we'll do is just open up our style sheet and say dot container this is the only CSS I'm going to add for right now and we're just going to do margin Auto which should bring everything into the middle because what it does is it gives the same amount of margin on all sides so on the left on the right and it pushes it into the middle all right so if we reload now you'll see that it's pushed in the middle which is what we want all right so let's go back to our index.html and see another thing we want to do is align we want to align both of these to be to the right okay because the navigation we want it to be over here let me shut that off we want the navigation over here now if we go to our documentation and we look at alignments we want this ok the menu should be over here so we need to add the alignments to the row class so we're going to do end - and then whatever the size we want okay which is going to be everything except excess excess remember it's a 12 column div when it's mobile version so it doesn't matter we don't need to align it so for the row let's say we want align to the end for small for medium and for large so now let's go back and reload and now you'll see that they're they're both aligned to the right okay nevermind this these bullet points will remove those later so that should be it for the header as far as the mark-up as far as the HTML so let's move on to the showcase we're going to go under the header looks mean to do that and put a comment here this is going to be the showcase okay so let's say we're going to actually going to use a section and a section is also an html5 tag we're going to give it an ID of showcase and then in here we're going to do the same thing at a container now the reason I don't put container before showcase is because if we look at the final template here the container keeps everything in here okay from here to here and the image we want it to span across the entire thing if we added the container around the showcase where we're going to put the image it would end right here and I don't want that all right so in here let's put our row and we're going to have this is actually going to be it's going to go across the whole page and so let's put another div here and this is where we'll have our h1 which will say welcome to I want to say welcome to app theme and I'm also going to wrap this in a span with class of primary text I think I need to do that to the logo as well let me see that I do that yet no I didn't so we just want to go right here and put a span class equals primary text okay and that's like I said it's a good example of when to use a class because we're using this throughout the whole site now the reason we use a span instead of a div is because a span is inline it's an inline element while a div is block-level element and what that means is if it's a block level after the tag ends right here would put this on another line on a new line all right we don't want that we want this all in the same line so a span will actually let us do that all right so back down here let's put in a paragraph and we'll just say a template template built with html5 css3 and flexbox grid all right so it's our showcase now as far as the columns it's going to be if we look at it it's going to be one one long column so it's going to be to one long dip so it'll be twelve columns so let's go in here and say call XS twelve call SM twelve MD and LG and save that then we'll take a look at it okay so it's going to look very ugly because we haven't added added our own CSS but we want to align it to the middle or to the center horizontally and to the middle vertically so we need to remember we add our alignments to the row class so this will be Center XS we want it centered on for all for all screen sizes so small MD large we also want it middle which is vertical so middle XS middle SM middle LG all right and now if we go and reload it should align to the middle good so that's the showcase now we want the feature section so let's go down here and add a comment features okay same thing these are all going to have all the sections will have the same basic layout the only difference is going to be the the width of each column and the alignments so this will have an idea of features and again we'll have a container and we'll have our row and then we have our columns so let's take a look at what feature this is going to look like all right so this is an example of nesting grids because the whole thing together this whole area is going to be a 12 column div that goes across the whole thing and then inside that we're going to have two rows of three column dibs I'm so yeah three four column dips because three times four is 12 so if we set them to four there's going to be three of them so let's start off with the twelve column so we'll say call so you call XS twelve call SM twelve all right and then in here we're going to have our h2 which will say core features and then we'll have a paragraph which will just say what's included and then we're going to start the first row which will have three four column divs so this will have a row and then we'll do call XS all right now that the extra small isn't going to have three four column divs it's going to be just one across which will be twelve columns so call XS twelve and then the rest of them we want them to float so this will be four MD for LG four all right and then each one's going to have an icon which I'll get to in a second we need to use font awesome for that let's put an H for we'll stay fully optimized and then paragraph no this is just going to be some dummy text with atom we can type in larom tab and it's going to just put in some sample text here but I want this really short so I'm going to end it right here all right now remember each row will have three of these so we need to copy this paste it in two more times and let's change the change this to free support and change this to free upgrades okay now remember we need two of these rows so look at a comment here we'll just say icon row one and that ends right here so I'm going to copy this whole thing and then this will be icon row two so let's change these this one's going to be uptime guarantee this one's going to be multi-user and this one's going to be plug-and-play all right so let's go ahead and save and take a look at it okay good now we want everything aligned to the middle if we look here we want the whole 12 column row which is everything aligned to the middle as well as each one of these so remember alignments go in the row so let's go right here and we'll say Center XS Center MD Center LG and then we'll just copy this and put that on these two as well all right and it's reload now everything's aligned to the middle so now for the icon so you can see each one of these has an icon so let's go to font awesome and we're going to download the package and open that up and again this comes with everything SAS files less files all we want is in the CSS folder we want this file right here so we're going to bring that over to our CSS file and then we also want to bring over the fonts folder to the root of our website all right and that should be good to go so let's go ahead and close that up and now let's go to where we have fully optimized and we're going to put in an eye tag with a class of FA on awesome and then also the specific image we want which is called FA dashboard and you can find all the class names at the font awesome website all right that should be all we need to put right there actually it's put a blind break all right and then we'll copy this and then let's go above free support this one is going to be let's see what is its f a question circle o so question - circle - oh all right and then three upgrades is going to be f a rocket and then let's see uptime guarantee is going to be F a - line - chart and C multi-user will be FA users and plug and play is going to be FA plug all right so let's see if those is the icons actually you know what they're not going to work because we didn't bring in the style sheet yet so let's go ahead and copy that and then we're just going to add here font - awesome so let's go back where the hell is my nav bar all right so let's reload and now you can see this icons they're very small but we'll fix that later on when we add our CSS so the next thing we want is the info section which is this right here which is going to be two six column divs okay split right down the middle aligned to the middle aligned to the center so let's do that features so under the feature section we'll have info section okay and it's going to be a section tag with an ID of info div class container div class row and then our columns so remember they're going to be two six column divs so we can say call XS except for when it's extra small when it's a mobile version it'll be twelve columns because we don't want to float the two if the screen is really small but the rest will be six okay there's going to be two of them this one's going to have the image of the iPhone so let's say image source is going to be images / iPhone dot PNG and you'll have all these files for download in the description let me just add them to my folder I have the finished product in my sandbox here so I'm just going to grab all three of these images and paste those in alright so the iPhone on one side then we have the core features on the other so this will be an H it's an h4 I know it's an h2 will say core features and then we're going to have an unordered list I'm just going to paste this in okay so we just have some Czech icons and then the same features that we had above so let's save that and see what it looks like all right now the image is absolutely huge what we need to do is we need to say that we want that width to be a hundred percent of its container which is its container is over here so again this is going to be CSS that I add right now so let's say image so all images I'm going to set to 100 percent of the container by default so now if we go back and reload it's actually contained in its container so we want these align to the middle and center so let's go back to the row that's where we do our alignment and we're going to do Center XS send our medium Center LG we also want to align to the middle vertically for all sizes middle SM little MD and middle large let's take a look okay that's good now we're going to do the footer the company area and then the footer so under here let's say company so notice how every section has basically the same kind of formatting that's what you want to do when you're building you eyes is you want kind of like components you can look at each of these sections as a component that takes in certain attributes so section ID will be company and then let's say one our container will be row then we'll have our columns let's see what we got here I think it's three four column dudes yeah so this will be four columns four columns for columns except for when it's extra small then we'll be on top of each other so let's do div class dick it did div class did dick class and this lovely s Lex will be called ash XS and what are we doing they're doing three four column divs except XS will be twelve all right so call SM will be four md4 and lg4 and let's see each one is going to have an H for so let's say for this we'll say about us now this will be what's this one contact us which is going to have a ul let's know on hell I sew a phone number we're going to put we're going to use font awesome here as well so let's say I collapse FA and FA - phone ok space there and then let's put a fake phone number and then I'll just copy that ok so fallen this one's going to be envelope can't spell sorry guys hold on my alarm is going off alright so envelope and then this is going to be the email address so let's say support will say support it app theme dot test and then we'll have the address this will have an icon of FA map and we'll just put in a fake address here alright so let's look at that make sure the icons show up all right good so next one will be about us I'm going to copy this whole div right here and then this will be a boat and then as far as this I'm going to get rid of the UL and just put a paragraph and say larum tab and then I want this to be a little shorter I'm going to bring it let's see let's go up to here so that's the about and then we'll paste in again and this one will be the newsletter so put that and then let's just grab this and then we'll have a forum we're not going to need these attributes it's not going to actually submit so let's put an input type of text we'll just give it a name of email and let's see let's put a button we'll give it a type of submit and give it some text will just say submit and yeah that should be good for the the input let's actually put a placeholder that will just say enter email all right let's check that out there we go and then we just need the simple footer at the bottom so let's go under the section okay so we'll use a footer tag here and it's a good idea to give this its own ID yeah so put our ID we'll call it main footer just in case you have a footer tag somewhere else and then inside here let's do a container and we'll do our row and then this is just going to be a twelve column div so we can do call XS twelve okay we'll put a paragraph in here that will say copyrights and % copy semicolon will give us the little symbol 2017 and then we'll say app theme all right now we want this to be aligned to the center so let's go to the row class and we'll say XS or our Center XS Center all right let's check it out reload and there we go so our HTML is pretty much done pretty much done for the home page let's finish the inner pages before we get to our CSS so we're going to create a couple more pages here it's a new file about HTML say new file services dot HTML oops not HTML and then contact HTML all right and then we'll copy what we have in index copy everything actually one one thing I want to check in the navigation here I want to add a class to the current page you're on called current so we'll add it to the Li so let's again copy everything here go to about paste it in and then we're going to go to the top and in the title I'm just going to add a pipe character and then the page name and we're going to remove the class current from home to about and then there's no showcase so we can get rid of that we can get rid of features we can get rid of info let's keep company and footer all right and in this section here is going to be the sub header all right because if we look at if we look at our site here and we go to a bow you'll see this this right here with the title this is the sub header okay and then we just want the main page area so two sections that we need to add here so section ID will be sub header and we're going to put a container you know the drill container row content this will be a twelve column div it's going to go all the way across no matter what so we can do call XS 12 now when it goes all the way across you don't even have to specify these but I think it's clean just to have it anyways just in case you want to change it later or something all right and let's see we're going to put I think it's in H 1 and H 1 and we'll say about us so that's the sub header let's go ahead and check that so we'll go to our about page and it should look like that so under the sub header we'll have our main page so let's give it a section so we're going to give it an ID of page but we're also going to give it a class of above so we can specifically target this page if we need to which we probably will and then same thing container row content okay so this will also be a 12 column we're just going to copy this alright and as far as alignment I want it to align to the center for all sizes what did I forget small okay and then for the content let's put an h2 and we're going to say who we are so who we are and I'm going to make the who the word who green so we'll give that a span with a class of primary text just wrapping the hoop and then let's put a paragraph with some dummy text and I'll just copy that I'm going to put two paragraphs okay and now I'm going to copy the h2 and both paragraphs and paste that in right underneath and then this is going to be what we do okay let's check it out all right actually let's put an HR between the two horizontal rule which we'll just put a line there good so now services let's copy about everything in about and go to services and then let's go up to the top and we're going to change this and let's change the the current class we're going to remove that to services change it in the sub header and then for the main page let's change the class to services and we'll get rid of everything that's in the 12 column div here get rid of that and we're going to put actually I want one of those h2s so let's get rid of everything but one h2 alright and then this is going to be see what we offer see what we offer and this is going to be a ul and then each list item is going to have an h3 with a service so let's say web design and development and then we put a paragraph and let's just larum tab again if you're not using atom you can just put whatever you want just copy so you can go to lips um calm and you can generate this sample text alright so paste that in twice this one will change the title to software development and programming and then this one here will change to graphic design and save and that should be fine all right look it's long at that span span class so now let's go to context copy everything here and go to contact paste it in and then this is the last page so it's changed that let's change the class of current we're going to put that on to this one change the subhead ER change the class of the page and then every time you want to add a page you can just use this this basically this template alright let's see we're going to get rid of the h2 in the UL and we see here actually no I want the h2 just the UL so this one will say get in touch okay and then we'll just put a paragraph here and we'll say please use this form to contact us all right and then in the form I'm going to wrap the label and the input in a div let's say label will say label for name and then have an input we'll give it a name of name no value copy that let's actually let's put a line break right here after the label and then we'll paste this in two more times this one will be for email this one will be for message and this is not going to be an input it's going to be a text area give it a name message remember text areas have a closing tag inputs don't have to and then finally just need a submit button so let's do button type submit there we go so that should be that should be all the mock-up okay so now it looks like so you have to add all our custom CSS so let's go to style dot CSS and we're going to basically work to stay in the same direction that we did the HTML so let's start with the body this will wrap around everything obviously we're going to change the font or we're going to add a font family and let's say we want to use open sans alright and then as a fallback will do sans Seraph all right I'm going to change the font size to 17 pixels make it a little bigger set the line height which is the height in between each line which will set to 1.5 m TIG HT and let's see what else I'm going to set margin and padding to zero on the body just so there's no space around the website okay that should be good let's check it out reload now our fonts have changed ah let's see so let's add let's add our common classes I guess which we don't have much I think we just have primary text so primary text is going to have color which is going to be a hexadecimal value okay so it's going to be this right here five six a seven nine a it's kind of a green color and then I'm also good at we didn't use it but I'm also going to add a primary background and then set that to background of that color just in case you want to use that as a background alright so after that let's do the header okay so remember we gave it an ID of main header and the only thing I want to do here is put a board our bottom which will be one pixels it'll be solid and it'll be this color here alright so let's take a look at that pretty load there we go so now we want to do the nav bar we don't we want this to be in line so it goes you know horizontally so what's out a comment here will say now bar and see that had an ID I believe of navbar rank so for the actual core nav bar all I want to do is set text transform to uppercase all right now obviously you could have just typed in uppercase letters but you want to keep it so that if you wanted to change that you don't have to edit the mock-up you could simply change this all right now for the navbar Li tags for those we want to display in line meaning side by side all right and then we'll set up padding right set of padding right of 20 pixels and then we'll set list style none so that there's no bullet points so let's check that out pretty load there we go now for the links we want to change the color we also want to remove that underline so let's say navbar a we're going to say text decorate or none temp set the color of them to 888 which is a light gray actually this should be text decoration not decorator all right now for the hover state and the current state those are going to have the same styling so we're going to say now Li dot current and we want to make sure we style the link that's inside that and then we also want now to our links that are hovered all right so we're going to change the color to the green color which is this right here this is where staff comes in handy we could just put that color on a variable and and not have to repeat it here but that's more I want I want this to be very very beginner friendly hopefully it is hopefully you guys are understanding Oh see we're also going to put a border bottom which will be three pixels pretty pixels solid and it's going to be that green color all right and then I just want to add a little padding to the bottom to kind of push the border down a little and that'll be three pixels all right let's check it out reload good so our header is done right yeah I think so let me just check something in the HTML oh yeah you see how this here looks like it's not quite in the middle it needs to be pushed down so I want to set the row to to align to the middle so in the header where we have the row with these ends we're also going to add middle alright let's see if that works so index page reload and it pushed it down now we're going to have to add that to all the pages so let's copy that let's go to a boat and put that right here go to contact put that right here I already did index and services where is it the hell is it right here alright so let's get up to you on all pages good all right so we're always showcase now we're going to move on to this which is the showcase so let's see style.css all right so I D showcase so for the showcase itself we want a background image all right so it's a background it's going to be from a URL and it's going to be dot dot slash images meaning that we need to go out of the CSS folder that we're currently in and then into images all right and then it's going to be a file called showcase dot jpg okay now we're going to set that to no-repeat because by default it'll just keep repeating all right and then we want to Center the image top and horizontally and vertically all right and then let's set a border bottom to the showcase it's going to be the same as the header just like this okay and then let's also set a margin bottom to push everything under it down 30 pixels now remember we aligned the showcase stuff to the middle so we want to apply a height to the row because that's where the middle alignment was applied so let's say showcase row and we're going to set the height to 600 pixels all right so let's go reload and there we go 600 pixels it now has a background image now let's do this stuff here so let's see so we have an h1 so showcase h1 and we're going to set the font size to be pretty big it's going to be 50 pixels and then we're going to set margin to zero because by default each one's will have margin and then padding bottom because we want to move we want to push the text under it down 20 pixels all right let's look at that okay and then for the paragraph under it patting on pipe power graphs by default have a margin of 10 pixels on top and bottom so we're going to remove that and make this lighter so let's say showcase paragraph and we'll set the color the color of it will be set to CCC which is like grey and let's remove the margin all right now we wrapped the heading and the paragraph in a class called showcase content at least we should have let me just double check oh no I didn't so I'm just going to add on to this class here showcase - content because we need to add that background now the dark background color so down here we'll say showcase class showcase content and C we're going to add a background of 333 we're going to set the color to white we're going to set the border radius to 90 pixels make it very rounded and we're going to set the padding inside of it to 40 pixels and then we're going to set the opacity which will make it transparent to 0.9 so that way it'll be a little bit see-through so let's reload and there we go now the background the section content has the same class as the row right so we want I want this to be a little so I don't want so much space on the sides so let's go to our index and instead of using 12 for all of these let's do one second let's do for the large seven for the medium we'll do 10 actually we'll do 10 for the rest because right now it's set to 12 all right so let's go reload and now that's shorter and if we resize this you'll see it looks pretty good now where we start to get issues is here which is extra small and why is this that shouldn't be like that let me just check the header real quick so we have a row main header just see what's going on here middle LG and o XS when it's in its mobile view should be centered so we just want to add on to this right here we'll say centre XS there we go perfect now we're going to have to add that to the rest of the temp the rest of the files as well that contact and services all right so let's see so far the for this right here I think obviously I don't like that [Music] what I'm going to do is add in a media query so media queries allow us to set specific styles for specific screen sizes so let's go to our style sheet and go down to the bottom that's where I usually put these so media queries so the way that we define this is by saying at media and then in here takes a parameter of let's say max width and we'll say 800 pixels all right so anything styles we put in here will only apply if it's under 800 pixels so I'm going to say showcase each one and I'm going to make the font size smaller so font size will be 30 pixels if it's under 800 pixels wide so let's check it out okay so that made it smaller now I also want to make the padding less if it's below 500 pixels so that would be something like this okay so that looks good up until it gets to about 500 pixels and then the padding forces it to be on double on two lines so let's just copy this and this will be for 500 pixels or less and we're going to set the showcase showcase content and we're going to set that to padding still going to have 40 pixels on the top and bottom but only ten on the left and right as opposed to 40 all around and now if we reload now it looks good alright so it's very responsive up to this point so let's move on to the core features so go back to our style sheet and go right here and I'll say features okay and just check this out real quick sorry about that this video is getting really long [Music] see features all right so let's start off with the h2 at the top features h2 and we're going to set the font size set the font size to 35 pixels we're going to set the margin to 0 and we're going to simply padding-bottom to 10 pixels all right so that pertains to this right here now for the paragraph underneath let's do that okay so we're going to say color is going to be 880 which is a light gray we also want to remove the margin and we want to set margin bottom to 40 pixels all right now for the icons they're way too small so we're going to say features I are actually nodes be more specific and say dot fa so the font awesome classes and we'll set the font size to 60 pixels and we'll also set the color of them to that green color which is this right here whoops all right going right here all right let's take a look at that there we go so that's it for the feature section now for the info let's go down let's go there so we'll say info and see you'll say ID info we're actually going to set a background image for that okay so it's going to go outside of images I mean outside of CSS into images and then it's called info dash B G dot jpg all right we're going to set that to no-repeat and let's just make the color white and actually know what the let's let's also add a color to the background so we want to do three three three so let's check that out alright so that looks good now four five see if we want to do the h2 and then we want to do the list here the unordered list so let's say info h2 and all we're going to do for this is we're going to change the font size to 35 pixels and we're going to set margin zero and padding bottom 10 pixels all right then we're going to do the UL trying to speed it up here a little bit so the UL is going to have a line height I mean I'm sorry I list style of none because we don't want to show the bullets and we're answer the padding to zero because by default the UL has a padding of 10 pixels all right and then we'll do the Allies which will have a line height want those to be a little further apart so we'll say to em and let's say font size 20 pixels and that should be it for the info so let's reload and good so now the company area right here remember it has an ID of company okay so company we're going to set the background to 333 which is dark grey and we're going to set the color to white and we're going to set the padding to 10 pixels zero alright and then the h4 so company h4 and that's going to be we're going to make that uppercase so text transform uppercase and we're going to set the margin bottom to zero and then for the UL which is under the contact C Company ul and will set the padding to zero we're going to set the lift style to none you can put list-style on either ul or Li and then we'll set the line height - what - M alright so let's check out the company area all we need to set the color to white I didn't do that oh all right you know what let's also do this text area and the button I want them to be kind of just higher increase the height or the padding so let's do company and then we can target a specific type of input we want the text so we can actually do brackets and then type equals text and for that let's do padding seven pixels and then we'll do the button and for the button we're going to say background - - - color white padding 10 pixels and water zero here we go so that looks a little cleaner and then the footer let's see the footer is actually going to be that green color so let's say what I call it main footer I think main footer let's set the background to where is it right here again this is where staff comes in handy also we could nest our styles with sass all right so that's the background that means we need to make the color white all right so now all we have to do is the inner page styles if we go to about about looks pretty good one thing I want to do is the pay all of these have IDs of pages I just want to add a margin bottom to push the footer down a little more so let's go over here and let's say ID page margin bottom forty pixels all right now for the services page which remember is basically just a UL we're going to say dot services because remember the page had a class of services so we could target that page and then I want to get the UL allies and I'm going to add I'm going to get rid of the bullets and then I'm going to add padding of ten pixels all right and then every odd one I want to have a background of dark grey and then every even should have the green background so we can use css3 for that saying oops so the services class ull eyes and then we can use this end child all right and then we can grab on to all the odd ones okay and then let's say background will be dark gray color white and then let's copy that and then this one's going to be four even and that's going to have the green color so let's check that out go to services and there we go so now every EF even if we add more it's going to stay in that pattern which is cool alright so last thing is the contact page we just want to kind of add a dark background to that so let's say contact and see ID contact now we want to target the form and that's what we're going to add the background to color should be white and let's see padding will say 20 pixels alright then we want to target the inputs the text inputs of the contact form this should actually be a class contact so form inputs that have the type of text and we want to make these wider so we'll say with 50 percent of its at the container and let's give it a height of 30 pixels and let's give it margin bottom of 10 pixels all right then we want to do the text area I'm going to copy that and we'll change this to text area with 50 percent and then for the height we can do 100 pixels all right and then finally the button say form button and see we're going to do with 50% padding is going to be ten on the top and bottom zero on the sides border will be zero background will be two two two and color will be white alright and then finally the labels so contact form label I just want those to the upper case so text transform proper case whoops that's funny I actually hit the upper case key when I was typing upper case alright so we should be all set let's take a look BAM we can't see the labels though what did I not put the text in let's see what's where is it labeled i hain't put any text in here it sucks when you mess up but it's such a stupid like small mess up that I'm not going to go back and take that out of the video it's sane alright so reload and there we go there's our form alright so like I said this isn't the best looking template but I don't think it's horrible and it's you know hopefully it taught you a little something about html5 syntax and CSS I mean I want I wanted this to be a good tutorial for beginners that are just learning how to build websites and you eyes in flexbox grid take it or leave it some people might not like it you may just want to use just flex box or just bootstrap and use that grid system but I think it's a it's a pretty good alternative it's much easier to use than you know natural flexbox but hopefully you guys like this I'm going to be coming out I'm going to start on a udemy course for front-end development it's going to be like a mega course gonna have all kinds of technologies in it I'm going to make a video about it soon but hopefully you guys like this if you did please leave the like please subscribe whatever you can do is fine and thanks for watching

Channel: Traversy Media

Views: 226,002

Keywords: html, css, html5, html css, html tutorial, css tutorial, flexbox, flexboxgrid, bootstrap grid, css grid, html template, html project, build an html website, css3, html5 css3, responsive website, responsive html

Id: qlA7dputiNc

Length: 72min 6sec (4326 seconds)

Published: Mon Jun 05 2017