Build A Complete HTML & CSS Website with Bootstrap 4

in this video we'll create a complete single page bootstrap template called the Nuno theme okay so before we get started I just want to mention that this template will derive from a complete bootstrap theme or template that I've just created for my brand new you to me course which has a number of different versions of the theme as you can see right here and I'm gonna have a discount link for my full course in the video description so be sure to check that out I also want to thank you subscribers that participated in this poll right here which inspired the video alright so let's take a look at the layout of the website here so in the upper left hand corner we'll start off with the Nuno logo that you see up there and it has that green shade that we'll be using throughout the template and then off to the right we have our navigation here and what we'll find is that when we click on a navigation link it's going to bring us to a different section of the page and the navigation is also going to stay highlighted depending on where you are on the page so here underneath the navigation we have the fixed image landing page where we have the content sitting on top of it and later on in the video I'm going to show you how you can add your own background image then if we size the website down we're gonna see that the navigation and the content that sits on top of the landing page are going to shift when we drop down to the mobile or tablet version of the website then moving down the page the next section that we'll get to will be the course section as you can see right here with the navigation link lit up once we scroll into the course section of the website and this is just a little promotion with a link to my course that I mentioned earlier in the video for you to me with the 93 percent off coupon alright so the next section will be the features section right here where you can see we have this cool uppercase heading with the line underneath it to match the color of the theme followed by the three column section underneath it where we have the icons that you can see here which are from font awesome as well as the heading and paragraph text underneath them then moving on the next section of the website will be the second of our fixed image backgrounds so second to the landing page background we're gonna have a second image here that you can add of your very own and as you can see we have a heading section again as well as a three column section and when we size the website down when we get to 768 pixels here you'll see where the section transforms from three columns to the single column mobile layout and later in the video I'm going to show you the different bootstrap breakpoints so you can change when the website collapses into the mobile version and at what width then moving on to the client section we're going to have the image on the left and then the text with the quote on the right followed by a horizontal rule and then the site tag or italic text underneath it so underneath that we have another section where you can add some paragraph text and a button before you get to the footer which I think is always good to do on a website to have a little call to action before the bottom of the page and then here in the footer we'll have some contact information as well as social media buttons or icons that you can choose from a plugin called font awesome where you can link to your different social pages so let's go back up to the website back up to the top and I'm gonna size it down to take a final look at the mobile version before we get started with the HTML and CSS so as you can see here with the drop down navigation we can scroll to different sections of the page and then like we can just use the get started button to go down to the course section or we can scroll through the page as you can see here to look at the different elements so it's important to know the fixed image background sections will work on mobile versions so cell phones for example the iPhone and tablets using some specific CSS that I've included for you already because it's kind of difficult to get mobile websites to display fixed background images and that's going to be included in these starter files that I have linked for you in the video description which you can go ahead and download right now and then once you download them we're gonna open up index.html and style dot CSS in our text editor so I'm going to be using the free program called sublime text another program that you can use is Visual Studio code both of which are top of the line free text editors that work for Mac computers and pcs which you can download by doing a simple google search for either one so I'm also gonna have index.html open with Google Chrome as we're building the website okay so we'll go over the starter files in more detail in just a little bit so if you need to go ahead and pause the video to download the starter files which are necessary to take part in or to partake in the course and let's move over to sublime text to get our first look at index.html and style dot CSS so the first thing that you'll notice here in index.html and then once you get to style dot CSS is that there's a little bit of content already included for us and the only HTML and CSS content outside of the head section and linking CSS and JavaScript files will be this content that you see right here which again is a little promo for the course that I mentioned at the beginning of the video and you're welcome to leave the HTML and CSS in there to save some time later in the video but I will be deleting it so we can learn how to create that section for our self so let's start off from the top of index.html and let's go over what's already included for us here so from the top of index.html we'll start off with the head section right underneath our doctype HTML and then our actual HTML tag where we specify language English we have as I said the head section where all of the invisible important information will be that tells the browser how we want the website to display so at the top of the head section we have our character type which is the standard utf-8 and then we have meta name viewport width device-width initial scale 1 for mobile devices and tablets and then we have the title of the website which if I drop the browser down right here you can see it's in the tab above where you put in the URL and then if we go back to index.html underneath the title of our website we have a link to the latest version of bootstrap Minn dot CSS which is included in this folder here in the starter files so if we go into the CSS folder you're gonna find that down at the bottom here where it says bootstrap Minn dot CSS which is required to build a bootstrap website and then we have a link to style dot CSS followed by a link to fixed dot CSS which is inside of the CSS folder and that's some CSS that we don't need to worry about but what fix CSS is gonna do for us is gonna make it so as I said in the beginning of the video the fixed image background sections will display on cell phones and tablets all right and then moving back over to index.html now that we've covered the whole head section the next main section of our HTML document will be the body section that we see right here and everything inside of the body section unless we're linking to files as we are right here will actually be what displays on the website so let's take a look at what the files are down here that we're linking to so the first file will be jQuery and the latest version of it which is necessary to run the bootstrap framework and then underneath that we have our bootstrap Minjae s folder so with bootstrap we'll need to reference the CSS file and the J s file so bootstrap Minjae s and then underneath that this is the only thing that we're going to be linking to externally and the only reason is because the icons plug-in that we're using called font awesome which will display these icons that we're seeing right here right here as well as the social media icons that you see down here and you can get your own custom icons from doing a Google search for font awesome but the reason why we're linking to it externally is because they update it so often with new icons all right so I'm gonna go ahead and do away with the HTML and CSS that's already included for us for the course section that you see right here as I said before you're welcome to keep it in there to save yourself some time so you can skip over that section if you want but I want us to start from scratch here other than the linking of the files in the head section and the bottom of the body section with the JavaScript files and one last thing here before we get started you can see that I've included some information on the bootstrap breakpoints so the only break point that we're going to be using and this will be the medium width breakpoint which occurs at 768 pixels but you're welcome to experiment with the different break points that you see and you'll learn more about how to use them in your experimenting as the video goes on okay so let's take a look at the first thing that we're going to add to the website and it's gonna be something called bootstrap scroll spy so as we noticed while looking through the website when we scroll to different sections you'll see that the navigation will be highlighted per section we're scrolling through so to do that what we'll need to do is first tell the body that we're going to be using something called data spy scroll for bootstrap scroll spy as I said and then the next thing that we'll need to do is we'll need to link to the ID that will give the navigation so we're gonna say data target and then the ID that we're gonna give the navigation with the hashtag there that you can see for the ID is navbar responsive with a capital R in responsive so the next thing that we'll do is we'll need to identify an ID for each section that we're scrolling through so the home section ID will end at the bottom of the landing page image for example as you can see once we get past that point you're gonna see the course link highlighted followed by the other IDs depending on which one we're scrolling on top of so let's go back over to index.html and what we're gonna do is specify the different IDs for the bootstrap scroll spy so let's wrap the IDs with a invisible HTML comment I'm just gonna say start home section which will be the first ID for the home navigation link and then I'll create a comment saying that this is the end of the home section that way it's easy to navigate our opening and closing IDs or dividers once we have all of our HTML laid out so let's finish up adding div ID home and then if we go back to the finished version as we know that's going to span the landing page before we get down to the course section and to save some time I'm going to go ahead and copy and paste the home section for the div ID course section down here I will be doing some copying and pasting throughout the video to save some time if we don't the length of the video is really gonna start to add up but you're welcome to type everything out so you may notice when we get down to the course section that when it transitions into that highlighted navigation item it's going to account for the space that the fixed navigation takes up at the top of the screen so what we're gonna do to account for that space is we're gonna add a class here after div ID course that we're just gonna call off set and we'll style that later in the CSS so the rest of the IDs and the comments will have that class offset so we can continue with the copying and pasting and all we'll change is course to features in this case and make sure you have a lowercase F in features and for the following sections I'm going to use this sublime text shortcut with a Mac it's ctrl + command + G and that's going to select all instances so if we just add two hash tags for example here and select it then I can just write in the resources text and that's going to apply it to all three instances right here and then I'll just change this to lowercase and then we can do that for the next section as well which is the clients section with div ID clients I'll make this lowercase and then the last section is going to be contact so div ID contact and now we have all of our sections laid out for bootstrap scroll spy's so we can go ahead and start adding our HTML content inside of the IDs starting with the home section alright so let's get started from the very top of the website with the first part which is the so just underneath the div ID home let's create a new invisible comment saying that this is the start of the navigation and then I'll just drop down and create a comment saying the end of the navigation alright and then to start off our nav we'll use the html5 nav tag and we're gonna give it a class that's called nav bar and then when we size the website down as we know it's going to expand at the 768 pixel mark which is the medium screen mark so we'll say nav bar - expand - MD for 768 as we know from the little shortcut here in style dot CSS and then after we've done that we're gonna set a color for the navigation later on we'll give it its own custom color but for now we're just gonna say navbar - dark and that's gonna make our navigation links light in color and then we'll just give it a dark background for now with BG - dark and then lastly we'll say fixed - top because as we know the navigation bar is gonna stay fixed at the top of the screen as we scroll down through the website so if we save it and refresh we'll see the first part of our website which is the blank nav bar at the top so let's drop down and let's create a class for our logo link next so we'll say a class since it's a link and then we'll say nav bar - brand which is the standard class for adding a logo in the bootstrap nav bar and then for the link I'm just gonna leave it blank right now which will send us back up to the top of the website but with that hashtag or you could do index dot HTML if you're making a multi-page web site and then inside of the link we'll add the logo image with image source and that's gonna be IMG forward slash new no dot PNG so IMG for the image folder and then new node PNG and then we can close out the anchor tag with the closing a there okay so there we have our logo displaying inside of our navbar and in a little bit we'll resize it we won't wait until we finish all the HTML content to do some of the CSS we'll kind of go back and forth between the HTML and CSS throughout the video all right so next let's go ahead and size the website down so we can take a look at the toggle switch so here we have the navbar toggle button and what we're gonna do is add a button tag here with a class for that that we're just going to call navbar - toggler and then we're gonna say type button and then data toggle and we want it to collapse the navigation so it's gonna open and collapse so we'll just say data toggle collapse and then for the data target similar to what we use it for the bootstrap scroll spy we're going to use the ID that we give for the actual navigation so when we click on the navbar toggler button it's going to display that ID so that'll be navbar responsive with the capital R and then we can close out the button tag and if we go and refresh we'll start to see the button a little bit here but we want to add the hamburger menu that we see displaying inside of the original button here so we can do that with a single span class with bootstrap 4 which is navbar - toddler - icon as you may know with bootstrap 3 we had to make a different span for each one of the 3 hamburger menu rows ok so now we have our collapse button so we can go ahead and move on to the actual collapsible navigation menu so let's drop down underneath the button and we're gonna start a new div class and we're gonna say div class collapse and nav bar - collapse which our bootstrap classes obviously for the navigation and then we can give it the ID which is navbar responsive and will take away the hash tag and then close out the div and inside of that will start our unordered list which will contain our list items and navigation links so we'll say UL class navbar - Nev and then to set the navigation off to the right hand side we'll use ml - auto so this is what I've always used but I think to Center it or move it over to the left you might use MD auto or MX - auto but you might want to check me on that and then let's start our first list item inside of the unordered list which is li class nav item and then inside of that we'll have our link for the home link there first so that's going to be a class for the link and then knavish link is - class and then we'll say H ref and I'm just going to leave it blank right now with a hash tag and close out the link and to save us some time we can copy and paste this alright so we have five navigation links to follow the home link so I'll just paste this in five different times and then we can fill each one out per section of the page so with the link well want to link to the actual ID that we set for the different sections of the page so it will send us to the start of that art ID so we're just gonna say a hashtag home for the first link and then for the actual link text will say home and then if we go and refresh there we have our first navigation link so it's not going to light up for us we're gonna set that manually in the CSS if you wanted it to light up though if you were making a multi-page site and you weren't using bootstrap scroll spa you just add the active class to follow the nav link class for the anchor text okay so let's go back and add the rest of the links so the next one will be for the course section so we'll want to link to the course ID starting with the hashtag and then course and then we can enter the link or the text for the actual link then we have the features section followed by the resources section and then the clients section which you can also turn into a testimonial section if you want with the quotes that are in that section and then lastly we have the footer or contact section ID okay so let's go back and take a look at all of our links displaying here in Google Chrome so if we use the toggle switch there we have all of our links and the reason is because with bootstrap scroll spy if there's no content for it to pick up on if there's no section ID that you're displaying or scrolling on top of it's always going to select the last section ID in the bootstrap scroll spy which as we know is the contact section okay so let's move on to the next section of the website which will be the landing page that we see right here so what I'm going to do is I'm gonna start a new HTML comment for the fixed background image landing page just underneath the end navigation comment there so let's say start landing page section and then let's drop down and create a closing comment saying end landing page section alright so as we know with the landing page a lot of the CSS is already set for us in the fixed CSS file which makes it so it can display on mobile devices so we're going to add some classes here from the fixed CSS file which is right here so we have DIF can den inside of that we're gonna have div class home - wrap and then we'll have a third div class which is home - inner and that's where we'll actually set our background image which we'll do in just a few minutes in the CSS the first part or entry of our CSS as we work through the video okay so next before we get to the CSS let's just lay out the content that's going to display on top of the landing page with our two headings and then they get started button underneath it so staying within the start landing page section comment let's create a new div class and we're gonna call this div class caption and everything is going to be centered in here so we'll use the text - center class and bootstrap will take care of centering our text and button so for the welcome to Nuno text that's going to be inside of a heading one so we'll just say h1 welcome to Nuno as we know with HTML we have heading one as the largest head in heading 6 as the smallest so for the second one we'll go with sort of a middle sized heading with a ch3 and we're gonna say udemy bootstrap for course and then underneath that we have our button so we're gonna use a link for the button and then the class is BTN and then BTN - outline - light and then that's going to be a large button so BTN outline - light I'll say is a class that obviously gives a transparent inside the button and then the light outline and then with bootstrap buttons we have extra small up to extra large for the button size and we're going to go with large with LG and then we'll add our link and that's going to send us to the course section of the website so similar to the navigation link for the course section we'll just use the hashtag to get us to that div ID using bootstrap scroll spy and then we'll just add the content inside of the link with the get started text okay so let's go ahead and refresh and by the way if you want to check out different bootstrap button colors just do a simple google search for bootstrap buttons and you can get all the components documentation on that alright so now we have now that we have the HTML set for the navigation and the fixed image landing page let's move move over to style dot CSS and layout the first part of the CSS for the video so before we actually add any CSS let's specify our font so you can do a search for google fonts or lato google font which is the font we're going to use and then select this font using a little selection up top and then we want to go over to at import and actually let's cut let's add bold to it before we import it because we're gonna need to add some bold text for the headings and then we'll just copy the import URL and then paste it at the top of style.css and then we'll just also want to take the font family from there so we can reference it in just a moment when we specify that for the body so let's go ahead and add the body CSS now so that's going to reference the actual body tag for the HTML document so we'll just say body and then open and close your swirly brackets and the first thing that we're gonna add is something called overflow X hidden so all the content stays contained within the browser window and it doesn't overflow outside of it and then we can paste in the font family and let's go ahead and specify the color of the font that we're going to be using throughout the theme which is kind of this grayish blue color right here which is a hex value five zero five nine six two and if you want to pick your own color you can just do a Google search for color hex or hex color and go ahead and add your own hex value for your own text color all right so now that we have our font set and our font color let's go ahead and drop down to the navigation CSS so I'm gonna create a comment to separate it saying navigation and then the first thing for the navigation that will reference will be the class for the navbar so that's going to be the nav class navbar which is sort of the main class for the navigation and we're gonna be able to change the background color among other things using that class alone so we're just gonna say dot navbar and then a text transform uppercase to have all of our links in uppercase characters and then let's also make it bold to match the original with font weight 700 and then the font size is slightly smaller than the original so we're going to say 0.9 r m and if you're unfamiliar with rims 1 rim is 16 pixels so 0.9 R M is about 14 and a half pixels or so alright so now that that's set let's space out the characters for the links a little bit so we're gonna say letter spacing point 1 r m and then let's set the background color so this is going to be a transparent background color so rather than using a hex value will use red green blue alpha and this is going to be 0 0 is 0 because it's all black and then we'll have it at a 40% transparency with 0.6 and if we refresh there we have the letter spacing but you get the background color to take effect we're just going to say important here to override the BG dark class for the navigation that we added all right so there we have the background color it looks a little lighter right now because we don't have the image that it's displaying on top of but let's move down to resize the logo using the navbar brand class so we're gonna say navbar - brand and let's give the logo a height of 2 R M that's gonna make it 32 pixels in height and the size of the logo originally whoops will actually need to reference the the image too so the size of the logo originally is 64 pixels high so that's going to work out perfectly with high resolution screens resizing it to be half the size of the original picture for the logo ok so let's move down to the actual navigation list items so if we take a look back at index.html the class for the unordered list is navbar Nash - nav and then we'll reference the Li for the list item so we'll say navbar - nav Li and then let's add some additional padding in between the list item so we'll say 0.7 rim and that's gonna space out our navigation links pretty nicely okay so let's move on to the color of the links so right now they're kind of a gray shade so what we'll want to do is let's change the Navin class which we'll get to referencing the nav link the navbar nav and navbar dark and we're gonna change the color to white so it doesn't have that gray shade so let's say navbar dark and then navbar nav for the list item and then nav - link for the actual class for the link and then we're gonna change the color to white so you can use the hex value FFF or you can just say color white and then let's also add a little bit of additional padding to the top of the links with 0.8 rim all right so now if we go and refresh there we have all of our white links but if we hover over them where they're still gonna appear gray rather than the sort of turquoise green shade that we're seeing with the original so let's copy this selector and paste it in and then we'll target the active class so the navigation is lit up according to which section were in with bootstrap scroll spy and then we'll also add the color to the hover effect so we'll say : hover and then the hex value for that green shade is going to be 1 e BB a3 all right so let's check it out in Google Chrome here and if we refresh there we have our highlighted navigation link which also changes when we over it okay so let's drop down to the next section which is the fixed landing page image as we see here on the finished version so I'm going to drop down underneath the navigation CSS and create a new comment here just saying that this is the start of the landing page CSS okay so once we've done that let's see what we need to reference in index.html so that's going to be the div class home in ER where we're gonna apply the background image so we'll say dot home - inner and then background-image:url and then in parenthesis we'll want to reference the image folder and that image is going to be computers dot PNG all right so image ford slash computer's dot PNG and the rest of the CSS for the background image for the landing page will already be done for us so as you can see here it's already displaying at full width and full height and then when we scroll down the page we have the next section hovering on top of it okay so let's move on to the content that sits on top of the landing page where we have our headings and the get started button so if we go back to index dot HTML we'll want to reference the div class caption so just underneath home inner and I'm just going to create some space here we'll say dot caption and then the first thing that we'll do is we'll give it a width of 100% and then we'll also be able to max width of 100% so when the website size is down the content won't go off of the screen so just in case your content or your heading title is wider or there's more characters it will stay contained inside of the window so then what we're gonna do is we're gonna say position:absolute because we want the caption to be placed at a certain position on the page so right now as you can see it's still underneath the actual landing page but with position:absolute we can move it up by saying top 38% so now if we refresh it's going to be 38% down the page which is pretty centered and feel free to shift that around if you want depending on your content and then for good measure we'll just say Z index 1 and then we'll say color white and text transform uppercase and Z index by the way we'll make it so it's always displaying on top of the background image all right so let's move on to customizing the actual headings and then we'll get to the button so we have a heading 1 and then we also have a heading 3 followed by the button so we'll say dot caption h1 for the heading 1 and then let's change the font size to 3.8 REM which will be about 60 pixels and then we'll say font weight 700 to make it bold from the lato font with google fonts and then let's space the letters out a little bit with 0.3 R M for the letter spacing and that's looking pretty good except for when we toggle back to the original there's some shadow to make the white characters pop so we'll say text shadow point 1 R M horizontal and point 1 R M vertical and then we'll have the blur radius at Point a trim and then we'll just make it black okay so let's refresh and then the character should pop out to us a little bit better okay so next let's just add a little spacing in between the heading 1 and the heading 3 with padding bottom one rim okay so now we can move down to the heading three so we'll just reference the same class with dot caption h3 and then let's give it a font size of two rim and then for the text shadow we'll make it pretty much the same with the horizontal and vertical shadow well but we'll change the radius to 0.5 rim okay so let's go ahead and refresh and it looks like the sizing didn't take so I must have missed something okay so I added style instead of size so let's try it again and there we have it matching the original except for well we're also gonna add a little spacing underneath this just like the heading one with padding bottom 1.6 rim alright so there we go and now we can take care of the button styling so by default bootstrap buttons have the rounded corners with a little bit of border radius so let's change the BTN large or LG class here and let's make the border with a little bit wider with border width medium and then we'll take away the rounded corners by saying border radius zero all right so that's looking better except for there's a little bit of a difference in the spacing so let's change the padding on the inside of the button between the text and the border at 0.6 R M vertical and then 1.3 R M horizontal and to match the original let's just increase the font size to 1.1 REM and then let's go ahead and take a look at it alright so there we go and it should be matching to the original which it is the only difference we can tell when we toggle back and forth will be the navigation links lighting up differently so let's move down to the next section which is the course section of the website so we're going to move back over to index.html and drop down to div ID course so as you may already know with the bootstrap framework it gives us 12 different columns to work with and since we're only going to need a full width column for the course section what we're gonna do is use Col - 12 so we don't have to use a bootstrap column when it's only a single column width but to create the spacing above and beneath the text and the button we're going to go ahead and use Col 12 which will add some margin in there automatically with the framework and in addition to that we're gonna add a class that we're just going to call narrow which isn't a bootstrap class but that's gonna make it so we can make the column narrower another option that you can do which we'll use in the footer section is you can use a class along with a row that wraps around the column called justify Content Center and you could use a column with a smaller width say Col - 10 for example okay so let's go ahead and add div class Col 12 and then narrow and we're also going to have our text centered here so we'll take advantage of the text in our class and then we can close out the div and inside of that we'll add a heading 1 for the text that appears on top so I'll just say h1 and I'm going to paste in the text to save some time you can type something out or use dummy text just do a Google search for dummy text and then the text underneath that will be paragraph text but we're going to use a class called lead which will make it a little bit sort of lighter weight and bigger than regular paragraph text then for the button underneath what we're going to do is use a link here and then we're going to say BTN and then the button that we're gonna use is called BTN - secondary and we're going to use a medium sized button so BTN - MD and then for the link I'm gonna go ahead and just paste in the link to my course that I already have here or you can use it leave it blank with a hashtag for now and then to send somebody to a different page then we're on where we're clicking the button we'll say target underscore blank and I'll just write I'm just gonna write bootstrap course here and close out the link so I should say BTN - secondary that class for the bootstrap button will be grey by default which we'll see when we refresh it right now as we work our way down but we're going to style that a little later in the video to give it the sort of boxy green feel to match the get started button as well as the green shade that we're using throughout the website so let's move down to the feature section next so let's scroll down to the div ID features and we'll create some space in there and then the first thing that we're gonna add will be something called div class Jumbotron so Jumbotron with bootstrap will give us this grey background that we're seeing spanning the features section and let's start it off with a comment just saying that this is the start of the Jumbotron and then we can drop down and let's say div class Jumbotron and then we can close out the div and I'm just going to say end Jumbotron and then inside of this section we'll take advantage of that same narrow class that we gave the previous section to make it span just 75% of the page and once we've added the narrow class we can drop down and close out the div and I'm also gonna add a closing comment here because we're gonna have a fair amount of HTML content inside of this narrow class all right so the first thing inside of the Jumbotron in the mineral class will be the features heading that we're seeing here so for spacing let's go ahead and wrap that with div class call - 12 to give it some extra margin around it and then for the actual features text that's going to be inside of a heading 3 and we're going to give that a class that will call heading so we can style that h3 separate from the other h3 inside of the website and then for the line underneath it we're gonna say div class heading - underline and then we can close the div and we're just going to add that completely with CSS referencing that class so if we go and refresh there we have the start of our Jumbotron section with the heading 3 where it says features ok so let's go back over to the finished version and drop down to the three column section where we have the icon the heading and the paragraph text so to create this section because there are multiple bootstrap columns we're gonna need to create a row so we're going to say div class row and then we'll use the Tech Center class because everything in this row will be centered so I'm just going to create a comment saying that this is the end of the row and then let's go back to the website and see how it shifts when we size the website down to 768 pixels so as you can see we're gonna go from the three column layout down to a single column layout at the medium screen width and since there are 12 columns total with the bootstrap framework we divide 3 into that and we get 4 so we're gonna say Col - MD for 768 - 4 to display the 3 different columns so once we're inside of that what we're gonna do is we're going to add a class so we can add unique styling to our headings and text and we're just going to call that feature singular and then to add the icon with font awesome they use the eye tag which is really italic but we're gonna use that for an icon so I class fas-fasl and then we're also going to make it four times the original size with FA for X and then we can close off the eye tag and let's go back to this version to check it out so then we have the play icon at 4 times the original size as you can see right here and with font awesome the icons don't always size up perfectly when with one another so we're gonna use something called data FA - transform and with that we could shrink or grow or move it up or down so we're going to use shrink and we're gonna shrink it 3/16 of the size of the icon and as you can see it's a little smaller right now and the size is matching the original but we're also gonna move it up a little bit so we're gonna say up 5/16 of the original icon so there we have it and now let's move down to the heading and the paragraph text so once again to save a little time I'm going to be pasting in the paragraph text but first let's add our heading 3 where it says custom animation and then P for paragraph and I'll just paste in the animation information here from the original template with the bootstrap course alright so there we have the first of our three columns filled out so let's move on to the second one where it says content slider so we can go ahead and just take the first column here and then paste it in underneath and then all we'll need to change are the icon info the heading and the paragraph so let's go ahead and add the sliders icon so that's gonna be FA sliders - H and we'll keep it at four times the size but then for the placement of it will mess with that in just a second but first let me just write content slider and then I'll paste in the paragraph text right here okay so if we look at the placement of the content slider icon you'll see that it's a little bit larger than the finished version right here so let's say shrink 4.5 and then we're just gonna say up 4.5 doesn't have to be quite as far up as the play button there okay so that looks good so let's move on to the third column so I'm just gonna go ahead and copy the MD - 4 column here and then let's change the heading to contact form and then I'll just paste in the paragraph info for the contact form here all right and then the font awesome icon for this will be FA - WP forms so let's go check that out so it's actually gonna be FA be some of font Awesome's icons our fa b but most of them are FAS so that looks good except for let's change the placement of it a little bit so we'll just shrink it by four sixteenths and then we'll say up five sixteenths okay so now if we were to toggle back and forth it's gonna look just like the original except for we haven't added the class that makes the content or row a little narrower so let's move down to the next section and we'll do this section and then we'll go back over to the CSS alright so this will be the second of the fixed image background sections the first being the landing page so for this what we're gonna add is a div class that we're just gonna call fixed background and that's gonna span the entire window where we're seeing the background image so div class fixed - background and then we can drop down and close out the class or close out the div and I'm going to create a comment here also saying that this is the end of the fixed background section before the end of the resources section all right so then inside of the fixed background class we're going to have a row so we'll say div class row and then since all of our text in here will be white we're gonna add a class to separate the text from the rest of the theme that we're just going to call dark so we know it's a dark section and we want light text and then I'm just going to create an ending comment here for row dark okay so now for the fixed background image similar to the landing page we're going to have two IDs or classes rather inside of that fixed background class that we added so let's go ahead and add the first one and we can actually delete the landing class here so the fixed background class will act as the landing class in this section and then we'll just have div class fixed wrap and div class fixed and the div class fixed is where we'll actually add the background image so let's start adding the content starting with the heading 3 at the top similar to the Cal 12 heading and heading underlying classes that we used in the feature section so we can go ahead and just paste that in here and then let's just change the heading to build with care and then once we styled the dark class that we added to the row that will display with white text so once we've done that we can drop down and add the first of the three columns so we're going to use the same class that we use for the features section to display three different columns which is called - MD - for so you can go ahead and copy it from above or you can start it fresh so I'm gonna say div class call - MD - 4 and then drop down and we're gonna have a heading 3 for the html5 tap text in the first section there our first column and then underneath that will use the div class feature again so we can color the font awesome icon with that green shade and then this icon is FA s FA and we're going to make this three times the original size rather than 4 and then we can drop down once we've closed that out and close out the feature class and then let's add the paragraph text underneath and we'll use that lead class again to make it larger paragraph text and then built with the latest html5 all right and then don't forget to close out your div class call md4 and let's go ahead and save it and check it out here so there we have the html5 the font awesome icon and then the paragraph text underneath so let's also just add text center to the class here to Center it because everything in this whole section will be centered and then we can also do that with the with the titles okay so now we have everything centered and it's not off to the side so we don't have to do any of that in style dot CSS so let's add the other two columns next so we can save some time and just paste this in from above and then all we'll need to change is the html5 in this case to bootstrap for and then the third one is css3 and then we can change the text with the built with the latest paragraph to css3 in bootstrap for and then for the css3 font awesome has an icon for that but they don't have one for bootstrap so we'll just use bold which gives us the B that we're seeing and this is another icon with the FA B class okay so let's refresh again and there we have all of our icons and text displaying for the fixed background image section so let's actually just move on to the rest of the HTML content because it's not going to take us that much longer and then we'll do the rest of the CSS so let's drop down to the clients section and this is going to be inside of a Jumbotron so we'll just say start Jumbotron which will give us the gray background and then we can drop down and add the Jumbotron class and then add the closing div for the Jumbotron and I'm just going to create an end Jumbotron comment here and then the first section inside of the Jumbotron will be the Col 12 heading section so let's go ahead and take that from the built with tere section and paste it in and we'll need to change it to clients and we'll also add the text center class here and I'll just change the actual heading 3 text to clients all right so now we can drop down and let's create a div class row which will nest our columns inside of so we're going to say div class row and then we can drop down and I'm gonna create a closing div and comment for the row and then if we go back and look at the columns we'll see that we have a two column section instead of three columns so if we divide 2 into 12 we get 6 and then if we size the website down the section is also going to change at the 768 or medium screen width so we'll have Col - MD - 6 so we'll say div class call - MD - 6 and then to style the images in this action let's also give this a class that we're just gonna call clients so we can style just those images alone referencing that class and then once we've closed out the div for this class since we're gonna have two columns inside of the column d6 we're going to need an additional row so we're gonna say div class row and then we can drop down and close it out and inside of that for the image on the Left we're going to use up 412 of the column and then on the right we're going to use up eight twelve of the column so we'll say column d4 for the image section and then div class column D eight for the text section on the right next to the image alright so let's add the image of the client on the left there with image source and it's going to be inside of the image folder so that'll be IMG ford slash clients one dot PNG alright and then let's go ahead and refresh to make sure that our image is displaying here in google chrome which it is as you can see right down here before we resize it and let's move on to the text section on the right so we're gonna have that inside of a blockquote tag which we can use to cite the client and use their quote and we're going to start it off with an icon for the quote right here that's FA s FA left and then make sure you close out the eye tag for the icon and then for the paragraph text since we're inside of a block quote we don't need to put that inside of a tag itself we can just paste that in or you can add your text and then for the chorus until rule right here we'll just use the HR tag but we're gonna give it a class to style it and we're just going to say clients - HR so later we can give it the green hex value we've been using and then for the text underneath here we'll use the site tag and we'll use an HTML symbol for the - which is ampersand hash tag 8 - 1 - and then semicolon and then we'll just write Eric comma small business owner so let's go ahead and save it and check it out here in Google Chrome so right now it's displaying on top of the picture because we'll need to resize the picture and shift it off to the left of the column d8 but if we size it down to the mobile version as you can see it's lining up pretty nicely already for us before we resize the image so let's move on to the clients column on the right so we can just paste this in and this would should be pretty quick we'll just change the client image to client - dot PNG and then for the text down here I'll just change that to Rachael comma professional photographer and that should do it okay so let's go ahead and save it and there we have it you can see it a little better now because of the light background with the image but it'll all match up once we resize them so let's drop down to the next section where it says want to learn more about developing bootstrap themes so let's add that within the clients section the clients ID but won't put that inside of a div class called - 12 and then let's also add the narrow class that we referenced a couple times earlier and text center to center everything inside of it so for the paragraph text we'll use the lead class and then I'm just gonna go ahead and paste this text in alright and then for the button we're going to use basically the same button that we used towards the top of the website underneath the landing page so that's the BTN - secondary BTN - MD button right here that we have still displaying in the original gray shade with BTN secondary but let's go ahead and add that underneath the paragraph text and I'm just gonna leave that with the same exact text as the first one alright so there we have it and now with the HTML we can move down to the last section which is the div ID contact section where we'll have our footer so go ahead and drop down to the div ID contact and let's add the footer tag so that's gonna start us off and the footer will be giving that the background color that we're seeing and then inside of the footer since we have the column you're centered that's gonna be 5 of 12 columns with bootstrap after the MD width but we're gonna put that inside of a row in order to Center it with a class called justify - contact or content - Center so then let's drop down and close out the row and so with that we can add our dip our bootstrap column that doesn't take up the full width and it's going to display centered for us on the page as we see here so we'll say call - MD - 5 and then we'll just use the text center class to Center everything and then the first part of footer will be the logo which is the same image file we used for the logo in the navigation at noon o PNG and then we have the paragraph text so I'll go ahead and add that all right and then underneath that we have the contact info so for the text where it actually says contact info that's bold text so I'm gonna put that inside of a strong tag to get the bold effect and then for the phone number and the email address underneath it that's going to be inside of a paragraph tag so I'll just add the eight eight eight phone number and then add a line break with BR to create a new line and add the email address here all right and then underneath that we have the start of our social media icons so once we have all that displaying let's go ahead and start off the icons which is well the first one is Facebook but what we'll do is let's add the the link and the icon HTML here and then we'll specify it afterwards so we'll say 8h ref target underscore blank so it opens up at a new tab and then I class and all of them are gonna start with fa b fa - and then we can close out the icon and the link and let's go ahead and just copy this and paste it in for the other two icons alright so as we know the first one is going to be Facebook then we have Twitter and Instagram you could also do a YouTube icon for example so we'll have FA - Facebook Square and then FA - Twitter - square and there isn't a square one to match for Instagram so that's just going to be FA - Instagram and then for the links as you can see they're displaying right here I'm gonna go ahead and just copy my links that I have for my this one's actually a youtube link that's my mistake it doesn't go to my w3 newbie Facebook page and then I'll add my Twitter link and then my Instagram link okay so now if we were to save and refresh it'll link us to all those pages but let's drop down and add the socket at the bottom which is the line that spans the page so we'll use HR class socket and then we'll just use the copy symbol with ampersand copy semicolon and then I'll just write new no theme and period okay so that does it for all of our HTML content and for some reason the socket is is pushing the content off to the left but we'll fix that in the CSS down here in the footer in just a little bit so let's move over to style dot CSS and the first thing that we're gonna style will be the course section which follows the landing page so the landing page was the last thing we styled so we'll start with the course section ID okay so let's move over to style dot CSS and we can get started so I'm going to drop down underneath the CSS that we added for the landing page and create a new comment saying that this is the start of the course section styling all right so to start off the course section the first thing that we'll style will be making the section a little narrower so let's go ahead and take care of the narrow class that we added to a few different sections so if you remember we have the div class narrow here so we'll use a period narrow to reference the class and then let's give it a width of 75% and then for the margin we'll say one point five rim top bottom and then we'll use auto left-right to make sure that the section is centered and then let's go ahead and check it out here okay so there we have it displaying a little narrower so that looks a little cleaner but then let's also add some padding to the top so we'll say pad top-2 REM and that's going to create a little more separation from the landing page image alright so that looks good except for once we enter the course section we have different sized heading 1 text so let's say narrow h1 for the heading 1 right here and then let's change the font size to 2.4 REM and so if we go and we refresh should size itself down a little bit there okay so that looks good until we get down to the bootstrap course button so let's go ahead and reference the BTN secondary class and we can go ahead and change that to our own custom green or turquoise color so we'll say BTN secondary and let's give the border width a size of medium and then we'll say border radius 0 similar to the button in the landing page and then we'll give it all uppercase text with text transform uppercase and if we refresh there it's starting to get that boxy feel to it but let's also increase the size of the text with font size 1.2 rim and then for the padding will just increase it a little bit point 6 around the top bottom and 1.2 rim left right okay so if we refresh now it's looking like it's got the spacing we want basically except for one a little margin above it with margin one rim to separate it from the paragraph text and then let's make the color of the text white and for the actual background we'll give it the green shade so we'll say color white and then background color 1e BBA through and then we'll also need to apply a border color because it has a border inherently and we'll use the same green hex value so there we have it except for the hover when we hover over it it's still going to the gray shade so let's go ahead and copy the style for this class and we can remove everything except for the background color and the border color and then we'll just say : hover to target the hover effect we're hover over the images then we'll change it to 1 8 9 5 8 2 which is just a little bit of a darker hex value shade than that original green shade alright so there we have the button displaying in the green the darker green when we hover over it and it looks just like the original except for obviously the text being different inside the button which is OK alright so let's move down to the features section next and as we know we use the jumbotron class where it has the the grey shade for the feature section so first let's uh let's create a new comment saying this is the start of the feature section CSS and then we'll get to the jumbotron ok so if we go back to the HTML here we have the jumbotron class and what we'll need to do is let's change the padding and we don't want any margin on the bottom because we have a fixed background image displaying after it so we're gonna say margin 0 so we don't have any white section underneath it as we can see right here so it just goes straight from the gray into the background image and then as I said we'll also add some padding so we're gonna say padding and we'll give it a two rim on the top zero left right and then 3.5 REM on the bottom okay so let's go ahead and refresh and there we have the padding on the top except for once we get down to this section I forgot to add the style for the offset class so if you remember with the div id that we added following the first one we have class offset to account for the space that the navigation takes up so let's go ahead and add the CSS for that so we're going to reference the class offset and then colon before and we're gonna say display block and then we'll just leave content blank here so we have something to work with and then we'll just give it a height of for RIM and if we go into and refresh right now we're gonna have a bunch of extra space on the top of our div IDs as you can see right here so then we're just gonna say margin top negative for REM and that's gonna kind of take away the height for REM but it's still gonna account for the space above the section ID all right so that looks good so now let's go back to the features section and I'll go back down to that CSS here then the last thing that will style with the jumbotron is inherently a Jumbotron has a little bit of border radius added to it from bootstrap so let's go ahead and do away with that and we're just gonna say border radius zero so it's kind of hard to see right now but if you look closely on your screen you should be able to see the border radius there so let's drop down to the features a heading three next that we use a couple times throughout the website so that's going to be the heading class here so we're gonna say H 3 dot heading and then we'll reference the heading underline class afterwards so H 3 dot heading and open and close your thrilly brackets and then underneath that will be styling heading - underlined okay so let's go ahead and increase the font size for our heading 3 to 1.9 REM and then we'll also apply the bold version of the font from google fonts with 700 at the weight and then text transform uppercase to make all the characters uppercase okay so there we have it displaying like the original here and let's drop down to the heading underline class so we'll need to give that a width first so we'll give it a width of 3 R M which is 48 pixels and then we'll give it a height of point to rum and then we'll give it the background color to give it the green shade and let's go ahead and refresh and as you can see right now it's kind of pushed off to the left so we'll need to Center it so let's use margin:0 auto to center it and then we'll also add some space to the bottom of it to separate it from the three column section so we'll say - rim margin on the bottom so that's zero top auto left right - rim bottom so that looks good except for we'll also just add a little space underneath the actual heading 3 so we'll say margin bottom 1.9 rim okay so let's go ahead and refresh and there we have it looking just like the original okay so let's drop down to the 3 column section next inside of the features part of the website and to change the color of the icons we're gonna need to use a reference a very specific class with font awesome so that's going to be the SVG - inline - - AF a class so let me go ahead and exit out of this and let's go back and we'll reference the feature class first and then the font awesome class so we'll say dot feature and then SVG SVG - inline - - F a and then open and close your swirly brackets and we'll just need to add the color to it with the one EB be a three hex value for the green shade okay so there we have it and at least until we get down to that heading text underneath it we're all matched up to the original so let's go ahead and take care of that heading three text inside of the feature class so once again we can reference the feature class followed by H 3 and then we'll resize the paragraph text also this will say dot feature H 3 + dot feature P for paragraph all right so let's decrease the font size to 1.3 R M and then let's make the characters uppercase and then if we refresh let's also add some space underneath the heading text so we'll say padding bottom point for REM which is about 7 6 or 7 pixels so then for the paragraph text let's go ahead and just increase it a little bit to one point one room and if we toggle back and forth we can't see any difference so let's drop down to the next section of the website which is the resources section where we have the fixed background image so I'm going to go ahead and create a new comment saying that this is the start of the resources section CSS so I'll just say resources section alright and then similar to the the features heading 3 and paragraph text that we just styled we're gonna change the heading 3 and paragraph text for the fixed background image section so we'll need to reference that class first so if you remember we have a div class fixed - background and then we can reference the heading 3 and the paragraph text so we'll say fixed background h3 open and close your brackets and we'll also have fixed background P for paragraph but before we do that let's let's actually give it the background image that we see right there with the computer so we'll want to reference the fixed class inside a fixed wrap to give it the background color so we'll say dot fixed and then background-image:url and then in parenthesis will reference the background image that we're using so that's going to be IMG forward slash Apple dot PNG and then we'll also just say z-index negative 1 to make sure that the background image displays underneath the content that we add on top of it for good measure ok so there we have our background image displaying but as you can see it's really it's it's got the white background as opposed to the dark background that we're seeing here so what we're going to do is we're going to use that dark class that we added not only to specify the light text color but we're going to give it a dark background with that class so we'll say dot dark and then background color red green blue alpha and then open and close parentheses and we're going to say zero zero zero and then we'll have 0.7 so there's a 30% or 0.75 rather so there's a 30% transparency and then we'll give the text to color white and that's looking pretty good except for the spacing on the original version it has a good bit of padding to the top and bottom so let's go ahead and add some padding to it also so we'll say padding 7 rim top bottom and - rim left right ok so that's looking good except for we'll go ahead and style the heading 3 and paragraph text just to add some spacing to separate those from the icon in between them so let's go down to fix background h3 and let's say margin bottom to rim and then for the paragraph text will just say margin top 1.5 remm okay so save it and then let's go and take a look and if we go and toggle back and forth it's going to look just like the original so let's drop down to the clients section so as we know from laying out the HTML the image will be the main thing that we'll need to fix with the client section but first let's specify that this is the start of the client section CSS with a quick comment here and then we can reference the clients image so if you remember we added a class to reference this image specifically that's just called clients so we'll say clients IMG so clients IMG and let's go ahead and give it a width of 100% so it stays within the column width and if we refresh there we have it displaying next to the blockquote now and then to round the corners let's give it a border radius of 50% and that's going to make it circular since the picture itself is perfectly square okay so there we have it and then we have the blockquote font awesome icon to give the color to and then we'll also give it some margin so we'll reference the block quote tag here and then we'll reference the actual font awesome class right here and we can take the color with it also from above and then we'll just add some margin because as you can see it's displaying right next to the text here okay so let's go ahead and let's just add margin one rim all around the icon and then if we you go and refresh everything looks good until we get down to the horizontal rule which we'll want to make the green shade and we'll also make it a little bit thicker than the original which is one pixel so let's reference the clients age our class for the horizontal rule whoops I forgot the period here and then we'll just say border - top 0.5 REM so it's about two pixels and then solid 1e BB a3 or actually this will stay at one pixel that's my mistake for two pixels we use one room alright so that looks good except for looks like I missed the text when I paste it in the text I didn't change it to the finished version so I'm just going to go ahead and change that for the one on the right here and then once i refresh if we toggle back and forth we don't see any difference between the websites until we get down to the contact section or the footer all right so let's create a new comment in the CSS saying that it's the start of the contact section CSS and then we can style the footer so I'll just write contact section and then let's go ahead and take a look at the footer here so I want to add the dark background to it so let's say background color and then we'll give it a hex value of 404 74 E which is a darker shade from the text color that we gave the the template and then we'll say color white to make all all the text white over top of the footer as you can see right here and then we'll also just add some some padding around it so we're going to say padding to rim top bottom zero left right or you can do two Ram zero to rim and then we'll say margin top one REM to create some space between the bootstrap course button and the footer okay so that looks good until we get down to the image or the logo so let's go ahead and take care of the sizing for that so we'll say footer image since it's the only image in the footer section and then we'll say height to REM which will be half the original size and let's take a look at it here so it's actually a little Moeller so let's change that to three rim and then let's go ahead and add some margin around it so we'll say margin 1.5 rim top bottom and zero left right so 1.5 rim and then zero alright so let's go and refresh and there we have it looking like the original and then one other thing that we'll do before we move on to the color of the icons let's go ahead and just say that all links should display white so we'll say footer a color white because on mobile phones to email and or at least a phone number will appear as a link so we'll want that to stay white as well rather than the blue hyperlink color so now let's take care of the styling for the actual icons so we'll say footer and then SVG SVG dot or - inline - - FA and then for the font size will say 1.6 REM which is about 20 pixels or so and with that size it should match up the original with the original size but we'll need to space them out so let's give them some margin so we'll say margin 1.2 REM top and 0.5 REM right and then we'll just say zero and zero for the left and bottom or bottom and left okay so there we go except for the hover color we want it to be the green shade so let's go ahead and take from this selector and paste it in and then all we need to add is colon hover and then let's add the green hex value and we'll also need to add exclamation point important for it to take effect so if we hover over it there we have the hover shade and the last thing that will style in the footer section will be the horizontal rule so if you remember we gave that a class that we just called socket because that's what a lot of people call the little section at the very bottom of websites where it has the copyright info so we'll just reference that with a char dot socket so a char dot socket and then let's give it a width of 100% and that will correct the the spacing so there we have the everything on top of it centered as well as the new no theme text and now let's give it a border here so we can color it so we'll say border top point to RIM solid and then 666 B 71 for the hex value which is a gray shade and then margin top three REM to separate it from the rest of the footer okay so that looks good we have about a three pixel width to the border and all of the footer content is centered and if we scroll up everything for the full width version of the website will be matching the original theme our template until we get down to the mobile styling so here on the finished version you can see it looks pretty good with the mobile but on the version we've been working on we have some corrections to make such as the headings and the client image at the bottom which will make smaller as you can see right there and that's those are about the only changes that will make okay so let's go back over to style dot CSS and I'm going to create a comment saying that this is the start of the media queries where will target the media screen' 768 pixel mark so we'll say Media queries and then at media and then max-width and what we're gonna do is we're gonna give this a max width of 767 pixels rather than 768 and the reason is because bootstrap uses min-width and we're going to be using max width so if we use 768 our media queries would take effect one pixel after the book trap framework resizes at the medium screen width okay so let's go up to the caption where we can change the headings that we're seeing on top of the landing page and I'm gonna go ahead and just copy caption h1 down to button LG and then we can paste that in down here and all will be styling for the heading 1 will be the font size letter spacing and padding on the bottom so everything else we can get rid of here so let's get rid of the font weight 700 and the text shadow and then everything else can stay and then for the h3 we'll get rid of the text shadow also and for the button we'll get rid of the border width and the border radius so let's resize the font size for the caption h1 22.3 r m and then we'll make the letter spacing about half that at one point or 0.15 and then for the padding on the bottom will just say 0.5 rim so it's almost half of the original values and that looks good so let's move down to the heading 3 and we'll change that to point or one point to rim and then the padding to 1 point to rim also on the bottom and that looks good like the original and then for the button on the bottom let's reduce the padding on the top and bottom to 0.5 rim and then left right just to one room and then we'll just make it one room with the font-size there all right so now if we toggle back and forth you can't tell the difference until we get down to the heading in the course section here which is pretty big for a mobile screen so let's go ahead and reduce the size of that so we'll reference the narrow h1 class right here and let's paste that in underneath the BTN LG and then I'm just going to change the font size to 1.5 REM all right and then go ahead and refresh and there we have it looking like the original all right so then the last thing that will change will be the size of the client images down in the clients section ID so let's go ahead and reference that class so that's going to be client's image and we can take the other style with it from the full width version and let's change the width to max with 50% so it should be about half the size of the original and we can do away with the border radius styling and then if we refresh its resized but it's pushed off to the left so to Center it we'll use display block and that will allow us to push it off to the center using margin:0 auto alright so let's go ahead and refresh and there we have our client images resized and centered okay so let's go ahead and scroll back up because that should be the last of our HTML and CSS it should look just like the original now and we've completed everything as you can see as it resizes when we pass the 768 pixel mark okay so that does it for the tutorial I want to thank you for sticking around with me please do check out the bootstrap course that I have linked in the video description on udemy and thanks again for watching remember to subscribe and like the video and I'll see you in the next one you

Channel: Drew Ryan

Views: 487,743

Keywords: html, css, bootstrap, html5, css3, bootstrap 4, bootstrap theme, bootstrap template, create a website, beginner bootstrap course

Id: V_lAhqLXT9A

Length: 103min 9sec (6189 seconds)

Published: Thu Dec 13 2018