HTML & CSS Responsive Website - Complete Website Design Course

in this video we'll build a complete responsive website with html5 css3 and bootstrap four guys so i'm excited to release this video because i think it's the best responsive website design tutorial that i've put out on youtube yet so my goal for this video is to get up to 1 000 likes and if you end up liking this video remember to subscribe and turn on your notifications for new tutorials also leave a comment to let me know what you think or request a website feature for a future tutorial so now let's get an overview of the website design that we'll be building in this video the first thing that you'll notice is the navigation bar is going to be sticky and it's going to be sticky down to the bottom of the image slider before the social nav bar underneath it starts and turns into a sticky bar itself then underneath the navigation bar we're going to have our image slider where we'll add content on top of it as well as the background color and the button on the first and the third slide because as you see the second slide is just going to be the image itself but here on the third slide we'll have a different colored background color with a different style button as well then underneath the image slider this might be my favorite part of the website even though it's kind of simple and that's the sticky social media bar which is going to be sticky throughout the page until we get down to the fixed background image section so underneath the sticky bar will have a heading section that we see where it says complete website and the underline underneath that then this three column section where we'll add font awesome icons to display the html5 bootstrap and css3 icons then of course underneath those we'll have the paragraph text and the learn more buttons in that three columns section which is going to turn into a single column layout on mobile devices here on the right then further down the page underneath the border spanning the entire width we'll have a two-column section with the heading text and button on the left and the tablet on the right followed by the fixed background image section which will unstick the social media bar which has been sticky down to that point and as you'll see on the right we'll have the mobile version with the single column layout and underneath the um fixed background image section we're going to have a new sticky section start with the text on the left and the button on the right which will turn into just the button on mobile devices and that section will stick on top of this three column section with the heading image paragraph and buttons underneath then the text and buttons section will unstick when we get down to the border spanning across the page instead of the fixed background image section and moving down through the mobile version here on the right we'll find that underneath the border spanning the entire width will have a new two column section layout which will take on different widths than the first two columns section and beneath that we'll have this text call out section with the button on the right followed by the footer underneath which will take on a three column layout and turn into the single column as we see here on the right before we get down to the socket which is the dark section at the very bottom of the website so now that we've gotten a look at the full width version of the website as well as the mobile version let's take a look at how the different sections of the website will respond to different device widths so when we span up past 968 pixels in width we'll see that the navigation is going to turn into the full width version from the drop down version of the nav bar and if we take a look at the image slider we'll see that the content that will add on top of it will be responsive as well so as we decrease the width of the website that content is going to get smaller in size then when we get underneath 768 pixels it's going to disappear altogether for the smallest of devices next the social media bar will also decrease in size as we span the page down so it'll start at the two column layout at 1140 pixels and anything underneath that the social icons will start to decrease in size while they're centered on the page looking at the three column section it's going to jump to a narrower three column layout and then go to a two column layout with a single column underneath followed by the single column layout on the mobile devices underneath the 700 pixel range similarly when we get down to the two column section underneath that you'll see that at its full width when we jump down in size a little bit there's going to be a break point where it's going to get narrower in size where you'll see the text section change specifically before we drop down to the single column layout underneath the 900 pixel range then with the fixed background image section underneath this we'll have the option to decrease the height and add content on top of it as we're laying out the website then for the last few sections it will be similar to what we've already covered above so with the jumbotron section where we have the text in the button on the right that's going to shift to two lines for both the text and the button before we get down to the single column layout for the three columns section underneath that with the heading images text and buttons those are going to take on the same layout as the previous three columns section did with the font awesome icons where we go to the two column down to the single column and the same will be true for this two column section that will appear underneath this taking on the same layout as the previous two columns section and then the jumbotron where it says visit us today with the blue button that will be similar to the previous jumbotron section with the text in the button on the right as well lastly at the very bottom of the website the three column layout for the footer section will span to a narrower width before dropping down to the single column layout at the very bottom of our website design okay so with that let's span back up the page with the mobile version here on the right as well as the full width version on the left and i promise that the rest of the tutorial won't be as repetitive and quick as running through the design was but let's go ahead and get started with the tutorial so in the description of this video will be the starter files that i prepared to get us started with the course containing all of the files necessary to build our website the first file that you'll see here is the 12 website bundle blue file and if you double click that that's going to open up this page right here where you can use an image or the button underneath to link to my website and if you'd like to support my channel be sure to check out the 12 website bundle pack at my website w3nubi.com which includes 12 complete responsive website designs in addition to a three website bundle bonus one of which websites in the bonus is what this website design will be building in the tutorial is based off of now let's get introduced to the text editor that i have set up in the background which is the free program called visual studio code that i'm going to be using throughout the video so with visual studio code if we go back over to my website i have a lesson on that on the resources page so if you take a look at the left hand side bar and check out the visual studio code text editor lesson you'll see links to the visual studio code website as well as their shortcuts and the extensions that i use which include the eagle oceanic next for the color scheme as well as live server which is the go live feature in the lower right hand corner which will turn on in just a little bit as well as all of the settings that i use directly from my setup of visual studio code so once you're all set up you can open up the files in visual studio code and hit the go live feature in the lower right hand corner and that's going to prompt google chrome to open up index.html where you'll see that we already have a couple of sections the website started for us and the reason that i've included these is because we're going to add sections to the website that are similar to these so we're not repeating ourselves and i wanted to keep the course underneath two hours in time so the sections that are already included for us will be the fixed background image the jumbotron that we see right here and the jumbotron at the bottom but we're going to add a jumbotron separate from these at the top with the social media bar so you can leave these sections up or you can remove them by commenting them out so we can just enable them later on in the tutorial which is what i'm gonna do so i'll just remove the right angle bracket from the three different sections including the fixed background section the first jumbotron and the second jumbotron and then once we save it we'll have a blank page as you can see right here so for anyone who's new to the bootstrap responsive website design framework let's add some text to the page and i want to show you how it works really quickly so i'll add a heading 1 tag here and then inside of it i'll write test exclamation point then when we save it the live server extension will make it automatically show up in the upper left hand corner so now as an example using the bootstrap css framework what we can do is add a class here to make our text appear uppercase so i'm going to add the class text uppercase and then once we save it bootstrap is going to make our text uppercase as we can see off to the left and then one other thing that we can do just as an example is i'll say text danger which will make it red and then in addition to this to make it blue i'll add text-primary so included in the files as a point of reference is the bootstrap.css file we'll actually be using the bootstrapmin.css file which takes up a little bit less space when it comes to the load time for the website but with this file we can use the find feature with command f in visual studio code to look up any of the classes that we use in the website so for example with text primary here we'll have the css for those classes with the bootstrap framework and the blue hex value that's used for that class likewise if we look up text uppercase we'll see the text uppercase class along with the css for that so throughout the course i'll be explaining the bootstrap classes and features that we'll be adding but you can always use the bootstrap.css file here with the command f fine feature to learn more about the classes that we use also as a quick reference back on the resources page of my website there's an introduction to the bootstrap 12 column grid system also there's a link to the bootstrap documentation right here which will link us to their website and from here you'll see we're on the documentation page and we can go down to the bootstrap components to see things like the image slider and the navigation then with the layout we'll get a link to the grid system which we'll be going over later in the video you don't need to worry about looking up any of this information if you don't want to but you can use them as reference points now let's go over what's already included for us inside of the project starter files first we'll go over what's included in index.html and then we'll take a look at style.css and see what's included for us there so from the top of the document we have our html5 doctype followed by html and the language english which will span the entire document and underneath that we have the head section of the website where we'll tell the web browser all of the important information for how we want our website to display starting with metacare set utf-8 which is the standard character set for numbers and letters on the internet then we have viewport with device with initial scale 1 so the website fits into the view of mobile devices in addition to viewport fit cover which is for devices with non-rectangular screens such as the iphone 10 then underneath that we have a compatibility meta tag for internet explorer edge followed by the website title and the shortcut icon which is underneath that so if we take a look at how the website appears in google chrome the tab is where we're going to see the fav icon off to the left which is the small image and then off to the right we have the website title which would also be the largest text that appears in a google search then for the fave icon image you can use ico png or jpg and that's going to be inside of the image folder and it's the favicon.ico file what you can also do is just do a search for png or jpg to ico if you want to use that but browsers today can recognize png and jpeg files just as well as the ico file so if we hit command b in visual studio code and open up explorer in the left sidebar we can go into the image folder and take a look at the favicon.ico file then a good rule of thumb for fave icons is to have them from 40 by 40 pixels to 100 by 100 or so i prefer to go a little bit larger so they're not too pixelated when they're seen as favorites because they'll be a little bit larger than you will see in the tab on a web browser so then back in the head section in index.html beneath the fave icon we have a link to the bootstrapmin.css file which will be similar to the bootstrap css file which we took a look at just smaller in size as i mentioned previously then underneath that we have the style.css file which we'll be working on then the last thing that's in the head section will be a link to google fonts so you can get a link to google fonts from the resources page of my website in the lessons or you can just go to fonts.google.com and from here we can select a font family so for example if we just do a search for roboto that's the font style that we'll be using and then we hit the plus sign then at the very bottom let's select the black bar and i'm going to go over to customize where we can select the different font weights then what we'll want to do is copy the link and add that to index.html followed by copying the css style declaration for the font family which we already have added for us in style.css so now moving down to the body section of the index.html document we have a couple of tags set up for us already or ids which are going to be for the sticky sections of the website as you see right here starting with the navigation sticky so this id will span the height for where we're going to have the navigation be sticky down to the bottom of the carousel image slider then the next sticky section where it says social media sticky will be the window for where we'll have the social media menu bar be sticky so as you'll see that's going to span down to just above the fixed background image section then moving down the index.html document the last one will be the text button sticky id right here which is the parent element to the jumbotron which is already added to us and that's the section just beneath the fixed background image window which will unstick at the border above the two columns section then working our way down to the very bottom of index.html we'll have our script source files starting with the latest version of jquery as of the recording of this video which is jquery 3.4.1 which is required to run the bootstrap javascript file which appears underneath it and that file operates features of the website such as the drop down navigation menu and the image slider then underneath bootstrapmin.js we're going to have poppermin.js which is a file that bootstrap includes with their framework to operate features such as the popup modal effect we're not going to use anything that requires this in the website here but in case you want to add features from the bootstrap framework that do you can use that file then lastly we'll have a file for font awesome which is the icon library we'll be using in the website in order to display the social media menu bar icons as well as the html bootstrap and css3 icons so with font awesome if we go to fontawesome.com and then check out their icons using that link we'll get to see all of the free icons that are displaying at 100 opacity or we could do a search for an icon so for example if we just do a search for code we can select that icon then from there we'll be able to click on the html for the icon to copy it so we can move it right to our website inside of index.html so i'll go up to the top of the page and underneath the test text i'll paste in fa-code then you'll be able to see the icon displaying and to make it larger we'll use a class from font awesome called fa-5x okay so now that we've covered everything in index.html i'm going to delete this heading 1 and icon and let's move over to style.css and cover what's already included for us starting with the reset style at the top which targets the html document itself and the body of the website then we have the style declaration overflow x hidden for the x or horizontal axis so we don't have any elements displaying outside of the body then we'll also have our height and width set to 100 percent which is always good to include when we're adding sticky elements then we have our font family set to the google font roboto which we saw in index.html followed by font size large which is going to take our regular font size of 16 pixels in google chrome up to 18 pixels then moving down style.css underneath the comments that we have added for us we have some css added for the jumbotron class which is what's used twice for us in the starter files already with the text and button on the right then moving down the document we also have the css added for the fixed background image so you can change the image that you see there with mac.jpg and with the fixed background section underneath the actual fixed background class is where you would want to add content if you want it to sit on top of the background image also what i'm going to do right now is remove the height that's set to 100 percent or 100 vertical height so it only takes up the height 12 ram which we see with the padding of the fixed background class and that's going to match up to the finished website then moving back to index.html i'm going to comment out the fixed background section again so we have a blank page then further down style.css we're going to see that we have some media queries started for us already where we'll be changing the style based on the width of the website for smaller screens such as ipads and iphones and we also have a cheat sheet from bootstrap for all of the different breakpoints for where we can adjust the column widths and change the layout of the website then the last bit of css included for us at the bottom of style.css starts with a mobile gutter fix so basically with the fixed background image section sometimes with mobile we're left with a little gutter of white space off to the right hand side and also included for us is css for the fixed background image section to make sure that it looks fixed on devices such as the ipad and iphone okay so with that we've covered all of the starter files and we're ready to move back over to index.html now let's go over to index.html and start laying out the html for our navigation menu so before we do that i want to show you a couple of quick shortcuts with the visual studio code text editor starting with the period which we can add a div class with and we can also use a hashtag to add a div id then with our div id set we can add a child element inside of it using the right angle bracket and then i'll just add our class then we can also use an asterisk to say times five of this class to have it display five times and inside of that class we'll have a link with the class link class then if we hit enter we'll have five different classes with the link inside of it inside of the original div id so since we already have the navigation sticky id spanning from the top of the page down to the bottom of the image carousel let's get started with the navigation tag you'll also notice that the image slider isn't sliding right now because i turned off the data interval or made it so it was so high that it's not going to slide for now just so we don't have that sliding in the background all the time while we're building the website so as for the navigation we're going to be using classes directly from the bootstrap framework with the navbar feature so if we go to the components and do a search for navbar or you can see it on the sidebar there you'll be able to check out the different classes and features that can be added to the bootstrap navigation bar so let's start with the nav tag then inside of the nav tag we'll have a class called navbar and then to set the light background of the navigation bar we're going to use a class called bg light for background light from bootstrap and to make our links as well as the drop down button dark in color we're going to use their nav bar dash light class and once that's set we'll need to specify a width at which point we want the navigation bar to turn into the full width version from the drop down menu version so let's go back over to the bootstrap website and i'm going to go to their grid page so with the bootstrap framework we have 12 different columns to work with and we can divide them however we want across the bootstrap grid by using the classes here that are set for different widths so for example the 700 pixel range is md and the 900 pixel range is lg so we would add call dash lg and then the number of columns that we want to use so in this case we'll be using the large screen break point and we're going to add the class navbar dash expand lg then once that's set the last class that we'll add will be to give it the sticky top feature which we see here before it transitions into the social bar so we'll use the sticky top class for that then we can hit enter and inside of this we're going to add a container to give our content inside of the nav bar meaning our logo and the links a max width and that's going to be a max width of 1140 pixels since we're using bootstrap's container class here instead of container fluid so now with that set we're ready to start adding the content inside of it starting with the logo here off to the left so with bootstrap the logos use a class called navbar dash brand and we're going to wrap that with a link or the anchor tag using an a so our logo image acts as a link back to the home page of our website then inside of our link here we're going to add our image so we'll use the right angle bracket followed by img then for the logo link we could use a hashtag to leave it blank so it takes us nowhere or we could use the same link that we use for the home text here which most websites do which would be index.html so the logo links us back to the homepage of the website when we click on it then for the image source we're going to go into the image folder and that's going to be the logo.png file here so i'm just going to write img forward slash and then logo.png so now if we save it and go over to the version we're working on in chrome we'll see our logo show up and it might be tough to see the nav bar so if we just change this class to secondary which is a gray background shade with bootstrap you'll be able to see the height of the navigation easily then one other thing that we could do in case the logo doesn't display properly is we can add alternative text here so i'll just write logo and now if we save it you'll see that that's going to show up instead of the image then we can also add title text so when we hover over the image it's going to show us the logo text that appears underneath it so i'm going to change it back to bg light and now we're ready to add the next feature of the navigation which is going to be the drop down button so if we span down here we have the drop down toggle button which is going to be sort of a border with a hamburger menu inside of it and to add that we'll use the button tag followed by a class called navbar-toggler and inside of that we're going to have a span tag to give us the hamburger icon which we see right here and that span tag is gonna have a class called navbar dash toggler dash icon then once i hit enter i'm gonna drop the span tag down to a new line and separate it from the button and if we save it and take a look in chrome there we have our drop down toggle menu button sitting next to our logo so next what we'll do is let's add the collapse functionality to it so let's write type and then for this attribute we'll say button then we'll also add data toggle collapse so the bootstrap javascript framework knows to open and collapse the id or data target that we're going to set for the navigation so let's add that data target attribute and then we'll use the hashtag to set the id that we'll be giving the navigation menu and we're going to call this navbar responsive so let's add that element now but we're going to start with two classes from bootstrap so the javascript framework knows that this is what we're going to be opening and collapsing so we'll use the class called collapse followed by navbar dash collapse then we can add our id navbar responsive with the camel r character because it's next to another r then we can hit enter and inside of this element we're going to have an unordered list which will contain all of our list items and links that we see here for our navigation menu so let's start off with the unordered list using ul and we're going to give this a class called navbar dash nav now to position our navigation menu we have some options using the bootstrap classes so we can position it off to the right which is what we're going to do or we can position it off to the left or centered so off to the left would be margin left auto centered would be margin 0 auto so mx auto but we're going to use ml auto to position it off to the right which means margin left auto now we're ready to start adding our list items inside of our unordered list so each list item will have a link inside of it and the list item itself we're going to give a class called nav dash item then i'm going to say times 5 because we're going to have five different navigation menu links and we're going to have a link inside of the list item with a class called nav dash link then we can hit enter and i'm going to add index.html for the home link so i'll write that inside of the href and then we're going to add the home text in between the a tags so i'll just write home here and later we'll take care of styling the text but for now as you can see we have our home link started and let's add the rest of our links now before we do anything else so after home we have about followed by services then projects and the last one is contact us so now if we go back and check out chrome we'll have all five of our links set here but we're not going to be able to tell that the home link is any different from the rest or that we're on the home page so let's add a class called active here next to the nav link class and if we check again we're going to see that now the home link is a different color than the rest of the navigation links now let's add our css to match our navigation menu to the original so the first thing that we're going to do is let's resize our logo since that's taking up too much space here and it's too large in size so to do that we're going to reference the nav bar dash brand class followed by the image so i'm going to copy navbar dash brand and go over to style.css then underneath the navigation css comment let's add that navbar brand class and the image and we're going to drop the height down to 2.8 rem which is about the equivalent of 50 pixels or so and the 2.8 rem um that's going to be larger because of the font size large style declaration that we have here for the body so removing that it's going to make the content smaller in size so as we know that's going to take our rems from 16 pixels to 18 pixels so now let's set the background color of our navigation it might be tough to tell but this is going to be the same as the jumbotron that we covered earlier which has the slight linear gradient shade to it taking us from a light gray to an off-white so let's target the nav bar class in order to change the background color and once we do that we can just paste in the same linear gradient css from the jumbotron so now if we take a look you'll see that it's going to sort of match up with the white off to the right but if we change this to the gray hex value of all sixes we're going to be able to see a clear difference of the gradient so now with the background color set let's go back and we're going to change the font size of the navigation menu links to match the original along with some other styling so with the font size large set we'll just need to increase this slightly from one rem to 1.1 rem to get the font size that we're seeing with the finished version then let's make the characters uppercase by adding text transform uppercase and now we're going to be closer to the original but let's also space out the letters with letter spacing 0.1 rem which i think looks really sleek with navigation menu links and in order to space out or separate our navigation menu links let's target the list item class which is the nav item class so we can just add some padding all around this by adding nav item then let's add padding 0.4 rem all around okay so now if we take a look we're matched up to the original except for the coloring so let's target the nav links themselves so we can change the colors of all the links to start with then we'll cover the hover and active class so we'll reference the nav link and then we're going to change the main color with color black then we'll need to override the original color with the navbar dash light class by using exclamation point important okay so now we should be matching up all of the link colors except for the home link because that uses the active class which we're going to give the blue shade that we're seeing here as well as the hover sudo class for the other links when we hover over them so if you remember from the html a couple of minutes ago we added the active class here to the home link so let's reference that after the nav link class so we can just copy this and paste it underneath then add the active class and to target both this and the hover state we'll add a comma followed by the nav link class and then the hover pseudo class then the blue hex value that we'll use here is 396 afc so now with our blue hover shade and the active blue shade we're matching the original except for the box shadow that appears underneath it which is going to be similar to the jumbotrons further down the page which i think looks really good with the sticky feature so let's copy that box shadow css from the jumbotron and then let's go up and paste it in underneath the nav bar now if we save it we'll have the box shadow but i'm going to make it a little bit darker with 0.5 now let's start laying out the first part of our html and css for our carousel image slider first we'll lay out our images and the buttons underneath that will indicate which slide we're on then we'll add the content on top of the image slider so let's go back over to index.html and locate the image carousel comment that we see here and if you'd like to learn more about the carousel with bootstrap you can take a look at the documentation in the components and see the different features that are available for the carousel okay so underneath the image carousel comment let's add our id for the carousel which is simply going to be carousel and then this element will also have two classes first the carousel class and then the slide class from bootstrap and these classes will interact with the bootstrap javascript library for the image carousel and i'm also going to drop the closing div to above the end image carousel comment then after our class is here let's add data dash ride carousel and then we'll need to set a data interval so this is going to be the time spent on each slide before it transitions to the next and for now let's add 5000 which means five seconds so now with that set we're ready to start adding our carousel content to add our image slides so before we can add the images we'll need to add a class called carousel dash inner and then inside of our carousel inner each one of the images will have a class called carousel dash item around it and the first one we're going to make active then we'll also add the image inside of it and i'm going to drop this down to a different line here then we're ready to add our image source so i'm going to hit command b and open up the sidebar and inside of the image folder we'll have carousel and then one two and three so this is going to be img forward slash carousel 1.jpg so now if we save it and take a look we're going to see that the image is spanning outside of the window and if we were to flex up the page it's not going to take up the full width past the image with so we're going to add a class from bootstrap called w-100 which means with 100 so now the image will take up 100 of the screen no matter how wide or narrow it is so now that this is set we can see the box shadow for the navigation better and it's a little darker than i think we'll want it so let's reduce this to 0.2 from 0.5 making it 20 of the black shade instead of 50 now that our first image is set let's add the rest of our images and then we'll get to the indicators at the bottom of the screen so i'm going to copy this first carousel item with the image inside of it and paste it underneath twice then all we'll need to do is get rid of the active class for the second and third and change it to 2.jpg and 3.jpg so now that we have all of our slides set we can mess around with the data interval and the duration for how long each image will show so if we change this to one second it's going to go by pretty quickly but i found that 6500 or 6.5 seconds seems to look pretty good with having a duration where people can read stuff on top of the image slider but for now i'm going to change this to add a couple of zeros to the end so it doesn't slide while we're building the website so now let's drop down and add the carousel indicators that appear at the bottom of the screen and these will be inside of an ordered list so let's locate that comment for carousel indicators and start off with ol for the ordered list followed by the class carousel dash indicators and then we'll hit enter and inside of this we'll have a list item for each indicator and we're going to give this list item a data target for the carousel element which if you remember we added the um id that simply says carousel so we'll add the hashtag and carousel then each one will have an attribute called data slide two and the first one will be zero and then what we can do is just copy this first list item and paste it in twice then the second one will be one with data slide two followed by two for the third then the first list item we're going to give a class called active so it appears white in color that way when we use the carousel indicator buttons to go to and from the different slides we'll be able to tell which one we're on based on the color of it okay so now with our indicator set let's add a little bit of css so you might notice that with the finished version the height of the image carousel is cut off at a certain point so it doesn't keep expanding in height on large screens so in order to set the height let's go back over to index.html and we're going to locate the class called carousel dash inner and this is what we're going to add our max height to moving over to style.css we have our carousel css comment so i'll add carousel inner then max height 40 rem and we'll need to add important to override the height setting of the carousel image slider already and now with 40 ram of height this is going to be 720 pixels with 40 times 18 pixels next let's change the transition speed between slides because it's kind of quick right now as you can see as compared to the original which has a bit more of a smooth transition to and from the slides so in order to target these we'll need to reference classes that we haven't added in our html but that will start with the carousel item class in addition to targeting carousel item active so we'll want to target carousel item next and carousel item previous then the active carousel item so we'll say carousel item dash next comma carousel item dash prev or previous comma then the carousel item active class and we're going to add the style declaration transition transform then two seconds ease and we'll just see how this looks at two seconds which is going to be kind of slow as you can see right here but i'll let you be the judge depending on the audience of your website so i'm going to change it to 1.2 seconds ease which is the speed of the original and what i seem to like so with that said next let's change the size of our carousel indicators because they're kind of tough to see with the original size from bootstrap so to do this we'll want to reference the carousel indicator ordered list as well as the list item so we can just write carousel indicators and then li so we'll add that class followed by a list item now let's increase the width of this to a size that's going to be significantly larger than the original at 80 pixels so we can see that we can size it however we want and then for the height we'll make that 20 pixels for right now and now if we take a look they're going to be larger than the original and the completed version so let's reduce this to 40 pixels and the height to 6 pixels then what we'll do is the um space in between them will be a little bit different so let's increase the margin all around of 4 pixels and now if we take a look they're going to be separated but they're going to be a little bit up the page so what we can do is we can just target the margin right as well as margin left this way we'll have the space in between them and they vertical alignment match the original version now let's move on to part two of the html and css for our carousel image slider so let's start adding the content that sits on top of the first slide that we see here with the dark background so over in index.html let's locate the first image inside of the slider and underneath the actual image tag we're going to add a class from bootstrap called carousel dash caption and this class is used to add content on top of the carousel so inside of that we're also going to add a class called container similar to what we did with the navigation to add a max width inside of the carousel caption class and also inside of the container will have a row which will contain our column on top of the image slider similar to one of the columns from the various sections of the website like the three column section so now that we have our row started to contain our columns the first thing that we're going to add for the first column is we're going to add a class from bootstrap to make it so the column actually doesn't appear yet so if we just do a search for d none or display none we're going to see a few different classes where we can alter the display property of our column at different screen widths so we're going to start this column here off with display none at the smallest of screen widths and then once we get up to the medium screen width or the 720 pixel range we're going to have it display block so we'll say d dash none and then d md or 720 block next let's add the number of columns that we want to set for the medium screen width once we start to see the column content display and as you'll see on the third slide we have a example of the bootstrap grid system with the 12 column layout where you see the single column up to the 12 column taking up the entire width of the page so let's start our first class off to add our medium screen width column back in index.html which is going to take up basically the entire width so we'll add call 11 md and then once we've added that we'll add the large screen width break point and for reference the medium screen breakpoint right here will be 768 pixels and then we have md which was referenced with col md 12 or column d11 so next let's add the breakpoint for the large screen width at 992 pixels where we're gonna use up nine out of the twelve available columns by writing the class col dash lg-9 then the next breakpoint is going to be at the extra large screen width of 1200 pixels where we'll use up eight out of the 12 available columns so let's write cal dash xl-8 then we're going to add the background color to this using a classroom bootstrap for the background color that will change later in the css and that's going to be called bg-dark then in addition to this class we're going to add a class to make it so we can have our content aligned to the right so bootstrap has a class called textwrite which means text align right then we can hit enter and now we're ready to start adding our content inside of the column so now in order to see the background color display we can just add any text inside of the column and now we're going to see the positioning of our column so in order to get it positioned off to the right we're going to add a class with bootstrap to justify it and that class is going to be justify content end which is going to push the column off to the far right of the row so before we add our content let's center the column vertically on top of the image and we're going to target the carousel caption class to do that so i'll copy the class and let's locate the css comment for the carousel content then we can add the carousel caption class and we're going to give it some absolute positioning so we can position it wherever we want on top of the carousel inner and then we're going to make it 47 from the top of the carousel inner to center it vertically and then one other thing that we're going to do is so the middle of our column is centered vertically once we add our content we're gonna add something called transform translate y negative fifty percent which is going to move the column itself up fifty percent of its own height now we're ready to start adding the content inside of the column replacing the simple paragraph text that we added so first we'll add the heading from the original version where it says responsive website design so let's move back over to index.html and we're going to use a heading 3 tag to add the responsive website design text and then we're also going to add some padding to the bottom of it so if we take a look at the column here you'll see that there's a little bit of space before we get to the border underneath it and we'll use classes from the bootstrap framework to add our padding so if we just do a search for padding or margin in the utilities here we'll see that we can use m or p followed by top bottom left right x or y axis and then one through five which will give us 0.25 ram up to 3 rem of padding or margin around our element so in our case we're going to use padding bottom which is pb for this element or for the heading 3 and we're going to give it one rem to the bottom so that's going to be pb-3 and then once we hit enter we can add the responsive website design text so next let's add the white border that appears underneath the original version and then we're also going to add some space to the bottom of this border before we get to the paragraph text so to add the border we're going to use a class from bootstrap called border dash top then to add the white border we'll add border dash white and now if we hit enter we'll see that it's at the bottom of the column so we're going to give it margin bottom of one rim with mb-3 then to change the size of it so it's only taking up a partial width of the column we're going to make it 75 percent of the width with w-75 and to position it off to the right we'll use ml-auto similar to what we did with the navigation menu now it's starting to take its shape so let's add the paragraph text that appears underneath it next so i'm just going to copy this you can use lorem text by just typing in lorem for dummy text and visual studio code and we're going to use the lead class from bootstrap with paragraph class lead and the lead class is going to use the 300 font weight from the google font that was already added for us so as i said you can just type in lorem for the dummy text but i'm going to paste in the same paragraph content from the finished version and with that we're ready to add the button that appears underneath the paragraph content where it says learn more so let's take a look at the bootstrap buttons from the framework by just doing a search for buttons and then we're going to see that we'll have the option to add solid buttons that we see here or we can drop down and add the outline buttons then on this page you'll also be able to check out the different sizes of the buttons and some other features but for now we're going to use the blue primary button using the btn-primary class so let's start off with the a tag followed by the btn class then we'll add the blue btn-primary class then for now let's add the btn-sm class for button small and then once we hit enter you can just add a hashtag here to keep it blank or link to a different page of your website and i'll add the learn more.text so now once we save it and we go over to visual studio code we'll see that we have the small button displaying so we can change that to large to have a big button but to match the original i'll leave it as btn-md for the medium size okay so with that we'll have all of the html for the first slide completed so let's move on to the third slide where we're going to have the light colored column sitting on top of it off to the left so this column is going to be similar to what we did previously except for it's going to take on different width and obviously we're going to use light background colors so let's drop down to the third slide and underneath the image let's add the carousel dash caption class then inside of that we'll have the container followed by the row inside of the container then once we hit enter and populate these html tags let's add the same display none tag that we added to the first column with d none and then dmd block so it starts to display at the medium screen width then for the number of columns once we get up to the medium screen width at 768 pixels we're gonna use nine out of the twelve available columns with call dash md-9 then at the next breakpoint of 992 pixels or the large screen mark we're going to drop that down to seven out of the 12 available columns with call lg 7. so we'll use the 7 out of 12 available columns up to the large screen width and next we're ready to add the background color so with bootstrap we're going to use the bg dash light background color and then we'll also specify the positioning of our text with text dash left so now we're ready to add the content inside of the column starting with a heading 3 where it says mobile friendly and i'll just type that out here instead of copying it and pasting it and then we'll be adding our margin to the border underneath it but we're not going to add any padding to the mobile friendly text so if we take a look at the text it's going to be white in color and we'll need to add a class to make it dark so let's use bootstrap's class called text dark to do that so now once we save it we'll have our dark heading 3 text and later on we'll style it to match the original but for now let's add the border that appears underneath it this border will use classes similar to the first so we can just copy this html and then paste it into the third slide here then let's do away with the white and make that dark and let's also remove ml-auto because it's going to be positioned off to the left then for the spacing around the actual border if we take a look at it we're going to have margin on the top and bottom so we'll use my for the vertical axis dash one for 0.25 ram top bottom and now we're ready to add the text underneath it so i'm going to copy the paragraph text and let's drop down to add the paragraph tag with the lead class then underneath the paragraph text let's add the button which is going to use the a tag again with the btn class and btn-lite for the white button in addition to the btn-md class for button medium then i'll add a hashtag again to leave the button blank and add the learnmore.txt so with that when we save it we'll have all of our html content laid out for the carousel image slider and we're ready to add our css now let's add the last part of our html and css to the image carousel which will include our css styling so in just a few minutes we'll get to the light version that we see right here of the column but first let's get to the dark column styling for the first slide so in our html we have the class called bg dark and we're going to reference that in style.css to change bootstrap styling of the bg dark class so let's paste that in and we're going to give this a background color with a transparent black shade using red green blue alpha then we'll use all black similar to the box shadow that we added earlier in the video and use exclamation point important to override the background color of the bg dark class so now we're barely going to be able to see the background color so let's change it to 0.7 to give it a 30 transparency and next let's alter the border radius by adding border radius 1.5 ram all around and this will give it nice soft rounded corners which is going to be more rounded than the classes that bootstrap has to offer with the border radius then lastly let's add some padding all around to match the finished version we could use p 3 in our html but we'll just do it here with padding one rem all around okay so now with this set we'll get to the heading three text in just a bit but first we can apply similar css to the bg-white class so let's grab that from our html right here then in style.css i'll actually copy the style declaration and paste it in then let's change our red green blue colors to all white using 255 instead of black then when we save it whoops we'll need to change the class to bg light and now when we take a look at the third slide there we have the light transparent background color but you'll also notice that this is going to affect the bg dash light class in the navigation so you can kind of see the border radius appearing with the navigation now so what we'll do is let's change this to bg-white instead and this will be our own custom background class that's a non-bootstrap class but will have the same effect with the styling while keeping the navigation bg-lite class now let's change the sizing of the heading 3 where we see the mobile-friendly text then we'll get to the paragraph text and increase that a little bit underneath it so this will affect the heading on the first and the third slides and we're going to target the heading 3 inside of the carousel caption class so a heading 3 can be used aside from this with its own styling so in style.css i'll paste in the carousel caption class followed by heading 3 then let's increase the font size of it to 2.3 rem and let's also decrease the font weight to match the original because we don't want the bold font weight that's not going to match the paragraph text we'll give it the same 300 font weight as the lead class paragraph text so lastly the lead class with bootstrap already gives us larger paragraph text than normal but we're going to increase it a little bit more to match the original as you saw there when i toggle back and forth so i'm going to drop down and add p dot lead then let's increase the font size to 1.4 rem so now when we toggle back and forth we should be pretty close to the original but the background color is slightly off so we'll make this .65 instead of 0.7 and now the carousel slider is matching up with the original website design now let's lay out the html and css for our social media menu bar icons okay so let's drop down underneath the image slider and focus on the social media bar where we see the text on the left and the icons on the right so back over in index.html let's drop down to where we see the start social jumbotron html comment and if you're not familiar with the bootstrap jumbotron class this is a feature in bootstrap that gives us a background color and spacing already to an element so as you can see here it's going to give us the gray shade using the jumbotron class with some padding around it so we're going to use that to lay out the social bar then similar to the navigation in addition to the jumbotron class we'll add the sticky dash top class then similar to the navigation and the carousel slider we already have a div id set surrounding this so it's going to know what space it should be sticky in then inside of it we'll have a container followed by a row inside of that so the container as we know is going to set a max width for it similar to the navigation and the carousel image slider then the column for the social media icons we're going to center that once it takes up only some of the screen width using a class from bootstrap called justify-content-center similar to the end class that we use for the first column in the carousel and we'll also add text-center to center the text as well as the social media icons once they're inside of their list items which we'll add in just a moment let's start off with the first column containing our heading text and we're going to use a display none class for this and have it display at the extra large screen width so let's add d none then d dash xl-block and we'll take up half of the screen at the extra-large screen width using the class cal dash xl-6 then to match up the height of the social media icons we're going to add a little bit of padding on the top of 0.25 ram with pt-1 then we can add our heading 3 text so i'm going to copy the connect with us on social media text and paste that in you can write it out or add the lorem dummy text here and now we're ready to drop down to the second column containing the social media icons so this column we're going to have a couple of different break points working up to the extra large half screen width so we're going to start at the small screen with which is the 576 pixel breakpoint right here using up 10 out of the available columns with the class call dash sm-10 then for the next breakpoint at the medium screen 768 pixel breakpoint we're going to keep this section around the same width by reducing the number of columns to 8 from 10 with call dash md-8 then for the large screen width we'll reduce it by 1 as well as the extra large screen going to half of the 12 available columns then similar to the first column let's add the same padding top 0.25 ram with pt-1 so now we're ready to add the actual social media icons and we're going to put these inside of an unordered list so each icon itself will be inside of a list item so let's add our unordered list which will give a class called social then inside of our unordered list we'll have our list item with a link inside of it then once you add your link to open it up in a new tab we'll add the attribute target underscore blank and in between the a tags we can add our font awesome icon which we covered early on in the tutorial so let's go over there and i'm going to type in facebook for the first icon then we'll see the different facebook icons that we can select from and this one's just going to be fa facebook starting with fab for font awesome brand so let's paste that in in between the a tags and now if we save it and take a look in the version we're working on there we have our first font awesome icon displaying so since all of the font awesome icons will have different colors what we're going to do is we'll add inline css for their colors that we see here and the hover color we'll do in style.css so i'm going to write inside of the i tag style color and then hashtag and i'll leave it blank for right now so we can use this for all of the icons then for facebook their hex value is 3b5998 so once we save it we'll have the facebook icon displaying with their blue shade now let's go about adding the rest of the social media icons with their relative hex values so we can fly through these let's copy the facebook icon and paste that in five times for all of the rest of the icons then all we'll have to change is the social media icon and the color so the second icon is twitter followed by instagram then we have youtube pinterest and linkedin okay so let's save it and take a look so there we have all of our icons except for the instagram one it's actually going to be instagram square and now we're ready to add the colors to them so let's start off with twitter which is the hex value zero zero a c e d then for instagram it's three f seven two nine b then for the youtube red hex value it's c4302b for pinterest the hex value is c8232c then lastly for linkedin it's 0e76a8 now with all of our html complete we're ready for our css styling starting with the unordered list social class since we already have the jumbotron set for us in style.css so let's add our ul dot social class and then let's get rid of the bullet points next to our list items by saying list style type none then we're going to add display flex which will get the list items displaying next to one another then they'll take up the width of the column once we center the list items themselves to do that let's reference the ul.social class again and we're also going to add the list item to the end of it so ul dot social li and we'll center the list items by adding margin 0 auto so now if we save it we'll see that they're taking up the column width and next let's give them their full width size so we're going to target the jumbotron class in case you want to resize icons in other parts of the website and i'm going to inspect the social icon so we can get the class directly from font awesome which is called svg dash inline dash dash fa so i'll paste that in here then let's change the font size to 2 rem and we'll also add some margin so we're going to add margin 0 top bottom and 1 rem left right to space them apart by 18 pixels later in the tutorial we're going to resize the icons for the smaller screens but the size that we just added is going to be for the extra large screen width so let's compare it to the original and when we do we'll see that they're not taking up as much width as the finished version and there's too much height to them so let's remove the padding from the social class of the unordered list and that's going to adjust the width to match the finished version but then we're also going to have too much height so let's remove the margin top bottom also and center it by adding margin 0 auto to the unordered list then lastly with our icons let's change the color when we hover over them by using the hover sudo class so what we can do is copy the same css and then just add the colon hover or the hover sudo class to the end of it then we'll change the color to gray and if we check it now this isn't going to change just yet because we have the inline css for the color so we'll need to add exclamation point important in order to see the hover shade now let's start laying out the heading and three columns section html and css so let's scroll down the page to where we see the complete website heading along with the underline the heading underneath that followed by the three column section where we'll be adding our font awesome icons let's start off with the heading where it says complete website and over in index.html locate the html comment where it says main page heading then instead of adding a container and a row since this content is going to be centered we'll just skip right to adding a full width column using the col-12 class then all of our text is going to be centered in this column so we'll use the text center class and in addition to this we're going to add some space up top to separate it from the social bar with mt-5 for margin top 3 rem so now for the complete website text that we see here we're going to put this inside of a heading 1 tag and we're going to use a class similar to what we did with the lead class with bootstrap called display dash 4. then let's also add some additional space above this text with pt-4 which means padding top 1.5 rem so now once we save it if we take a look in chrome there we have our display for text and with display we can go from display 1 being the largest text which you'll see here and then down to i think display 4 is actually the smallest because display 5 is just going to give us the bold original heading 1 text i don't think that's a class actually with bootstrap so we'll use display four and then now that that's set let's drop down and add the border that displays underneath it so let's use the border top class similar to what we did with the image slider then we'll use the border dark class to give it the black shade and we're going to give this a width of 50 percent of the page or 50 of the column then let's center it using the mx auto class and add some margin to the top and bottom of it of one ram with my three okay so now with that set we're gonna have our border appearing underneath the display four text and now we're ready to add the paragraph text that appears underneath it so similar to what we used in the image slider let's use the paragraph lead class here and then i'll add the built with html css and bootstrap text okay so that looks good but so we're not looking at the very bottom of the page i'm going to add some space to the bottom of our html document just above the javascript source files so i'll just call this div space and then let's give it some internal style for its height with a height of 80 vertical height that way we can scroll down the page a little bit to see our content displaying in the middle of the video okay so now with this set let's drop down to the three column section that appears underneath it with the icons paragraph text and buttons so let's locate the html comment for the three columns section underneath the main page heading and we're going to start this off with a div class container to set a max width and then inside of that we're going to add a row and similar to what we did with the social menu bar we're going to have our columns centered at the large screen width as we see right here so we're going to use that same justify dash content center class then in order to separate the three column section from the call dash 12 above as well as the border underneath let's add margin top bottom 3 rem with my5 and use the text center class because all of our content will be centered inside of the columns so now let's start our first column off and i'm going to reduce the screen width because we're going to go from the narrowest of screens up to the widest screen as we're specifying the column classes so we're going to keep the single column width up to the medium screen mark where we change it into the two column layout so let's use the class call dash md-6 for the two-column layout then once we get up to the large screen it's going to shift into the three column layout so 3 goes into 12 four times as we know then with the three column layout we already have margin on the top and bottom but when we get down to the smaller screen widths we're going to want to add some additional spacing around it so let's give it padding top bottom of one ram with py-3 now we're ready to add our font awesome icons so let's go back over to the font awesome website and we're going to take a look at the documentation using the docs link in the navigation and go down to the stacking icons link on the right sidebar then we're going to use the icon that has the square and the 4x size that we see right here so i'm going to copy that html with the span class to stack the icons in addition to the square and for now we'll have the terminal icon on top of the square but we're going to change that to the html icon so that's going to be f fa html5 so now if we take a look in chrome whoops that's actually going to be the brand fab class to start off the icon and there we have our html5 icon inside of the square so for now let's go about changing the color of the html5 icon internally here with style and then the hex value dd4 d26 then later we'll take care of the gray shade in style.css similar to what we did with the social bar so now with this set let's add the paragraph text now that appears underneath it where it says html5 the best for learning to code websites so we'll use the lead class again and then i'll paste in the paragraph text then underneath that we'll have our button which will use the same classes up until the btn-outline dash light class and we'll use btnmd then i'll add the learnmore.txt okay so now if we take a look at it in chrome we'll have we'll actually need to use the dark btn outline dark class for the button and there we have it matching the original aside from the gray square icon so let's fill out the rest of the icons and then we'll change the gray background so let's copy this column and paste it in twice then all we'll need to change is the html5 reference to bootstrap and css3 so i'm going to change this to bootstrap as well as the html5 lead text then we'll do the same with the css icon class as well as the paragraph text so now if we take a look in chrome we should have all three icons displaying but actually the css3 one is different so we'll want to use the alternative css3 icon with css3-alt then let's change the hex value to 026 db 6 which will give us the blue shade with css3 and for the bootstrap purple shade that's going to be 563d7c okay so now if we save it we'll be all set except for the black background color so we'll want to change that to the gray shade and to do that what we're going to do is target the fa square class that we see here in the icon stack so instead of changing the color itself what we can do is simply change the opacity so first let's add the fa-square class then let's give it an opacity of 0.05 which is going to be the light gray shade that we've been seeing in the three column layout now let's lay out the content for our two columns section with html and css okay so let's take a look underneath the three column section that we just added and before we lay out the two column section we'll want to add the border that appears above it that spans the entire width of the page so let's locate the border html comment and then what we can do is we can go up and grab the border html that we added underneath the heading and paste that in underneath it and add a little bit of space next to the border html comment then paste it in and the only thing that we'll need to change here is going to be the width so it spans 100 percent of the page so let's change w50 to w100 okay so now if we take a look our border is going to span the entire width of the page and before we move on to our two column section we're going to have another border further down the page so i'm going to copy this html and look for the second border html comment and i'll just paste that underneath so we don't have to add it later and that's the only one in addition to the one that we just added above the two column layout okay so with the two columns section similar to what we did with the three column and the content on our image slider what we're going to do is add a container first and we're going to add some space above it so let's add container then above this we're going to add margin top 5 or margin top 3 rem then inside of that we'll have our row then for our first column unlike the three column section we're just going to have one break point here which is going to be at the large screen width instead of the medium screen width so this will be at 992 pixels so let's use the class call dash lg dash 5 for 5 out of the 12 available columns then we're also going to add margin to the bottom for screen widths underneath 992 pixels but once we get up to 992 pixels we're going to remove the margin bottom and make it centered vertically alongside the image on the right so at the wider width you'll see it centered vertically here and to do that we're going to change the margin at the large screen width to my lg auto okay and then once we hit enter we're ready to start adding our content starting with the heading one so the heading one that we see right here we're going to use a bold font weight for that from bootstrap called font weight bold then let's also add some margin to the bottom of it with mb-3 for margin bottom one rem then i'll paste in the 12 website bundle text okay so now with our heading set we're ready to add the content that appears underneath it which is the paragraph text and for this we'll just use regular paragraph text but we're going to add some space underneath it so let's add p and then the class margin bottom 4 for 1.5 rem and i'll paste in the text then underneath the paragraph let's add the button and this is going to be the same btn outline dark class that we used before but we're going to use btn lg for the large size button and i'll add my website address in this one in addition to target underscore blank then the text c the bundle okay so now once we save it we'll have the first column set position off to the left and we're ready to add the second column with the image that sits in it with the um tablet so let's go back over and we're going to use up the remaining columns so we'll have 7 remaining out of the 12 after five with call dash lg-7 then inside of that we'll have our image and we'll give it the width 100 class similar to the carousel then the image file name is img forward slash tablet.png okay so let's save it and take a look so there we have our two column layout but there's not enough space underneath it in my opinion so let's add a little bit more padding around the row of 1.5 rem top bottom so we'll use py-4 and now that's going to have sufficient spacing around the image and the text section so since we already have the html and css for the fixed background image so let's enable that by adding the right angle bracket to remove the html comment or to remove it from being commented out in addition to the jumbotron that appears underneath the fixed background image section okay so let's save it and see what we end up with so it looks good except for we have the fixed top jumbotron instead of the sticky top so let's go back over to index.html and change that from fixed top to sticky top and then once we save it that's going to be underneath the fixed background image section so we're completed down to that point now let's move on to the second two and three column sections that appear before the footer section of the website so let's go back to index.html and locate the three column section html comment which is underneath the jumbotron section so this three column section will have a similar feel to the previous three column section that we added with the bon awesome icons so we're gonna have the three columns go from a single column width up to two columns followed by the three columns at the 992 pixel mark but first let's start off with our container inside of the three column section html comment and then inside of that we'll have our row with the justify dash content center class then we're also going to add some margin to the top and bottom with my-5 for 3-rem top bottom and let's add the text center class because all of our content is going to be centered here so now let's start our first column which is going to take up half of the page at the medium screen mark with md-6 then 4 out of the 12 available columns on the 992 pixel mark and we're also going to add some space to the top bottom so let's add margin top bottom 1.5 rem now for the content inside of the column let's start off with the agency website heading which is one of the website designs in the bundle pack and we're gonna put that inside of a heading four then let's add some margin to the top and bottom of one ram with my-three then for the image underneath that we'll use the w-100 class and the image sources img forward slash agency.png now we can add the paragraph text underneath that so i'll add the p tag and i'm going to copy the paragraph text here and paste that in then for the button underneath what we can do is just take the button from the section above and change that to see the design dot dot and we'll need to change the button class from primary to outline dash dark so now scrolling down we'll have the first column of the three columns section laid out as we see here with the agency website design and what we can do similar to the previous three column section is just copy and paste the html then change the heading text and the image so i'll copy this and paste it underneath then change the heading to the business website as well as the image to business.png then we can paste it in once more to get the parallax website design that we see here so we'll once again change the heading 4 to the parallax website and the image to parallax dot png okay so now if we save it and take a look we'll have our second three column section all laid out as we can see here followed by the border underneath and now we're ready to lay out the second two columns section that appears underneath that which will be similar to the first but it's going to take on different column widths so what we can do is we can copy the previous two column section instead of writing out all of the html so i'll go up and copy the html inside of the two columns section comment then let's go down and paste it inside of the second two column section comment and let's change the content around before we get to the changing of the actual column widths so let's change the heading to the complete responsive websites followed by the paragraph section so i'll copy that and paste that in taking over the previous paragraph content and the button where it says see the bundle we can keep the same but the image will change to responsive.png from the tablet.png image so now if we save it and take a look we'll see that we have the content laid out but you'll notice that the columns aren't the same width so we're going to reduce the width of the first column and increase the width of the second column so we'll make this 4 out of 12 instead of 5 out of 12 columns and let's make sure that the margin is 3 rem top bottom instead of just the top so i'll change this to lg 4 then we'll change the bottom one to lg8 okay so let's save it and now when we scroll down the website's really going to start taking its form as we get down to the last two column section and if you remember we already have the jumbotron before the footer laid out for us from the starter files so all we'll need to do is add another right angle bracket to the html comment to activate that section so let's add that and we'll also want to remove the fixed bottom class so it's not stuck to the bottom of the page so now taking a look in chrome we're completed all the way down to the last jumbotron section now let's lay out the html and css for the footer and socket sections of the website first we'll lay out the footer which is the light gray three column section then we'll get to the socket at the very bottom of the website with the dark black background so let's move over to index.html and locate the footer or start footer html comment and we're going to use the footer tag here so we'll give it the bg dark background color for now then later change it in the css and we'll also add our container inside of the footer then our row and the row here we're also going to give a class to center our content which is going to be the justify content center class then in addition to that we're going to center our text using the text center class and we're also going to make all of our text inside of the footer white in color using the text light class okay so now that we have our footer container and row set let's add our first column which is going to include the logo and the paragraph section at the very top and this section is going to take up 100 of the width until we get to the medium screen width where we're going to make it take up nine out of the available columns so let's add the col dash md9 class then inside of that we'll add our image for the logo which will be img slash logo dash white dot png and underneath that will add our paragraph text so i'll copy it and paste it in so now if we save it and take a look in chrome we should have our bg dark class and we're going to have the rounded corners because of the class in the carousel but we'll be changing that to our own custom background color as well as resizing the logo in just a bit but first let's lay out our three column section underneath the column d9 class and these are all going to start with call dash md4 so they're going to go from the single column width to the three columns at 768 pixels and with the container class they're going to jump in size a little bit resizing at the three column layout so first let's add the border that surrounds the heading at the top of each section so we're going to use an hr class for this instead of adding border top and we'll give it the class bg dash light for background color light to give us the white border then underneath that will add the contact info text inside of a heading 5 tag and underneath that we'll add the same hr tag with the class bg-lite to give us the second border underneath the heading 5. now let's add the paragraph text that appears underneath it starting with the phone number so i'll add the phone number here as well as the email address underneath it and we're going to give the email address an email link so when someone clicks on it their email program will open by adding mailto colon plus then the email address and then i'll write the email address for the actual paragraph text and underneath that we'll add the street name as well as the city state and postal code or zip code okay so let's save it and take a look so there we have our first column and we'll change the email address color in a bit but let's also add a link for the phone number so i'm just going to delete this and let's start a new paragraph tag with the link inside of it then add the tell colon plus phone number link so when somebody clicks on it it's going to prompt them to make a call and then i'll add the phone number text here inside of the paragraph and the link so as you'll see it's gonna prompt facetime here on my mac and later as i said we'll change the links to be white in color for now let's add the second column for the footer section so we can just copy this and paste it underneath then i'll change the heading to say our hours and underneath that we'll do away with the phone number and email address then for the hours we'll have monday 9 a.m to 5 p.m for the first line for the first paragraph tag then we have saturday 10 a.m to 4 p.m and the last one is closed on sunday or sunday closed okay and then with that the last column is just going to have the city state zip or postal code so i'll just change the text to say service area then we can delete everything except for the address and we'll have that display four different times okay so now let's take a look and it looks good except for i forgot or deleted the line underneath the service area so i'll just copy this and paste it underneath and now we have all of our content for the footer section displaying so let's drop down and add the socket that appears underneath the footer where we have the socket html comment just under the end of the footer section so we're going to wrap this with a div class that will give a custom name to called socket then we'll make our text light in color and center our text then let's also add some padding to the top and bottom of the text of 1.5 ram with py-4 then we can hit enter and inside of that we'll have our paragraph text and let's add the copy symbol or copyright symbol with ampersand copy semicolon then our link and i'm going to put my website address in here with w3nubi.com and target underscore blank to open it up at a new tab then i'll write w3nubi.com for the text that appears inside of the link so with this copyright symbol i always appreciate back links to my website for my themes and courses or tutorials but you're welcome to change it to your own website address or website name so now we're ready to start styling the footer section starting with the background color and then we'll resize the logo so we'll want to target the footer tag itself inside of style.css underneath the footer css comment so let's reference the footer tag and let's change the background color to the hex value 383838 which is sort of a off black dark gray shade and to see it we'll just need to remove the bg dark class okay so now we'll have our dark footer background color and now let's add some padding around it so we're going to add some custom padding inside of style.css instead of using the bootstrap classes and we're going to give it padding of one ram on the top two ram left right as we see here which makes the container a little bit narrower so let's add two ram or 36 pixels and then on the bottom we're gonna add a little bit more with three ram padding okay so now with this set let's resize our logo image next so we'll target the image inside of the footer tag then let's reduce the height to 3.5 rem and we're also going to add some margin to the top and bottom to separate it a little bit more from the top of the footer and the paragraph text underneath with margin 1.5 ram top bottom and auto left right okay so now our footer should start to take shape except for we'll want to change the links to be white in color in addition to the link in the socket section because that's going to have a dark background as well so what we'll do is we're going to reference footer a for all of the links inside of the footer and let's make the color white then let's remove the text decoration underneath it or the underline by saying text decoration none then in addition to this once we hover over our links we're going to see that they're still blue in color but before we target the hover sudo class let's add the socket link here as well and then we can copy this and paste it in then add the hover sudo class to both the footer link and the socket link so now we'll have our links white in color when we go back to chrome and we're not going to be able to see the one in the socket so let's add the background color to the socket class now so what we'll do is reference that socket class here and add the background color with the hex value all twos which is a darker gray or off black shade than the three eight hex values and let's add a simple border to the top of it so with the css we'll add border top 0.1 rem solid gray okay so once we save it we'll have all of our html completed for the full width version of the website let's just get rid of the white space that appears underneath it by removing the inline height that we added at the bottom of index.html okay so with that we have as i said all of the full width version of the website completed so now we're ready to add our responsive media query css to make it so it looks better on tablet and mobile devices but first don't forget to remove the additional zeros for the data interval if you did that earlier on in the tutorial so we can have the image slider data interval set at 6.5 seconds now let's add our responsive css media queries for the mobile and tablet versions of the website so i'm going to open up the website using a responsive website design tester extension here in chrome and once we do that we'll see that there's a few elements of the website that will want to resize for the mobile width including the social icons the carousel indicators for the slider and aspects of the navigation menu we'll also resize some of the text including the text on top of the carousel with the headings as well as the lead class content that we've used with the paragraph sections on top of the image slider as well as in other places on the website so we're going to start with our changes that affect the widest of the media queries working down to the narrowest of screens and the first thing that we're going to change will be the heading 3 that sits on top of the image carousel so as you'll see with the responsive website design text underneath 1200 pixels in width that's going to decrease in size and then when we flex the window down a little bit more the paragraph text is going to decrease at the 992 pixel mark and the paragraph text will stay that size until the carousel caption content disappears so let's target the heading 3 text using the h3 tag inside of the carousel caption class and we'll need to locate the first media query in style.css where it says the devices underneath pixels or 11.99 so i'll add the carousel caption class and then the heading 3 and we're going to reduce the font size to 1.8 rem which will be reduced from 2.3 ram originally so i'll copy this and paste it below in reference to the heading 3 and we'll only need to add the css that we want to change at this device width so now once we flex the window down we'll see that the heading 3 text will change at that 1200 pixel mark so next let's move on to the paragraph text that appears underneath that and we'll resize the text for the lead class at the 992 pixel mark which will also affect the lead paragraph text that appears further down the page so for example the three column section as well as the text underneath the border where it says complete website so let's copy the paragraph lead font size style declaration that we have right here and then paste it underneath the 992 pixel media query then we'll just reduce the font size to 1.2 rem from 1.4 okay so now when we flex the website down we'll see that the paragraph text will resize at 992 pixels so next let's tackle the carousel indicators that we see here and reduce the size to match the original which is going to drop down at the 992 pixel mark as well so over in style.css let's go up the page and copy the carousel indicators li css then we can paste that in underneath the 992 media query and i'll change the width to 30 pixels the height to 4 pixels and margin right and margin left will reduce to 3 pixels okay so now once we save it we'll have our reduced carousel indicator list items underneath the 992 pixel mark so next let's move down the page and underneath the 768 pixel mark we're going to reduce the size of the paragraph lead text once more to a slightly smaller font size so let's go and copy the paragraph lead text from the 992 pixel breakpoint and paste that in here to 768 and we'll reduce the font size to 1.1 rem which is the original font size with the lead class so now with that change let's focus on the navigation because we're going to resize a couple of aspects starting with the logo which you'll see is a slightly reduced size underneath 768 pixels so in style.css let's add the navbar brand image or you can go up and copy it from towards the top of style.css and we're going to reduce the height from 2.8 rem down to 2.5 rem okay so with that the next thing that we'll do is we're also going to reduce the size of our links inside of the navigation to make them a slightly smaller font size and will reduce the spacing around the nav bar itself so let's reference the navbar class then we'll add font size one rem down from 1.1 ram i believe then we'll also change the padding around for the nav bar itself to reduce it a little bit so there's not as much space around the logo so we'll say padding 0.3 rem top bottom and .6 ram left right and that looks pretty good except for it's a little bit off with the navigation so let's change it to 0.4 rem and that's going to match the original also one thing that i forgot to include in the video is to change the size of the navbar toggler icon so you can use this css right here if you want to reduce the size of the navbar toggler icon at the 768 pixel mark so while we're resizing the navigation let's change it for the devices underneath 576 pixels as well so what we can do is simply copy the css for the two style declarations for the logo as well as the nav bar itself and i'll paste that in then let's reduce the height of the logo image to 2.3 ram the padding top bottom to 0.3 rem and the font size to 0.9 rem from one rem okay so now if we toggle back and forth between our version and the original we'll have the navigation matching up but you'll notice that the social icons aren't matching up so let's reduce the size for those at the 992 pixel mark and i'm going to copy the css that we added for the full width devices and paste that into the actually the 768 pixel mark because they're going to be the same size at 9.92 just the column is going to reduce in width so i'll paste that into the 768 width and let's reduce the font size to 1.6 rem and the margin left right to 0.8 ram then for the 576 pixel width will reduce the font size to 1.4 rem and the margin left right to 0.5 ram okay so now let's take a look and once we flex it down underneath the 768 pixel mark we'll have the resized font awesome social media icons in the bar underneath the slider and with that that does it for the complete responsive website design tutorial i want to thank you for watching please remember to comment like this video subscribe and turn on your notifications and stick around for a couple of minutes because i'm going to show you how to upload our completed website to the internet now on your own domain name now let's upload our completed website design to the internet on our own domain name so i'm going to start from my website at w3newbie.com and go to the resources page where i'll have a link to bluehost which is the web host we're going to use to upload our website to the internet or you can just go to w3newbie.com forward slash hosting which i'll have a link to in the description and this link will serve as a discount link to a page that bluehost has created for me because i've been recommending their hosting services for so long to followers of my website and on youtube so followers can get a discount to their hosting plans so once we're on the plans page if you're just building one website i would go with the basic plan but if you're building more than that i would go with the plus but for a single website the basic plan will serve just fine you're probably never going to need more than 50 gigabytes in space you'll get a free ssl certificate which will give you the lock symbol up here and then you'll have the option to have sub domains as well as five different domain name email accounts which if you look to the resources page of my website you'll learn how to add to gmail so the email storage wouldn't matter anyways with your emails going to gmail using your domain name.com email address so once you select the plan that you want we're going to be brought to a page where we can create a new domain name or use a domain name we own so since we get a free domain name anyways i always choose to create a new one with my bluehost accounts and i'm going to sign up with the domain name drewdashhost.com just for an example domain name i don't really have one that i'm going to use at this time but as we can see up top the domain name is available so i'm going to add my account information and i'll skip through the video just for a moment and blur out my info and then we can choose the package plan or package information so with bluehost because i know that i'm going to need it anyways i go with the longest term but if you just want to go with the cheapest amount overall you can choose the 12 month plan then beneath that we'll have the option to select some package extras and the only thing that i recommend depending on your situation is the domain name privacy and protection so every domain name that's online has to have something called who is contact information attached to it it's kind of like if you have a piece of real estate you have to have an owner's name and information attached to it so if you want to keep your contact information private i would choose to have the domain name privacy that way bluehost's contact information will be what's public but if you're using a business address or a po box or something you might not need to worry about that so i'll leave that up to you i'm going to elect to add the domain name privacy and then add my payment information which i'll just blur out and then select i've read and agree to the terms of service and cancellation policy which is a 30-day refund policy i believe and then i'm going to hit submit then once we're signed up we're going to see that we have a confirmation email sent to us as well as the option to download the receipt at the bottom of the page and i'm going to hit create account then we'll come to a page where we create our account password attached to our domain name so i have a password prepared already and i'll select i've read and agree to the terms and then hit create account once more then it says our account is ready and we can log in then on the login page we'll just need to add our password once more and i'm going to hit save with google chrome then bluehost is going to run us through a couple of questions here which we can skip through or you can add your answers to but it's not going to matter later on so i'm going to skip through all of this including the theme options and the reason that bluehost is showing all of this is because bluehost is really popular for wordpress websites in fact wordpress themself recommends bluehost so by default bluehost adds wordpress to the server for us when we sign up with an account so to prepare our account for an html website instead of wordpress we'll just need to take two simple steps which i'm going to show you how to do but before we do that remember that you're going to have an email from bluehost which you'll need to check to verify your domain so be sure to check for that and click the verification button so now back on the bluehost website we're going to go down to the advanced link here and i'm going to show you the first step to get rid of wordpress so this is an optional step but i would recommend doing it just so you know everything is cleared that was installed on the server for wordpress originally and we're going to go into my sql databases then once we're in mysql databases scroll down and hit delete on the database that you see and then delete database and this will delete the wordpress database that was installed automatically then we can go back to the advanced screen and we're going to go to something called file manager where we'll delete the wordpress files and add our website files so once you're here click on the public underscore html folder right here and then that's going to bring us into the directory of all of the files on our domain name so i'm going to hit select all so we can just delete all of the wordpress files that are here at once and then go up to delete then skip trash and permanently delete then hit confirm and now our directory is completely blank and ready for our website files so go up and select the upload button then we'll be able to drag and drop our html files once we add them to a zip folder so i'm going to use the agency theme from w3nubi.com and i'm just going to select all the files right click them and then hit compress 10 items so then we'll have our zip folder and we can drag and drop this zip to bluehost so just give it a moment to upload and then we'll go back to the file manager and then we'll need to click the zip and then go up to extract and hit extract files and then hit close and now all of our website files will be on our domain name so in my case here some files from my mac somehow came along with the website file so i'm just going to delete those and skip the trash and we can also delete the zip archive that we created because we're not going to need that anymore and now we're ready to check out our domain name with our website files on it so i'm going to go up and add my drew dash host.com url and then if we go to our website it might be a little bit slow at first because the server space is still getting set up but you should see your website files uploaded and you can go over to different pages of the website so for example i'll just go to the contact us page with the contact form and the google map and then the last thing that i'm going to show you how to do is add an ssl certificate which is the lock symbol next to our website so that way our website has secure encryption with https instead of http so to see that we have the free ssl turned on we can go to marketplace on the left then once it brings us to the next page we'll want to look for the add-ons link where it says shop add-ons even though it's free and then we'll scroll down to ssl certificates on the right and then at the very top we're going to see that auto ssl is on as we can see right here because it says it's on and we only have the option to disable it so it might just take a little bit for the ssl to kick in but just to make sure that it does what i'm going to recommend is to simply contact bluehost chat support so just click the question mark in the upper right hand corner and this will bring us to the support page and i'm going to select chat and i'll show you how quickly we can get a rep chatting with us here so i'm going to put in my name drew and then my domain name drewdash host.com then hit next and i'll just select tech support and then ssl then i'm going to write hello i have an html website i would like ssl added to can you do that for me question mark then hit find help and start chat and then we'll just go down and hit start chat again because we don't want to look at the article resources okay so now we have somebody joined and then we're going to need to verify our account via email so just wait for it and then we'll need to check our email for that verification code so i'm going to pull that up and there is my verification token and i'll just prove that it's me by sending him the token and then he'll be able to help me with it and i'm not gonna leave the whole chat here on video because it took a couple of minutes but bluehost has really great chat and phone reps so i'm sure they'll be able to help you get the ssl set setup and once they do you'll be able to go over to your domain name with the lock symbol and ssl added as you can see here on the agency theme which is uploaded to the domain name i signed up for drewhost.com so that does it for the entire tutorial or course be sure to check out the resources page at w3 newbie.com which will also teach you how to set up your domain name email address with bluehost and connect it to your gmail account so you can get your domain name email there i want to thank you for watching please remember to check out the complete 12 website bundle pack at w3nubi.com and i'll see you in the next video thanks for watching you

Channel: Drew Ryan

Views: 29,386

Keywords: responsive website design, bootstrap website, html website, learn html, css, css3, html, html5, bootstrap, bootstrap 4, drop down menu, bootstrap navbar, bootstrap carousel, visual studio code, image slider, vs code

Id: JPcP2HJdqJw

Length: 112min 47sec (6767 seconds)

Published: Mon Jun 08 2020