April 10, 2020
Bootstrap one page scrolling web design part 2 – Twitter Bootstrap

Bootstrap one page scrolling web design part 2 – Twitter Bootstrap


hi guys this is Jamie from the system22.net and great-webdesign.com welcome back this is the second part of our builder 1
page scrolling bootstrap website in the last part we showed you where to
download all the files for this one page scrolling site that we’ve got here so
let’s have a quick look at what we’ve got here I’ve got a CSS folder that’s
where all our CSS is going on that’s the default CSS for those of you that don’t
know CSS cascading style sheets or what is used to actually style the site as
the word says you know the padding and the color the size of the font etc and
that’s the default bootstrap here and that’s a minified version of it there
which means it just loads quicker here’s the file will actually be working with
when we start customizing our site the scrolling now there if we go back here
in the fonts folder we’ve got a glyphicon SPAC and that’s icons that we
can use within our site and we’ll be doing that a little later on I may
decide to download font awesome because I prefer it javascript javascript is
what makes things actions have long pages for instance the scrolling that’s
all done with JavaScript here opening and closing models and things like
that’s all done with JavaScript here we won’t be editing much of this in fact I
don’t think we’ll end up editing any of this at all the index.html file because
it’s HTML file this is the one where we working on all the time this is the the
file for our whole site and if you double click on that one it’ll open up
this in our browser which is the bare bones of the site that we’re going to be
working on that license we covered last time always read the license if you
download the template make sure you’re okay to use it and there’s a readme file
as well that you can open with brackets and have a look at so we’re all good to
go here we check the license we can use this no problem at all
first thing I’m actually gonna do is I’m gonna create one more folder so I’m just
creating a new folder I’m gonna call it IMG for images might want to spell that
right right mg you can call your to whatever you want but I suggest you call
it that same as me if you want to follow along with the links we’re gonna build
later on okay so what we need to do first is open up our index.html file in
our brackets text editor software and here we are for those of you that
don’t have the bracket so I’ll leave a link to it below it’s free software
please download it and install it it’ll enable you to follow along a lot easier so here’s our index file basically this
is our whole site this is the HTML for our whole site we’ll be building on this
to create our site and we’ll just go through it in doctype HTML the language
is English character set utf-8 which is the Western character set these are just
people telling it to scale to the size of the screen which makes it responsive
many name description that’s quite important there in between these two
inverted commas there you want a description from for your site and for
search purposes a Google description really doesn’t want to be more than
about a hundred and sixty characters now I’ll just paste it in here just paste it
in here and this is what’s going to show up in
your Google or Bing searches I’ll just show you if I bring up a browser here’s
a Google search and see my business is down here somewhere this is what its
gonna the description how it’s going to appear in the Google search so it’s
quite important and you really want to do that one the author there you can put
your own name or whoever you want to do I’m gonna add one more right here now
there’s a lot of people that say nowadays Google doesn’t really give
keywords don’t really care for much on Google but I don’t think you can do any
harm especially if people are using a different search engine so if we put
this in here and all this code that we’re writing today don’t worry about
copying it because I’ll provide a PDF of what we’re doing each day below the
video and you can link to it and download it use it however you wish so
here’s where you put your keywords let’s say we’re doing a site about photography and get your photography keywords and
just paste them in there just comma separate them you get the idea I won’t continue doing
that you don’t want to overstuff everybody you can certainly put a few
keywords in there and you can also put your zip code or the location of your
business as well that doesn’t hurt at all title here we see title here you want to
put the the title of your site your business name or whatever it is you’re
promoting I’m just look for my one page and what this is it’s what’s going to
appear at the top of the search of your browser up here for instance scrolling
now it says at the moment well if I save this just to ctrl s to save or you can
go up to file and hit save and then refresh this you’ll see that change to
scrolling there or whatever it was I just put in one page scrolling there we
are one page scrolling and the next thing we want to do you see the google
little icon there it’s called a favicon or favicon we want to put one in for our
site that’s just a little image usually it’s 16 by 16 pixels nowadays with these
iPads and Retin or any things you can put different ones in there but I’m just
going to put the the one little work on Google Firefox and exploring so let’s
add our favicon we created this little image folder just now now we’re going to
start to use it I’ve got a little favicon that I created earlier I’ll just
paste it in there and all it is is a I just changed the view there so you can
see it all it is is a 16 pix by 16 pics image and I’ve made a little JPEG I’ve
called it five or faith so I put that in our image folder here
that we created earlier now if we go back to our bracket software all we need
to do is put a link to that in there so just after these key words that we put
there it’s telling it what it is and again I’ll I’ll put a PDF of this below
this thing so you don’t you can copy and paste it into your should you want to do
this and this is the actual link to it it’s prompting us here already and it’s
in the image folder which we just created and there it is it’s the fuckin
JPEG and all images must have an alt tag and what the alt tag does is it tells
people that a hearing aids sight impaired it’ll actually read it out to
them what it is and also it’s great you can put keywords as old tags as well to
help site SEO if you need to I just call it icon and that’s it should link to our
little favicon icon there you see when we mouse over it it’s actually brought
that little thing up it’s made it look very blurry because it’s bringing it up
large but if I just say that now if you look up in the left-hand corner here
you’ll see a little dot by our index.html file if you see that there
usually means that you’ve not saved you’ve made a change and you’ve not
saved it so I’m going to hit control s and save it that goes away now now if we
go back to our page and refresh you keep your eye up here
but our little favicon should be there when we refresh there it is just to tell
you what’s going on we’ve done the title there down below CSS bootstrap this is
pulling in the style sheet for the bootstrap and it’s styling our site with
the default bootstrap there this is that scrolling nav CSS file it’s pulling in
and telling it to look in there for our styles and we’ll be updating that as we
go along and this is the end of the head tag so none of this really shows on the
site itself apart from this and that in the tab now here’s the meat here’s the
body the start of the body where are we going to start to customize our site
these are now far that we can see there so that will wrap it up for this videos
been going on a bit too long now but in the next one we’ll actually start to
style our navbar make it look good once again this has been jamie from system 22
and great web design comm if you’re enjoying this please subscribe to our
Channel thanks for watching I’ll see you in the
next video Oh

3 thoughts on “Bootstrap one page scrolling web design part 2 – Twitter Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *