Responsive Bootstrap Website Tutorial with Full Screen Landing Page

in this video we'll create a responsive bootstrap website with a fixed image landing page [Music] okay guys so let's take a look at the design here before we get started in the upper left hand corner we have our logo followed by the navigation on the right hand side here which later will turn into the mobile nav and then we have the bootstrap heading here with the get started button as our fixed image landing page so as we scroll up we'll find that the next section is going to scroll right over that mountain background image then we'll have a two column section a four column section then this fixed image sort of scrolling parallax feel followed by another two column section and then the footer here with some contact us information including these social media buttons that will link to our social pages so let's go ahead and scroll back up and then we'll take a look at the responsiveness and how it's going to appear on the mobile version so let's start with checking out the navigation here on the mobile version so if we select the button here will have our bootstrap collapsing mobile drop down navigation and let's take a look at how the rest of it feels on say an iPhone 10 here so if we scroll up we're still going to have the fixed image background there for the top image with the mountain as well as this colorful keyboard image with the Mac computer in the background and then of course we have the social section here at the bottom in the contact section all right so let's scroll back up and then we'll find out what we need to get started with this tutorial so in the description of this video will be the free download for the starter files here from my website that you can grab and once you grab them you'll find that we have an image folder here containing all of the images that will be used throughout the tutorial to make the bootstrap website and then we also have index.html and snail dot CSS already started for us so the program that I'm going to be using throughout the tutorial is called sublime text which is a free text editor you can get from sublime text com and then as we're building the website I'm going to have index.html open in Google Chrome alongside the finished version that we're seeing behind the starter files right now so I'm gonna pull up index.html here in Chrome from the starter files and let's take a look at the files here in sublime text so as you can see at the top we have style dot CSS and index dot HTML so that's the top of our HTML page here we have our title of the website then we have viewport width device-width initial-scale one for mobile websites then upload it to the web already we have bootstraps CSS file we have the font awesome CSS file and if you're unfamiliar with font awesome let me just show you here at the bottom of the website that's what's going to allow us to create these icons here to our social media pages and they have a whole boatload of icons if you just do a Google search for font awesome then we have our jQuery J's file and bootstrap J's file then of course our style dot CSS file from the starter files that we're linking to right here okay so let's go and drop down so we're inside of the body section of the website and we can get started with our first tag let's get started with our bootstrap navigation so we'll start off with a nav tag and we're gonna give it a class and say navbar navbar - default as bootstraps default navigation bar nav bar - fixed - top so our navigation bar stays fixed at the top and then we'll give it the role of navigation and then we can drop down and close out our nav tag okay so the next thing that we'll do is create a container here so we'll write div class container fluid which is best for bootstraps and mobile websites and then close out the div and then we'll add the header to our navigation bar so div class navbar - header which is the blue navigation header we're seeing in the upper left hand corner right now and then you can drop down and we'll close out that div and now we'll create the button which is our drop down button let me just flex this down so we can take a look at what we're laying out here okay so this will be the button in the right hand corner here so we'll start with the button tag and then type button' class navbar - toggle since it's going to toggle our navigation data - toggle collapse because it's a collapsible collapsible navigation menu with the drop down and then we select the button it collapses and then data-target pound or hashtag navbar - collapse - main okay and then we'll drop down and close out our button tag here and the next thing that we're gonna do is add the burger menu inside of that button which is which is right here with the three tiers so we'll need to add the icon bars individually but first let's add a span class here that is called SR - only and then you can write whatever you want in between the span here referencing the navigation so SR only is for folks who use screen readers that may not be able to tell that there's a navigation button there and then for our icon bar will add another span class and we'll say icon - bar and then close out the span and I'm gonna speed us up here a little bit by just pasting this two times over to give us all three icon bars in our drop down navigation button so let's take a look at what we have so far so we have just the blank gray bar up there and then we have our button with the three icon bars alright so the next thing that we're going to do is add our logo so in the starter files we already have this image all we need to do is reference it so let's drop down underneath the button tag and we'll say a class navbar - brand which is four logo images href and then you can put a link in here if you want I'm just going to do the pound symbol or hash tag for now to keep us on the same page and then the image is IMG for the IMG or image folder /w three Newby dot PNG and then after that remember to close out your a tag and let's take a look at it here on the version we're working on so if i refresh there we have the logo in the upper left hand corner which later in the CSS we're going to make fit inside of the navigation header or nav bar header up there alright so now let's go ahead and add our unordered list followed by our list items for the navigation links so we'll start it off with div class collapse space navbar - collapse because this is the section that's going to be collapsing and then ID navbar - collapse - main and then drop down and close out your div and now we can start our unordered list okay so UL class nav nav bar - nav and then nav bar - right since we want our list items or nav links to display on the right-hand side and then close out your unordered list and we can start our first list item so li and then a and I'm going to give this a class and call it active so we style it differently from the rest to tell us that we're on that particular page at least for home and then I'll close out my link tag and now if we go back and refresh we have our first navigation link up here alright so now let's drop down and add our next list item so li a href I'm just going to do the hash tag and I forgot to do the href for the home link here okay and then this one is about alright so if we refresh there we have our second navigation link so the next one is services then testimonials and contact so Li a href pound services Li a href and this one is testimonials and then the last one Li a href and contact alright so let me know what you guys think about the speed at which I'm going about the tutorial here in the comment section below if you want me to go faster or you want me to slow it down some so you have more time to catch up so that does it for all of our HTML for the navigation we'll finish it off once we get to our stylesheet so now let's drop down and get started with the fixed image background here sort of the landing page of the website with the mountain background here and then we have our heading information inside of there so let's start it off with div ID home and then inside of there we'll say div class landing - text and then we'll add a heading one after we close out this div so h1 bootstrap and I'm gonna put it in all caps here and then let's drop down underneath it and we're not gonna be able to see it now we'll have to add some padding leader since it's a fixed navigation and we'll do our heading 3 where it says learn the basic building blocks ok and now let's add our bootstrap get started button underneath there so we'll write a H ref I'm just gonna do the hashtag here pound symbol and then class BTN and then BTN - default and then BTN - LG for a large styled bootstrap button so default gives us the sort of gray white feel for the bootstrap button and then obviously LG for large ok so now if we refresh there are there we have our heading 3 as well as the get started button so we're going to add the mountain background image once we get to the CSS for now let's drop down to the next section where we have the image on the left and then the heading and paragraph text underneath it alright so this is going to be our row which is a two column row so we're gonna create a div class around the container first and we're just going to call it padding so div class padding and then div class container and then close out your div for container so we're gonna use the padding class obviously to use some padding around the container we could add I suppose an ID in addition to the container there but we'll just stick with the padding div here okay and then we have a div class row for bootstrap which will include both columns here so the next thing we have is div class Col for column small six so basically what this means as I add the image here is bootstrap has 12 columns so using up 6 will mean it's half of the page and SM meaning small it is basically the breakpoint at 768 pixels for bootstrap so basically we're saying here that we want two columns larger than there are anything larger than 768 pixels we want it to display at two columns and anything under that we wanted to display at one column okay so if we refresh there we have our bootstrap image here and then let's move on to our second column okay so div class Col - SM - six so six feet meaning half of the page and then we'll write text Center because we want it to Center our text and then let's add the h2 here which is all about using bootstrap and then underneath it we'll add a paragraph tag but what we're going to do is we're going to use a bootstrap class called lead so here we have our heading to bootstrap class called lead which makes our paragraph text a light weight so say about a weight of 400 or maybe 300 and then it's going to be a little bit larger than regular paragraph text so I'm going to go ahead and just copy this and paste it down here if you want you can do the paragraph without class lead and with class lead to tell the difference or you can look to the paragraph that I have in the next section okay so now let's drop down to our next container which has the four columns here alright so I'm also going to wrap this with a div class padding and then we'll add our container so div class container and then we'll add our row and then I'm gonna go ahead and just close out these divs and then we can add our the first of our four columns right so we're gonna start with a div class and if you remember bootstrap has four columns right so and then there are four different screen widths that they break at so the largest here is LG so we're gonna have it display at four columns so twelve divided by three is four columns right on large and medium-sized screens will have it at four columns then on smaller screens so anything less than 768 pixels will have a display at two columns and then on extra small screens which I believe is slightly less than 600 pixels will have a display at one column all right so now let me just show you what I mean here so we go from four columns to two columns so here we have four columns four columns then two columns and then finally we get down to one column on the smallest of screens for cell phones for example okay and then if we're going in the opposite direction we're going from one column to two columns to four columns here all right so I'm going to go ahead and copy this and then we'll paste it three times over for each of the four columns and then we'll add our content all right so there's one two and three all right so inside of the first one here we have a heading and then a paragraph section so let's use an h4 and I'll just write built with sass okay and then I'm just gonna copy and paste this placeholder text all right and then let's drop down to the next column and will reference the sass image so if you don't know what sass and less are there CSS preprocessors alright and then we're going to give this class or sorry this image a class and we're just going to say image - responsive okay so there we have our first and second columns okay so now when we get down to a single column with the image - responsive class knows to make the image responsive and then for the third column here I'm just going to copy and paste from the first and we'll say end less instead of built with sass and then for the fourth one we'll add the image here and we'll just change this to less all right and then we can drop down under this row or container there we have all four sections and now let's add the the fixed scrolling background here and the fixed image so all we'll need to do is a simple div so I'm just going to say div id fixed and then we'll close out our div and we'll be adding the image and the spacing to make it possible in the CSS in just a few minutes okay so next let's drop down to this two column section similar to the one above so what we can do is if you want to make this a little quicker we can just copy this from above and paste it in here and then we'll do a little bit of changing I'm just gonna cut the the second column and make it the first okay and then I'm going to do away with text center and then let's change the heading to an h4 from an h2 and I'll change the text here to here's the cool thing about bootstrap okay and then I'm gonna take away the class lead all right and I'll change the text here this might have been quicker just writing it out from scratch actually all right and if we refresh now all we need to do is change the image on the right so this is simply bootstrap - all right so there we have the big bootstrap image so we can you can add it the class image responsive or we can do it later in the CSS alright so next let's do our footer so we're going to say footer class container - fluid and text - Center alright and then we'll add our div class row which will contain our columns all right and then let's start our first column so this again is a three column section so we're going to reference the number four and our columns here so let's go with call SM for small so 768 pixel break and then 4 and then we can close out our class here and I'm going to copy this and paste it twice over okay all right so inside of our first column let's start off with a heading three and right contact us and then underneath that let's create a break to create some space between contact us in the address spot and then H for our address and contact info here all right and then for the next column let's add another heading three where it says connect and underneath that will add our social links okay so each social link will contain an a tag so you can put the URL to your page here so facebook.com for example I'm just gonna do the hashtag or pound symbol and then the class for this font awesome icon is fa fa - Facebook okay so I'm going to copy this and paste it a few times for the rest of our social links so there we have the start of our footer with the first social icon at the bottom alright so I'll just paste this a few times and I'm going to change the second one to Twitter and then we have Google and then LinkedIn and YouTube or you could do Instagram all right so there we have our social links and then the last thing that we'll do is we'll add this image the b4 bootstrap in the lower right hand corner so image source IMG /b dot PNG and then class icon so I want to give it a class so we can give it a a size so it's not too large or a max height and width in the CSS so that does it for all of our HTML now let's take a look at what we have to work with here it looks pretty messy and a B is a lot larger than I remembered so let's move over to our stylesheet and get started from the top with our CSS alright so the first thing that we're going to style is the HTML document and body section with a reset style so let's reference them with HTML comma body and then we'll give them a height and width of 100% just to make sure that our landing screen or the design itself takes up the full height and width so the next thing that we'll style will be our navigation so we're going to reference that with nav bar and that's a class so we want to start with a period so period nav bar rather than a pound sign for IDs and then let's give it its background color so this is the sort of dark blue hex value 2 3 4 1 5c and then if we come over and refresh now we have the start of our navigation styling all right so then let's give it some padding so we'll have padding top bottom of 1% and left right zero all right and then we'll give it a font size of 1.2 m so 1m is 16 pixels at least in Google Chrome 16 is the default font size so that's about 18 or 19 pixels okay so the next thing that we'll do is let's reference our navbar brand class for our logo it's a navbar - brand and let's give our logo a minimum height of 55 pixels and then let's give it some padding or take away some padding potentially padding:0 top 15 pixels right and then 5 pixels underneath okay so that way when we flex the navigation down 15 pixels on the right it should take up some space so our list items don't override the logo all right so now let's lay out our style for the navbar links so we'll reference them with navbar - default navbar - nav Li for our list items than a for the links and then let's give them a color of D 5 D 5 D 5 which is a really light gray or off-white color all right so there we have them and there we go so the next thing that we'll do is let's style the active and hover effect for our navigation link so I'm just going to copy this and I'll change it to white and we'll do a hover comma and then we can paste it again or copy this and paste it and we'll do Li a active dot active because it's an active class so let me just show you in reference here so there we have our class active and if you're gonna make a multi-page site you want to have active for the page that you're on so now we see that the the home link at least is white while the rest are the d5 hex value the really light gray shade okay all right so that's all the styling for our navigation the next thing that will drop down to is going to be the styling for the the background of our landing page so if we scroll up there we have the what would be a full screen landing page except for the navigation sitting on top of it so it reference that with the div ID home so hash tag home and then background URL and then in parentheses the image is IMG ford slash mountains dot jpg and then no-repeat center center fixed so it stays fixed and we can scroll over it okay and then display table and height 100% position:relative with 100% and then background size cover okay so without the navigation there this would be a full-screen landing page with that background image one thing to remember is that if you're using an image where you're concerned with seeing the very top of it you may want to add padding 50 pixels or so padding top 50 pixels to the top of the home ID so you can see all of the image without the navigation menu obstructing the first 50 to 70 pixels or so so now let's style div class landing text so dot landing - text and we're gonna have it display as a table cell and then text align Center to Center our headings in the button and then vertical-align:middle so the vertical line is going to obviously push it into the middle right here and then text align Center will Center it on the page okay so now we have our heading text and the button centered so the next thing that we'll do is let's drop down and style our heading 1 so I'll reference that with dot landing - text h1 and then let's give it a font size of 500% or you can do 5m font weight 700 to make it pretty bold and there we have the bootstrap text changing for us all right and that's the only heading one that we've used so far okay so now let's drop down and the rest of it is complete as far as the the the titles up there and the button are the headings in the button so let's drop down and let's give some padding to these div class padding classes that we have throughout the website so reference that with dot padding and then padding eighty pixels top bottom and zero left right so now let's refresh okay and there we have some good spacing above and below our containers here all right so now let's make it so that image displays at 100% so padding image width 100% okay so that's going to keep it within the column there and then the next thing that we'll do is let's make our fixed image scrolling effect here so we'll reference that id called fixed and then similar to the image at the top we'll have a background URL with the image from the starter files so this is just background dot jpg and then no - repeat Center center fixed and then we'll have this display table and then height this is up to you I'm gonna say or tell it to display 60% of the screens height or the browser's height position relative with 100% background size cover okay so now if we scroll down there we have our fixed image background taking up 60% of the screen when we hover over it alright so now let's drop down and let's get started with our footer section okay so we'll reference that with the html5 tag footer and then we'll give it a width of 100% and then background color will be the same as the navigation so that's the hex value 2 3 4 1 5 C and then we'll give it a padding so we're gonna have padding all around of 5% except for the bottom let's add some extra padding at 10% on the bottom so it goes top right bottom left and then color white for our text all right so now let's let's take care of the social icons here and then we'll resize the B so we'll reference them with the FA class so dot FA let's give them a padding of 15 pixels between one another or all around and then a font size of 25 pixels and then color white which is the hex value FFF so now if we refresh there we have them displaying nicely for us but if we hover over them they're underlined and blue so let's change the hover effect to have the same color as the navigation D 5 D 5 D 5 and then let's take away the underline with text-decoration:none so now if we refresh it there we have them displaying sort of opposite to the navigation colors alright so now let's make that be much smaller with Max with 200 pixels from the icon class alright and that's looking pretty good so that's all of our style for the full width version now we can move over to the mobile version and we'll resize just a couple of things starting with our heading 1 up there with the bootstrap text and then we'll resize our social icons and the B div class icon at the very bottom alright so let's start off our media query here with media our at media and then in parentheses max width 768 pixels and then let's reference the heading one here and let's change the font size to 300% from 500% alright and next let's change the fa class font size for the social icons so let's change that to 20 pixels and lower the padding to 10 pixels okay and let's give a little padding to the top of our B icon so padding top 5% and then let's change the width or max width to 100 pixels from 200 pixels all right so let's scroll up and see that everything looks like the original here which I think it does okay and that does it and concludes our responsive bootstrap website tutorial I want to thank you for watching please remember to like the video subscribe and turn on your notifications and then I'll see you in the next tutorial thanks for watching [Music]

Channel: Drew Ryan

Views: 305,647

Keywords: bootstrap, responsive bootstrap website, bootstrap tutorial, how to make a bootstrap website, create a website from scratch, create a bootstrap website, html, css, html5, css3

Id: Zn64_IVLO88

Length: 43min 28sec (2608 seconds)

Published: Mon Feb 26 2018