Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 2

hey guys welcome to part 2 of our bootstrap & sass template in this video I want to implement bootstrap and also font awesome for our icons

alright so our project directory looks like this what I'm going to do is go to get bootstrap calm and I'm going to go ahead and download bootstrap

okay so open that up and we're just going to drag some files over all right so basically we want our CSS all I'm going to take from here is bootstrap CSS that's all we

need all right so fonts oh we didn't even create a fonts folder okay so fonts we'll bring over all these glyphicon even though we're going to be

using font awesome for our icons but just in case you want it to use some of those JavaScript okay we're just going to bring over bootstrap J s and that's all we need from that so we also want

jQuery all right so I'm going to save this in the project in the j/s folder and I'm just going to rename this just

to jQuery dot J s just to simplify things alright next we want font awesome okay so I want to download okay open that up

and we want to grab from here fonts excuse me and the CSS file now you can see there are we do have s CSS files if you want to do that but I'm not going to do it

for this for this project it was just over complicate things so I'm just going to grab the CSS file all right so that's our structure now we need to create an index.html file

all right and just to get some core bootstrap code I'm going to get bootstrap and then getting started go to examples starter template do a control you and we'll just grab all this

okay now we'll go back to our index and paste this in and then we'll go through it okay so we have the html5 doctype HTML tag English language character set okay we want this we want

the viewport because it's going to be responsive I'm going to get rid of description author and icon and then the title sky app welcome okay the bootstrap CSS file remember we

we only took the bootstrap dot CSS and then here we want to change the path we want to get rid of this because it's just right enough CSS file all right so the starter template here we're not

going to need what we want to include is our font awesome so CSS slash font awesome dot CSS and then we want our main CSS file okay

and then these from here to here we can just get rid of all right so the navbar goes from here to here container I'm going to get rid of this and then down here for the JavaScript we have a link

to that links to the Google jQuery index but we could we're just going to include our own so let me get rid of this and we want to go to JavaScript slash jQuery dot side with that jQuery j/s and then

the bootstrap javascript get rid of that and then we can get rid of this all right so if we save that let's see what it looks like

all right so basically we have an empty site we have a navbar and that's it but we have everything included let's check the console make sure there's no errors here nope all right good so now we're

ready to start writing our HTML so we'll start with the navbar basically we want to keep this we want to keep all these classes project name sky app for the links we have a home which will go to

index dot HTML and what else do we want an about page okay that'll go to a bulk dot HTML contact we'll go a contact on HTML and we want a couple more pages here okay so we want services

in our blog page all right and then we're going to have our login and register link so we want to get out of this unordered list and then have a new one

all right and we're going to give it a couple of classes okay first we want nav you want nav bar I'm sorry nav bar nav okay these are all core bootstrap style classes nav bar sub

and we want to pull right we want to float to the right all right you'll have to list items and this one will be registered and this one will be login

all right so that's it for our navbar we're going to have a lot of styling to do okay we need to turn this navbar into this okay but I just want to get the HTML done first before we get into that

all right let me see okay we'll make sure the responsive menu works all right so under the navigation we're going to start our showcase all right which is

this area with the image with this this copy in here buttons all right so what I like to do is format my HTML pages in sections all right so this will be a section called showcase and they don't

always have to have a class but what I like to do is create different versions all right so this here with the search bar and this light blue background this will be a section and we'll call it

section slash light because it has a light color basically we're going to have a few different color pet color variables we'll have primary which is going to be this blue will have

secondary which will be the green will have light which will be this light blue and then we'll have dark which will be like a dark grey all right and then this here is another section okay this will

be a section this is a section with the class of section light this will be another section with the class of section primary and then we have our footer all right so that's just my

preference how I like to build html5 sites you may already have kind of a method that you stick to and that's fine so we're going to do is add a section so section class is going to be showcase

and actually know what I want to add another s CSS file in layouts actually you know what never mind the code for this we'll put in our sections s CSS file so never mind alright so in

our section we're going to have a div with the class of container and if you use bootstrap at all then you know what container is basically it takes everything and gives it a width and sets

it in the middle so this entire area here you can see how it's set in the middle and we have margin auto on each side all right so that's container and I'm also going to add another class to

this called showcase content all right and then in there we'll have our h1 say bootstrap html5 template and then we'll have a paragraph and I want to give it a class of lead which is

a boop bootstrap class and I'm just going to grab some text paste it in okay so I just have a strong around the bootstrap 3 and we have a line break here to make it two lines so

under that we want our buttons so I'm going to create a div with the class of downloads excuse me all right and we're going to have a link that goes nowhere and we'll have two

images so this will be around an image and this will be called ing for our image folder and then BTN – whoops download dot PNG yeah we might as well add some alt text just say download all

right and then we want another one I'm just going to copy this here and this one is going to be called Appstore all right so we might as well get the

images so in your source files the link is in the description you should find the images basically I'm just going to grab all of them I don't want the PSD and put them inside the images folder

where are we alright so that's it for the showcase area next is going to be where that search box is ok this search and this is going to be a section it's going to have a class of section light

all right so we want to go right here section class section light and let's see okay one container and the reason that the container is on the inside of the

section is because we want the background of the section to go across the entire page you know no matter how how wide you open your browser it should go all the way across if we put a

container outside of it then it would only go from here to here all right we want the content to be in the middle inside the container but not the actual section okay so in our container we're

going to use the grid system bootstrap grid system basically we need to create a class called row and then our columns all right so what I'm going to do with this section is have two six column dibs

okay one here one here and this is empty but you could put something here if you want maybe social network icons or something like that but for now we're just going to have a search bar in one

of the columns okay so div class call – MD – six okay and then we want the same thing and then inside here is where we want our form or search form okay so form class search

and what do we want to do we want a div and then an input type is going to be searched we're going to use the html5 search type and we'll put a placeholder that'll say search website and products

all right and then we want a button with a type of submit and a value actually going to leave the value blank and then we want to use an image as the button alright so here

we're going to say image' SRC is going to be in the images folder and called search dot PNG and we'll also have an alt text that will say search all right

oh this should be an equal sign all right so if we save this and take a look now it's not going to look very pretty all right so you can see that it's even under the navigation box so we're going

to have to fix that later this image isn't being found button Appstore oh there's no – all right there we go

all right so let's just keep going with the HTML we have our showcase and our first section our second section next we want a Hodge section with the three column layout so this right here it's

going to have three columns with three blocks alright so I want to go out of this last section and you don't want to let me give this a class because there's no background or anything like that the

blocks are going to be styled individually okay so we need a container and then we want to row and then we're going to want three four column dips so call m.d.

for I'm just going to copy this and then in each column we want our block so div class okay the first block is going to be that blue that's going to be a

primary block so class is going to have block okay all blocks will have the class of block in addition to this styling which in this case is block primary and then inside there we want an

h3 and we want an icon so we're going to use font awesome so we'll have an eye tag the class when you use font awesome you always need the FA class and then the icon you

want in our case it's going to be FA – check alright and I can show you real quick all the icons are located here there's just a ton of them and if you click on

one it'll give you the exact code which is the FA and then the icon name all right so we want the checkmark okay now for the h3 text what do I want sleek and then we want a paragraph and I'm

just going to grab some text real quick just some dummy lips some text all right and then we want a read more so a trap and let's see this see what this button looks like we're

just going to use the default button which is a white button so class you always want to use BTN and then BTN whatever style default BTN default is a bootstrap course style and this is going

to say read more okay so what I'm going to do now is copy the block and paste it in these two and then just change the middle one is going to be block secondary it'll change

sleek to responsive and we'll change this to clean all right so if we save that it's going to look horrible actually it doesn't look too bad you can see we have our columns I

just want to put a space after the check box even though we probably will add a margin all right so that's it for the three column section now we want the four column which is this here and I'm

going to stop this video here and we'll continue in part three I just want to keep the videos around 2025 minutes so we'll do this in the next part

In this mini-series we will build a complete HTML5 Bootstrap template with SASS. It is a bit long but that is because it is from scratch and typed out line by line.

—————————————————————————————

Project Files – https://github.com/bradtraversy/skyapp_bootstrap

For video courses like this check out – http://codeskillet.com