Tip:
Highlight text to annotate it
X
Hello. In this video, I'll show you step by step how to start your Bootstrap 3 website
either from scratch or using one of the Bootstrap examples.
What you'll need is an Internet connection and a text editor, such as Notepad++.
First, go to getbootstrap.com and download Bootstrap.
Then, next, you're just gonna go ahead and open your Distribution folder.
There's three subfolders - CSS, fonts and javascript.
Go ahead and select all of those. Copy them and move them onto your desktop. I have a
folder already created called "website" and I'm just going to Ctrl+V paste these all into
my "website" folder.
From here, I can start my website from scratch or use one of the Bootstrap examples located
under Getting Started > Examples.
To use this Jumbotron example, I would just go ahead and click on it, and then right click
anywhere on the page, Saves As.
Now, be sure to save it as Web Page HTML Only and go ahead and save it as index.html right
there into the website folder you've already created on your desktop. Be sure to save it
in the root of that folder.
Okay, now let's take a look at the Jumbotron page we just saved as index.html to our desktop
in our website folder. And, okay looks like we have some missing CSS, so let's take a
look.
Okay, I'm here in Notepad++ and I'd like to go ahead and open index.html on the desktop,
so I'll navigate to that folder and open this and let's take a look, again, for the CSS.
Alright, it looks like what we have here is something that linked to the "Distribution"
folder that we got rid of when we moved it to our desktop, so let me get rid of that
and just start with the CSS/bootstrap.
I'm gonna go ahead and save this and run this again. Again, this is our local version and,
yes, it looks like the CSS has been applied now, so that issue has been resolved.
Okay, so here on your desktop you created a fully functional local version of the Jumbotron
web page that you can now continue to customize with your own content.
To build your site from scratch, rather than use one of the examples, just go to Getting
Started and then down to Basic Template. Copy the basic HTML code you see there into Notepad++
- like so - then go ahead and save this, File > Save as, index2 this time to distinguish
it from the index that you already have on your desktop in your website folder.
And, let's just go ahead and run this launch it in Chrome to see how it's working and yes,
you have a basic HTML template from which you can add your own content.
Alright, I hope you enjoyed watching this video and please be sure to comment, rate
and subscribe.