Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 5

hey guys welcome to I believe this is part 5 of bootstrap and sass so in the last video we did the services page alright so what we have left is the blog

page and the contact page HTML and then we can finally move on to our CSS and using sass ok so I'm going to go to our blog we basically have the the the base structure down we have our columns

alright so we have a main column a column div and then a sidebar which is a four column div alright so I'm going to start in the 8th and basically we're just going to have a heading so we'll

have h2 with a class a class of page header and I apologize it and know that this is going to take this long to do all the HTML I know I could have copy and pasted

but I really want you to see what I'm doing and how I'm structuring the website so page header this is just going to say read our blog and then we'll have a blog post which will have

its own div so div class blog post and in the blog post we'll have another page header and I'm just going to give this a just a sample text for our name here and then

we'll have the blog the blog image so IMG / I think it was blog 1 and actually we want to give this image some classes when I give it a class of image

small which will just shrink it to the correct size going to give it a class of image ordered because we want to have an image and also blog feature all right now we just have our intro text let me

just grab that text all right and then underneath let's see underneath the blog post ending div we're going to have our metadata so that the the date the author categories so

div class and T post meta alright so we're going to have an icon and the icon F a F a clock actually it's clock Oh all right so that'll be the icon for the time of the

date and the time I'm just going to put autist 31st 2014 all right and then we'll put another icon and this one will be a user sol-fa user

and that'll be the author name and then we want the category so we'll say folder for the icon and it'll put graphic design web development all right so that is a post all right so

we get the blog post and blog and post meta okay so we just want to copy this and this okay and then we'll go right under here put a couple of these in and that's pretty much it for the list

of posts so if we save that okay so we have our post the images aren't showing let me just see why image blog one jpg let me just check that also it's a PNG file

so we need to change those to PNG okay so for the sidebar let's check out the blog sidebar e of tabs and we have this featured video and then we have this recent comments okay so we want to

go to the the four column sidebar so we're going to have a heading here and I'm going to paste in the tab code okay so we'll start here or tab Widgit whatever you want to call it we have a

class of tab and tab light because we wanted to have that light background we get a ul then we have the tab panes okay you want to make sure that your href for the tab matches the ID of your div down

here all right and then we have the featured video so we want to go under the tab div which starts here and ends here okay so we want to go right here and this is going to be a block we're

going to have block primary and we want notepad here as well so we're going to give it the class no pad no padding and then we have an h3 and we'll have an icon here

okay so FA F a place circle cute video and then we need a block content and then inside here I'm going to just paste in a YouTube iframe embed code

all right so whatever if we have no padding we usually use this when we want there to be actually you know what this should be block primary it should be block primary head whenever we use this

block primary head we should have no padding because if you look at it you don't want the head in this this blue header to have padding on the sides and the top so you want no padding and then

you want to set the padding to the block content div which is this because you don't want this up against the edges all right so let's see next we have the recent comments again it's going to be a

block primary head so I'm just actually going to copy this and recently okay so we'll change this here to recent comments and change the icon

to F a comic alright then block contents get rid of the video and for the block content we're going to have an unordered list and this will have a class of list comments

and then we'll have allies and inside the Li we want an image and we want our headshots headshot one dot jpg and we want to make sure we give this a class and we want it to pull left

because we want the image to float to the left and we also want to give it a class of image circle which will turn it into a circle all right now we want paragraph and I'm just going to grab

some text okay so that's that's good so we'll just copy this a couple more times change the headshot image all right and there we go let's take a look

where are we blog or is it they're not safe or didn't save all right so you can see the images are very big okay so we're going to fix all

that so that's it for the blog now we want the contact page okay so we'll go to contact we already have our columns okay we have our eighth column div and our four column div let's see we'll have

a heading chatting contact us alright so we're going to have a form and I'm going to paste that in just to save a little time so we have a form and then we wrap our fields in a class called form group

which is standard bootstrap mock-up we have a name a phone number and email address and a message basically the same that we have on that little form that we created on the services page alright and

then the sidebar we're going to put an address and this is going to be a block so you want div class block and again this is going to be block primary head and no pad alright

and then we're just going to have some address info I'm going to paste that in okay so we have an h3 on location which has an Home icon then we have our block content unordered list as the company

name and the address info okay so the contact form we also want a Google map so we want a section above the main section section class and this is going to have a section I

mean a class called section map and I'm just going to paste in my eye frame for my map okay basically it's going to be widths I want it to take up the whole page so I did 1600 height 400 okay so if

we save that and there's our map in our form all right so that is the HTML okay we have absolutely no CSS right now so that's what we'll do in the next video

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