Hello everyone and welcome back to our bootstrap course for beginners in this lecture.
We're going to be introducing the project as well as setting up all of these skeleton elements of the
Dom which means we're just going to set up the opening and closing tags for each of the elements inside
the body.
But we're not actually going to fill them in just yet.
That will be for later lectures.
So here I have opened a new James Bond page and as you can see there is only the basic template code
that is created for every GSP project.
We can go ahead and change the site title from Jaspan to something like the product are going to be
promoting.
So call this product.
So this Web site is going to be a product promotion page that will allow the user to see a quick description
of the product and then to see the pricing model of the product such as the sale price the regular price
the monthly price or the yearly price for example if you had different pricing models for your product
then there will also be a checkout page which will allow the user to enter their information and buy
the product.
Okay great.
So let's go ahead and start setting up what we need in the body here.
Now if you'd like you can add a navigation and a footer just like we did in the previous section and
you can even use the same navigation and footer we used in the previous lecture because it's a good
idea to reuse code whenever you can.
If you have a project that is similar to your previous project then you can go ahead and use your previous
project as a template to save you time because there is no point in reinventing the wheel and for efficiency
it's a great idea to have your own custom templates that you can reuse for your clients.
So here we have in our body we have all the elements that we're going to put in.
So let's go ahead and set up what we need.
So first of all we're going to have a header and this header is going to show the product name and give
a brief overview as to what the product actually is.
And then we're going to have a pricing model.
So let's go ahead and add in the element header first ad header requires a closing tag as well as most
elements do.
Then we're going to also add in the pricing next.
So we're gonna have one div for the pricing header and you can use the bootstrap class pricing header
for this and close off the div tag and then the next div that we need is going to be a container container
is another bootstrap class.
And this container will contain a card deck which will allow you to create a very nicely styled pricing
scheme so the user can see the pricing of your product.
So now we have a pricing header and a container.
We're also going to need a checkout page.
So this is going to be a single page website.
Again it'll be multiple pages on the single page.
So it's gonna be a scrolling Web site just like the previous project scrolling is a good idea for a
website because it is more user friendly in that users will have to click around.
They can just scroll.
This will also tend to keep them on the page longer because there's a scrolling effect.
OK.
So let's add a div with the idea of checkout and this is going to be at the checkout page.
This will contain some input fields so the user can see their product can see their cart and what they're
going to be charged as well as they could put in their address and their credit card information and
then purchase your product.
Okay great.
So these are the four elements we're going to be working with throughout this project and we're gonna
fill in a bunch of code in here using Bootstrap classes.
What we need next is to copy in the end for bootstrap just like we did for the previous project you
go to get bootstrap you go to bootstraps website and you copy the C N section which is the J query script
link the j ust deliver a script link and the bootstrap style sheet as well as the bootstrap script itself
so I'm going to copy that in right here.
This is exactly what we did for the previous project as well.
We just copied it directly from the bootstrap documentation.
So this means we don't have to download bootstrap.
We can just reference it using scripts and as well as one style sheet.
So this is bootstrap styling and the rest are the scripts that bootstrap requires.
So the javascript.
Okay excellent.
So this is all that we need for the template that we will set up.
We can also add in some very basic CFS because for every website you will typically have a bare minimum
CFS that you can begin with for every website so you can even have a template CFS that you always work
with and it is the E UML and the body styling which you can style the width to 100 percent and the height
to 100 percent.
And as you remember from the previous lecture by styling the width and height 200 percent you can then
give all the elements inside of the body a percentage width and height as well.
OK.
We cover that in the previous section.
OK.
You can also add a margin of zero and auto zero refers to the top and bottom margin and then auto refers
to the left and right.
Whenever you have two numbers like this or two values the first is the top and bottom and the second
is the left and right.
If you had four values here and the first B the top the second would be the right.
The third would be the bottom and then the fourth would be the left.
So in a clockwise formation we're going to just use to for efficiency if you just had one here then
it would style.
All four sides.
OK.
Excellent.
We can also add in the background color for the EU melt in the body and in this project we're going
to have a background color of black because the previous project we did was a light theme and in this
lecture and section we're going to make a dark themed web site so we're gonna use a background color
of black.
And we're gonna set the color which refers to text color to white.
So that will have white text on a black background.
OK great.
So we're going to have this black text of the white background and we're also going to set the paragraph
text and you can just set that to white.
Now we will use bootstrap colors selling as well but this is good to have as a backup.
Okay great.
So now in this section you'll learn how to make a dark themed and sometimes you often see on Web sites
a little button that will allow you to click on dark mode.
And what they're doing is upon the click of a button they will change the background color and the color
and perhaps some more elements as well but it will change the background color from the light theme
to this dark theme so you could add that you're upset as well.
That would require javascript to little beyond the scope of this course but it's a nice challenge.
In case you want to go above and beyond.
OK great.
So now we have set up the skeleton of the Dom the document object model which means we set up just the
opening and closing tags of some elements that we we have a bird's eye view of what we're going to build.
And we also added some bare CSX to the bare minimum that you would see on any Web site that you start
with.
Okay great.
Thank you all for watching.
Good job on getting bootstrapping here as well.
And we will see you in the next lecture where we're going to start building out this header up here
the first element in our body tag.
Other than that.
Thank you for watching and we'll see you in the next lecture.