Hello everyone and welcome to our bootstrap course.
In this lecture we're going to be giving an introduction to web development fundamentals.
This is going to be a quick overview of each team out CFS and javascript.
So let's go ahead and navigate to J.S. bean dot com.
That's right.
And right now just type in J.S. bean dot com in your browser and hit enter and you'll be taken to GSK
then dot com.
The immediate thing you'll see on your screen are these three tabs the first tab here is each t amount.
The second is CSF.
And the third is the output.
And these are all different tabs that make up our website.
So each ECMO is the structure of the site known as the document object model.
This contains all of the objects of our Web site like the body and the head as well as more that we
can put ourselves.
The CFS contains all the styling.
So as you notice it's better now because that means our website has no styling only the default styling
and the output is what we would see on the Internet when we uploaded this Web site to a server and produced
it.
So you'll see that output is empty because there is nothing in the body of this website which means
it is an empty Web site.
So every Web site will contain ECMO as well as CFS and it would produce this output.
J.S. Bean is a free online editor that lets you build and preview your Web sites on the web.
So that means you don't have to download anything you can just build code in a GMO style with CFS and
you will see an output here in the output tab you can go to file new to make a new bin.
You can make the been private.
You can also delete the bin archive it so save it to your history there you have made my bins which
is all of your made bins in the past.
You can make one with an account.
You can add a description save a snapshot of the bin which is which means to save the bin.
I highly recommend saving snapshots.
This will allow you to have a huge history of all of the versions of your website.
You can clone the bin.
So make a duplicate.
You can publish it.
Export it to get hub or download it downloading it will create an e mail file which will contain this
ECMO as well as this CSX put into the head the e-mail will be put immediately into his own file and
the CSX will be put into a style sheet here.
So you'll see these style tags.
And this is where your e mail will contain this.
Yes.
So that will happen whenever you download EGF spin project.
You can also see this as a template we use it.
So this is how GSP works.
Now there are several tabs appear.
You'll see there's e PML.
And if you click on it you'll hide it.
And if it's blue it means it's being shown.
So there's ECMO and I can hide CFS.
I can hide the output to just show the ECMO.
Then there is the CFS.
And every time you open a tab it opens up beside the other tabs.
So CFS will contain all the styling then there's javascript javascript contains all of the functionality.
So if you wanted a button to work or a form to be able to be submitted or to collect user input this
would be the interactivity of your Web site.
Now this is beyond the scope of our course because with bootstrap we're going to be learning how to
build the front end which concerns e-mail and see ISIS e-mail CFS are the front end which means it is
the appearance and the structure of the website javascript is the back end which means it is the interactivity
saving data making things move although you can make some animations with CFS an e-mail javascript will
make more of the usability of your Web site OK.
But you can still do a lot with e-mail and CFS and in fact it's recommended that you do more than you
can with e-mail and see RSS because these two are rendered faster in the browser so they run faster
there are more performance.
There are more performed on different browsers as well which means that on the different browsers they
still work whereas some browsers don't support javascript so e-mail CFS can still do quite a lot without
javascript.
There is also the console which is for you as a developer which means you can print statements for yourself
here depending on what you want to test in the code.
And finally the output will show the result.
So let's go ahead and look at some of the basics of East Timor first.
First we have here some template code.
And this will appear with every J.S. bin project that you open whenever you build a Web site outside
of GM spin you won't have this code.
You'll have to write it yourself but not to worry.
It's it's quite straightforward.
Up here we have the doc type which says the document type and this is to let the code know that this
is an e-mail document.
Then we have here an opening each to attack and this will open the code which means that all of the
code inside of the opening EMR tag and the closing H2 email tag should be treated as each to email which
means it will be read in a certain way as e mail by the compiler which will render the e-mail into a
web page.
Then here we have the head.
And this is where you put in several information points about the page.
So here we have first the character said.
This is the keyboard set of the web page.
So it means you can use specific characters and of the UTF 8 character set.
Then we have the viewport and this will let J.S. Ben know how to render the width of the screen.
So this is for just been to render the viewport.
Then we have the site title which is GSP.
And this is the title that shows up in the browser.
So as you can see the title here J has been that is what is being shown here.
But this is for the back end of your website whereas this is for chess spins website.
Okay great.
So if you had your own website this title would show up just here and this is extremely important for
a CEO search engine optimization which means your website can be better found on the Internet can become
more searchable more popular.
You can get more hits etc. There are many different points to even consider in your HMO to make your
web say more SEO friendly which means more searchable including making a title like this.
Then we have the closing head tag because many and the majority of tags in each team out must be opened
and then closed.
Some are self closing which we'll look at later but most of them you have to open and then close in
the head is also where you would put in a link to a style sheet as well a style sheet means your code
that styles the website.
So adds the font colors the background colors the colors of elements different properties of how you
want the visuals to look like and that would all be here in CFS.
So we don't have to put a link to a style sheet for GSP Ben because it automatically considers this
the asset tab to be the style sheet.
However if you're using a different Azure if you're using an idea and integrated development environment
such as Adam or brackets or anything really to build your website off line and on your computer then
you will have to add a link to a style sheet.
Then we have the body here which contains all of the code that will be rendered on screen.
So I'm going to toggle this.
Yes.
And go back to the output.
And here is where I can actually begin writing text.
So if I put in any old text here like a site title you can see it will immediately be rendered here
in the output.
And this is what my site would look like live on the web.
If I published it and you'll notice it is styled with this default times new roman styling and that
is because that is the default with every page and on top of this default styling you can add your own
styling in CSX.
Okay.
So in the body is everything that would be created on the site.
So typically you want to put text in to something like a header so you know as I put it into a header
one and then I close that header one tag suddenly the styling has changed.
We're going to be looking at a headers later on in this course as well as many more different tags but
tags symbolize what the element is and how the elements should look would be done in CFS if we can add
another element it would just go below it so we can open a paragraph saying welcome.
And this will create a paragraph with this paragraph tag.
So this is the structure of every ECMO page and of every Web site there is a behind the scenes code
file that contains in each female body just like this.
OK.
So now you know what an e mail page is.
And with CFS you can add styling.
So for example I could call every paragraph with a P letter which is the same name as its tag name.
And then in here I could change the color to white and you'll notice this will disappear because it's
now a white color.
I can make it yellow example or blue.
So as you can see I can add styling the SPSS to elements that are created in each team out.
Now why a boot strap is so valuable is because it allows you to apply default styling to each female
elements.
So instead of having to put styling in CFS we can do that with bootstrap in each GMO by importing bootstrap
with some lines of calling the bootstrap script tags.
So by calling bootstrap into our file we can then use bootstrap which contains its own styling that
we can call using classes we can call the bootstrap class of P two and this is what's known as a bootstrap
class and instead of having to style elements ourselves in CFS with bootstrap it will style it for us
using Bootstrap classes.
Right now there are no changes being made because we have to import bootstrap which we'll be doing shortly
but the general idea is that bootstrap will allow you to style elements using its classes which are
extremely efficient and time time saving as well as visually appealing et cetera.
Not only in terms of the visuals but CSX will help you lay out your page bootstraps.
Yes that is because typically when building the layout of a page you would have to add CSF styling on
each element to put it exactly where you want it to be.
And this can get quite messy because elements are dependent on other elements.
So if the tail is here and a paragraph is down here where it is places dependent on others and sometimes
it's not.
And so with bootstrap it makes laying out your page much more convenient as well and efficient.
So we're gonna be looking at all of what bootstrap can provide and there's actually quite a bit that
it can do.
So we're going to be looking at the core features of a bootstrap can provide and get you up and running
with your first projects and then this way you can build more complex projects as time goes on as you
build upon your knowledge.
So thank you all for watching and we will see you in the next lecture.