Transcripts
1. Introduction: I want to thank you for
taking the time to check out my course Introduction to website development
technologies. I'm your instructor for
war Williams and I've been a web developer and lecture
for the past decade. Now in this course are
going to be looking at all of the fundamental concepts that are required to help you to ascend into the role
of a web developer. We'll be looking at HTML, which is a markup
language That's allows us to put content into documents that later become the actual web pages that
burned or in their browser. We also look at CSS, which is used in tandem with HTML to make the HTML beautiful. So the combination of
HTML and CSS allows us to 1 put content
and then to style. It's the way that we so desire. We will also be taking
a look at JavaScript, which is touted as the most popular programming
language in the world. It is very easy to
learn and it is the most popular language used across pretty much
all the Internet. In addition to that,
we'll take a look at UI frameworks and we'll
be focusing on Bootstrap, which is the most
popular UI framework, which is essentially
a package library of most commonly used CSS styles, JavaScript methods,
and HTML code. In order to operate efficiently. As developers, we will be
using Visual Studio Code, which is Microsoft's
open source text editor, which is chock-full
of productivity tools and plug-ins to help you
to maximize your time. It is very powerful and it
comes with integration for higher level languages
and frameworks. And it does allow for our Git
integration. That's right. I did mentioned Git. Git is a technology that allows developers to track
their changes and maintain a logical sequence of backups of each
version of their code. So we will be using GitHub, which is one of the
most popular source control platforms
on the Internet, which is based on Git. And it will integrate
very easily with Netlify, which allows us to
deploy to the Internet directly from our
GitHub repository. Know Netlify allows
us to deploy once again directly from GitHub
straight to the Internet. And it allows us to do that for free with some restrictions, but it is enough for
you to get a feel of what it is to build something
and put it on the Internet. So without further ado, let's get right into it. And once again, welcome to Introduction to website
development technologies.
2. Install Visual Studio Code: All right, welcome
back, guys are getting started with Section
1 of this course, which is where we'll be
learning the basics of HTML, CSS, and JavaScript. Before we do that though, we need to set up
our environment, not want to go through
a few basics with you before we even
don't load the tool. One. We'll be using
Visual Studio Code for this course or for this
section of the scores out. These visual Studio
Code is a very, very powerful text editor that is capable of handling
many languages. So it is perfect in my
book for HTML and CSS, JavaScript at this level. That being said though, you might already have some experience or have a
preference on the tool. And there are other
tools like brackets, dot IO or even Notepad, Notepad Plus Plus I. However, we'll be using Visual Studio Code and I
recommend that you use. It's also so that all of the plug-ins and all
of the tip centric, so that I'm about to show you, you can take full
advantage of them. So getting there is quite
simply you just have to go and browse through code
dot Visual Studio.com. And then based on your
operating system, you may download for
Mac, Windows or Linux. I use Windows, so I would definitely download for Windows. So the installation for this
is fairly straightforward. All you need to do
Next, Next, Next, Next, and then when it's fully
installed and you open it, you will be greeted with
a screen similar to this, the welcome screen
no, to your left. And just give you a quick tour
of this IDE to your left. You're going to have the
option to look at and explore, which shows you
all of the folders and files in your
current projects. So that's one thing that
you want to make sure. Anytime you're building
out web project, you create a folder that is dedicated to that
particular project. You'll also be able to search
in all of your code files. When you get them,
you can connect to source control and you can
look at running on debugging. Know, in the case of an
HTML website document, you don't need to worry
about writing and debugging. This is more for if you have some complex JavaScript
framework working with or even Python R C on
some other language that needs to be run in
order to start working. No, the final tab here
is called extensions. And I'm going to just point
you in the direction of a few extensions that we're going to
definitely find useful. So I have a bunch of extensions because I've been using
this tool for awhile. But for the purposes
of this exercise, I would encourage you
to get live server. So you can just hit extensions
and then type live server, press Enter, and
then it will filter, you click it, and then
you'll be able to install. All right, so go ahead
and get Live Server. And then I would also
encourage you to get the bootstrap for extension, which I also have installed. So this will later
on when we get used to the
development and so on. And our project starts growing. Url as a you don't have much time to focus on the
little things anymore. So these tools will help you with their productivity overall. So you can go ahead and get those two extensions even know. And then when we come back, we look at authoring our
very first HTML document.
3. Write Your First HTML Page - Text and Links: All right guys, welcome back. So in this lesson we're
going to get started with our HTML document authoring. Remember I said that
anytime you're a bolt to do a project on web project or
any kind of projects really, always one creates a folder
or at least earmark somewhere that this project on the assets related to this
project will be stored. So what we're going to do
is in Visual Studio Code, we're going to open
a folder, right? You don't have the folder. That's fine. Once
I tend to do is browse to the location where I know my projects will be stored, then create a folder. So I'm just going to go ahead
right-click say New Folder. And this would be HTML, I'm going to call
it an HTML Basics. Then after creating the folder, I go in and then I
select that folder, know what visual
Studio will do is, and I'm getting this scannable
trusting and that's fine. I chose the authors
of all the files. All right. To be honest,
sometimes forgotten that warning before,
so that's good. All right, So what Visual
Studio code will do is null set the solution to
default to that folder. So in this Solution, Explorer or the explorer
either way you're going to see is the name
of the folder at the top. And when you hover in that area, you get the options
to add a new file, a new folder,
Refresh or collapse. So what we want to do
is add a new file. No rule of thumb. Everytime you're a bolt
to build a website, a web project,
group of webpages, whatever, however you
want to classify it in virtually every single
language and our framework. Your first page must
be called index. The extension may differ
because we're doing HTML. It will be index.html. It is best to leave it as a lowercase and everything in lowercase because
cross-platform, some platforms preferred
to C lowercase, some don't care, but everybody will be satisfied
if it's lowercase. So lowercase I or
a lowercase word, index.html, that should
always be your first file. So now that we have
that file created, let's look at what
goes into this file. So an HTML file is
a document, right? And like we said, this is what
is displayed to the user. So whatever you put in this file is what really gets
displayed to the user. However, there are certain rules are owned hole you
put content in. So at the very basic level, if I said hello world, nothing too fancy, doesn't
look very complicated, right? And then I can preview
this using Live Server. So just right-click
on the file and then say open with live server. Then your browser will launch and you would
see Hello World. And the cool thing
of boats Live Server is that if I put these
two side-by-side and I type anything I had
typed to the lift will automatically gets
updated to the right. It makes sense It's a
while and if it doesn't update the same time, then you can always just
hit Refresh what it will always keep truck off
whatever you change here. Now if you notice it, every load is not possible
without a body or head tags. So that's why I keep on
having to hit Refresh. So every time I type
nothing happens. I have to hit Refresh money
or they then it warns me. So that's is it telling me that my document needs some work? My document is not meeting the
rules of an HTML document. So HTML has some
strict guidelines as to how the content should be. Little number 1, we should have this tag called a doc type node. The ductus basically declares
to the browser that hey, I am an HTML document. And it is especially useful for the latest
type of documents, which would be HTML5 documents, so that most modern
browsers would know, okay, I can put in the
HTML5 rendering and know exactly how to treat whatever goes into
this document. I'll itself that we need
another tag that says HTML. Now notice the anatomy
of these tucks. You have an open
angle bracket or is that what sets
I less than sign. And then you have
the name of the tag, and then you have the
greater than sign or the the right facing angle bracket
to close it so it's open. Open angle bracket type in the name of the tag,
close angled brackets. Notice also that
when I typed HTML, I had one up top and then another one came
up with a slash. So literally you're opening the tug on the near
closing the tab. In between the tug, you put the content. So the only content that
ever goes directly inside of the HTML tag is another
tag called head. So we opened the angle
bracket type head, close the angle bracket, and then another
one called body. Now notice that it's
always turned to help you is just Studio Code is
always trying to help you. And there are limitations so much it will help
you by default. They're extensions. I can increase them
onto a phobia, get what we would just
use what we have for no, It's good to develop the
discipline of writing them properly without
external help. So we have the HTML tag, and then inside of that we
have an open and close head. I'll have an open
and close body. So much like with
any other document. You have the header
and you have the body, and then you also have a footer. But conceptually you
can put the footer inside of the body
in this situation, but we do have the head
and we do have the body. So let us look at what was in the head, among other things. Right now, I'm just going
to focus on the title. So the title would be
my first web page. All right. That's the title
of the website and all the title is what gets displayed in the boroughs or are when you open
up the browser, are in the tub and you would
see like Amazon.com dash, whatever this is
all they're doing. They're just seeing
title is Amazon.com, title is google.com,
whatever you type here, That's what shows
up in the browser. We're a wearable to see that
the nephew in the body, however, that is where
the actual content for the document goals. So this is where I would
have typed my Hello World. Now that I've done all of that, let me go back to my Live
Server and refresh and notice there are
no complaints this time from Visual Studio Code, a boat, anything
being all tough luck. So that means if I
continue typing and I say, this is my first web page, look at how the
live server does. Updated that for
me automatically. And Visual Studio Code
is not complaining because now it's
happy and satisfied that I have a fully
structured HTML documents. So like I said, they're very
strict rules around it. Well, once you get that
under under wraps, then you have no problem. Notice also in the browser tab, you'll see my first webpage. So that's what we
put in the title. And then in the
document is our texts. Now. Yes, we have text, but then it's not necessarily ideal for us to just
write the text in. We sometimes need
to structure that takes you wanted to the left,
we want it to the right. We want this particular
block of text to look different from
the other block of text. So then we have to
use different tags so that they can be
targeted accordingly. So yes, I have this bit of text, but what I'm going to do is put it in what we call a p tag. So P is short for paragraph. And the cool thing about
visual Studio Code is that when you hover
over these dogs, it would actually explain
to you what they represent. So the p element
represents a paragraph. So every time you
have a block of text, I recommend that you put
it inside of a p-type. And then you can
have multiple p tags that say different things. This is the p tag. All right? Oh, this is the p
tag. All right. And you have multiple
ways to get text in. So you have the p tag, you also have what we
call heterozygotes. So I could say header
and I'm going to put the helloworld inside
of the header tags, so that's h one. All right? And then you have
H1 through six. So one is the largest, six is the smallest. So I'm just going
to duplicate these. So I'm just holding down
Control pressing C. And notice I'm not highlighting
the liner or anything. Just see then V and
it will duplicate the line for you
with minimal effort. So I'm going to make H2, H3 for five and then six. So that no, not that swale. I do open and close
so of them properly. I change this one to H2O and
I'm not closing it properly. That's a normal, always
tried to be disciplined. Modern browsers actually tried to compensate for your arrows. So if you'll look
in the browser, you will see that you are seeing that decreasing size like I had mentioned from H1 through
H6, and it's decreasing. That's because it's compensating for the fact that I didn't close the tag properly and it's
assuming I meant H2 tag, so it's already it's filling
in the blank for me, but that is a no-no. So that's one thing to mind. A boat takes editors. Some of them are better than
others at showing you this, but they generally
won't tell you, oh, you have a
syntactical error. They will just leave them manifest in the
display on the page, or it will manifest
in either situation. And then you'll think
your code is good, but it's always good to be disciplined and do it
right the first time. So when I open an
H1 tag, I close it. If I open an H2 tag, I close it. If I open an H3,
tie their close it. So I'm just double-clicking
and copying and pasting. All right, that's
all I'm doing here. And then you'd
notice once again, nothing updates in the display
because they already knew I figured that I meant each 234, et cetera, et cetera. We also have the p
tags down below, and those are, okay. Now let's look at
some other tugs. I'm sure you'll find
useful and are probably the most common tags or
things you'd see on websites. So apart from texts ranging
from large to small, I'm sure you're familiar
with links because you have to click on a link to move
from one base to another, or click on a link to move from one website to another it, so you have a tag
called the anchor tag. So if you hover over
it, you'll see it. If the element has an attribute, then it represents a hyperlink. So a hyperlink, that's the
pretty word foreseeing you'll have a link or that's a full word forcing you
have a link, right? Notice it said an
attribute called a drift. So let's look at
what's an attribute. So we have the tug and
we've established that what goes in between
the open and close tag is the content of the topic. So let's see, we
have this anchor tag and I wanted to
link it to Amazon. All right, so it's
going to come up the word Amazon comes up what? It's not clickable, see, it's not a link, so that's the content
of the anchor tag. But then I needed
to be clickable. So what I need to do
is add an attribute. An attribute goes
inside off the open, tucks you that this
is the open tag. And I went from
the ANS Spacebar. And then I'm going to type
in that attribute H ref. Now there are a number of
attributes that can be used. Some of them are
legal so far not. Some will be ignored, some will mess it up. Alright? Well then generally speaking, most times you would see
like an attribute called ID, which is like a special name that you're giving to
this particular tag. All right, so I can see link, one, that's the
ID for this link. But then the attribute
that really makes the link common law is
the attribute, attribute. And then I would
have to type in the, the link to where I want to go. So I'm just going to
put in the full URL, https colon slash
slash www.amazon.com. All right, After doing that, notice how it changes
automatically. Know the browser
knows that this is a link that goes to Amazon.com. And when I click
that sure enough, it to a load Amazon. So I just did a middle
click for it to come up in the different tub. However, if you
wanted it to come up in the different tab automatically
because if I click it, it will just Bros are
we sometimes we don't want that to happen with
our browsers, right? We want our sorrow
with our website. Sometimes we want them to
click the link and go there in a different pH but not move
away from our website. So to do that, I can see target is equal to and then
say underscore blank. So that way, the browser knows
when the link is clicked, open up another tab or
another window I see. So attributes allow you to give a little something special to the particular tag that
you're dealing with. Now what if I remember that we're building on our website. So our website is a collection
of web pages, right? No, we only have one
page called index.html. What if I wanted to
navigate between the pages? All right, so I'm going
to create another page, and let's call this
one a boat dot HTML. So this is my boat page. And I'm going to give it the same basic structure and I'm going to do it from scratch
so you can see again. So we start off with the
DOCTYPE HTML and then I open the HTML tag and then
we have inset of that we have the head and then body. So in the head I wanted
to see is a bolt page. And then in the body, I'm just going to put
something simple. And C, each one, a boat, a speech. All right, so that is where we would love to navigate
to their boat page. So if I wanted a link that would navigate there
and I'm just going to put that link up top
because that's usually where the navbar quote
unquote to go anyway. So that link to allow it to
go to that bullets or speech, I'll see age ref is equal
to a boat dot HTML. And that's really
all it takes, right? I just need to put in AS tool the file that
I want to navigate to. Notice there's still
nothing on the page. Why? Because I didn't
give it the content. What goes in between the open and the close
is the contents. So I'm going to say a boat bus and then we can get are
linked at Ibotta speech. And when we click
it sure enough, we land on our app
bolt of speech. So that's this hole. You can link one
page to another. All right, So when we come back, what we're going to be
doing is looking at a few other value added tags
like how to get an image and how to get to a
list in and hold to start sitting up
forms. So stay tuned.
4. Explore More HTML Tags - Images, Forms and Lists: Welcome back guys. We're continuing on learning
about the basic HTML tags. Know, what we're going
to do is take a look at how we can get an image
into our project. So we're going to do that
with the about page, since it does much less
content and index page. So to get an image, I'm just going to
jump over to one of my favorite websites that
use, which is pixabay.com. So they have beautiful
stock photos for free. All right, so let's just grab
the first one that we see. You may not be
seeing the flower, but the concepts are means regardless of the image
that we're using, Free Download and download. Fairly small size. So let's go ahead
and hit Download. And when you get the file, you'll notice that it goes okay, goes to your downloads folder or wherever downloaded files will
default on your computer. However, once again, when
you're building a website, you want all of your assets, all of the files related
to the website in the same folder and the same
location for ease of access. Because like you saw when we were creating the age
ref for the anchor tag, it was as easy as just
seeing the name of the page. And if the spandrel is
not in the same folder, then I would have
to fully qualify it out after colon slash, whichever folder slash,
whichever folder slash whichever your downloads folder
is far away from where your website folder
might be art. So putting them on the DCM roof, so to speak, is your best
bet at having it easy. So you can go ahead and find that image on
your file system. You can copy it as in
drag and drop it from that folder into your
Visual Studio code. And it will
automatically go into that folder with all
of your web assets. Alright, so you can
go ahead and do that. And one thing I want to
point out before we move forward is you may
get one image name. But then that image name
might get complicated because when you have to type it told image and up
into type Watson, Florida dash dot alphanumeric
or whatever code, dot JPEG. So you always want to try and rename your files to something simple or something very indicative so that you
can pick it up easily. So I'm just going to
rename this takeoff all those numbers and call
it sunflower dot JPEG. Extensions are very important if it's P&G, don't change it. If it's JPEG, don't change it. If it's GIF, don't change it. Whatever you name, it
always returns a routine, that dot and what could
ever literacy the dots. Alright, so sunflower dot JPEG, or JPEG is what they call
that combination of letters. Know that we have
our sunflower image inside of our folder
and ready for use. You can go to your page and then you can just use what
you call an IMG tag. This tag is special because unlike the other tags,
it is self-closing. It doesn't have open
IMG and close IMG. Body opens and closes,
opens and closes. Ischemic. Does that H1, all the ones that
we've looked at up until this point,
open and close. However, IMG is self-closing. Now how do we tell the IMG
what image it should display? Well, we use attributes. So the first attributes, and probably the most
important one is the SRC. Src says, Where's
the source? Alright? So the source of
the image would be, and it would be the
path of the image. So a boat is right
besides on floor, so the source is
sunflower, right? I didn't notice
Visual Studio code actually will make the
suggestion that all you're trying to get the slum
floor press Enter and it will automatically
do that for you on live server is watching live server will
be nice and easy. Now if you wanted to
adjust the size of this, you can always just see was another attribute called width. So you could reduce that 200, you could increase it to 900. Well, of course he
wanted to be very careful with this because the image we got was on this
64 to buy something pixels. So I wouldn't want to increase
the width to more than the imagery is because then
it starts getting pixelated. So that's one thing
to bear in mind. When choosing images
for different purposes, make sure that they are big enough for the section
that you want them in. Or if they're going to go into a smaller section is buts
it's called impressive to that particular size
so that it takes up less space on your
hard disk overall, and it takes less time to load
the assets for a website. Imagine trying to load this B3 megabyte file that is really just going to be displaying
a 200 widths, right? When if you compressed it, then it would probably
be a 200 kilobyte file. You're upset with Lord Foster. Know, just like with the width, you can also adjust
the height and you can have some fun with this one. There's not much more I can say about it is you can
just have some fun. You play around with the
dimensions if you need. So you'll find different
images and try to put them in, line them up accordingly. But that's how you
get an image in. Once again, that is
a self closing tag. There are several of these. Then some of them you won't ever use until you have two soul. I mean, not mentioned that, no, but know that they're there. And even though I cannot
teach you ever single tag, it's I wouldn't see
it's possible to teach every single tag on every single scenario in which they're used. I would just encourage you
to experiment and practice, and that's all you
will really develop your web development skills. Now the next time that we
want to look at, well, it's really two tags are
kind of go hand in hand because they do very similar
things would be lists? No. You would be familiar
with lists if you use Microsoft Word and he wanted a bullet point list
or you wanted 123, any form of listing, you can accomplish that with
HTML and its participants. You just have the UL tag, which is short for
unordered list. And an unordered list will
always have a list item, one or many list items. No, nothing should go inside of this UL tag except
our list item tag. After you put in
the list item tag, then you can go crazy with
what you want to again, put in a p tag, right? List, item one. You could put in
another type of tie. You could put it on H
something target, right? You could put in an age five
towel if you wanted to. Any kind of type can go, but you'd never want to put that h5 tag directly
in that list, in that UL tag rhabdo because
look at the different snow, that bullet goes away and then I'm sure it's
going to Crayola, it's about something else. So like I said, it may not tell you in the edit terrible
at that mistakes. Mostly it will definitely
manifest in the display. Alright, so you just want
to follow the rules. Ally UL, sorry, open
the unordered list, then you start with
the list item and then you put what you
want in the list item. So p tag, age 59, put an image in
the list item tag. It really doesn't matter. All right, so then
we just want to know the other version of
the list would be the, OH, which would be
the ordered list. So when we want 1, 2, 3, there we go. Then we see OLC. You see that these two
are really identical. They're like very close
cousins, right? You will. And oil, they both have the
same structure inside it. Both dig list items and then whatever you need goes inside
of that list item tag. Know. And let's take a look at
the next major ticket item, which is form. So what I'm going to do
creates a new document, and this one is going to be
called contact dot HTML. Contacts dot HTML. I'm going to set off the
same structure by noaa. Hope you would have practiced
a 10-year familiar with it, head and the body
at this point also, I sincerely apologize
that I forgot to mention that you need to save your document
with each change. I guess you've figured it out. I know, but I this was an oversight on
my part. I apologize. But you need to see whatever changes you're making before a live server will
pick adult and old. One thing that I've done because I don't always remember
to see if I'm like, oh, no, I haven't mentioned
that you need to save. It's because I had
enabled autosave. So in Visual Studio Code, they allow you to say autosave. So whatever changes you
make will be reflected, which is why my live
server is always updating because it's always
automatically saving in the bug-prone. So I apologize for failing
to mention that before null. However, let us move ahead. So inside of our contact
page we have the title. So this is fun tomatoes. And then in the body
I'm going to put an H1 tag that says font ductus, so that anybody who lands on this page knows which
page they're on right? Now, usually a contact
form has well, form, a contact of
speech has off-farm. So let's also look at how we formulate forms and
forms are really easy. But I must mentioned that
forms are the gateway between a user and
your internal systems. Because every time a user
types something in or enter something in the form
and then click Submit. They're actually sending
over d Theta to your system. So later on when you get
to a higher level of development and building
on top of databases, building web interfaces
on top of a database. And like when we're doing
ASP.net core development, then we will look at certain
security features that we need to make sure we
embed our systems. However, for now,
let's just move ahead. So to get TO form, we have the form tag, right? And I said simple,
straightforward enough. So let me just type
that appropriately. Form. No, form has three types
of tags that he can take. Let's just say liberally are at least four types
of targets, right? We have what we call the label. Label is important
because it tells us or allows us to see. Field is about to be edited. Let me get my spelling right. And notice I'm trying
to do everything in lowercase, right? The labels is what fields, so this would be FirstName, that's my label, right? Then I'm going to say
what control I want to accept the first name and I'll what control would be
best if you said text box, then you're right on the money because usually when you're typing in your name, it's text. And you get a box that allows you to enter
text. So it's a textbox. So you're probably
thinking, Okay, so there's a text box Doug
know takes there is different. You have an input tag. All right. Which is also self-closing. Know the input takes
attributes that helps it to define our noise identity. So I would say type
is equal to 0. And then here we
see the whole list of types of inputs, right? So starting from the top, it can be a checkbox colored, did all of these
wonderful things. But right now for
the first name, the one that is most suitable
would be the textbox. So type equals text. All right, I going to
show you another thing. Remember I mentioned
earlier the ID attribute. This is a special name
that we give to that tag. Well, if I see fname, then that allows me to use
this label and C label for. And then I give it the same F9. All right? And although important attribute that goes with input tags, especially when
you're dealing with server-side code is the name. So you would say name equals. And if name, so the name is very
important for when you're going to be putting on the
intelligence using Python, PHP, C-sharp, like we're going to be
doing with dotnet Core. It allows that language
to actually see the value coming from that particular,
that particular control. So we have the form
wherever label, we have a text box. So FirstName, that's done. We can do email address. So let, let's see in
just the full name instead of first names
is also an fname. Fname can be full name, right? This one, Let's see, email. So I want the email
address of the user who is trying to contactus
email address. And then I'm going to see type
is equal to lo and behold, there's an email
type, the IDs email. So I'm just calling
these e-mail. I could have fully qualified
its onset email address and the ID and the name don't necessarily have to
be the same thing. All right. So I'm just playing
around a little bit here. Let me expand this
vacancy the code fully. Alright, so we have
our full name, we have our email address. What else do we need
on our contact form? Let's say you needed the query. So once again, more of this label and I'm going to call it query or complaint,
whatever it is. And the labor is
going to say query. Know the query would be what would be the
paragraph seeing? I am disgruntled
because of this. This is why I'm contacting. You want to allow them
to read the essay that they came here to,
right anyway, read. So that is where you're
going to see it text area, because it takes area gives you a much bigger space to write, takes in, so that
takes the arrow. And then once again,
we don't need type because they're already
know it's that takes area. But we can give it an ID
and I will just say query. And once again, we
want to give it the name so that
we can see query. All right, now let's take a quick look at all of
our hard work so far. So what I'm going to do, go back to index and
creates another URL. And this one I'm going to call contact dot HTML. And it's fun. Talk to us. No good rule of
thumb with website design and website because
there are multiple documents, multiple pages, you want
to be able to get from any page to any page from
any other pH, right? So what you would
have to do is one, add a new anchor tag that
references the homepage. Alright, So yes, it's
the homepage referencing the homepage just like all you would be on the homepage
of our websites. You login it. Grayscale just brings you back to the homepage. It didn't go anywhere, right? So we have that link
to the homepage, but then we can
copy this section. All right, I don't
want to do is just use a var or what we'll call
it up pipe in-between. So if you're using
western keyboard, then that will be shift
on the backslash, which is usually above
the Enter button that gives you this pipe, right? So that separate in
the anchor tags. And then I'm going to
put these anchor tags on every single page, right? So both the content, seeing what page I'm on. I have this makeshift
navigation by that with eloping to move between
the pages. See that? So that's how these
concepts come together for hip
decide design, right? Little by little, you see
how it all interconnects node and that node
that's I've settled this navigation
between the pages. If I refresh or go
back to navigate, I'll see that if I click
Home, I'm on the whole, but look at that, I can get up to whom I can get
to that maltose. I can go back to home, I can go to Contact Us, look at that, then I can
go back to a boat as well. Let's focus on a
contact us right now. So we have our
textbooks That's cool. Look at that, takes boxes and then we
can write our query. That's good, but I'm not quite satisfied with the
layout and I'm sure you're not either because I'm sure
you're not used to seeing contact those forms all
going in one line like that. Alright? So what we would want to do is setup a break in
between them, right? So to get up Brick
New TAG alert, we have the BR self-closing tag. Br just means BreakLine, right? You just represent summary. So that will be
like when you press Enter in Microsoft Word, you know, you're typing, typing, typing, you'll want to
go to the next line. You press Enter, you type again. So BR is what will
allow you to put brick brake line between blocks
of content on your page. Note though, on the index page that we didn't
have to break when we did the H1 and
the p's because they kind of come with their
own braking mechanism. So inside of a P tag, if I wanted to have
a block of text, then another block of text, but inside the same p tag, then I could just
inject that BR tag. And I'm going to show
you that quickly. So let's say I have, this is my first webpage. I can know say this is what
I want in the new line. Not as I've said that if I
go back to my index page, notice it's all in there. The line, if I pressed
Enter stint in the Pieta, here's a P tag open and close. And let's put three
spaces for spaces in between them and I go
back, no change, right? It's still going in one eye. And so that is why we
need that break time to then tell it to go to the next line and as
many breaks as we put, as many lines as
he will introduce, but we're still in the scene. P tag. All right, so that is
hold this break tag really works for us
in these situations. So back to our Contact Us form. We have said full name
and your full name. Give me a brief then next label. Enter what you need to enter, give Maverick, and then Enter. What do you need
to enter? So then our Contact Us page
looks like this. No. Well, there are different
interpretations of what forms can look like. I am still not satisfied
with this one. I don't want my labels and my text boxes are my controls
in the same line either. So guess what I can do. Introduce a break. See, nice and simple. So label, give me a new line, then give me the text box, give me a new line, then give me the next level
and you land that, right. So by doing that, there we go, That looks up much
better looking form. That's a much
better looking form than what we had just null. And if we want more space, we just break line
twice in-between. So full name and then we get some daylight in between
them. There we go. All right. We can good read. So the next thing now
would be a button. If you were looking
on and they said, okay, well, where's the button? That's good. You'd need a button
called Solis. Are they going to submit? They need a submit button. So on the all of this, I can just put two more
bricks and then I can see input type is submit. All right, then I can
say volume is equal to, and then this allows
me to dictate what I want to be
printed on the book so I can say submit your query and write it as verbose as you need to be in the moment It's self-closing. So slash and the go bracket and there we
go, submit your query. Know every form has what
you call an action. So I'm sure more stands when you fill out a
form and click Submit, it usually goes to another page. Would usually either it
does one of two things. Sorry. It will either tell you the form you submitted
is invalid because the data doesn't meet
certain requirements or it will go to
another page until the data has been
saved successfully. So I can say form oxygen is equal to and then I
can give it up page. So if I said farm auction
is equal to index.html, that means it will go to the index page after
it has been submitted. Anywhere that's I've put here is where it
would navigate tool. So if I say submit your query, notice that it just navigated. We usually wouldn't be the index page layout
would be like. Success, PJ or something that had
to say successfully saved. But then I have no
sorts of speech. So I'm getting what's
called a 40 for arrow. And it's seeing
cannot get the page. Notice also that the names
of the controls that I had added to the form are
listed there in the URL. So this is what you call
a query string, right? So if you go on
Google or YouTube and you type in cute kittens, I'm sure what
you're going to see is youtube.com slash search. With that question mark. Then maybe search equals our search query equals
whatever it is you typed in. So that's all that
is really doing, even if that is a form. Alright? So forms are everywhere every time you type in information
and click a button, you submitted a form. So just as a test, I'm just going to put
in somebody's name, submit the query
and see if name is equal to the name
I just entered. E-mail address is equal to the email address I just
entered on queries blank. I didn't enter a
query. Well, I'm just showing you what happens. So that is hold those
server-side languages. No, can say get me this variable and whatever
value was possible for it. All of that is sent over
every time you submit a form. So let me just go
back and set up the success page for
our form submission. So I'm just going
to say new file. So another way to
create a new fad is to right-click in the Explorer. So if I right-click, I get the same option to create a
new file or a new folder. So I'm going to say new file, I don't want to see
success dot HTML and then subsetss dot HTML. Once again, I want
it to be able to navigate to wherever on my site. So I'm going to give it
the same HTML skeleton. And at this stage, we've written the
skeleton a few times. So Visual Studio Code, once again, being the
productivity tool it is, allows us to just say HTML colon five and look at what
it generates for us. So we're seeing a bit more
then where you will still, but don't get discouraged
by that because it is very, very, very convenient, right? So we still see our doctype, we still get our HTML tag. I'll be no has an
attribute where it tells the browser what language the website
is going to be in. We get some Meta tags which
we will look at later on. So as almost all FADH, these are destruction or analog,
just delete them. And then we do get the
title and the body. So the title here
would be success. And in the body, I'm going to put in
the navbar links, quote unquote navbar links, so that we can navigate to
for where we want to go. Give it the H1 tag
to see you have successfully or
your data has been seen as sinful, has been saved. All right, so let us try
out our form once again. So I'm going to put in that, and this is my query. Submit, your data
has been saved. So know our success is
working on once again, if you look in the query string, you'll see the query with the data that was
submitted. From here. I can choose to go about comb. I can choose to go to Amazon, I can choose to go all over. So you see, forms are really
not that complicated either. There are many types of form
controls that you can use. You can go ahead and explore, just put in type, and they can look at what you get for each of these types. I've just shown you that
the most common ones. But you can get
telephone number, you can get search range, password, all sorts
of control types. So I encourage you go ahead
and create a forum for more complex reason
and experiment with the different control
types that there are.
5. Even More HTML Tags - Tables, Comments and Inline Styles: Hey guys, welcome back. So we're still looking
at HTML and some of the more popular
or most used tags. And next up is tables. So tables can be a
bit complicated. It and forms are usually
the most complicated ones, but that's why we're
here to break down those barriers in our knowledge. So let's take a look at what tables are and we'll be using the boats dot HTML
page to do that. So I'm just going to cuddle up. So in Visual Studio Code, if you hover over the buttons, you see carrots and then
you can actually just click on collapse tugs. See that. So let us start on that. So it's a start the table. Yes, you guessed it. We have open and close table. That's his article. No, a table is think of like an Excel spreadsheet
or I'm sure you're used to what a table
is on a piece of paper if you have
rows and columns. Now let us conceptualize it that firstly it starts
off with our role. So inside of the table, no other content goes in. But for a TR, which is short for table, role. Alright, role of
cells in a table. No, I roll has columns or I prefer to call
themselves modes is that they also call themselves. Why are they called cells? Because they're literally
individual units. They're not necessarily
the columns that go all the way down. Role has cells. So you're just putting a cell or TB or table data
in the role says many cells or as you would probably cleanse
it to analyze them columns as you're going to
have you put as many td tags. So if I was going to be a
listing or maybe the name, age, and let's say date of birth of several people off
the members of staff for with our company, a boat whom this
page is dedicated, write a bullet of speech. So we're listing all
the staff members. So let me let me quantify
this and put it in maybe an h3 tag that says
stuff member details. All right. So staff member details, Let's say we had a TR and then what you'd
want to do is give a heading for the data
that will be below. So instead of td, we're going to
start off with th. Th is short for
table header, right? Because usually you
have one rule that says what each
column represents. A name, FirstName,
lastname, age of birth. Well table so that when
you're on the fifth column, you remember, Oh, that's
what this represents, right? So we're going to have a name. We're going to have, let's say something simple, image and staff ID. Alright, so that is our table, that is our first roll, and that is the set of columns for all of the cells that
will be in the other rows. So that's role one for the second rule or the
actual staff member, I just have another
TR then open td and then the name here
would be lewis felt on. All right. What's I'll do is
just use control CV, that little shortcut
to duplicate lines. Lewis is is 29 and
his staff ID is 77. Something are and all
that stuff. Remember? So as many staff members, as many rows as money
sells off data, I can just continue copying and pasting and just
changing on the data. Now obviously this
is not very dynamic, especially if this
nato should be coming from the employee database. So when we get to
using it dotnet Core, we look at how exactly we will automate that
whole generation. What foreign? Oh, it's very money. Well,
so let us just have Hannah, How Milton and this issue is 32, and her stuff ID
would be tool 234. All right. Let's take a look
at our about page so I can just right-click and
say Open With Live Server. And there it comes up and
there's our table down below. So what I wanted to do
is kind of comment out everything else that is not directly related
to this activity. So it's a doc comment. And commenting means
the code stays, but it will ignore it when
we talk about commenting. So to do a comment in HTML, all right, open
the angle bracket. I use the exclamation sane, and I have two dashes and a notice that it kind of
completed that for me. So whatever goes inside this
arrow, which Visual Studio? Is depicting as green
text will be ignored. So even if I refresh, you will not see all of that gibberish being rendered
on the beach, right? So that means if I want to
have a bit of code ignored, all have to do is open
the comment and then you see it's putting all
of this in green. And then I'll close the comment at the point where I
wanted to be ignored. So all of this is No comment
which I can just collapse. I, when I refresh,
you see all of that is ignored,
the image is gone, the lists are gone
only the H1 tag, the comment, and the h3 tag and Company below the comments. All right, so that's his, What's our table looks like? Not very attractive, but hey, so we have name, we have age, we have staff ID. That's the header rule, right? And then this is so, so, so, so, so, and so. Alright, so the table
can use some steady, can use some beautification. What are the most basic level? That is how you create a table? No, I did mention styling and in the introduction you don't
remember that I mentioned CSS. So CSS is short for
Cascading Style Sheets. And anytime we want
our HTML to look up, particularly we employ
the services of CSS. So when I said that
the table needed some amount of styling, it means that I can add
CSS to the documents so that I can determine what
the table should look like. So this is a good segue to
introduce standing butt. Then we're just going
to look at it at a very basic level and then come back and look at
it more in depth. So to style the table, the first thing I'm
going to do is add an attribute called
style, right? No, the syntax that goes into this attribute is such that you have the first thing
typing is a selector, and then you have a colon
and then the above values, so I call them
selector value peers. So the selector is, what do you want to change? What a boat this toggle
you want to change, they want to plot,
change the color. You want to change
the background color. Do you want to change the border so you can see all of these are selectors that are potential
things that we could change. Not all of them are
applicable because I wouldn't really
change the let's see. I wouldn't really changed the trying to find
something about that table. I probably wouldn't change. But I wouldn't change a
font size of our table. Right? I would more change
a font-size off a p tag or something that is
holding texts, right? But I wouldn't
change necessarily the font-size off the table tag. That's where the
selected that you use is relative to the
tag that you're using. So I wanted to change, see
the width of the table. Then I give it a value. I can say 100%, which means I want this table to stretch as far across
the page as possible. So let's take a
look back at this. And then we see here that that's what that
looks like, right? So name is centered, so the th tag automatically
goes to the center. But then if you
take a good look, this is where the content
for that name so starts, this is where this one starts, this is where that one site. So if I wanted everything
center aligned, I could also put in a style that says
center align the text. So I could say stat is
equal to width 100%. Then it went on multiple after, make sure I separate
them via semicolon. So could also say
text align center. And so I'm telling you align all the text in the
table center, right? So I'm just showing you
that whole CSS works whenever we want to modify how something looks on the page, we start off with that stat. Ok, So when we come back, we will look more in depth. I told the style
tag allows us to dictate the look and
feel of our pages.
6. Introduction to CSS - Inline and Internal and External Stylesheets: So in the last lesson,
we're looking at CSS and how it works. And we saw that
the simplest width apply CSS is using
the style attribute. So we're going to play
around with our index page and explore whole
attributes helps us to style the different
blocks of texts or different areas or
different elements however you want
to think about it, but we can target
them individually. So going back to our code, we can see that on the
index page we have all of these are header tags. And what if I wanted
the H1 tag to be red? So I can easily
say style is equal to the sermon boast style is equal to, that's our attributes. Then we say, what is it, a boat, this element we
would like to select. I would like to select
the color, then a colon, and then I would like to
change this color to red. So with CSS, you can actually type in the
name of certain colors, but I don't think they
have every single color, every single shade by name. So you see mauve, mauve
wasn't an option, right? So if you know the color by
name and it's a simple color, you can type it in red, fine. But then generally speaking, what you would use is
hexadecimal or RGB. So RGB is short for
red, green, and blue. So you'd put home much between 0 to 255 of each one you want. So I want 255 red, 0 green, and 0 blue. All right, see, it tells
me that it's rare. Also using Visual Studio Code, you get this color picker. So what I typed in the word
red or I typed into RGB. Once it detects the color, you can get that color picker. And if it's still not
quite the shade you want, you can always just drag
it and you see that RGB value changing accordingly. All right, so if I wanted to tie that shade offered,
then that's the RGB. So red is red, that would've been 255 0, 0. But then for the
different shades, you can be very specific
using your RGB values. So I'm going to leave
this one using RGB. I'm going to change the
h3 to be style color is, let's try a simple
color, blue, all right? And then the other way
that you can actually get a color is using what
you call hexadecimal. So you'd say a hashtag, and then you have an
alphanumeric combination of characters. So alphanumeric mean that you
can choose between 0 and 9, and you can choose between
a to F in the letters. All right, so, and then
you have six of them. So I can see like 000, I'm just be a random
with this blurriness. I don't know what I'm
going to get artsy. I'm getting a shade
of green here, right? 000 F6 1D gives me
the shade of green. Once again, if you
don't like it, you can always change, but then Visual Studio code will
always, oh, there it is. It's retaining the hexadecimal. So if you start with hex, it will over T In hex actually thought he was
going to change it. So the RGB, so look at that. I'm learning too. All right, so if you select and you can move our own and so you
get to your hex. You can use your word
and you can use RGB. Now with all that done, I went to save, once again what I
have on all to see if so does make sure you
save your changes. And then when you jump
over to your page, you're going to see
the different colors. Hello world, hello
world, and hello world. All right, so that's whole
CSS allows it to style. What do you want your
HTML to look like? So if I wanted to change the
font after the semicolon, I could put in another selector, which would be fun. Let's say font-style. So you have font. What
font allows you to put in all of these individual ones? Personally, I don't
like using fonts because you have to be very specific with where
you put what values. So instead, I like to be
very specific and to see I make exactly selecting
the font style. And then I can say italic, but that's an author really
wanted, I wanted font. Family. There we go to change
the actual font. So you're familiar with some of these fonts from Microsoft Word. And some of them you may
not necessarily know, but you'll notice that it's
kind of batching them. So this is seeing choose RL. If IRL isn't on
the system that is loading the page, then
choose Helvetica. If that's not on the page, then default a sensor which 90, It's often machines must
have anyway, right? So that's pretty much what
that font family looks like. As you can see. I'm just
chaining them along. So selector colon value. Then I want another
selector semicolon. Then select Oregon and
value semicolon again. And in some Selectors can take multiple comma separated values. All right, so when I do
all of that and look back, you see this is no an italicized arial helloworld, which is good. So you can add as many styles to the same element as you
need in the situation. So this is what we call
inline CSS, right? Because it's inline, it's inline in the line of the actual TAG. Now the problem with
inline CSS is that it is limited in what it can do. Meaning, what if I wanted all the header tags to
have this kind of style? Now what I would have
to do is take all of this and paste it here, and then take it and paste
it here and paste it here. And everywhere that I
wanted to have to paste it. I'm not seems simple enough. A little copy and paste. All right. Fine. And everybody
though it looks uniform, but then what if your client
came back and said, oh, I want it, I don't want
it that shade off for it. I wanted another
shade off for it. So no, I have to go and find the shadow for
it with one of them. Let's say it's a lighter
it or more pink. Right? Or whatever
color that is? No, after change that everywhere that I
copied and pasted it. So while it may seem simple
because it's only six, is if it was 20 places, if you was across multiple
pages on the whole website, it would be very inefficient
now to try and goal, copy and paste
every single place. All right, so that's is the
limitation of the inline CSS. So the solution to this would be you're going to use
internal style sheets. So an internal style sheets
would go in the head area off a page and then it would dictate the CSS styles for
the entire peach. So let's take a look at
what that looks like. 1, we have a static shot, so it's in the head section
and we open and close style. Inside lifestyle. What we're going to
do is tell it which tags are tags we want to target. So I'm going to
start off simple. I'm not going to
trouble the styles.css. I'm going to say p tags. I want all p tags on my page to have the color
purple for, for instance. So we have two p tags, right? As we would've seen if
we're using inland out, I've had to take the style, paste it in this p tag
and paste in this p tag. And for every other
P tag on the page, we just discuss why
that's inefficient. So what I can do inside of the internal style sheet is C p, meaning I want to target
the PTHrP element. Then I'm going to open
and close curly braces. All right, so then it seeing, okay, Clearly here selector
is targeting the p tag. That's what visual Studio
Code is letting us know, but we shouldn't have
any empty rule sets, which is why you see
that is to the nine. So it's trying to tell you, hey, if you're not
willing to read CSS, where don't declare any
elements section for it, right? But we're going to write CSS. So I'm going to say all p tags, I want you to have the color and I went to
keep it simple, purple. All right. Notice nine is gone away. And if I go back to the page, then I'm not sure
what just happened. That's a refreshed to get
to Mach, but that's fine. Here we go. This is
my first web page. Now notice this is a p tag and this is a p tag
and they're both purple. All from me writing had one place what I
want for my P tags. All right, so if I wanted all
p tags, the italic style, It's the same format to have the selector and we have
the value semicolon. And then flare
readability Candace duty in the different lines. So instead of trying to read it right there,
cross nifty, right? Like it is depicted here, which I it was confusing
for me, right? It gets confusing for me each intermediate right across that, that this is far more readable. Alright, so all Beatles, I want purple and italic. There we go. So with very
little effort I just made ever p tag on this page,
purple and diatonic. So let's transfer that kind
of markup null to our tags. So we have six H dogs and I want all of them
to have the same style. All right, all of them need
to have the same thing. So the cool thing about this
is I can chain tags along. So I can see H1, H2, H3, H4 have 456 open and
closed curly brace. And then guess what? I can put all of this styling. I don't need the
quotation marks, so I just take this as the call, the values select appears. And I'll just put them in their respective
lines from remote, in the line with a semicolon. So I can actually
remove these style attributes from
all of these tags. And then you'll
notice that UP it starts looking much neater. It's much more maintainable. And when you look back, it was very effective. So all the edge dogs and
all share the same style. And the thing is
that even if you want something special
for one of the htdocs, Let's say all of them
should have a font family, but you only want
to H1 tag to me. Oh sorry. All of them should have the
same color and font family, but it's only the
H1 tags, italic. You can always, after you
specify for the entire family, you can always go back and
say each one by yourself. I want you to have that. Alright? So when you go back, you're going to see
that everybody is the same color and
the font family, but only one is italicized. So that's what CSS
brings to the table. That's what internal stylesheets
brings to the table. And know the cool thing is
that if you need to share these styles across
multiple pages, right? Because let's say everywhere on every one of four pages so
far we have an image tag, we have some form of header. Todd. All right, and we have P tags all over the place and
all of those things. You want all of these pages to have the same styling rules, which is very important for
consistency because most, if not all websites you go on, you'd notice that there's
always a common theme between the text and how it's displayed on every single beat. So that's what we
call a template that is only accomplished by making sure the CSS is
consistent across every beach. Novel. If we wanted that, we could easily use
this style area and just paste it in the
head off every pij, right? So contact a boat success and index NOL have
the same styling. So if I navigate
across them all, every h tag is going
to look the same. All right? Everything is consistent, right? And if I put P tags
anywhere else, they're all going
to look this way. Now this brings up another
inefficiency, right? What happens when you have 20
pages and the client says, I had no longer want the
H1 tag to be Ayatollah's. I probably want it. Let's try, I'm going
to try something else. I'm going to say text,
decoration is underlined. All right, so onto success
speech, I changed it. I want it done every page. That means no after this. And you see we're going through the same kind of copy
and paste held that we just tried to promote off when we did our internal
style sheet dread. So now I have to copy
and paste this across every single page that
needs to have this style. And that once again,
is inefficient. It works. But it is not very efficient in terms of maintenance
because if I miss a page, then I went off to go back
through and try and fix that. So then we bring up the
next way that we do CSS, which is external style sheets. So external style sheets means
that we're going to have a file baby created all the CSS, but it will not live
inside the HTML file. We'll just make a
reference tweets. So let's look at that. So in our Explorer, we're going to have a new file, and I'm going to
call it styles.css. It doesn't really
matter what you name the file as some people
call it its site dot CSS. Some people call it
CSS styles that CSS, it doesn't really
matter as long as you end it with dot CSS. That's our new file
extension, right? So styles.css. And then what we're going to do, let me just increase
the interface a bit. What we're going to
do in styles.css is labeled all of our CSS code. All right, so in styles.css, we're actually put in the
quotes are p tags are tags. All of the CSS styling
that would have had on every page from the internal. So that syntax looks the
same way as the internal, except it's knowing
its own file. So that means index no longer has the styling because
if I go back to index, everything is gone
back to normal. Now that I have It's all
in a dedicated file, what I need to do
is make idling. And I'm going to tell it the link rel is equal
to style sheet. And then a trip would be, where do I find the statute that we've seen that before
with the anchor tag, all we have to do because
they're on the same level. We just need to see hf is
equal to the file names. So the filename
here is styles.css, and then this is a
self-closing tag. After doing all of that, we refresh and look at that. No order is restored
the universe. All right, so we can now repeat this feat across all of the other pages that
got internal style sheets, I'm winds are removed
from deadbolt. I'm going to remove it
from the from the contact. And I went to remove
it from success. All right. So I'm just doing that to
show you when I navigate to a bolt us everything you know, and I tell it to make a
reference to this data sheet, it gets bucket styles. When I go to contact us, contact doses spleen, I tell it make reference
to the style sheet. Everything is in
looking uniform, right? Not the most elegant
website and you'll see it. But at least we see how the
uniformity plays a huge part. Alright? So that is how we can know me. Our styles are a bit more
global because with one line, we can access everything
inside of this file, which has far more styles
than one. Alright? So that is whole
CSS really works. And I, to make a
video showing you every single possibility of a selector value peer
would be near impossible. There are so many and they're useful various things and
sometimes can use them. Some tags cannot. The only way to really
get comfortable. I wouldn't say a mastered because I've been doing this for years and I still have not
quote unquote, mastered it. What I am comfortable because I have subdominant have
explored, right? I've explored what
selectors are there. And with a tool like Visual
Studio Code assessments in the list them all to you
can explore and see. Okay, so if I see index, what are the values? I can try all two. I can try this. I can try that. See what it looks like.
No, if I need to use its R naught and then
nothing beats researching. When you have a
particular vision, you can always research. You'll always find material
to help you with that vision. So that is a very
quick introduction to CSS and how it works. All right, So when we come back, we're going to look a bit
more at whole weekend. Use CSS to target particular
parts of her website. Meaning, if I have H1 tags, but up particularly H1 tag, I wanted to have a
particular look and feel than I can actually
targeted in a specific way. So we'll be looking at
that when we come back.
7. More Advanced CSS - Classes, Tags and ID Selectors: All right, so the
last time we're here, we're looking at how CSS works. We got a nice quick introduction to its overall look and feel. And like I said, it's
almost impossible to teach everything about CSS
in a few videos, but you have to explore and I hope you have
been doing that. So let's us move on. No. And in this lesson
we're going to be doing well two things. One, we're going to
be looking at how we can target particular tags. And we want to see, yes, we have P tags, but I don't want every single petabytes
of it this way. I want up particular p tag
or a particular element. I have this look and feel. And we'll also be looking at whole weekend actually
style our table because we with the width 100
and text-align center, but there's nothing
really there to see. It's a table there, no
grid lines which are main characteristic of what
the table should look like. So we see the default
table is kind of anemic in its display and we'd want to make it look like what
it should look like. So let's start off with how we target particular
tongues, right? So what we've done so far is to say that all
heterodox should have this color and all H1
tags should be underlined. Now what if I didn't necessarily want all H1 tags to
be underlined, right? So nikon, the index page I have, I have two dogs. One that says hello world. And I'm going to say
this is the index. Right? Now, let us say that
we have this H1 tag on this type of H1
tag on every page where we say what page we're on. So we could think of
this as a title, right? So that's our title
tags or any H1 tag, that is the title tag
that says the one that we want to have
particular attributes. The other H1 tags don't need
to have attributes, right? So let's say text is underlined. All right, let's leave it that
takes underlined for null. Or let's try and do
something else to say the wrong color of
anything that is a title tag should be broken. And let's see what
that will look like. So here we see this
would be the title tag. This is the index and
helloworld is not the title, so I don't want it to look
just like the title tag. Photos there it is. And I just realized I put that
target or wrong place. So let me move it down below our quote unquote
nav bar, right? So this is the index page. This is the title, let me say this is
the title. Each one. All right. So I want my title
H1 to look this way. Both the helloworld should not on any other H1 tags on
the page size is not, the title should
not look like that. So what I can do in my CSS file is instead of
just targeting H1 tags, I can target them by
name or ID rather. Or we can set what
we call our class. So I'm going to show
you by ID first. Then we looked at the concept of IDs when we're doing our form. And I showed you the
id fname, right? Every TEN, ten gets an ID. So I can easily see
in this H1 tag, your ID is title. Right? So the thing is that
no two elements on the same page should ever
have the same ID, right? Think of it like you wouldn't want to offer your
childrens of the same name. Pred you have twins, you're always going to
name two different names. You would want to need
twins the same name. So kind of treat IDEs like that. You don't want to elements on the same page to
have the same name. So I have title on
the contact page. That's fine. I can also
make it on the about page. That's also fine because
it's the only one here. But what I should
never do is have this one called title and another element called title on the same page. That's a no-no. All right, so now I have
this element called Title. I want to target
any element with the ID title to have a particular styles and
the style.css file, I can see hashtag or Poland
or a number sign over. You call it hashtag
title, right? So you see here
it's seeing element id equals that any element, each TAG, p tag, uncut image, whatever it is. Once it says ID equals title, it will be applying
this styling to it. So if I go back and look, I know see that
the title tag has the style and the other
one does not because I said I want only
the title to have that style a boat
us only the title, conductors, only the title. All right, so that's
one way that we can do that kind of targeting. Now given the limitation
with the ID equals title, and I think that modern
browsers may compensate for it. But just take my
advice once again, I'm being old-school coming
from the days when browsers did not help you and help
to cover up your mistakes. I am advising you do not make two elements have the
same ID on the same page. There are other repercussions, especially when dealing
with JavaScript, where you might,
you will run into problems if you have more than one elements with the same ID. Alright? So given that limitation, there might be times
when you need to. Blocks are two
different elements that have the same
kind of style, but you don't want
it across the board. So let's see. We have
multiple p tags. Beat 12345. Alright? So we have multiple p tags. What if I didn't
want all of them to be purple and italicized, right? I only wanted 135 to be purple and Ayatollah is what the risks of them
should look normal. So once again, I can always see all p tags should have
a particular stance. So I'm going to give
them all fun family. So every p tag on my page, I wanted to have the
font-family Arial, no problem. All of them should be RL. Cool. However, I want 135 to be
purple and italicized. All right, so I can actually create
what you call a class. So a class with is like
a reusable styles. So while the title
or using the ID is targeting the one
element or the gains, good practice the
few elements with the same ID value, right? When we talk about
classes where creating some abstract value
that can be spread across any kind of element
as many times as needed. So I'm going to create a
class here where I see dot. Let's say in for me Sean. All right, so the dot means its subclass and inflammation
is the name of the class. And if you hover, you see element and it will say
class equals information. So any element I want to apply that to all
aftertaste grass equals inflammation as the
attributes in there, right? So information class, I
wanted to have color, purple. And the texts. It wasn't text
decoration, it was not, it was font-style to
be italic, right? So you see even sometimes
have to second guess, you won't memorize them all but your field get
comfortable, right? So information should have
color, purple and font-style. Know if you look through nothing has the, those styles applied. Not that tugs does, not the anchor tags and know that those ones there
keep it changed color, but nothing here has
that class applied. But if I want to
use this glass on a particular or on
particular tags, all have to do is go and say that tag class
equals information. I wanted to it, it's
on 1, 3, and 5. Know when I go back,
you see here 1, 3 and 5 have the, you know, the class or the styles applied
directly to them. So that's the power
of the class, right? So I can create
know, any styles, give them a class, but I can put them on
the particular elements. Once again, it doesn't always apply to every single element because if I put that
say on the IMG tag, so let me uncomment the IMG. So I'll quick we
are to uncomment is Control and forward slash. So I'm just going to All of this control forward slash
on it come in, right? So control forward slash will comment on uncommon for you. Alright, so let us
say I tried to put that class on the IMG tag. There's nothing in this
class that would really affect the display of
the flower, right? So even though the
class is there, if I go here, there's nothing
going to be different. And both the flower
because it doesn't have to show a color on, right? And it doesn't have any
takes to be italicized. So though you may
create the class, I mean can be used anywhere. It's not willing to always
have our mixins ever in any. We're however, if
you have a bunch of pictures and then
you wanted to apply the style to a particular
set of features may be an art gallery and not
every single picture on your website. So you wouldn't want to
apply to the IMG tag. But particular peak chose
maybe display pictures, then you could always create a style or create that
trust or that I'm Windsor, call it a DP for
display picture. And then let's see, the width of the display
pictures should be 300, and I'm going to use pixels. And the height should be 200 pixels are all
display pictures should have these dimensions. Then I can go over to my image and I can
see your class is dp. So when I go back, That's what that
image looks like. And then for as many
images as I want to have, they're all going to look
like display pictures, right? Because they all took DP. So if I got 50, the image is unused here. And old problem, the
fact is that they're all going to reuse that class. So you see it's
nice and reusable. Of course, that class
wouldn't apply to something that's text-based red. So if I wanted this list item
to be crass in for me Sean. And if you, if you start
typing a 0 on top, you can always use Control and space and it will kind of
makes additions for you. So in formed chondrules
space mission entered fills it out for me. Then I'm going to see here that this item is no
shimmy information. All right, so that's really
all there is the CSS, as I said, you get
better with practice. So you just have to explore, try new things and
that's how you really get comfortable with it. Alright, so let's jump over
to the styling our table. Note that well a bit on the
stunning a whole weekend, target particular
elements so we can, you know, develop
specific styles that are reusable
across many elements. No, we're going to
kind of look at how we can nest our get into the part together elements
within elements, right? So a table is a perfect
way to demonstrate that because we've seen that it
does a hierarchy of tugs on. You have the table, then you have the TI at any
of the TAs and you have the T D. So yeah, you kinda have to
drill down into the table to kind of get certain things to
look a certain way. Alright? So I'm going to firstly remove this styling from the table. I'm going to return
it to its default. Look and feel no problem. Then let's say we're
going to give it an ID. So ID stuff, right? Style table stuff,
members, right? That's what we said was here. These are staff members. So we're in the CSS. I can target minus
staff member stable seeing hashtags staff table. All right. Let me just verify that
that's what I said. Stuff table. Good. Just making sure
to spinning is right. And the CSS is also
very case-sensitive. So you want to, if you use common case, retain common keys. But of course, as we've seen, lowercase heard SNL buddy. So just keep it all lowercase. So I wanted to stop table to
have won a font family of, let's try a different font
so we can see a difference. Courier New. Alright. I'm going to tell it barter. So it doesn't have
any borders, right? No. So let me let me not do
the barter one just yet. I'm going to also stretch
the width to 100. So I'm almost, almost redoing the styles that
I had initially, right? So we can see the
font has changed. It's no stretching
right across the page. And once again, let
me put in the text align center so that everything is centered, right,
looking good. See, all of that accomplished. Our own here. So if you have multiple tables, well then that's probably where you'd want to use that class. If you have multiple
tables on the same piece, I need to move those same way. You'd want to use a
class instead of the Id. Alright, so now
that we have that, I want to tell the TDS and a sermon what this
is the d Hn and this will be the TV
or the cell, right? So I wanted to each one That's
it should have a border. So now I want to settle
those grid lines. We're going to see staff
table or hashtag staff table. I want the TD inside of your
element as well as the th. So you see we're here,
we're combining and we're combining our previous concept
where it gets a new one, won work on many in the font. I can almost separate multiple
tags and share styles. Cool, we sought out
with a header tags. Know you're also seeing
that you can see, give me the parent element
and look inside and get me the elements inside
it off that type. Alright, so in other words, get me the staff
table and then get me the T-H diagram that is
inside of that table. So we have td tags OF THE styles inside of the table
called Staff table. So this is another
way of targeting specific color,
which 101 thread. And then inside
of that I'm going to say give me a border. So remember I mentioned
earlier that with font, you could specify
multiple values across the board border
is very similar. So I can say border. I wanted to one pixel width, a mostly solid, and it
must have the color. But I could also
have said border. Dash, width is one pixel. I could have said border
dash style is solid, and I could also say
border dash color. Is that right? So I'm just showing you that
there are certain elements. They can batch the values and there are certain
ones they can't break it sold like we saw with fund, font-family,
font-size, etc. So I wanted to have a border, one pixel wide, solid in color, and it must have datas as
solid in style, sorry, and that shade of gray in
its color and padding. So padding means that I want
to push elements around me. We eight pixels are rather
I wanted to meet myself. Pixels fatter than
I would be, right? So if you look back
at the table, this, we'll start seeing that space because remember before
everything was choked up. And then we take
all the budding and show you what the body's doing. So with all the putting,
everything is choked up. When I put in the padding, then everybody got
fatter, right? So it put on aid poems that eight pounds of
wheat in all directions. Again, think of it like that. So no, Everything is our own. But then you notice that yes, everybody has its border
because like I said, these are really cells. They're not really rows and columns, they're
really cells. So these cells have their
own barter, our own them. Let me zoom in so you
can see a bit better. These are cells with
their own borders. No table read it looks that it's because this
doesn't look right. It just looks like
a bunch of boxes. So going back to stuff table, I can say border dash,
border dash, collapse. There we go, barter
dash collapse and announce a collapse. So not we all borders
collapse on each other. So they don't look
like boxes anymore. No, it looks like that table. Alright, tips and tricks. Once again, practice
makes permanent. Now the last thing that
I'm going to do to this table is to make, it made the header
area look different. So I want this to have
maybe the same kind of color as the H1 tag for
no particular reason, just me missing her
own and exploring. So I already told the TV and
the th, the sheer style, but then I want a
particular style for only the th, alright, so I'm going to say that
you will THE one I want your color to be the
same, same RGB value. It's not color because
color changes the texts. So that's a good point. No, even though I am
targeting the th, it would seem as though if
I say color for the th, then the th itself will
take on the color. However, what will
happen is that the actual text
inside of the th tag. So color refers
the ticks that all times the color
refers to the text. What you'd want to do is change the background color off the th, if you wanted that THE, to have a different
color and that point, you'd get that color. All right, so the color will
always default to block. If you say color
is something else, that it will always be
the text if you want the bot groaned article of the elements right across
the board to change, then you have to use
background color. So while a button grown
colors that I want the color to be white, which I'm going to get crazy. Norm.dist use the
hexadecimal zeros 0000, sorry, that will be fff. I apologies fff to get white. All right. So I could say FF, FF, it's usually six, but
then some colors, by the time you
reach the third one, it will automatically know, okay, you meant white, so I'll know it's white
just like 000, 000 block. And I could have six
zeros, that's still block. And then as I start to
change the different colors are no numbers inside of this, I started getting
different sheets, right? So if I said 0, 0, f, then I get the shade of blue. Does show you. So RGB was developed after Higgs me to be a little
more consistent, less confusing, whatever it is, any home, let me just
make it all FFF. So then the text is null, white. So I have that. I wanted to call it coral, but groaned with white
takes the table top. And then all of the rules
kind of have that, right? So there are a number
of things you can do like there are so many options, so many things to do, it's almost impossible
once again, to show you in one
or few videos, you just have to explore. So I encourage you pause and
start playing around with certain elements
and certain styles and see what you can
come up with what works, where what doesn't work, we're and that's all you
get comfortable with CSS. When we come back, we'll be
taking a look at JavaScript.
8. Explore JavaScript and the Browser Console: Hey guys, In this
section we're going to start exploring JavaScript. Javascript is a scripting
language that allows us as programmers to interact
with the HTML elements. The thing is that when the
browser loads our website, whether it's the Lipset
we're working on or anything that is being constructed
with HTML code. Once that code is
rendered by the browser, as we've seen up onto know, there's nothing we
can do to change it. So any modifications
that we have to make, we have to go back into the
code and modify the code. And then we'll be able to adjust it when we
refresh the page. However, with JavaScript, we can allow our users
to actually have an interactive
experience with our pH by putting in some amount
of intelligence behind it. So that's what the scripting
language really does. It adds intelligence
to our static content. What I have here
is just a browser. We're going to kind of jumbled up Visual Studio code a bit. And what we're going
to be doing is looking at JavaScript within the context of an
interactive console that every browser actually has. You're using Chrome. I'm using Edge retinal. You're using Opera,
Firefox, Safari, most, if not all browsers will have that interactive console
and wearable to explore it. So what I've done is to open
a private window for edge. And I'm just going to right-click and then I'm
going to go down to inspect. After doing that, yes, it shows us the bare
minimum HTML code. And the reason natural is
that private instances that the page that we
get here is not as busy as it would
be if you were to just load up our regular page. Right? So that's the regular page
on the irregular edge. This is the private,
so it's not as busy. However, what I want us to
focus on would be the console. When we click on Console, we see here that the cursor
is blinking and it's waiting for us to do something. So this console
actually allows us to interact with JavaScript. We can cold our
JavaScript here and get immediate feedback based on the code that we're writing. The thing is that when
you refresh this page, it will reload the console. So any code that you've
written would be erased. But after we get
to interact with JavaScript and understand
the language later on, we'll add some JavaScript to our website that
we're working with. And you'll see how he
can persist a save the code that you're writing
and reuse it accordingly. But for now, like I said, we're just really exploring. The first thing that
most programmers, right? And we've already done
that is HelloWorld. So you see that time I
started typing and you see it's acting like Visual Studio Code is
making suggestions. You may not need some
of these suggestions, but if you just look at them, you'll see that all
of these things are what browser is capable of. So every browser actually has built-in libraries
for JavaScript. And that is why when you write your JavaScript code in here, a website on the
browser loads at the browser can act on
the instructions because JavaScript is really just a
bunch of instructions telling the browser hold the website
should behave pretty much. If I wanted to print
something to the console. So this console is
used for many things. It can be used for
debugging purposes while you're building
your website. It can be used for
interactivity like here. If I want to print, I can see console
dot log, L-O-G log, then open parenthesis,
and then put it in quotation marks and
close and then usually in JavaScript and ends
with a semicolon. So I can say helloworld inside
of those single quotes. That's a little bit bigger. So console dot log
and helloworld. So this is basically saying
console in the browser, whichever browser and
it has a console, please write the log
message hello world. So when I press
Enter, Look at that, it actually prints Hello World. This command told the browser to print that takes
inside of the console. I could easily change that. My first Java script, int enter. We've got that my first
JavaScript print. From time to time, you'll
see this undefined, but you don't really have to
worry about that unless you see stuff appearing in red. You don't really have to worry
about it too much, right? So later on we'll see
that I'm just giving you some context so you don't feel overwhelmed by anything else
appearing on the screen. So that is how we would write the console log of the browser. Now there are other interactive
tools that you can use. You can use JSFiddle. There are a number of JavaScript
tools that allow you to write the code and then run it and see the
immediate effect. I think that the using the
console in the browsers, as simple as it can get because you're getting
the same experience. Then once again, later on we'll look at how we edit our website. So that is a quick and dirty
introduction to JavaScript, but we have quite a
few lessons coming up. We went to look at
different things we can do in JavaScript. And you'll see that if you've
ever done programming, it looks just like other
programming languages. If you've never
done programming, then this could be your
first programming language. And the concepts here
are transferable to every other programming language that you will learn
in your career.
9. JavaScript Statements and Variable Declarations: All right guys, so in this
lesson we're going to be looking at JavaScript
statements, looking at how we can
declare variables. And just understanding
the general rules of the language was as we've seen
with HTML and CSS so far, each of them has their
own set of rules, right? So HTML, you're expected to
open and close certain tags, sometimes don't have to do that. But ultimately there are rules that you have to
adhere to if you want the desired outcome from
your efforts. Same with TSS. So JavaScript has
rules and once again, what you're going to be
learning with JavaScript, a lot of that is
transferable knowledge. So with this console window, I'm just going to drag it
all the way up to make it as big as possible
on the screen. And what we're going to
do is I'm just going to, you can either just click
this or you do Control L, or just refresh your page anytime we are going to
refresh the console. So this is the code from
the previous lesson. I'm just going to
clean it all out and then we have a fresh
console to work with. You can also do
other little things that live expression filters. Some of these you may
not need necessarily. Know. You can show and hide certain console sidebars and messages on stuff based on the performance of the
website you're on. You can also filter, you can
look at different things. So like I said, the console
is used for logging. So later on when you're bilinear huge websites you
get actually used here to monitor certain errors that you might be getting
onto a website. As an end-user
there attends when you click a button
and it doesn't work. So you could actually say if the user clicks the button and something doesn't
happen as it should, you could login error
to the console so that it can serve as a warning
that this might be wrong. So the console is very powerful, even though we're using it
to learn how to write code. And this is possible
because of modern browsers. I'm just letting you know that when you're building
your website, you can use it for actual
production level help. Alright, so like I said, we're looking at statements. Statement in most, if not all programming languages is just like a
declaration, right? So when I said console dot, sorry, console.log,
write anything. And notice I'm using my
up and down arrow keys that allows me to cycle
through all of the commands that I last run in the
console for as long as the window is open. So
that's another thing. Well, if I refresh yeah. As far as long as
the window is open. So if I clear, I refresh, I can clear, and
then I'm here again. This is a statement, not a statements generally, in JavaScript must
end with a semicolon. You can have multiple statements that you went through
and see if I wanted to do Hello World and then I
wanted to write something else, I can just go to the next line, which in the confines of this particular console would mean that tough to
press Shift and Enter. That means I want to
go to the next line, but do not, do not
execute the line yet. Did I can start typing
another statement. Then this one could say, Hello. Again. That's another statement. And for as many statements
as I want to run, I can just press Shift Enter. So that generally end
with semi-colons. Those are statements. Other things you would do, I didn't mention variables. So another thing that you would
do is declare a variable. So a variable is
like a temporary storage area for a value. All right, so if I
wanted to store, see a name, I could say let, that is a key word, let, and then the
name of the variable. The variable is the name of
the temporary storage space. So I could say lit name since I intend to
store a name that I went to call my
temporary storage space according to what
I intend to store. If I wanted to store edge, I could say let age. Then I can give it a
value by saying equal. So here we call the equals sign at particular and
assignment operator. Whereas sandy, what's underwrite into our storage
space by that name. So notice I'm using
double quotation marks, and I'm using single
quotation marks, you can almost use either one. They are very
specific situations where you would use
one and not the other. I'm almost going to use
them interchangeably, but later on you'll see when you would use one
and not the other. But in JavaScript, you can get away with
that in other languages, you might not be able to get
away with it that easily. But like I said, every language was similar, has its nuances and its rules. But I left off the
knowledge is transferable. Let name be equal to, and then you can put in your Putting your name, I'm just going to put
in a random name. Once I get any such
statement with a semicolon, I want something else that edge. And I'm going to
assign it a value equal to dot it
with a semicolon. And then what if
I wanted to print the values from these tool? This allows you to be
dynamic because I'm just, I'm just seeing, I'm putting
in these values, however, in a real situation
like on our website, when somebody fills
out your form, think about yourself as a user. When you fill out a form and you press Submit, those values, get stored somewhere because when you're logging off towards, you actually see your name. It's the same name,
email address on whatever values
that you had put in the forum you'll see
presented to you. So clearly they're
being stored somewhere. So these temporary storage
areas called variables, are actually designed
to temporarily store those values while
you're on our website. Again, get more
complicated than that. We'll just work with what
I'm seeing right now. I'm just seeing, let me
be equal to that value, that h be equal to that value. So if I wanted to
print them back, then I could console
log and see name. I can add to it. Literally I'm adding it. This is a plus sign. We know that to
be used for math. But here this is a
word or two words, this is a number. So JavaScript is what we call
a loosely typed language, meaning it's not going to fixate on what data
type you are assigning. I'm just seeing
creates a temporary storage space, store that value. In other programming languages, there will be strict where
if you're storing a name, the half to state that
this is a name variable. If we're starting on numerality, I have to say this is
a numeral variable. In JavaScript is
not that strict. Once again, different languages
have different rules, but transferable
knowledge regardless. So all of this is a bunch of statements that I'm
still yet to execute. Those. I keep on seeing Shift Enter, Shift Enter and go
into the next line. To same way you're writing it, tears and seeing what
we tend to write it in the Text Editor when we get there until we
actually execute. So when I press Enter, it's actually going to execute. All of that is going to print
hello world, hello again. And then look carrier, It's
sprinting been hidden 50 because we declared to
temporary storage spaces. And we said print the
name plus the age. It's printing the
name plus the age. Now what do you
notice as a problem? I'm sure you're there
seeing why is the 50 attached to the hidden? So the reason for that
is we need to format data bits so we can
say console.log. And then I can
spruce it up a bit. So the same way we can plus
a variable plus a variable, I can plus literal string. This is what we'll call
it that when you open the quotation mark and type in your own message and close it. That's what we call
a literal string. I can console.log and open
my literal string here, where I see name colon, make it more presentable, right? And then I add the
name variable to that. Semicolon is a statement. And then that'll do it in
another line, console.log. And I can prudent age colon. Notice this space, the space, those columns inside of
these quotation marks. And then I can see it plus age. I didn't semicolon press Enter. There we go. Name is what is in the variable and age is
what is in the variable. No, naught. I didn't space this old as much as I space
this one holds. That's another thing in terms off is not in the
quotation marks. Javascript will not care if you put a space or not as
long as the syntax is right. These are little things
about JavaScript that make it so flexible
and so easy to learn because it's a very forgiving
scripting language. But then there are certain
rules that can break, break you as a potential developer transitioning
to other languages. But for now, that's all
we're going to go through four statements
and how they work. We know that we have
to end with semicolon. We know how to print
to the console, we know how to declare
variables and assign values, and we know how to print them back and holds a
format what we print book. And if I wanted to
change a value, name exists so I can
give name a new value. Alright, so I could
say new value, saying that to name. All right. Then if I say console.log
name and age again, no, it's going to
print new video. So now you know how to assign and change after
assignment, right? This second line is more like a confirmation that
this line worked. Because if you do something
that doesn't work, you'd get like a
certain kind of error. If I wrote this statement in an incomplete monitored
and it's going to give me uncaught syntax error and tried to tell me
what is wrong with it. They send me, I'm missing that. Pardon? This is the console does give
you interruptive feedback. Starts off, unlike what we've seen with Visual Studio Code and an HTML where it will
actually try to compensate for. This one will not. It will tell you that you have an area you need to go fix it. All right, So when we come back, we'll be looking at some
arithmetic options. Operation, sorry, in JavaScript.
10. JavaScript Arithmetic Operations: Hey guys, welcome back. In this lesson, we're
going to be looking at arithmetic operations in
JavaScript, it's not. Arithmetic operations
generally will refer to a key feature of most, if not all programming
languages is the ability to perform some
mathematical operations. You can add, you can
subtract, you can multiply. We're just going to
take a quick look at what that looks like. Would we use JavaScript? I'm going to clear the console. Let's look at it so I can
add two numbers easily. I can say one plus one. You see it's, the console is getting me
interactive feedback. That's two. So one plus ten, that's 11. The plus sign when we're
dealing with numerous ads, the numbers as you
would expect, right? So we already saw that the
plus sign is also love adding a string or two strings
or a number and a string. With a string or a word, string is depicted by the quotation marks with a single quotation marks
or double quotation marks. Both of those
represent a string. So I can always see string one because there are times when a numeral or a
number is being used, but it's not necessarily
for mathematical purposes like a license split number
or something like that. It's not really going
to be used for math, what you call it a number. So you might end up with
something like A1, R1. But in if that number
ends up being used for non-mathematical purpose
and you're adding it to, let's say a numeral, then you're going to end up
with something like one, seventy, five, seventy six. Because this string plus the numeral is going to give you the string and the numeral. However, if I was to
add two numerals, one plus 75, then you would get the mathematical result of 76. Those are little things
about JavaScript that you will not see in
many other languages, but that is one of the
key features that you can probably take advantage
of when, when applicable. And if not, then just know
how to use it and when. That is addition,
multiplication, it's fairly the same. So seven times h, that gives us the
product, right? So in regular mathematics, when we're writing, would we use the x or an x looking symbol? In computer science and
programming languages, generally speaking,
you use the asterisk, and that is how you
depict multiplication. Let's see what happens
when we try to multiply a string
times a numeral. If I do a string
times in numerous, look at that, I'm
getting buck 76. It doesn't quite look
like the addition, the addition operation when
we have the string plus another string or a numeral or plus anything else when it's
a string plus something, we call that concatenation. So our concatenating the string, concatenating
something to a string. Obviously, when we're
doing multiplication, whether it's a string or
it is actually a numeral, we're getting the same results. That's clear. Let's look at division. So if I do ten divided by C5, we would expect to see tools. So the visual in
programming would be using that sign, That's slash. So ten divided by two. If I did that with strings, what would we get? Would get the same results? That's the vision. And the next basic one would
be, would be subtraction. So 45 minus five gives us 40. If I do string 45 minus
five, I still get 40. So the plus sign is the only one that really
operates differently when it's dealing with numerals versus numeral and stream. As we can see, they're all giving us very
similar results. However, it's always
good to be consistent. So mixing and matching that this is generally
discouraged. I think they're
just compensating for the fact that
it might happen. But in general, just
wanted to deal with numerals when you're doing
math and leave it at that. All right? The same way that we could
assign to a variable, R1 value to a variable
is the same way we can say let product equal. And then we give you the
two numbers 15 times it. No, it's telling you
undefined because you gave it a statement and I'm breaking my own rules that ended
with a semicolon, but I just created a statement. I didn't tell it to do
anything with the value. It has products. Has a value in products, but it doesn't know what, it didn't get a directory. So now I would probably say I wanted to see
what's in products. So let me console.log. Then I would write protocol. When I do that, then I can see the value
inside of products. Alright. Just, just another
thing to point out. I didn't put semi-colons
and the end of this, That's me being bought and
breaking rules, right? The point is artifact
is because it's just one statement I'm
writing at a time. It's splitting me
get away with it. However, if I was writing
multiple statements in multiple lines in this statement or statements to run together, then I would probably
end up in problems. So you always want to, and with your semicolon before. That is pretty much how
that would look like. Building on the simple
arithmetic operations, you do have some
accumulative one. So what, what do I
mean by that is, let us say we have,
let's, let's norm one. That's a variable
b equal to ten. And then I wanted to
increase this by five. So the increase in
on one by five, it would mean that I
would have to say num one whatever value or non
one-year new value's going to be whatever
your value was plus five it and that's how
I could make it 15 because I
increased it by five. No. A shorter hand way of
doing that would be to use the accumulator or
the accumulative way. If I wanted to
increase it by five, I could say plus equal five. Alright, so this statement is going to evaluate to
the same thing as saying, no one, take yourself and add five to it and meet
that's your new value. Pretty much normal one. Take care of value and add five, and then whatever that is, that is what we're
assigning to it. So if I increase, if I run this, this
should not become 20. Go and see what I mean. So that is an
accumulator and this holds true for every
type of operations. If I wanted to increase
it by five times, meaning I would
multiply it by five. Then, generally speaking,
you'd say num one is equal to the norm
one times five. Shortened version, I can
just c times equal five, then that should bring
it five times more. If I wanted to decrease
it by five times, then it would be
divide equal by five. And I'm decreasing
it by five times. The same thing would
go for subtraction. So norm one minus
equal and then five. That means take
five away from it. Once again, all of
these are still augmenting the
value being stored in num one relative to the
number that I'm stating here. Alright, so that's how I
arithmetic works in JavaScript.
11. JavaScript Decision Statements: All right guys, In this
lesson we're going to be looking at decision statements, though, in everyday life, Let's forgets are
both programming. In everyday life,
we have to make decisions with certain things. If certain factors obtain, then we take certain actions. That same kind of logic. If then, or what is the case? The case might be
that we do this or we take that action based
on maybe a value. So how much money do I have? If I have $500, then I will do this. If I have $200, then I'll do that, etc. We make decisions on various
things a lot in real life. So it's the same thing
with programming. We're looking at
these variables, that we're looking
at these values. And then just think about it. If you are buying something online and you provide certain
values at certain times, it can affect the
price of the item. If you've provided
a coupon code, then the item would be decreased by a certain
amount of money. All of those things are really just programming and
could be accomplished by using the same kind of logic
that we're looking at are the same kind of cold we're
looking at in JavaScript. If a coupon code is present, then run this math. Decrease the price by by five times or subtract
if the price right? I'm just giving you a scenarios. So what we're going
to be looking at is we've already took
a look at arithmetic. We're going to look
at decisions now. The most common form of decision statement
that you would see is the if statements. Because just like what we
would see it in our minds, if this obtains, then that it's a very similar
construct in programming. So it would actually start
off by seeing if you open parenthesis and whenever
I open up parentheses, I close it because if
you don't close it, it went to end up
with a syntax error and it can get very annoying. So every time I open a parenthesis or even
currently briefs, I open and close
at the same time. So you'll notice
that I'm doing that. If inside of the parentheses is where you state
your condition. So I have the variables num one already because it's within
the same console window, they still exist until
I close the browser. So no one is there. So I went to say if numb
one is greater than ten, then, and then my then goes
inside of these curly braces. So if, if open parentheses, then we have a condition. No notice I'm using the same greater than sand at
U-Dub learned in school. I'm sure about it at the time
we were doing this course, you'd have learned about
greater than, less than signs. So this is greater than saying
this is less than sign. You can see greater than, equal and equal to. If it's greater than
or equal to ten. You can see if it is, if num one is less
than or equal to ten. You can see if it is
not equal at all. Not equal looks like that. Not equal. And then you can see
if it is equivalent. I should have been
seeing equivalent or not equal, but that's fine. You can see equivalent using the double equals sign
and then equivalence we, we're going to be looking at some different variations
of hole that can look because JavaScript can get very precise when it
comes to equivalence. But what I'm seeing
is that those are your logical operators
greater than, less than, not equal, greater
than or equal to, less than or equal to R, equal to R equivalent. Notice it's a double equal, not a single, a single
means assignment. I can't see if num
one is equal to. That won't run F to see
if it is equivalent. So I'm checking this side, this value, whatever conditional
statement OR operator, and then that side. And then if it holds true, then I'm going to stay
at what I'm going to do. So notice that it
keeps on executing. I need to do Shift Enter, so we'll start the next line. And then generally speaking, you want to indent your code
so you can see clearly that this code that I'm
about to write fits into that if statement. So if that is the case, then console dot log. I'm just gonna do a console.log. But the fact is that
within these curly braces you do almost anything
that is necessary. If this holds true. What are you going to do? Are you going to do some math? Are you going to print
something to the screen? Are you going to send an
alert to something somewhere? So I can do console.log. Lumber is ten. Know what Bolt other scenarios, what if it's greater
than and what if it's less than in the
same if statement, I can actually chain
it and say else. I can do as many other
if seconds say else if, meaning if this is not
true, then this one. All right, so we're creating
different scenarios. If this is true, do this else. If something else is
true in this scenario, we put all my semicolon. Then do that and we can do as many other scenarios
using else if, else if numb one is
greater than tin. And then the same
syntax applies. Curly brace open. Remember to use Shift Enter when they're going
to a new line. And then I'm going to try a
different type of printing. So instead of a console.log, I'm going to do an alert. Alert would actually
pop up in a browser. Have you ever been
on a website and you wanted to maybe move
on and you didn't save your changes on
that alert came up in the browser to see click, you have to click it off
before you can proceed. That's pretty much
what the alert does. So I can see alert number
is greater than ten. Then I can say else, sir, my bike and do as many else. If statements as a need. But sometimes you run
out the scenarios and then if none of those scenarios we'll
extrude and you wanted to do one final thing. So there's a last resort
if nothing else is true. All right, I think Global,
$500 I got for dinner, if I have $400, I'll go to a movie for $300. I was gonna do it.
Otherwise, I'm staying home. That otherwise there would be, or if you just say else, open curly brace, and then you
state what you want to do. If nothing that you
stated above holds true, then this is what I went to do. So I wanted to do a
console.log and say something like nothing can happen,
something like that. So this is your last stitch. So that's a simple if else, if else you can have only the if you can have if unjust else. So you don't have
to have else ifs in-between equal to if this, otherwise that all right, You could even just have an if statement to see if
that is true, then do this. If it's not true,
just skips over it and goes to the next
line of code anyway. So those are things that you
can do to meet decisions. So if I run this
and press MTC here, it's going to console
log number is ten because we had set
num one to be ten. So if I say num one, your value is no 25. Let's see what happens. So I'm going to rerun
this if statement. Norm ones value is not 25s is going to run through
the if statement again. And then I press Enter, look at that alert, so that number is
greater than ten. So that's what that alert does. And then if I sit in on
one to be equal to five. So no, it's not equal to ten and it's not
greater than ten. We expect that it's going to go, oh, sorry. Yeah, there we go. It's going to say if
nothing had happened because this isn't
true, that isn't true. So otherwise, that's
what we're going to do. That is you make simple
decisions in JavaScript. Know the next one that we're going to look
at is called a switch. The switch is relatively easy. It's fairly similar, but it's used in different operations. So it's probably more
like four grids. So let's say let's say that grades were
always marked intense. If you get to 100, the apostrophe got 50, you barely made it. And if you've got 0, well, that's not tens, is it? Let's say you have three possible grades,
three possible values. You will have
either a 150 are 0. So I can say switch
on the variable. So let's just use norm one or let's be more cart
and use grids. So I went to let
greed equal to 900. Let's start off with that. So we have grid
being equal to 100. Then I went to make our
decision based on that value, that grid Maya tough. I went to say switch greed. Then open up my curly
braces as usual. So notice that the
curly braces play a huge part in these blocks
and these blocks statements. This is a whole block, Steven. That's a whole thing. It's multi-line and it's very
strict in this structure. Once you understand that
structure that use parentheses and curly braces, or in the switch use once
again in parentheses, the value and the curly braces, then you should be fine. The switch statement looks at the value to see
what the value, what is the value, and what
should I do this value? So instead of if and else and whatever we have
switch and we have case. And then we look at the value. So if the case is 100, meaning this value has, this variable, has this value. Then I say colon. Then underneath that
case I take an action. So console.log, you passed as many lines as I need I can put
underneath that case, but when I'm finished, I'm just going to say break. No, I'm tabbing because I'm
very keen on formatting. You can, it's far more
readable when you indent your code and you can see where everything
starts and stops. When you're a beginner.
Text editor will fire easy. I'm just doing it in the
interactive console so we can see it happening real-time. Switch grade. And then we do that case. And then we take an action or
as many actions as we need. And then when we're finished, we have to say break. If we don't say break, what will happen is that when we define snap breaths
into prematurity. So when we define a second case, if the grid is 50 and
then I say console, console.log and see
you barely passed. And then if I didn't
have a brief, it would actually
run through both. So let me remove the
break and show you that. So you see it did this and did this because
there was no break, you possibly barely pass. Of course that's not true. You'd see the orange at our 50 either pass or didn't pass. So I need to have that break keyword at the
end of a case so that it knows that it
should stop there. No. What does the VC we
said that if you got 0, then you feel so we
can add another case. So you can add as many cases. Remember, each case is by
seeing this is the scenario. This is what I wanted
to do in the event that this whole stress
or console.log, then we can see you failed. Then we break. Then if none of the above. So just like with the if
statement or we can say else, Nothing else was true. So just do this. If nothing else is true, then it's the same
way I can actually see default, don't hear. So default would mean that if none of these cases was met, then just default
to this action. So I could console.log. And usually by the
time it reaches here, it's usually, It's usually
because something is invalid. So in our case we can
say it's invalid grid because you should either
be getting 150 or 0. Anything that's not
in these cases could be an invalid value,
Something like that. Of course, I'm just
giving you a scenario. I hope you're thinking
about it and seeing. That is how I could apply this
to something else, right? So it would be invalid grid. That's what we're going to
tell the system that if we don't detect the grade based on the cases
we've all learned, then it's an invalid grade. If I press Enter, of course, we already
defined grid to be 100s. So of course we would pass if I change the
value of grids of 50 and then rerun that switch statement,
you barely passed. Then if I change the value
of grid once again to 0, then switch statement will
evaluate that you failed. Alright, so you can see it's hitting each one of those cases. Now let us try a default case. So if it is not 150 or 0
based on all our line, then based on our outline, it should be seen
as an invalid grid. So when we do that, invalid grade, and
that's basically hold decisions are meeting
JavaScript, of course, how complex they get is based on the scenario
and your context will always determine what code
is needed to solve it. But it's good to know what your options are and
when to use them.
12. JavaScript Repetition Statements: Hey guys, welcome back. In this lesson we're going to be looking at repetition
statements. So let me go ahead and clear
our console and let's start. Repetition comes in when you have something
you wanted to do repeatedly and you don't want to manually do it every
single time, right? So let's say we wanted to write, print the numbers
one through ten. You could easily console.log. We don't want to
print console.log. Then you would say, okay, For into one semicolon and then go to the next
then, and then console.log. And then we would print tool. I'm sure you get
the gist by know that you'd have to do
this up until ten, that when you press Enter, you'd actually get
the 12345, etc. Bringing to the console. That's obviously very money. Well, I repetition statement
is what it suggests. It helps us to repeat
certain operations. And by writing this
repetition structure, we can put in a command
that says do something for X amount of time or X
number of times rather, or until a certain
condition is met. So we'll be looking at
too repetition types. And those are, the cones are controlled and the
condition-controlled. So let's start off with
the cones are controlled. A counter controlled loop is usually found in the form
of what we call a for-loop. So it's for X number of times. Do this, right? Let us say we wanted to
print one through ten. And of course we don't want
to repeat that statement, so we're going to say four,
then open parenthesis. And then we have a variable that's going
to be our Colin's are, so we initialize one, I'm going to call it, I bought it doesn't
have to be called. I could be called cone. It could be called
basically anything. Xyz puppy dog. He really doesn't matter. I is the most commonly used variable that you will see here though, because I is short for iterator and the commentary is
also called iterator. So there's nothing
significant about the eye. It's just the name of the
variable that is used to keep cones off the number of times the action
has been repeated. So this is initializing
our counter. Then we have a
semicolon followed by that condition to say I should go up until
x number of times. Now notice that I is
going to start at 0. It could start at ten, it could start at 20,
really doesn't matter. However you want to
start at somewhere, that the condition makes sense. So obviously I wouldn't start
with that 20 and then tell it to run until I
is less than r, sorry, Rowan, as long
as I is less than ten, because that
wouldn't make sense. I is already greater than ten, so this condition would have
been violated right there. What you wanted to do
is say, start at 0. Typically it's 0. It could be one, but
where do you start? That will affect the condition. So if I start at 0, then the first row, and it's
going to have a value of 0. The second row is going
to have a value of one, the third row and
a value of two. So that means when
I becomes ten, when I goes up to
the value of ten, I is no longer less than ten, so it won't run that one. But if you call this, if you call Antonio
fingers from 0, you call your right pinky 0, then 12345 open to nine, then you would have counted
on all ten fingers. So between 09
inclusive is ten runs. What do we do it you'll
see what I mean. So cold winter, It's called i. Then because it starts at 0, I'm seeing make sure
you don't ever equal to ten because I wanted
to run ten times. We just established that. Then I'm going to tell it to increment each time
Celsius I plus, plus. This could also be I plus two. I plus it. It depends on how many times
I wanted to increment. So if I said I plus ten, it would increment from 0, do what it needs to do for the 0 R1 called
Mackenzie whole minute. By how much should I
increase, increase by ten, then that would be if you wanted it to come by
two, you say plus two. Here. We're doing to do it by plus, plus because we only wanted
to increase by one at a time. And then I close
the parentheses. So I'm going to open the curly braces and
skip to the next line, of course using
Shift Enter and then indent inside of
my curly braces. Once again, we're starting at 0. We want to run from 0 until
the nearest number tin, because we don't want
to violate this. And we're counting by
one each time it runs. So what do we want to repeat? Whatever we wanted to repeat, we're going to place inside
of these curly braces. I didn't say where
we wanted to count. Tin or print the numbers
one through ten. I'm going to say console.log. And then I will
print the numbers. So obvious that Kinds go and print manually because
this is going to print one to n times z
is just showing you one. But it's grouping it because
it was printed it ten times. That's a good example
because it's bunching it up, but that's what's
really happening here. So if I try that again, I want 12345, not
just 110 times. So that means I
would want to print the value of what's in AI, because AI is
changing every time. So I think that's a good source of numbers as any to
be counting for me. So if I press Enter, look at that and all
we get 0123456789. Still not numbers
one through ten. That was the objective,
but we're getting there. But if you count, this
was the first run. I was 0, then it came back
looped, increased by one. Did the action again? No, because I increased by one. It's not one. Go again. It's 234. If I do a count 12345678910, it did print out ten numbers, but our objective was to
print one through ten. So an easy way to accomplish
that would be that if I know that I is always going to be one less than the
number I expect. Then I can just say
when you're printing I print I plus one. Add one to i. Anytime we're able to print, that means it would have been 0, it's going to be one, etc, etc. And now we have upon to ten. Alright. Now let's look at this again. I did say that we started at 0 and we're going till
it is less than ten. And then because of that, we have to be adding one. What if we didn't want this additional work of adding one? So that's fine. I could just say console
log, print the eye. I wanted to first number
to be printed to be one. Then when I do that, it's only going to
print 123456789. That's nine numbers. I am not getting the ten. So after I adjust
the condition here, I have to say it
and know that we're starting at one and
I wanted to run until I is less than
or equal to ten. So once again, it will run until this condition is violated while it is counting from
whatever number we sit. Whatever number is
in the condition. So if I do that, then
we get 12345678910. All right, That's a
counter controlled loop. These come in handy
when you have lists that you wanted
to go through. As I said, anything you want to repeat for a certain
number of times. That's why we call it a
counter controlled loop. And this loop, apart from
the verbal definition here, looks the same way
in most languages. So just by understanding this, you've mastered this type of loop for at least
six other languages. Alright, now let's
look at the next one. This one would be a while loop or a condition-controlled loop. And you actually
have two of them. You have the while and
the other do-while. Knowing the while loop, we start off with
the keyword while, and then it is
condition-controlled. So all it has is a condition. It would say while some
condition isn't met, let us say we still wanted
to do that counting to ten. So I would say while
I is less than ten. And then some kind of syntax, we have our curly braces. And then inside of
our curly braces we wanted to indent what
we wanted to repeat. So I went to say, while I is
less than ten console.log. Alright, so we expect it to print I ten times
non-number things. I'm missing Altera, and we're
going to be exploring that. First. When you try to run this, it's going to tell
her I is not defined. So this is not defined
means that you're trying to call on a variable
that doesn't yet exist, You didn't declare it. We looked at declaring
variables earlier. We have to say let the
variable name and then use it. We also looked at the fact that variables that
we've declared, he had no clear the
console still exist. So we can use them because
I'm sure name is still here. All right. I can still access name from all those lessons
ago because I'm in the same Console incidents, they are probably
wondering, okay. So why contact access? Even though we declared I here. So this is what
we'll call scope. Within the scope of this
for-loop, I exists. Once the for-loop is done, I no longer exists. So I was not declared to the entire console and the entire browser and
the entire application. It was really just
declared to this for-loop. Just like every other
variable that we've done, I have to define the variable. Let I give it a default value. I'm going to say let I equals 0. Then I can call on the while
loop to interact with AI. But look at this null
while it is running, running, running and
they see that number. This condition is not
going to stop the loop. So this is where
condition-controlled loops can be very dangerous. This is what we'll call
an even finite loop. An infinite loop is a loop that is going to run
onto the condition is met, but the operation
being carried out is not geared towards
stopping the condition. So I am seeing colon ton
till i is less than ten, which we already established. Here is the same thing, right? But I'm not changing
the value of I, I, my, all I'm doing is saying
while I is less than ten, which it will forever
will be because all I'm doing is console log. I'm not seeing I plus, plus I'm not seeing anything that actually can
crash websites, crash application, crash
computers in general. So you want to be very careful, especially when interacting
bigger applications, a bulk condition
controlled loops. Alright? You might have to end up in, if you follow that command, you might have to end
up in your task manager and go and kill that entire Burroughs this session because it won't
actually stop running. So if I cause your computer
any harm, I apologize, but you can just go
ahead and delete and restart your browser, jump back over to the console
and let us try that again. So I think we've
learned our lesson. This is a brand new
browser window, so I have absolutely no history
from any previous lesson. So let's start over. So let I equals 0. Of course, it always starts off by defining our variables. So the variables have to
exist before we use them. Then I'm going to start again
while I is less than ten. And then voltage the next line, open and close my curly braces, tote and then indent. Of course, be sure that when you're going
to the next line, you Shift and Enter. If you end up running
this loop again, linear went off to
kill the session and come back in the
console. So be very careful. But what I wanted to do
here is actually changed the value of i with
each iteration so that we can be sure that the value or the condition
will be met eventually. So I can use an accumulator
here where we looked at this, where we just say
I plus equal to, sorry, one, we're
increasing by one. Alright? I plus equals. Remember that
this will be the same thing as what I'm doing here is writing what we'll
call a comment. All right, so I equals I plus one is the same
thing as writing this. Now the thing with a
comment is that you can put in a comment
and anywhere in your code where you
might need to remind yourself as to
what is happening. There are whites happening, but it's not actual code. So anything that goes behind
these double slashes will be ignored when the whole
block of code is Ron. But it can lead to
better readability for whether yourself or whoever else is
looking at your code. So you can get into the
habit of doing that, but we looked at that later on. So console.log i. So after you log I, increase the value
of I by one and then check if I is not less than ten. If it is still less than ten, if it is still less than ten, then go ahead and run again and continue
doing that check. So that's why it's
a condition control or it doesn't know how
many times it should run. If it was negative ten, negative ten increased by one. Negative nine says, it's not saying I am only going
to run ten times, it is just checking
this condition. So it could be a situation where the values
are unpredictable. I don't know what values
I expect to get, right? I don't know how many
values there are, so I just wanted to run until I know that I'm satisfied
by the condition to exit. So that's why we call it a
condition-controlled loop. Then further to that, that's a pre-check
condition-controlled loop. It checks the condition first. Let's check, alright. Know that I'm modifying
the value each time equals from 0 because
we started off at 0, Jake's it, it's 0,
then it console log, then it increases,
then it checks again. Is one still less than ten? Yes, it is. Okay. Love, etc. and then he goes
on and it goes on until the end where this
will become ten. And then it would check
and see that, okay, this is no longer ten is
no longer less than ten, so don't do anymore. So that's pretty much
why it went from 0 to ten this time, as opposed to the for-loop which actually went exactly ten times. Let us look at another scenario. What if I started off
at the value of ten? So I went to let I equal to ten. And then I went
to the same loop. When I do that,
then press Enter. Notice that nothing happened
because I is already taken. An eye is not less than ten. So I have nothing to do with this condition
is already violated. So skip over that and move on to the next line of code
or in lowercase. So that's why we call it a
precondition checked loop. All right? No, it's close. Relative is the do-while loop, which is just an
inverted version of it. That one is called a post
check loop because it actually does the action and
then checks the condition. So I went to leave I to
be the value of ten. Notice when I
started off at ten, he checked the condition
and it didn't do anything because that
condition was violated. So let's move along. However, if I say do, syntax for it is very similar. I always say is due. And then we're saying
what do we do? So open up our curly braces. And then after that
closing curly brace we say while with the condition. So do this or these actions
while I is less than ten. Well, guess what
it's going to do before it's even checks
if as this dentin, so if I take the same
console log, all right, I'm pleased it
right there inside the do-while, we should see, print the value of
I at least once. And then no more because I is not less than ten at
that point because I is ten. So let's try that one. This ends with a semicolon here. All right, let's try it out. One. There we go. We at
least got the value ten before it exited and
gave us that undefined. Undefined just means I'm done. All right, run at least once, so let me make one. All right? And then let's try the do-while. This time is going to
do it and do it and do it onto that ECM. I had just wrap myself up
in another infinite loop. So don't go that far. Make sure you put on the I plus equals one before
you run that code. So I'm going to
restart my console. Alright, so I restarted my browser window and
I rewrote the code. Notice I did it in one line. That's perfectly legal, but I'm sure you're
looking at it and thinking that's a bit more confusing that boy
looked initially. So yes, it's legal, but it's not very readable. So that is why I keep on
suggesting suggesting that we space them out and indents. All right. So I'm just going
to put it back in the same way that
you're used to. And what I've done this
time is to make sure that I put on the I plus equal one. So I'm just showing
you that if you don't write the code here
appropriately and you don't, you don't have the
correct condition. You can get wrapped up
in an infinite loop, which will eventually lead to a memory overall an
error on any machine. You wanted to be very careful. So let me try that again. I wasn't very careful
the first time, so that's why I'm
giving you the advice. All right, so let
I start at one, right to the console, the value of i and then increments and then checks
after incrementing, what is the value? It's two to instill
less than ten. So let's do it
again, console log. And then it goes
and goes and goes until I increments took ten, then it checks that
ten is less than ten. So it says, okay, I'm done. Let me cut right there. Those are repetition
statements, of course, with practice and more exposure, you'll see when to use them
and hold they're useful. But I encourage
you to think about scenarios that you'd
want to repeat. Thinkable math problems that are manual and you
could actually repeat some steps using our loop and go ahead and get
the feel of them.
13. JavaScript Functions: All right guys, So we're
coming along nicely. We're learning the
control structures of general programming. But within the context
of JavaScript. As I said, most of this is actually
transferable knowledge. So when you start
learning other languages, you'd realize that a
lot of the syntax the same or very similar and are, you'll be able to transfer
the fact that okay, I need to make a
decision or make a loop, etc, at certain points. No, we're going to shift gears and move into
another topic, which is a bit more
complex but very fun, very easy to understand once
you get the hang of it. And that is methods. A method in any programming
language is a way to write code one time but
reuse it a lot of the times. For example, console dot log. That is a method. Why
do I say it's a method? Because it's a line of code that allows me to pass
in almost anything, any number of times. And I never have
to write anything more than these two words. So log is really the method and console is really
just saying console, which is this black screen
that we're writing on recording, log whatever message. All right. This is a method that takes a value and then
carries out an action. I don't know how it does it. Behind this, these two lines
of code are these two words in the code that looks so magical and might even
look complicated. There's a lot more complication happening because it
takes the value here, does something tells
this entire browser that it should present
this message to you, the end-user, in a
particular manner. All right, so that's
why I'm saying that we don't know
how it does it. We just know that we say
console.log and it does it. So this is actually making that block of code
which could be 102050, more lines of code, very usable. There will come a time in your application
development where you will need to make methods. You don't have a lot of
built-in methods though, because you have methods that allow you to manipulate strings, you have methods that
allow you to manipulate the numbers you have
built-in mathematics, etc. There are a number of them. We can explore all of them
and really and truly, some of them you may never use, and some of them you only use
when absolutely necessary. But what we'll do is look
at how we can author our own methods in JavaScript
for our own purposes. Let us get started with
writing our own method. And sometimes methods
are called functions. Vice versa, anytime
you hear somebody say function or method, they're generally
the same thing. So the keyword is
actually function. So you start off by
seeing function, as you see in that
most times after, when we're going to
be doing something, we have a declaration or a
declarative statement, right? So let will say I'm about
to declare a variable. If declares, I want
an if statement, etc. So I want a function, I'm going to say function. And then I went to
give it a name. What if we wanted a function
that adds two numbers? Let's start simple. We
want a function that is always going to
print hello world. So instead of you writing
console.log hello world, every single time you
want it to happen, you want to just
call this one method and it just prints hello world. I can say print hello world. So I went to give
this function a name. Functions are characterized
by their parentheses, whether or not a
value goes in here, they are not optional. After the parentheses, we have open and close curly braces with the body of the function. So in here we write what we
want this function to do. Like I said, we're
keeping it simple. I want a console.log,
Hello World. All right, I don't
want to just say hello world from function. Imagine every time you
wanted to do that, you'd have to write this line of code and you
wanted to do it in multiple places in your code, you have a big website. You have a number of
places you wanted to print up articular message. You don't want to have to
write this every single time. And then if something
changes and they wanted to say hello universe, then if you rotate 50
times, you have to change. If 50 times. When you put
it all in a function, you just go to the
function and change it. All right, So let me, let me go back to hello world
and show you. When I press Enter, I'm registering that
this function exists. No. If I wanted to print this
message, I have two options. I can manually print it because I didn't know
a function and existed. And for as many times as I wanted to have to do it
and do it and do it. I can just call
printf hello world, open and close parentheses. And look at that. This is all I need. This is what you call
a function call. So this is the function
declaration, sorry, definition is the definition, the explanation of
what the function is, what its name is,
what it should do. And then this is
the function call, meaning I want the code inside a function to
happen at this point. So as many times as I
do that function call, it will always do
the same thing. So I'm just control and control V and inter
spacing all the doors. Every time you call this,
it will do the same thing. So that's what I was
seeing as many places as you might need
it on your website, you wrote at one time in
JavaScript and he can just use this method
on every single page, anywhere else you want to know, let's say the CEO or whoever
it was going to upset for. I said, Okay, we
don't want longer. Wanted to say hello world, wanted to say hello universe. All you have to
do is this clear, this goal to the
function definition. And it's no longer
print hello world, it's not print Hello universe. But I would want to kind of name my function
according to what it's doing. So I'm seeing print Hello World, but I'm changing
this to say hello universal kinda wanted to rename it so that if I have to pass over this
website to my colleague, they won't be confused. Why print hello world is
saying Hello universe, right? So you always want to bear in mind that naming your functions and variables and
everything should always reflect what it is for. So that when you go
on vacation to Bali and you come back to one
slit and look back at it. You're not confused
on wondering, Wait, why did I do this? What is this far again, the names will tell you, right? So let's say I
updated this method, I changed the name of it and I changed what it
was supposed to do. No, everywhere in my code
that had Britain till o, print hello world I'd have to update to say print universe because I know when that bit of code cause print hello world, it is still going to be. I'm sorry. That's a bit of misinformation. Let me backtrack. I didn't actually remove print hello world already
do is modify the name. And then this is actually
a brand new function. So there's print Hello
world that still exists. But knowing if I wanted
to print Hello universe, I would have to say
print hello universe. And then you'll see Hello
universe from function. So known that makes me of two functions that do
two different things. One prints hello world,
britain, solo, universal. Wherever I wanted to do either. I can do that function call. Because we're in our
console and we're not really editing a text file. That's why modifying the
function definition like I did, did not remove the other functional and it
just added a new one. If it was a text file, of course it would just be like changing sentence
and that takes file. Once you change that sentence, That's intensity is
modified for the rest of the documents because we're
not working with a document, but later on you'll
see how that works. But my point is
that we know have two functions and we can just
call either one at will. We don't have to write
this command Alt manually and wonder whether
it's universal our world, because we know when we call this one prints Hello universe, what to expect and the same
from print Hello World. Alright. Now let's look at
another scenario where maybe you'd want
to pass in a value. So like with console.log, we actually pass in a value. I will call this a parameter. The parameter is like a variable
design for the function. And then when we
pass in, a value, gets stored in that variable
and then we can process whatever we want
with that value. So let us say we wanted to give me any number and I
will always add five to it, something like that, or give you a percentage
representation of it. Alright? If I say a function and let's
say calculate per cent, are giving me a decimal. Yes, calculate decimal. Let's do that. Calculate decimal. Alright. I'll always divide whatever
number you give me by 0. I can easily just say num one. Num I'm seeing creates a function call it's
calculated decimal, and expect that a number or some value called num
will be passed in. Then just the same way. The only difference between this function and the ones
that we did for the printing. The only difference will be that this one takes that
value as a parameter. But what I can do here
is return, right? So this is what
we'll call a value returning function
where it's going to do something and this is usually useful math are
some manipulation. So you send over the
original value and you're expecting to get some manipulated
version offset value. What your function would do is return the manipulated value. So I would just say
return num times. 0.01, which if my
math is correct, is just the representation of 100 in decimal places, right? Another way we could do this is by dividing directly by a 100. Same thing. All right. Let's leave it at that one. So normal divided by a 100. And that should give us the
decimal representation. So just declared
this new function. And then if I call it calculate
decimal and pass in tin. Me passing this means that whatever value I put here is
going to be stored in num. So it should return
whatever I am manipulating or whatever
manipulation of applied to numb. So when I call this, I get 0.1. Sit up. If I call it again with 101, it will always without fail. Do that math for me. So this is why I said, you can write the code once and then use the phone SHA-1 as many times with as many other
values as you may need. Very, very handy. So no matter what
value I pass in, I'm always going to be getting buck the decimal representation. Let's try one more. What if I said function? Calculate product? This one is supposed
to take two numbers. So let's say num1 and num2. And then I want to calculate the product of
these two numbers. So products would be me returning the value after
multiplying num1 and num2. That's all we
calculate products. Alright, Enter. So now we have that
function also, so many functions I'm creating. So you're not limited,
It's not like one function can exist. You can have as many
functions because once it's something that
you may end up repeating, you want to make sure you have
multiple functions across the board that can handle
the situation right here. If I say calculate, not decimal this
time but product, and I give it 532, then it will return five times
30 to give me the volume. All right, then if I said
calculate decimal for 32, you will give me back
0.32. Now watch this. What if I said, I wanted, I wanted the decimal representation
of five times 30 tool. All right, look at this node. I can call calculate this well, because the end result I want
is the calculated decimal. Inside of that I can calculate product because it's going to be returning a value. So I can treat it like it's
a number or a variable. So I can see it
calculated product, then give it the five the 32. And guess what? Five on 32 would be the
parameters as outlined by the function for our
calculated products because that's what we
did in the definition. I need two values to
call calculate product. I have to give it two values. When this is returned. That value that is
returned is not going to serve as the volume for
our calculated decimal, which we defined to see
give me a value and I was stored in this variable called adenoma and then give
you back the results. So this is just one big
function call where I'm seeing, give me the value from this. I will need to get it, go ahead and use it as the
value for that. And that will just daisy chain. So it will meet
this function call that returns a value
and then it makes this function call and that
returns the end results. Alright, I can do a
number of things. When you're returning a value. If it is that you
wanted to store it in a variable, you could say, Let the variable b equal to, and then you say
calculate product. So let the variable b equal to whatever value is returned. You can only do this
with functions that return our console log for
Intel world and whatever. That's not going to return it. It's not returning,
it's just printing. It's carrying directive
and an ending. However, this one carries
out the directive and tries to send back the value after. All right, so then when
it sends back the value, you can always catch it in
a variable or like we saw, we can reuse it in various ways. But it's just a quicker way to multiply any two
numbers than to be writing this all over the place because it's,
the formula changes. If it was calculated price and every price should
be marked up by 10%, then you have to do that
for every single product on the website that
would be tedious. Whereas if you wrote a function, you just call the
function every time. If, if the formula
changes next week, you only have one place
to meet the change. You don't have to go to every single place I made the change. You made the one change
in the function, then that is it. All right. I can always just say give
me the product of 49. I don't know if I
pointed it out earlier, but when you have
multiple values, you always comma separate them. Have value one, value
two, comma, value three, coma until in number of values that you may have that you need for that
particular function. For this account, calculate the product
of only one number. I need minimum tool. If I wanted three, I just have to change
the definition and say comma three,
comma four, etc. I do that. It will
calculate the product, store it in the
variable product. And then if I just do a console
log or the same product, it will show me that that is the value instead of
products. Alright? That's all functions work
and that's all functions can make your life much easier. Alright.
14. JavaScript Variables and Scope: All right guys, so we've
looked at variables, we've looked at
conditional statements, we've looked at repetition, and we have looked
at the functions. While we have not discussed
is a concept called scopes. So before I go any further, I want us to look at what
we mean when we say scopes. When I'm in the general
console window and I say let some variable
name be equal to, and then I give it a value. To just name. This variable exists within the scope of the entire browser, within the scope of the
entire I'm console window. So I can use name
anywhere I want. If I wanted to write a
function that prints name, print name, value, alright. I don't even need to take a
parameter for that because I can access name once name
exists within the console, I can just say console
dot log and print name. So that's what we'll call
a scope so that no mix the scope off name globals. If I say print name value, it's always good to test names. So that's global. Any function, anything
can access needs. That's a global variable. Alright? Know, if I define a
function and I say print, that's a string value, I take a value here, so let's just call it, let's call it test string. That's what I'm
calling this variable. It is supposed to print whatever inside is inside
of test strings. So I'm going to say
console log test stream. Whenever we call this function, I just wanted to print
the value that was in test stream. That's
my definition. So in person TO know we have
the function that exists. So if I say print string value, and then I give it a value
like testing print function. Whatever it is I till it, let me get my splitting.
Testing print function. Give it the value function call, it will predict exactly
what I sent over. So that's something
that I bought console log dose, right? When he is send over
something console log it, prints it to the console. So that's what I've done. I've created my own
function where I can pass in any string and it
will print it to the console. You can think about that. But what I cannot do is access
test string from anywhere. Other than the function. If I tried to do anything
with test string by itself, if I tried to console
log test string outside of the confines
of this function, I'm going to get this error. That's what we'll call
once again scope. So this one is not global. Test string is within the
scope of this function. So any variable that is declared either in
the parameters here, it is declared within the curly braces off
any control structure, be it if statement, switch, statement,
repetition, anything. Once it is within
the confines of that entire
statements definition it is within the scope
of that statement. Remember when we were doing our repetition statements and I had done the for I equals
blah and whatever. But then when he was
tried it with a while, I had to define the eye specifically because I was
unique to the for-loop. So that was actually
scoping artwork. I just didn't mention
it that time. All right. No, you're getting to
understand why I had to go back and say let I equals 0 and then write the while
loop because I had to make a global variable called I at the time saw that the while loop could
see that I exists. Once again, you can define variables outside
of everything else, globally to the browser
and globally to every other bit of code
that will ever be written. As well as you can define
a variable and use it within the scope of a
particular control structure. I can easily define another
variable here and say let, let, let me, let me do that. So let me change
this above itself test string so we know that that is within the
scope of the function. But I could easily snap, sorry, breaking my own rules. There we go. So I could easily say let suffix equal In function scope. And then we're going
to start mixing and matching know because we are
getting to be professionals. So I'm going to say console log whatever string was passed in. All right, plus the suffix. That's why I put those
two spaces there. So that's we can have a space between whatever value
I pass in manually. And then this is going to exist within the scope
of this function. It doesn't mean modifying
a function definition. I press Enter and
then anything I pass into print string value, right? If I say, I'm testing, just testing TO in
function scope, right? If I call this, if I give him my name,
string, function scope, if I try to change
the value of suffix, suffix, you are no
equal to global scope. See that suffix is
equal to global scope, but didn't want to bring
this look at that. So even though it created
a variable called suffix and that once
again demo script, that's it gets away
with a lot of ash that should've been lit suffix, but let's work with it. So even though I defined
suffix up top here with the string global scope, when I call my function, the value that is there that
we know is coming from. Suffix is still in
function scope. Because when I call
the function here, I gave it the value
for test string. This string null has its value. And then I define my function version of this
variable called suffix. Then I loved whatever value was passed in plus
that's suffix. That's just an example
of how scoping works. When you have curly braces. Anything you do inside
the curly braces is confined to that, those curly braces,
if statement, function for-loop,
whatever it is. If you need new variables
just to carry out that particular operation inside of a set of curly braces. Feel free to do that because
that variable is going to be confined to that
particular control structure.
15. JavaScript and HTML DOM: All right guys, so
we've been looking at the language Javascript solely in the context and the confines of our console in our browser. Let us look at it within the context of how it
might really be used, which is to interact
with regular HTML PH. What I'm going to do is bring up a fresh window for
Visual Studio code. If you want a brand new window, you can actually go to file
and just go to New Window. So I don't want us to
modify the website that we've been building up until this point,
at least not yet. Because like I said, JavaScript is something you use
when you need it. It's not. Oh, I'm going to experiment on my
website with it. But it's good to know
the power that it has. So let us open a new window, and then let's
create a new file. And let's create a
new folder somewhere. I'm just going to
create a new folder called G is testing and that's the one that
we're going to use R I'm going to use you
can create your own. And then I'm going to
create a new file, which of course we always called index as it is the first file. I'm just going to spin up
the HTML5 Boilerplate. And I'm going to create
a few test tags. So I'm just going to say
testing JavaScript in a p tag. All right, we already looked
at naming our elements. We can have the ID
testing JavaScript. I'll just call this one
ID test on alcohol, this testing JavaScript
with ID attribute. I'm going to give these
to the same class. So once again, this
is more centered on JavaScript's not the whole
website yet, at least. So I'm just giving these values. I went to show you how you can interact with your elements. When they have, when you want just the p tags
versus you want a specific element
with an ID versus one or few width,
the same class, the same way that we can interact with them using
CSS when we can target the particular element based on its entire element
tag or ID or class is very similar to
whole JavaScript allows us to target what we need
to, when we need to. All right. I'm just keeping it
simple with all of this. I'm just going to
go live, right? So now we are alive. We have our little page. And then when we
right-click and go to Inspect and just
don't go window, we can see our HTML stuff. We can actually jump over to the console and we can actually start
interacting with it. So let me just clear the
console and zoom in a bit. All right, so let
us say we wanted to see all of the p tags
on our pH, right? So clearly we have
a few petabytes. That's all we put on the page. Peta Guan P tag with an id
and class or classes, right? So if I want to access anything, I have to say a document which you don't want to
swing that type document, it highlighted the entire page. I don't know if you took
note of that document represents the page you're on. Right? Then, thanks to the browser, we have a bunch of
functions available to us. Like I said, JavaScript is vast. I can't sit here and go through every single thing and so on. These things you mean never use or would use in very
specialized circumstances. So in this case, I'm
going to go to get, then we're going to see
that we get element by ID, get back class name, get by name, get by tag name, and get by tag name. Let's start with talking name. Tag name means I want to specify
which tag I'm targeting, so I'm targeting p
tags. Look at that. No, it's showing me I
have a collection of four of d Tau here, p with the ID test and
P2 with the test class. And then it's seeing
test has that. So it's like this is college and this is what
we'll call an array. Later on when we're
modifying our own website, we will work with an array. But I'm just bringing your
prison to that scenario is characterized by
the square braces. So if I said get
elements by tag name, then I'm going to
say let p tags. So that's just the
variable b equal to. Then I call this code no P tags has all of the
elements in there. Then I can call on test. I can call on, Let's call on tests. And what if I wanted to change the value in it so I can
call no inner, inner text. We've got that intelligence. Let it equal b equal to
resetting a text from console. Watch what he's going to happen. So one of the p tags,
when I press Enter, we've got that setting
text from console. So I can actually use
JavaScript to change it. So remember when
the page loads up, everything is not
static, it's there. The only way to change
something is to go back into Visual Studio
code and change it. But that's when
we are designing. What if we wanted to put some of the power in our users hands? So that's why we
write JavaScript inside of our code to allow
those things to happen. Here we're seeing resetting
text from console. Alright. If we wanted to target the specific, I'm seeing
too much here. If I wanted to
specifically be specific with which target tags I want, I can say get element by ID. By saying get element by ID, I would specify that ID name, which would allow me to target whichever id value
there is, right? Or if I wanted to get the
ones with a class name, I can say get elements
by class name, which in this case would
give us the test class. It was to call it Sean. While they did was print
all the collection. So I can say let B equal to, then reuse this command
or that statement. No, we have class name
tags having those two. Then from here we can actually
see what is the length. We have two of them. We can see a number of things
and we could even put this in like a for-loop where we're
going to change the value. So there are number of things that we can
do and like I said, I can't exhaust
them, but these are some nuggets that I'm sharing
with you as the whole. Javascript allows it to
interact with the actual page. Later one where I didn't
get to our website. We will see how we can modify the actual page to put
scripting in there, how we can put it
in its own file. And I will go through
some of the basics with you as we go through adding the actual JavaScript to our actual website project that we have working
on. So stay tuned.
16. How To Use JavaScript: Hi guys, welcome back. In this lesson, we'll start
looking at JavaScript. Javascript is another
one of those languages that you just have
to explore really. But it is one of those languages that is really
easy to get up to speed with and start understanding how programming
works in general. So JavaScript is something that is really built into
the browser and it allows you the
capability to modify real-time what is being
displayed on the screen. As we've seen once or at
HTML, answer add the CSS. It's more like a
citizen. Forget it. While the browser is running, it's only going to render
what has been written. Javascript allows us to
modify that while the pH is LPS after the Berlin has already given us
our HTML document, it's sorta saw the content, IT standards and everything. We can't change anything. I bolted again, but then we can allow Java or JavaScript
or other allows all still make
modification on the watch is being displayed
almost at will. So let us run some experiments here and see how
JavaScript works. So the first thing to note
is that we need a new tag. And that would go usually
at the end of the body tag. So it's either
going to go inside the head tag or at the
end of the body tag. Number one, the reason
you wouldn't put it in the head is more
like rendering. When the page is rendering, you want everything
on the beach, then you want to run the script because the browser
renders going don't. So if the Oncotype DX
first on the page, that's what's winds
up here first. Same thing for CSS. It's always good to render
from top to bottom. So if you have a p tag style appear and then you
calm down here at iterates another P tag style that contradicts the one above, then it will actually
override it. So you'll want
everything on your page before the script runs, which is why we usually
put it at the end of the body tags based on the
nature of descriptive me work. Sometimes it may not work
if it's placed on the top. So I'm just going
to go down here, say script, open and
closed script tag. All right, very important. And then what I can do is
create a function or let me, let me do the simplest one. Sorry, I wanted to do an alert. So on alert allows us to pop
up a message on the screen. So once the page is loaded, page loaded J S alert. All right, so let's
see what that looks like from our browser. So if I navigate over
to the index page goes, that's where I put the script. It's on the index page and
navigate over and look at that page loaded JS alert, since it, that's even popping up before it and CEOs, right? So that's what that alert does. It allows us to modify stuff. So if I put something
like a button, because generally
speaking, JavaScript is triggered based on an event. You'd want something to
happen when something else happens or so if I
have pulled up button, let's say type equals button. And that is very
important because buttons default to
submit buttons. So onclick, which is the event. So I'm seeing when this
button is clicked, I wanted to call function. I'm going to save
button clicked. And that's the function. So I'm going to say critique me. Alright, so we have our
button on until you supposed to call button
clicked as the function. All right, so let me refresh this page and
here's our clique. Me. When I clicked,
nothing is happening. If I inspect element, you'll see that I'm getting
a bunch of console errors because it's seeing
buttonClicked is not defined. So it knows it should turn to the something on one clique. But buttonClicked is not defined so it doesn't know
what to do it seeing. Okay, I see I'm supposed
to do something, but there's no indication. So in the Java script area, I can go ahead and
define that function. So I would see literally
function and the name of the function with the open
and close parentheses. So those are very important. And then inside that
function, Let's see, I create the nuts alerts to see. I am critiqued. All right, So we saw
that the JavaScript fired automatically when we
just put the alert there, it just went you just fired? However, this time
I'm trying to tell it only fire when the
button is clicked. So when I go back, I'm going to reload the page. Notice the page is reloading, no alerts popping up. But when I click, I get the alert, I am clicked. So this is me, you know,
superimposing, being dynamic. And this is the first step to
making something dynamic in web design using
JavaScript. So click me. As many times as you do that, you'll get the alert each time. So that's an event. All right, so let's
start getting, as they would say,
jig you with it. Alright, let us see what we can change on the page itself
when the button is clicked. What if I wanted to change the text of one of these tags
when the button is clicked. So click me to change
text or other, let me create another button. So click me. And then I'm going to
see to change text. So then I can have multiple. So click button to
change text, clicked. All right, so that's another
function that's I want. So as many functions
as I need to make, I can meet them cell
phones on for me and then have our function
to change. Takes one clique. Well, what am I going
to be changing? Let's say I wanted to change the text off this
P for P tag for, I wanted to change
that one sticks to see I have been clicked. This are, this is, this
is JavaScript text. All right, one, I need
to be able to target it. So I need to know by ID. So I went to give it
an ID to see target. All right. Nothing funds to
just target tag. Remember, I will see you in that don't have
two elements with the same ID on the same page because that can
lead to problems. So here's exhibit a. When I want to get the
element by the ID target tag, if it sees two or
three or two or more, it doesn't know which
one is really targeting, so it's just not work. All right, so we can
test that later on. But now I'm going to target this P tag and say target tag. And then in this peta or in this function rather I'm
going to say documents. So document means on this page, I want to get element by ID. So you see all of
these you can get by a tug mimic and get my name. He can get my class name, class name being class
equals whatever. So if you wanted to
affect multiple, then again get my
class name and get by inflammation it would
get all those p tags. Or you can get by ID, meaning the specific one, right? So get element by ID. And then inside of
the parentheses you have open and
close quotation marks. And then you put in the
name or the ID values, that target tag is the ID. Right? Then I'm going to say
what I want to modify. I want to modify the inner HTML in HTML mean what is
inside of that tag. So the inner HTML here
is going to be equal to, I wanted to say
Java script text. All right, so let us see
what all of that will yield. So I have my extra boat
now remember that we're targeting Todd for looking
at that JavaScript text. Me still works. Everything is working
and we'll clicking it. It will always only change to JavaScript takes based
on what we wrote. But if I refresh the page
is always going to redo the original HTML document
because that's what it knows. Once I click again, it will change it on the fly, but it does not change it permanently through the website. It's all changes it within
the context of my browser. Now in a nutshell, that's what javascript
offers, right? There's, there's a lot more
to it because IF statements, you have loops, you have a
number of things you can do. Context determines what you need to do on JavaScript,
to be honest, is one of those things that it's good to have the
basic knowledge of. But you really
won't end up using it onto your face
with a situation where the alternatives
may not be so favorable. So I'm not going to spend time exploring every single
aspect of this language. I'm really just
showing you a whole. It helps you to modify the HTML that has already
been entered are your DOM. That's what it's called, right? So you can just have that
dynamic feel to your website. No. There will be situations
where you want the same kind of script to be run
on multiple pages. We're running into the same
kind of territory, know, like with our CSS when
we add our CSS in the head area and
we wanted it's on multiple pages where to
put it into our file. So that's where
we're going to go. And next, we want our script
stuff in a file for itself. So I'm going to add a new file explorer or
it's, or File Explorer. And I'm going to call
this one script dot, and our new extension is js. So notice is the
Visual Studio code. It always gives you a
little indicators they can know what kind of file
you're dealing with, right? So in a JS file, we don't need the script tags. All we need is the raw
JavaScript syntax, right? So script.js, and it would just have
those functions there. So then buck in the HTML file or a script tag will know it looks something like this
script open and close. This one unfortunately
is not self-closing. It does come with an
attribute called SRC that allows me to reference
the file script.js. So then I can take this and apply it to every single beat. So contact also has a button, let's say Contact Us. Button and click. I wanted to see this
is an alert, right? Or I am clicked rather, right? So buttonClicked
must be called on the contact button click also, right, so include this script. And then I have this input type, submit what is giving me
a button. But guess what? I can say, onclick. Onclick, I want you to call. Sorry, I forgot the
function names. So on click I wanted
to call buttonClicked. Alright, so let's look
at how that will work. So I know that on my homepage I have discrete
me it will call the alert. That's fine. Also on the Contact Us, I have this button which when clicked calls the same function. So there we can make the JavaScript reusable
across multiple pages. You have JavaScript needs to
apply to multiple places. You do that, right? And then it will continue with its operation as
it normally would. So JavaScript is shareable and you can go in its own file. No one thing that I'm going to show and then we
can close this off for no is what happens when
you start mixing up fast. So as you see here, we
have images one place, you have CSS, JavaScript
file, web HTML files. Generally speaking, I'd
like to see files mix stoplight that each file
should be its own section. They ischium alphas are
the most important one, so they need to be
at the root folder, but the others need to be
kind of separated because you might end up with
multiple CSS files, multiple images
for your website, multiple script
files, et cetera. So what I do is separate them, say it creates a
folder called CSS. So you have the file, New File and New Folder, or you can right-click
and say New Folder. I create a folder for
JS or JavaScript, and then I create
another one for images idols call that IMG. And be careful because
he had just created the IMG under the js folders. Me. Let me redo that one. So GS so make sure you're not selecting any other file or
folder and you're creating. And then IMG. There we go. So then I can
move script to the data. So I'm just dragging
and dropping. Yes, I get the prompt move. Sure. I'm going to move
this CSS here though. Ask me again, move and then image or images
can go in there. So no, it looks a
bit neater, Right? I know where my HTML files are and as many
images as I have, they're all on the one folder. All the CSS files are
known folder, et cetera. But look at what
happens to the website and everything looks
back to normal. The cooking doesn't work, the images are gone,
everything is gone. Why? Because we move the
locations of the files. So that's another thing. Remember I always said because they were
on the same level, we could always
call them by name. No, there enough folder
and somewhere else. So what I have to do
is call the folder, then get to the fast. So for the style sheets, the folder is called
CSS up to say HF is CSS slash styles. Then for the Contact Us page, now it knows where to get
the stat sheets right. So that's just a quick
update we need to make on every page. So all the stat sheets
are no CSS style. Let me just go up
and modify that. Right? So all the pages known or
that they should go in the CSS folder to
get the stylesheets. All right, same thing
for the JavaScripts. Notice no clicking is working. So the JavaScript file is
knowing js slash scripts. Right? So I just go in there, get the JS file and update
in all references all over. And once that is done, the clicking works once again. Alright, so that is called
relative paths, right? You always want to keep
your paths relative to the file lattice strains
access the other files. So the Contact Us
page is that root, but then it has to go
into j to get to script. All right, so that's another
important rule of thumb. So same thing for the
images on the boat. This is no IMG slash, right? So I'll just remove these and I'll just duplicate this one for as many times and
then order is restored. So that's just another
principle that I thought. Oh, can I sneak in
there as the variety of files begins to grow
in your web project, you want to make sure that
you are separating them with clear delineation
so you know exactly where to find water and whole.
17. Using jQuery: All right guys, welcome back.
So we just took a look at JavaScript on the water
you can do for a snow. Let's take it up a bit and start licking at a framework
called jQuery. Know a framework is a result
of group of developers, usually open source developers, who have basically been
at this thing for years. They keep on doing the same
thing over and over and over. And they figure if
they keep on doing it, then there's somebody else out there who keeps
on doing it too. So what they do is they kind of package language or certain commonly used commands from a particular language. They package them into one file and then give you a certain sets of rules on how you can reuse them in using a
fraction of the code. So jQuery is that
kind of framework. So JavaScript, as I
said, is very powerful. There are lots of things to it. But then there are
certain things that would require five, 10 lines of code. And then what they did was they kind of package that I'm puts it into what we call a
jQuery file or a library. So then you can access
that 10 lines of code using one line of code
calling the jQuery function. So that's what we're going
to be looking at today. So the first step to getting jQuery into your
project would be, well, there are two
options really, you can download the file. So you can actually
just go to jQuery.com. And we can just do
that here, jQuery.com. And from here you'll
see it's light, it CSS3 compliant, and
it's cross-browser, right? And it gives you some
examples off the syntax. They can actually
go here and get some very good documentation
from a boat, the API, right? You can also download the files. So if you download the file, then you're just
going to be getting another js file like we saw. Or you can do what we call
or use what we call a CDN, which is short for
content delivery network. So these are hosted
files on the Internet. So I just typed in that link, Google APIs.com, and it's a hosted version of
the JavaScript files. So you see the JavaScript now we have gone through
is basically nothing. All of this is doing some crazy stuff that I could never sit down
and teach in one sitting. This is years and years of
doing the same thing in JavaScript all combined and
what we'll call minified. If you took off the
Min of the link, then it would look a
bit more readable, but even then, it's
still quite unlocked. You can see how
huge this file is. So minification is
really the process of taking notes all of
these whitespaces, which in variably
reduces the size, the overall size of the
file itself, right? So that's why we end
up with the min. So what I was saying is
that instead of don't loading this min and trying
to put it into the project. You also have the option
of just referencing it directly from the website. So this would actually load
faster when your project is see on the internet
because it would Lord Foster, from Google's server, somebody
is computed and it would from your server to their computer or to
their browser, right? So what we'll do is just use the CDN option and include jQuery in our website
as we have it. So go into the index. Let's start with the index. What I will do is use
the same script tag except the SRC is going to
be the URL to the file. So if you're not working
with an Internet connection, then you may not
have that option. You will want to go that fast. So if you have to download the file and that's no problem, you have a number of options. To me, the easiest one
would be to go here onload. Sometimes what I do is I
just go to the seed in, copy all of this anyway, going back over,
creates a new JS file. So this creates a new
file and I'll call it jQuery dot js, right? And then paste the contents
of the file there. And then that's my
jQuery js file. Read this. It's hard to look at, but that's what it is. So then instead
of using the CDN, and I would say use
either our butts instead of using the CDN, that dot point, you could
just say you're referencing your jQuery dot js file or
whatever you call it, right? So you have a number of options. Once again, that should
be slash jQuery. There we go. All right, so you have a number of options when it comes to making reference
to this framework. Note also that I'm putting it up both my own scripts
because the thing is that this provides like a basis. So once I get it does a 100, quite a few common
commands in JavaScript. I might need to reference all these commands in
my own script file. So order matters. Let it load first and then I can make reference to the minus
2 jQuery stuff in my stuff. So always put those jQuery files up top and all the other dependencies on
libraries and so on. Always starts off with those before you get to
your custom code because you might rely on
code from those other files. Alright, so let
us take a look at what jQuery can
bring to the table. All right, so I'm,
I'm not one to use my script file for this. I'm going to write
my own JQuery code right underneath here. And I'm going to still target this when it's clicked, right? So let me take off this onclick or living
creates another book. Actually, let me just create another button so that we
can retain all our examples. This will not have an onclick. I don't want to see
me to hide title. So remember we have the title. We had the title. Here's our title, was
getting guns, speakers, just all so we want to hide this title when this
button is clicked. All right, so to get
started with jQuery, what do you want to do is say
when the document is ready, then I'm ready to run. So you can see dollar
sign document. This is a trademark of jQuery. So remember you see in document before it goes in R script file, we did see a document, right? So in jQuery you
see a dollar sign, open parenthesis, and then whatever it's
easier to targeting. So where it's arguing
the entire document, if wanted a p tag, would see p. Right? Sorry, no quotation marks. P. I've got, I keep one-person
wrong thing, right? If I wanted to target. So it's almost like CSS. If I wanted to
target, that's OK. I can just see that
top dollar sign, open parentheses and
then that toggle right? Butt, right. No, I'm targeting the
entire documents. I'm saying document.ready. In this document is ready. I want to execute this function. So inside that function at the end with a
semicolon, right? So the syntax can take
a learning curve, heredity can take
other and incur, which is why I keep on seeing
practice makes permanent. So dollar sign, open parenthesis the towel
you want the targets, which in this case, I
submit the document first. And then I'm seeing Dr. Reddy, meaning this is what I'm waiting
on relative to this tag. Execute this function. So that inside that
function I can have as many other
functions are, as many other things
that I want to do. Know the shorter way of doing this would actually
be just the C function. So there's actually
a shorter way. So I'm shooting
everything right, know all the, all the
secrets of the universe. So most examples that
you would see would have document.ready because for years That's all jQuery did it. But in more recent times, they've provided or
abridged version of that word kinda
say dollar sign, open parenthesis, run this function
because it will already inferred that I can only run this function when the
document is ready. Alright, so let us look something like the
button click event. So we already saw how we can
get an onclick event using regular JavaScript with jQuery. I can know C, dollar
sign, open parenthesis, and then see the button or to eliminate at I am looking
for like we'd just sit. And then if I say a button, this is going to target
every single book here, which is not really what I want. I want to target this
particular button. So I can either give it an ID, which we know is
wholly uniquely name. So I'm going to say
Hide Title, btn. So I tend to do that with my titles are
with my IDs rather. So I know what
element type it is. So Hide Title btn. So if I want to say I want
to target Hide Title BGN, what I would really do
is open quotation mark. Just like CSS, I
use the hashtag, put in the ID of the
elements I'm targeting. Then I say a dot, Click, right? So I'm seeing when
this element is clicked, execute this function. Alright, so you'll see a
lot of that in jQuery. You will see the
dollar sign or metope, the element that is looking for and then what am I waiting on? So this is live events. So we saw with
document.ready when the document is ready,
all right, run. Well, when this element is clicked, execute this function. So what are we putting
inside of that function? So I can see, and before we go any further, I've been going about
this all wrong. If you saw the mistake before I did, then congratulations, you are officially
smarter than I am, but we're writing a script, so we need our script. I sincerely apologize
for that oversight. And so you'll start seeing that the code hinting the
colors start looking a bit more welcoming than
just the white takes. All right, so as we were and I'm just going to make
sure I do my indentations. I can see where everything
starts and stops. So this is the main function, and then this is the event
inside of that main function. So there we go. This looks a bit better. Now that we're in the script, you'll start seeing a
few more code hints. And if you need extra help, you can always get
the winters and jQuery snippets from
the extensions. Say if you just go today sense
and then look for jQuery, you would see different snippets and you can get some help, additional help with your
coding from the extensions. All right, so let us
get back to this. So Hide Title btn. Click once I'm
going to do is then targets this title
element by its ID. So then once again, dollar sign, open quotation mark,
single quotation marks, open parentheses or other. And then quotation marks and it can be singular,
can be doubled. It doesn't really
matter at this stage, but in hashtags that I
D of the elements dot. And then I'm seeing all of the possible functions that
they can carry out in jQuery. I'm going to try this
one that says Toggle. So it says display or
hide the elements. So toggle. Right now imagine
you are to read, That's all it's in
JavaScript to see. When this button is clicked, check if title is displayed. If it is displayed,
then hide it. If it's not disappeared,
then show it. That's two if statements
are and that's a whole block of text
as I just told you, as opposed to when the
button is clicked. Fine, title and target. Simple, right? So that's what jQuery brings to the table that
kind of condenses. A lot of the code would have
been writing extensively. So let me jump back over to my homepage and my Live
Server stopped running. So I can always just
right-click and go live or just click Go-live in
the bottom right corner. And we're back up. Here's my new button
and look at that. When I click it, it's
toggling it. Nice and simple. Look at all we accomplished through basically
three lines of code. All right, so you
can always monitor, you have events galore, and they're not
limited to buttons, but just to show you all
of the potential events, you can get the
value of some TA can tell the class, right? You can look for the siblings. You can change the
class, remove the class, and she has a class
or remove attributes and add attributes,
right, so what if, when it was clicked
instead of toggling, I wanted to add the class, I'd class, and then I
can specify the class. So in the styles.css, which classes do I have? I have dp, have, let me create another class. So I'm going to give this, I wanted to create
a class called dot sub title. All right? And what would happen with a subtitle is that
takes the curation will be let's say strike through dotted,
just something different. And the background
color will be black. And the color itself, color of the text
would be white. All right, so let's try that. So when clicked, I wanted
to add the class subtitle. So I'm Muslims and say
add the class subtitle. And once again, I
tried to be case sensitive as best as possible. So let us see what
that would produce. So going back, refreshed for
me, sure, everybody's nice. I knew when I do
that, look at that. So are the ticks change to
white, so Something happened. So I'm going to
inspect the element to see why everything
didn't change. So if I inspect and take a look, see the class of
that did get at it. So let me just refresh
and do that again. So on the initial load, There's our H1 tag,
title and everything. Now when I click, you'll
see that it changed. It. It put in the subtitle, say changed real-time
for us, right. However, if we look
to the rights, are going to see that title is still taking precedence
over subtitle. All right, so all of the elements didn't get
because these are still being overridden or superseded by title or by the
origin element CSS. So that's why the dotted
line didn't appear, the block didn't appear. Blue color white, is there. Alright, so yeah, you can play around with it and you
can see how you can modify what goes where and how you manipulate the
different elements. Once again, this is
something that you use when you need it. You could sit down
and do buttons and make it modify the DOM all day. I could say when
they are clicked, I want all p tags. All p tags to have the inner HTML normalcy
in our width or height, would he be HTML? So sometimes even I have to
go in and just type on C, okay, which one best
suits what I would like. All right, so this
is J query, right? So this is me seeing when
I click this button, the same one to hide titled btn, I wanted to add that class. So let's change
about the toggle. Since toggle worked perfectly. Alright, so it should
hide it and it should change all the petals HTML
to say this is jQuery text. So refreshed the page I. When I click, we see the toggle works but
the text isn't changing. All right, fine, no problem. So that means that HTML vowel, those are underwrites ones, Is there anything else? Are there's texts. Let's try a text. So I go back, I refresh, and that's still doesn't work. I see my error. I should have had the quotation
marks around the p tags. So let's try that one more time. And all of this is
just to show you are working now, right? So all of this is
those to show you that sometimes you just have to go in and explore to find the
solution that you need, right? So here we see that
whenever we want to select all tags off
a certain type, we need the quotation
marks around it. When it's document, we do
need that, that's fine. But then when we want to
target a particular ID, we need our hashtag. If we wanted to target
a particular class, like I wanted p, r, I wanted the information class, then it will be the same thing. Dots information, right? So dot information, anything
that has information. So I'm going to say this
is in for me, Sean. All right. So I'm changing all the
p tags to say that. But anything with the
information class I wanted to say this
is inflammation. Do that. You see jQuery text. This is information. Alright, so there are
quite a few things you can use jQuery to do when it
comes to manipulating. But once again, for
me it's a use as you need kind of library. And there's tons more to it that we're not going to be able
to explore in a few videos. Once again, practice
makes permanent.
18. Introduction to Bootstrap 5: Guys, welcome back. So we're wrapping up our
basics in HTML and CSS. We already took a look at
the basics in JavaScript, and we took a look at the
framework called jQuery, which builds on top of the B6. So just the same way that
jQuery was designed to kind of reduce some of the repeated
JavaScript tasks on code. It's the same with
that Bootstrap, which is what we'll
be looking at NO, is designed to kind
of reduce some of the repeated CSS code that developers tend to do
every time they build a upset, they tend to do these things. So what Bootstrap developers
did was compiled all of those basic CSS
functions into one file. And then they just provide
it to you for free. And you can just use it at will. So it's excellent
that documented. You can get their guard get to this website by going
to get bootstrap.com. And the latest version
is version 5, 1, 0. But then they're mostly used one that you'd probably
see on the internet no. Would be 4.6. Since that one has been around for
much longer and brought up boat some
significant changes since the version
on preceding it, which was version three. But we'll be focusing on
version five at this point. And the installation for
it is pretty simple. It's the same concept. You can get the file
integrated into your local system or your
website set of assets. Or you can just use the CDN. So they actually give
you the CDN links that you would
have CSS CDN link, and they give you a
JavaScript file, CDN link. So once again, if
you just highlight that URL in that CDN
link and navigate there, then you would actually
see that entire file. And this is the
minified version. If I take old Min
and just look at the CSS and it looks
a bit more readable. And you see it's the same
kind of goal that we have been writing up until
this point right here. Just a few more things and a bit more detail
because they've covered a large number of
scenarios pretty much. Alright. But for this situation, we're just going to use the
CDN link to integrate it into our website that we've been
building up until this point. So let us start off by copying this URL so I can
just copy right here. And then I'll go over to the website file and then
the wear on the index bits. So what we'll do
is put it where we know we put our CSS files. So I have my local CSS, which is still
important because I might have does as I want. So I would write my costume for my custom styles and
set off my own CSS. But I would want to include the, the bootstrap file for
the overall styling. All right, so again they'll
say link rel stylesheet who had been through disparity
in turf is equal to. And oh, actually, I just realized that we've
got the whole link. So let me just paste apologies. I didn't realize we
got the whole link. I thought they
were just the URL. So you see here it's
the same link tag, just a bit bigger. So we have the HRF is equal
to that CDN reference, right? Once again, if you don't
have or you will not have consistent internet connection while building and testing, you can always get that
file, save it locally, and follow the same
procedure like what we did for us or
low-cost datasheet. So you get the CDN, you have the rel stylesheet, and then we have a
few other things of this integrity flag, which basically uses like
encoded string to help us or help the boroughs
or to truck the verge on, off the file to make
sure that this is a legitimate five
because there are people there who will put malicious files on CDN
servers and then advertise, Oh yeah, you getting the
Javascript bootstrap file, but then the integrity
code doesn't match the one given by
the original distributor. So then it would be invited. So that's what that
integrity check is kind of therefor
and cross-origin just means it can be accessed from different resources
are crossed the internet. So there's no need
to change this, whatever they gave
us, we use it right? And these are generally
important for CDN links, which is why they
made sure to give us. So the other one
would be this bundle, the JavaScript files, so
we can copy that also. And I know I'm getting
the whole script. So I don't need to write
my own script file, so I still have the CDN for jQuery commented
all what I'll do is include this JavaScript file above the jQuery for instance. So that JavaScript file
there, no problem. And then we have
any other scripts. So order, once again, always matters if you have something that
depends on jQuery, jQuery needs to proceed it. So I'm saying that because in previous versions of
Bootstrap, bootstrap 4, It's actually had a dependency on jQuery is if you look at the bundle or the JavaScript
parts to be inserted, you would see the jQuery
file being referenced above. The bootstrap file. That's because the Bootstrap JS had dependencies on
the jQuery file. Just the same way that our script file has dependencies
on the jQuery file. So jQuery has to come
first, then our own. In Bootstrap 5, however, they have shifted away
from jQuery to a point where they only need
one JavaScript file. And so that's all we need. So it can come
before the jQuery. Now that we've done
all those inclusions, lets us take a look. I'm not going to
change anymore code. Then the splitting into
style sheets and the script. And I'm just going to go over to the index page so we
can take a look at it. And if you very carefully, you would notice slight
differences with the buttons. Leave the links different just by putting
in that CSS file, certain things have changed. Alright, so once again, that CSS file has quite a few styles that cover a wide range
of things that have some default texts that really good default fonts rather do have some default
colors are really look good. And just by putting
in Bootstrap, it's a game changer off the bat. So if I compare home
with a boat toes, then you're going to see, okay, It's back to our
regular styling. Then of course, there's another refinement about WHO this page looks
compared to the others. While we're still on
the topic of Bootstrap, we're also going to
start taking a look at General Lee, right? So you'd have realized that the page is stretching
the content on the page rather is
stretching us far left and as far as possible. That is clearly indicated
by a whole fired this what was this
maroon but groaned, WHO far across the page dot stretches because all we
did was set this text. But H tags, p tags, a div, certain tags that
will always go as far across any container
they're in as possible. No, that's the
keyword containers because what happens is that no upset that you really go on unless they have content
filling it to the brim. But generally
speaking, they leave a little margin to the left and a little
margin to the right. But I don't stretch extremely left and right outside of
certain websites, right? So with Bootstrap, it's quite easy to accomplish
something like that. So we're going to look at a new element and
it's called a div. A div doesn't really
stand for anything, but I just think of
it as divider, right? So a div would be like box. So div generally
stretches as far left, as far right as it possibly can. The good thing
about this though, is that you can actually dictate the length
and the width, the height and the width
of a div or the height is usually determined by the content you put in it rather, and the width you
can determine that. And then you can
use these divs or boxes of content and stuck
them beside each other, underneath each other and manipulate how you want
the data displayed. So generally speaking,
with website layouts, you would have a div, you would call a
container or a wrapper that everything in the pH
usually goes inside of. So let us call this one div
id is equal to container. At this point is very, very important to use IDs. It will work, but it's
much easier to read. When you use IDs, the new mere DFS
then when you don't, because then when you
have divs in divs in dibs on devs,
devs, and so on. Now you don't know
which div is for what the ID can help you tell which we live
is for water, right? So inside of the container, you generally have a
section for the navbar. So I'm just going to say
div id is equal to cool. And I said it easier
and then I have div, id is equal to cause
underneath the navbar, usually they have the content, so I'll just say content, right? And then maybe I would have
another one that says div, id is equal to Footer. That's where I put
I'm a copyright information, that kinda stuff. So generally speaking, a website or a web page rather
has three sections. The NAV, the content,
and the footer. Of course, he can add
more because then when you want side-by-side using the content or
side-by-side columns in the content that you can add
more details as you need. But for now we'll
keep it very simple. So I'm going to take my navbar and put the inside
of the div called nav. And then I'm going to
take everything that was supposedly are
quote unquote content. I'm going to take all of
that and put inside of the content div, right? No indentation aids
readability also. So I'm always, you're
always going to see me kind of indenting
my code to make sure that I can see
where one starts and where whatever was
put inside of it stops. All right, so div for the nav. Nav links. All right, let me just
put them side-by-side. So I have my nav
links and then I have title and all of the
contents inside the content. And then down here
I'm just going to say this is the footer. Right? Now when I look back at
the page, nothing changes. Read, everything looks the same. So divs don't really, you don't put in the xylem
magically gets structure. It's really for your
structuring and your own manipulating
ability, right? So if I wanted the container to not be
as wide as the pH is, I could easily see style
and we already did. Why we don't use the
inline style sheet because then the structure
is going to have to stretch across multiple pages
and it would be inefficient to use the style
guide directly inside here, but we'll be looking at
that's enough to understand, to display what happens when
I tell it to 800 pixels. By 800 pixels would
mean that whatever your screen size is or
your resolution at a time, it's good to take up 800 pixels from left to right of that. And that's why you see that
maroon backbone cutting off. So for me, this is
where it's 100 pixels stops on the screen I am using. All right? Or if you didn't want it, that strictly could just
say 80 percent, right. So percentage means that I
don't know the screen size. And this is where
you start talking about responsive web design, which Bootstrap is
in full support of. When it starts all
Humboldt percentage, it means whatever
screen size I'm on, I will try to take up
80 percent of that. So 80 percent on my screen may look different from 80
percent on your screen. What you will always be 80 percent relative
to the screen size. Now the next thing is that you'd want a margin to the left. And once again, these
are things that web developers always do when they start
designing websites. They always do
these little tricks to get the structure
right and so on. And then that's amongst
a lot of time spent redoing this activity because the number would
have to do this, a styling, at least in my style sheet and
then make sure it reflects across all pages. Not a good thing
about Bootstrap is that it comes with
a preset classes. I can say kras is equal to and I'm just going
to say container. Alright? No, container. You can find documentation
for container in the Bootstrap documentation. All right, so if you look in docs and then you'll see getting started initially
hoped to set up additional. You are basically
old body helloworld, all of these wonderful things. But in the, let me see
if I can find it now. And I'm just going to
show you my trying to find this so you can find layout and containers.
There we go. And have a class called
container would set a max width at each
responsive breakpoints, meaning, just by
using container, it will assess the
screen size and automatically center line and margins on whatever you put inside of the div that you
said is the container, right? And they give you code examples. So different screen sizes
again say it's a container for our small screen says a container for this
container for that. But without specifying the size, it will just be a container
across the board? No, just by adding container, look at what happens. I think this is
probably more like 60 or 70 percent of the screen. What I'm getting margins
on either side just by referencing that
class called container. All right, so like for my title, each one title, I'm
going to take that off. I don't let my custom style that my rhubarb
growing anymore. I want to use a
Bootstrap styles. So I'm going to say
class is equal to, and I think they have
one called jumbotron. And just by doing that, oh, well, nothing happened. And I think that's because
jumbotron is really from version 4.6 while
we're in version 5. So my button, I'm still living
in the past, no problem. But once again, that's why
the documentation is so cool. He can always go here and see what your options
are. So right. No, I'm on the document. I'm looking at typography
on the content, and I'm looking at the
different display classes. So let's say display one. That is the class I'm going
to use insert of jumbotron. So let's say class
equals display one. I went to bucketed. You can see it's significantly bigger than it was
before, right? So you can always go back and forth to the
documentation and look at what options are
play around with them and see what
you can accomplish. Now, bootstrap is once
again big framework, so it's good to have a
good foundation in CSS, at least appreciate
all the selectors were called the values work. What kind of elements
in HTML can take? What kind of styles are somewhat general
understanding of that. And then with Bootstrap, you can build on that knowledge. And actually just play around if you need to
accomplish something and go what's a documentation and
you look through sometimes I literally have an idea and I don't know how
to accomplish it. I go here and I click on until I see something
that's useful. So let us talk about the buttons so I don't
want to bore you too much, but let's look at the
buttons and the link. What if we wanted to kind
of modify them so we see that it got modified
DEAP by default. But then with Bootstrap, we have different button
styles that we can apply. So the button looks, I'm going to say ugly right now. What if I wanted to make
it look a bit prettier? If I wanted a red button and
the first thing you say BTN, then you say BTN dash, and then what kind
of what you want. So they have different
color schemes, kind of built-in ache and
just go to components, go to Buttons and you'll see the different
options for buttons. All you need to do, class equals btn and btn dash that type of
what nuance you want. A blue button that's primary. This is secondary, so exists danger, et
cetera, et cetera. So I'm going to try and
play around with these. So class primary, I
went to this one. Let's see danger. I want our red
buttons, it's danger. And I want this one
to be a dark button, right? No particular reason. I'm just playing around
with my options. So when I go I see
this one is primary, this one is danger, and this one is dark. It's not easy, right? If I wanted to change
dark to green, I just change it to success. All right, so once again, this is something that you
may not commit to memory. I've been doing this for years. I'm comfortable, but I still end up in the documentation
and I'm not sure. So this is something
that you have to play around with and explore. So if I wanted my link, which is that anchor tag, to look like a button, I can actually do
the same thing. I can actually just
see btn, btn dash. And let's say I wanted this
one to be secondary, right? So that means it should be a
shade of green. There we go. Amazon is no shade of gray. So somebody coming
to your website would never really look at this. A noise, just an anchor tag, black on the navbar. It's clearly just a
bunch of anchor tags, but this is also
an anchor tag and these are buttons and
the load the same way. And if I want a button to
look like an anchor tag, I can say BTN dash
link. And look at that. No clique me looks
like an anchor tag, so I'm just showing you that
with very minimal effort, you can manipulate your content rather easily using Bootstrap. Just by putting the
container class on this container div. It transformed the look and feel just by putting in the CSS, it transform the look and feel. So before we go, I'm just going to try and apply some nice styling
to the conductors. So firstly, all pages should
have the same structure. So what I'm going to do
is copy the new divs that I created and I'm going
to paste them on every page. And then inside of
the content area, I'm just going to replace that content with what
was on the beach. So I already have the nav, so I don't need to repeat
that feeds with the knobs. I can remove the nav
on the boat page, but everything that
was in that boat pij, I'm not going to
cut and I'm going to paste it inside
of the content area. All right, once again, remember to indent at all times so you can see where
content starts and stops. And I'm going to do the same
thing with our contact page. So paste, remove the nav area, and then tick this content caught and paste inside
of the content div. All right, so now everybody
has the same page structure. However, when we look at it, we see no difference. Literally no difference. Everything's still
looks the same. The only difference is that no, there is a footer area. All right. How do we make them all look the same in terms of the node, a tangible look and feel well, all of them need to have
the CSS file for one. So we'll put in that CSS
file and the bulletins page, put it in the Contact Us page. There we go. And of course we need
our JavaScript file. So I'm just going to copy
that scripture reference. So every page that needs to
reference bootstrap needs to have these two files
being referenced. All right, so after
we do all of that, if we look back at our pH, we see no, the
container is working. All right, and we see that
font kinda looks different. And Navbar looks different. And then even the form
looks a bit different, looks a bit cleaner. All right, then bootstrap has some cool things
who are forms? There are some cool crosses
you can use so far. So this is what your form can
potentially look like with even the hovering and all
of those wonderful things. It's as easy as seeing
form our class, whereas a class is
equal to form control. So I'm going to say crude
odds is equal form label for the label and Krazy goes form
control for the control. So let's try that. So on contact us, we're going to say to the OS
is equal to form control. And I'm just going to
do that across all of the form controls firstly. And then you just see the difference
automatically look at that. All right, it looks much
better in my opinion. And then we have
this ugly button. Let us me this ugly
boat and pretty so class is equal to btn and I usually submit
buttons I like green or something to indicate
M and you're good to go. So begin me this btn-success. All right, and with
very minimal effort, you've styled our form
if we wanted the button to be bigger or search right across like seconds
it btn block, right, so then it
will stretch right across the page table. Or that didn't work. Let me check my documentation. And in the documentation, it says that we
need block buttons. The syntax needs
to look like this. All right, once again, I'm living in the
past as Bootstrap 4, so no problem to check the documentation
and move forward. All right, so let us do
that with our buttons. So I'm just, I
literally just copied this from the Bootstrap site, but obviously I don't
need all of this code. All I need is my input
button inside this area. And then I need to
make sure that I'm using the same classes. So if I go back to
my Submit Query, it's an all BTN blocks, I can remove the excess code. So sometimes that's what I do. As long as I've been at this. I just go and get the sample retrofitted to what I need
and then remove the excess. And there we go, we
have our block button. So just to show you how easy it is to kind of manipulate
your webpage. Once you are looking at the
documentation in Bootstrap, you have a good understanding
of all CSS on classes work. And then you can just apply the code to your HTML
file accordingly. Now the last thing that I
wanted to point out before we leave is the fox that even
though we have Bootstrap, and Bootstrap
clearly has its own, let's say quote and quote unquote agenda for what
the pH should look like. You'd notice that our styles are still kind of prevailing. So once again, order matters
when it comes to your files, namely or CSS and your
script files, right? Even though put
Bootstrap in first, we can always override
certain styles using our own CSS file. So if Bootstrap doesn't have a purple button or
you didn't like ash, certain shade of a color
that Bootstrap use. You can always go to
your stack class, C, whatever class it
is that you want to address and say if I wanted
to address that BTN, I can just say dot btn and
then put in my own styles. And then he would
actually override the dot BTN style inside
of the bootstrap file. So it's easy to kind of put in your own agenda alongside
the bootstrap file. So that's another quick and dirty introduction to Bootstrap. As we go along and our
needs become greater, we will see how
Bootstrap really helps us as a productivity
tool to get past certain menial tasks in terms of user interface design
and get going. So after this, we're going to
look at how we can publish our website on GitHub and then by extension
on the Internet.
19. Add Website to GitHub: All right guys, So at
this point we have looked at how we can
develop a basic web sets, static but basic and using
HTML, CSS, and JavaScript. So you've also taken a look
at frameworks in JavaScript and CSS in the form of
jQuery and Bootstrap. So at this point you
know the basics, you have a general
understanding of how to create new files
hold to link them. Hold to link to other websites. Hotel putting your images hold to style it to all
of those things. The only real way
you will grow is if you do work on
your own and explore. So that is paramount to your development as
a web developer. Now we're taking it a step forward and we're
looking at GitHub. Know github is an
open source tool used by millions of persons, our own, the world. And they use it really to store their projects as well as the collaborates
with other developers. So it creates a nice
platform for you to put your code to actually track all the changes
you're making to your code. Because what happens
is that you may come tomorrow a make a change and then
you miss something, and then you do
remember what you changed or why you changed it. And it's hard to
undo everything. So good job and source
control management tools like GitHub because
there are others. But these kinds of
tools help you to keep track of all the
changes being made by you and your fellow
team members to a particular project and all
sending up is very easy. Firstly, you go to GitHub.com, you put in your email
address, you sign up. I think you probably have to
verify your cones and stuff, but once you do that, you have an account, it's free of charge, at least at a basic
level is free of charge and it's
easy to get started. So in this lesson, what
we're going to be doing is getting our web
project onto GitHub. And then we'll just explore
and it'll still whoa, it helps us to keep track of where changes as we go along. Now this is my GitHub account, and you can see it's
quite active off quite a few projects
and it's open. You can jump onto my profile if you need
to and look at anything. I have students of all
other persons collaborating with and I can see
all the updates happening real-time
at everything. But for now, let us focus on creating a new
repository for our website. So you just click that new
button, create new repository. I'm going to say test
website. All right. You can name it my new
upset, whatever it is, it's just a container is It's just seeing what is
the project name. Let me create a container with that name for this project, you can put in a description, all right, and you can
make it public or private. I am going to make
my own private. But if you want to
share it with others because certain people or firms who would want to
hire you actually love to see that you will have
an active GitHub profile. So you know you have a project, you work on it, you
put it on GitHub. You can make it public
and you can easily share that URL with somebody
and who knows, you might end up helping
other people with your code. For more private endeavours law, if you're working on
something that's serious, you all would want to
make it private so that it's not publicly
accessible to people. I'm making my own private, but feel free to make your
as public so you can show your friends and your
family as you go along. So after choosing the
visibility options, you don't really need
to do anything else, but you can just click
Create Repository. Know once the
repository is created, you get that test space. Unlike acid, again, that URL
they can share with people. If it's public, they can browse
out well if it's spread, but then you have to invite
them specially to see it. If you so desire. There are a number of
ways to get your code from your machine onto GitHub. One, you can go
ahead and do it by a commandline and the
kind of manually, you can push an
existing repository, meaning if you had
it somewhere else, R and another open source platform or source
control platform rather, you could also just
kind of copy it over. And then you can import from something that's not get
to relate it at all. So GitHub, Git is the protocol, get is the technology
behind GitHub. And you have other kinds of technologies that provide
similar services like silvers on the corral and
Team Foundation Server. All right, what we're using. So with Visual
Studio Code, it's, it's very easy, at least
in more recent times, because you can actually
just copy this URL and then go to Visual Studio
Code and let it know that this is
your Git repository. Outside of that
though, if you're not using Visual Studio Code, you can also use the desktop. So you can click setup
in desktop and it would bring you to download the desktop tool if
you don't already have it. I actually have it. And it actually looks
something like this. So this is another project
that I'm looking at right now. But what it does, it gives
me this nice user interface. I don't have to type any
commands or anything. I have an interface. And I can see all the changes that are pending
and I can commit, meaning I can push from my
machine to GitHub at-will. I can pull down changes. So when you're
working in a team, Let's say throw up, you
were building this website. One person worked
on the homepage on other and up both on
other, on the contact. Or maybe one person who
was supposed to integrate bootstrap or download
the Bootstrap files and put into the project and
they have no committed it. And you need it to
continue your work, then you can just click pull
and it would automatically, automatically go and get
anything that is new on GitHub that you don't already
have on your machine and automatically update your
files on the machine. So it's a great way
to keep in sync once again with
your team members. So let's go ahead and
get this website of our computer and onto GitHub for at least
right now Baco purposes, since we're the only developer
on the project, right? So we're going to go back
to Visual Studio Code. We're going to click this
Source Control tab right here. So we have explored the search
and the source control. And what we'll do is
initialize repository. I might get prompted
that you need to install Git locally
on your machine. Because what happens
is that git is a distributed source
monitoring control, meaning you're going to have your own source management
control on your machine, but you can also synchronize
with our remote repository. And if you meet 510
changes on your machine and they keep shorter cones when you get
internet connection, then you can synchronize
with the remote one. And it would actually get all of the historical
checkpoints that you have on your machine
and synchronize. So that is the polar of kit. So when we click that and we
say initialize repository, You'd need to put in a message. So I'm message
House seats and all walked this chicanos or both. So I'm going to say
initial commit, right? You're going to hear
me say incompetent chicken kind of
interchangeably because I've used two Team
Foundation Server where the nomenclature
would see check-in, what they're really
the same thing. So after that I went to
this tick that says commit. And then it will
just ask me know Steve changes and
teach the changes. Would you like to stage and then commits and I'm going
to say yes, go ahead. And then after that is done, it created the local repository. So if I look back in
the File Explorer, if I make any changes to
the files right here, then it's going to automatically start trucking to say, okay, the boat page has
been modified and I can actually just
stay steady changes. I can open the changes. I can see exactly what was modified between the two files. It wasn't a significant
modification, but let's say I had put
in a new block of text. All right, and then I say, okay, let me open the
changes then it's going to show me this
line was modified. That is a new text. So that's what source controlled
brings to this equation. So I'm just going to
remove the excess. That doesn't really matter. What I want to do know though, is synchronize it with what is on the Internet
or with GitHub, right? So by clicking
those three arrows, I can scroll down to
this part that says remote and then add remote. And it says add remote
from GitHub, right? So I have two options. I can click that
or I can just jump back over to my
GitHub repository. Get this link, just copy that. And then come back to
Visual Studio Code provided that URL, press Enter, right,
and then remove Nim. Generally speaking,
you'll see people call in the first remote origin or mosque or something I
just call it its origin. Press Enter and then
no, it's prompting me. Would you like to
periodically run git fetch? So that means what I like
to periodically monitor the report repository for
potentially any changes. So Fetch would see you have
these changes pending, meaning they are these changes on GitHub but you don't
have them on your machine, then pull would allow
me to get them. So we just saw a
whole pool would work in the desktop version. So I'm going to say Yes, I would like to run
periodic fetches right? Now after I've done that, I can know push to the remote repository is I can right-click
that and say pull, push or not radically
click the three dots. I can do pull, I can do push. And if I come down here as a
pull push, I can do a sync. So it would automatically
push what's new from me to the repository and plu what's new from there to me, right? So it automatically
do those two things. So if I just say Sync, it would say I have no upstream. Would you like to publish
this branch, I'll say okay. So it's just a ghetto was
empty but I have content. Would you like to push the
content, just a confirmation. So after that is done, if I refresh my GitHub page, no, I see all my files on GitHub
in this repository, right? Once again, this is available for public
viewing if needs be. But if not, that's fine. But you can see all of
your files and everything. So let us say no, that I created a new page. So I created a new page
and I call this one post. Good job. Payload
dot HTML, right? Each one page, alright, that's all that this
page is going to have. No problem. So at this point you'll see
it's highlighted green. Means it's on committed, meaning it's new, right? So if I click on the source control is going
to be there S changes. I can enter my message and let's modify it
one of the pages, any change or changes or
change the content or to existing content,
adding something new. So if I added one more line off, display picture in
the orbital speeds, That's a change you're
going to see being tracked. So it's always tracking the changes that you're
making so you can have accountability
because then maybe 23 versions on the line,
something stops working. It can actually roll back to this point in time before
you made that change. To see, this is the version I went to continue working from. So we're going to
commit this locally. So I'll just click the tick. There are no stage the edits
Fan say yes or I can say always just to get rid of that message and then know
that it's committed locally. I wanted on the remote, just do a sync,
some synchronizing all the commits
between the two sides. And after that, little
blue bars don't. If I go back to my
repository and refresh, then I'm going to start
seeing changes, right? So 20 seconds ago, this commit was sent over. All right, so if I click
added more files in it, then shows me a synopsis
of all the changes made to the existing file
as well as what was added. So once again, it's a
very powerful tool. You can invite collaborators. If you and your
friends or colleagues need to work on
something together, he can go to the settings or the repository and
go to Manage access. And then you have to
confirm your password. But after you do that, then you will be able to
invite a collaborator. So if you have a colleague
who is also on GitHub and you want to work with them on
this particular project, you just go ahead
and put in any one of these options, find them, send them the invitation
was they accept, then this repository
will also be a part of their army
off repositories. They can do commits and push and pull just like
you at that point. So that's all GitHub works
as a collaboration tool. Now after this, I'm
going to show you how it also helps us to
publish our website quiet easily and for free using another platform
called Netlify.
20. Create Public Website with Netlify: All right guys, welcome back. So we're moving on to
the next challenge, which is to publish or website to the internet
for the world to see. So what we'll be doing
that using that to the final Netlify is a wonderfully stable platform that allows us to do quite
a few things for free. And I think it's a great start to see how your handiwork can easily be put on the Internet and published with
very minimal effort. The first thing go
to Netlify.com. And then you would
want to sign up if you don't already
have an opponent, which at this point,
if you don't, that would be understandable. I already do is I can
just login to my account. And you see here that I have how few websites between personal projects and
projects from students, but I do have a number of projects initially home
and he built minutes. You have how many members
if you want to collaborate. And then of course, for
little, a little bit of money, I can start adding on
different features to your, your army of your
suite of tools rather. So let's jump over to a new
site from get CEO easy. That is new site from good. So we just looked at
Get Hub and then they allow continuous deployment from GitHub, GitHub, and Bitbucket. So continuous
deployment means that I am making changes to the
website and I'm taking it into Github
nucleophiles monitoring this GitHub repository and automatically going
ahead and publishing it. So it actually reduces the
amount of time between making a change and having to
go and update the website. All you have to do
is check it into GitHub and Netlify
will do the rest. So for the initial publish, of course we have to
connect it to GitHub. So once I do that, it will authorize me because
it's already knows me, but you might have to
do some other steps. Then I get to choose which
one of these repositories. And I'm trying to
remember what I called mine and it
was test websites. I can just go ahead and hit test flip side branch to deploy. We leave it up
master and we leave everything as is
and deploy site. Now remember, from
day one I said, it is going to make your life so much easier when you
want use lowercase in all of your filenames and to use the word index to name
your very first speech, whatever your homepage needs to be should always be index. Here's exhibit a. Netlify is going to
automatically look for index.html or index. Well, it is hosting static
sites, so index.html, if your file is not named
index or you have uppercase, it reduces the likelihood of it being a successful deployment
on the first goal. So following best practices
are really there. Or the concept of following best practices is really
there to protect you and save you the time and efforts of debugging
something that could've been avoided just by proper naming
conventions, right? So I'll go ahead and
click Deploy site. And this might take
a few minutes. And once that is
done and you may need to refresh the page a few times just to make sure that
it's not already published, Antony, it's still deploying. But once it is deployed, you see that you have a URL. They had generated a random
URL for you, That's nor B. You can always set up
your custom domain. Which point you'd
have to buy a domain, WW dot, you know, my name.com, that kind of domain you
will have to actually buy and you can buy
security also, what? For free? You have a website
that is on the Internet. So if I click this URL, it's actually going my
website secured by HTTPS. And I can browse, right? And everything that I had in
the web file, the CSS files, the JavaScript
files, the images, all of those are no published
to the Internet, right? So let us say that I made a
change to my homepage, right? So I'm going to do this real-time tool so you
can see exactly what I mean by everything just
gets streamlined from your machine streets
up to the Internet. So I wanted to see
the Hello world. My website. My website is null. All right, This takes is clearly not on the
page right now. So here's my change. I made that change. I'm going to say updated home
page, that's my message. So messages are important. It's important to be
descriptive because they help you in future you to know, oh, this is what I did this time versus your team
members who will appreciate a synopsis of the changes that went
in with this chicken. So I'm going to do
this commit, right? And once I've done that commit, I'm going to then push or let me just
push, pull and sink. And I'm just going to okay, Don't show again
because you know, those prompts after a while, they keep on saying
the same thing over and over and over. But once I've done that, I'm just going to jump over, checkmate my job quickly
just to make sure. All right, and I see here
just 30 seconds or go, I've updated the homepage, so that is no in GitHub. If I jump over to the Netlify
dashboard and refresh, then you're going to see that the last publish was 119 read. And if you look at it, deploys, you see that the
first deployment had no deploy a message for the second deployment has the same message that I
just checked into GitHub. Alright, so just by
checking it into GitHub, Netlify monitored it, gotten a change and
it's no publishing it. So if I refresh the website, There's my change lives. You see that all adds to do
is update my file and commit and then synchronized
with GitHub and the wrist was taken care of. So that's a nice, easy way to get your statically static websites up and running. You know, understand
HTML and CSS. You know how to use
bootstrap analytic jQuery. So you can build a
beautiful websites and you can no one
collaborate on them using GitHub quite easily
and to publish them to the Internet using GitHub
and Netlify quite easily.
21. Redesign Home Page with Bootstrap Slider and Layout: All right, so now we have
a clear understanding of whole pages were cold basic issue
within CSS and JavaScript, all of them combined
to use a dynamic page. We have pushed to GitHub and we have even published
to the Internet. So that was a good first fees. Now let's put all of
this knowledge to use and build out something
that is feasible, right? So we're going to
be building old, better template with some
real content using Bootstrap. So let's get started with modifying the
heading or the top. What we see in the tub of the
burrow that so already know that title is what really
gives us the wording, right? So my first webpage,
that's fine. We have our CSS style sheet, but what double then
the icon that you usually see in the
browser, right? So this little icon here, because there's nothing
prison done this point, it's called an icon. So on this website, icons, 8.com and you can
filter to icons, then fav icons, I can
just search for icons. They'll have a bunch of samples. I'm not saying you
must use one of these because this
generally could work or to be like a company
logo or something else. But I'm just going to
get one of these that I think is cool enough
and general enough. Let us go with this code so
I can download this icon. And it would give me the different sizes
that are available. So generally for our fav icon, you have the extension dot ICO, which is short for icon. Or you can actually use
PSP and G's, right? So we can just go ahead
and download this PNG. And once you have that file, we know the rules on
where Dina with images. We want to get this file
into our project firstly, so we find the file wherever
it is in our file system, and then I please the
appropriate folder, which will be the IMG folder. And then by extension, I want to make sure
that it's a word or a name that I can
identify easily. So I'm just going
to call it an iPod, or it could've been local, whatever it is, right? If you find another image, as long as it's isu or dot
PNG, you should be fine. So now that I have
this fav icon on the home or on any
page for that matter. That's I want this
icon to be displayed and start typing the code link. Rel equals icons is so that's kind of it
looks like the CSS code. And then it takes an
H ref is equal to, I know it was pointed
to the fav icons, so this would no be slash, sorry, images, where's,
where's my image folder? Img, apologize. Slash favicon dot PNG, or close that tag. And just for preview purposes, let's look at it in
live server just to see what our tabu
will look like. An appoint a look
at that, right? So this is the before and after. This was before. It don't let that
little documents no, you actually start
seeing that icon. So that's good, right? So that is what it takes to get to an image
inside of the top. No, that's relatively
simple operation, but it goes up big way. Let us move on to
something else. So let us set up a
proper navbar and we'll be using Bootstrap code
to do this navbar. So for reference, once again, you can go to Bootstrap. We're using Bootstrap 5 and you can check
your documentation on hold navbars should look so if you want to search for something specific
ghetto step now, you see navbar and then it jumps though and it
shows us the samples. So these are all
the possibilities. It can get it navbar home,
these are the links. Can get a drop-down
search, right? You can let it look
in different colors. So this is trying to find
the part where the colors. There we go. You can get the dark,
the blue theme. All right, that's all you
really need to do it. It just needs to
change those classes. So what I'm going to
do is borrow one of these samples and I'm
going to keep it simple. So I'm going to use
this sample here. Just enough bar three links
and the drop-down link. So I'm just going to copy that. All right, jump back over to our code and this entire
section that said Now I'm going to replace
the code that was there and see a lot more code. But it's kinda straightforward
in my book read. So this part here that
says that's the tug, it's a container fluid. Then it opens up into a class on grids out XOR
with class navbar brand. And then this would be where
you put maybe the name of the websites aren't a
company name, whatever it is. So I'm just going
to say my websites because that's what
this website is. Alright? And then it has
some other buttons, sermon by a spoke about
responsive design. So this button section
here is for the reason if the pH gets resized down to
like a mobile app size, then You'd start seeing little pills. If you ever use our websites
a resize it, don't I? You see those pills from enough buying a ticket and
then the navbar drops. Don't this bit of code does that for you automatically, right? So we can preview that in
a few collapsing navbar. That's also some
JavaScripts running into buck grown to help with the navbar coming up and don't
when it is then condensed. And then we have
our anchor tags. So I really shouldn't
have erased alkoxide, What's looting of them
on different pages. So the first anchor
tag would be home. So I'm just barring that code. And here the H ref
says index.html, It's artists is home by way
of preview. That's fine. The next anchor tag
was for the bolt. So I'm going to change
this one to a boat. So I'm just showing you
that there's no reason to really worry about
copying and pasting. Sometimes it's necessary. But at the point that
you are copying and pasting I you're
not understanding node that is the problem. So we want to make
sure that even though we're borrowing the
code from bootstrap, we know what we're
modifying because they're familiar and comfortable
with that quote. So the next one would be contact someone to change this
from pricing to contact. There we go. And then for our
dropdown, I mean, this is a good sample,
so I'm just going to say external sites, right? And by preview, one
could go to Amazon. One could go to, I think, well, the Amazon link down
here. Yes, we do. So we can link to
anything for too much in the external links. These are just for some anyway. So Amazon and this could be EB. And then this one could be AliExpress or whatever
it is, those samples. So you can put in those
things if you wish. For practice. No problem. I'll leave them blank where
they have the Amazon, but I'm just routinely
all of them. All of those to show what the drop-down list
would look like. So that is it for the navbar, that's us tick preview of that. So I'm just going to jump
back over to the side that we're already building a
start seeing the difference, already looked at that navbar. Know it's kind of
inconspicuously, it's kind of agree. Like I was saying, if
you resize the websites, you'd see that enough
by auto magically condenses and it will start
dropping bone for you, right? All of that, we didn't write much code to have that happen. That's kind of out of
the boxes bootstrap. I don't like that color
on the navbar goes. So I wanted to jump back
over to my documentation. I look at the different
color options and I really do like
the dark theme. So these are the classes I
need to get the dark theme. And you notice if you still
have another color in mind, you can actually put
your custom color using inline style, right? Or you can create a new
class and override it. Look, can use the inline
style as recommended here. Although as I do want that navbar dash
Dark, BG dash dark. So I'm going to
jump back over to my enough bar and it's
navbar dash, Light, BG dash. Let someone to replace that
with a dark variation. And there we go. That starts to look a bit better in my eyes. So let's say it gets
enough bar, nice and easy. And then of course, if we
have the navbar in the home, we want the same navbar
across the other pages. Someone to replace
all the navbars in all the other pages
with the new nav bar. Alright? So now every page has the same nav bar like we
have been working towards, and it's no new and improved. So that's excellent work. Now one other thing I
wanted to point out, we put the navbar inside
of the container. Well, there are times
when you probably want that navbar to stretch as far left and as
far as possible, right? So you'd see some websites where the navbar is actually searching
across the entire page. Content is confined
within margin. So that is actually
possible by just not putting the nav inside
of the container, right? So there's this preview, what that would look like, and that's what our navbar would stretcher rights
across the page. And then again, you may want the black strip district
across the page, but not necessarily the logo to be as far left and the
links to be like that. So then that's when you
start to mix on much I can get kinda, kinda created. So here inside of the nerve
you'd see that they actually have a div with the
container dash fluid. Fluid means it will stretch
your eye across the page. If we remove fluid and just
make it a regular container. And you'll see the
trip stretches across what the content is inside of the confines of what the container
would look like. So I'm just showing
you how you can mix and match the different. I'm classes and the layout of sulfur just to get
the desired effect. Well, you have to experiment. All right, so I'm going to
leave my enough violet, that's actually
like when my navbar stretches right across, but the links are starting
where they are null. All right, so that
is it for our novel. Let's move on now
to our content. And what I'm going to do
is remove this content. So to make quick work of that, I'm just going to
collapse that div, highlight those two
lens press Delete. And for the full-term
wind to move this out of the
container because a phenol wanted to stretch
across like the navbar. But we'll get back to
the filter later on. And what we're going to do
inside of our content era, at least for our homepage, is put in a carousel and
maybe a few headings. All right? Once again, I don't expect you to necessarily commit
all of this to memory, would just roll with
the punches one, find what we need
when we need it. So little bump to the
Bootstrap documentation. I'm going to look for carousel. Carousel is basically like
that slide-show, right? And here it is the example
for a slide, cyclin slide. It can have on width controls
or you can click and navigate or allow the users to navigate between the slides. And I think I like that one, the one with the navigation. So the code here would see
we have a div with a class, a few classes, and we
have a few data tags. All right, and then you
have carousel-inner. With each slide, we
have a carousel items. So if you want it 50 pictures, you'd have 50 of these divs. If you wanted three. I have three of those. Pretty much. And then we have button to go back and button to
little forward. And that's really it. So you just fill in the blanks with the basic tags that
you're already familiar with, you know, about the
image tag or, you know, hold to get the path
to the image in. All right, so to make it easy, once again, we can
copy and you see, can look at the other examples
you on with captions. You can get them with
captions, right? And once again, just sit
down and look at the code because it's nothing that you
haven't seen before, right? All it is is a combination
of buttons, right? So these buttons
would correspond with these indicators here in where, which side we're on. So you just add as many
buttons as you have slides. We still have the same
format that we just looked at with the
carousel items. All right, just that
instead of the item, so you have the image as well as a div that's stored in the
text that is being displayed. All right, and then you still have your
navigation buttons. So I think I'm actually
going to use that one and go in here and stare at them all day because here's
another Oda, cool animation. You can mix and
match them, right? Usually the difference between the options are maybe
like a few classes. So like Carousel feed, that one is not present in this this one says
carousel and then slide. All right, This one says
carousel, slide then feed. Alright. So we could easily take this template and
then make it a fade. I'm just showing you
you can mix and match. All right, so I'm going
to copy this one. I like the one with
the buttons in it. And don't muck over and up in the container
went to just paste. Now let's get to work
in changing first. That did say that I
like a carousel slide, so I'm going to seek
our ISO Dash fit, sorry, the car so feed, right. So know this car. So we know that it's
supposed to feed as much as as much
as the next guy. Right? Now we have the buttons. Those are the little tab
buttons at the bottom. And then these are
seeing that they're targeting the carousel
example captions. So notice that hashtag. All right, So these
data attributes are kind of what JavaScript is using
into bug-prone to see. When this is clicked, I'm going to get this data from it and use that to
meet my decisions. So later on when we're building
more complex operations, we will have to use them when
we're writing some jQuery. So don't worry about
too much right now. But that's what they are for. All right, so we have
our div, carousel, example, captions,
BS, ride indicators. Like I said, if we
wanted more slides, we have to add more and
ketose, no problem. Then we have the
inside the carousel, carousel dash dinner
and each item. So item number 1 would
need the image source. So I'm going to
use my son floor. So all of this is IMG
slash sunflower dot JPEG. And out, you're usually
encouraged to write an alternative
that tells us with the website ranking
on search engines. And it also helps
with readability for voice readers for persons who might be
visually impaired. So is encouraged to just say it out so that when the reader
gets there didn't know that, Oh, it's up each of us on floor. So I wanted to jump, well,
what's a peak sub B? That's the website that's I used to get my images and I'm just taking three images that
were on the front piece. They don't have to
use these images. So what I would encourage
you to do however, is to use the by mentions that time we're
recommending because look at what is happening with Arslan floor or sunflower
is a huge file. These after money,
whether 0s size it, or just make sure that we get
an image that kind of fits into the area that we expect
it to go into, right? So what I'll do is get all
of them as 1280 by 53. I think that should
be smart enough. And I'll just go
ahead and download them and then move
them to the project. So just move them into the image folder and
then rename them. And so I got a
picture of the beach, a bird and a clover, which is another kind
of bird. More problems. So I am going to then
use those images here. So I am z slash beach, right? And then the out says beach. Then IMG slash bird. Says Bird sales symbol. This is, know your gums up. More difficult part. Alright? And of course, if you
want to change, it takes, he can always go ahead
and change the text. If you don't want the text, you just remove it. So I'm just showing it.
Yeah. I don't what you want. Your move voted all want though the more difficult
part, quote unquote, would be the font that
we have four images, and I only have three slides, so that means I need
to add a fourth one. All right, so let's
look at a process of extending this one. I need a new car, so the item, so I just need to take this div and I'm just
going to replicate it. I'm not going to try and retype that I might make that mistake. I'm a legal to class. Why retype it when I have a perfectly good
example to follow here. All right, then I can just put in what I need in
this fourth slide. All right? And this is the fourth slide. There we go. So you change. What do you need to change? No problem. Now, after putting in
that forward slash, remember that we have
the button indicators. So if you didn't
choose a template with a button indicates
that and that's fine. If you wanted to remove the botany indicates as
you change your mind, you remove the
button indicators. However, I'm going to extend my button indicators to know that they should
have a fourth one. So I just took the
third one and I'm gross looking at anything in
it that doesn't adopt. So here you see the
pattern 0 is one. And you would learn in
any programming language that cone to usually starts
at 0 in computers, right? So 0 is the first slide, one is the second side, two is the third slide. So obviously, three would
be the fourth slide right? Now, after putting
in my slideshow, Let's jump back over to the website and
close all the noise. And then there's our slum floor. There's our beach. There's our bird, and
there's the clover, which is a bird heard. We see the labels
are popping up. We have our indicators and everything so it's
working out fine. But then the images
are still kind of big. Someone to get started
on some custom CSS to just reduce the dimensions of the image is a bit thread. Custom CSS. Why? Because after do it
on for images at all, wanted to do it four times. So I'm not going to put
inline CSS 4 times. It's instead easier for
me to do is jump over to my custom styling class
and create a new class. And I'll call it slide
image sled. I am G. And I'll just change the height because that's what's
really have an issue with to something like
550 pixels maybe. And then with this class, I can easily go back
and let each image no. So that's an IMG?
Yes, you are d block. Yes, you're with 100 or w
dash 100, that's bootstraps. We have seen width 100, but I'm going to say
You're also slide IMG, which then would reduce how
tall you are and there we go. All right, so it
looks a bit better. So like I said,
it's always better to get images that are already do mentions that you want
or you resize them to dimensions you want them to be for that particular section. Because look at how the images
kind of augmented when I'm forcing them to be a different size from
their natural size. So let us get back
into our code. So we have our cars
are up and running. Copy and paste a few mods on where we're running,
on where I live. Now let's look at
some advanced layout. I'm saying advanced
because it's going to be, it's going to look
very clean and people look at
their websites and things to do something on bonds. But once again, Bootstrap makes so many things so attainable. It's not funny. All right. So I'm going to
underneath the car. So so this was our car, so this is our container, this is our carousels or
silane setup our container. I'm going to break line and then I'm going
to introduce a new div. This div is going to get
that GOS called roll know. Once again, let's consult
the documentation. So there is a grid
system built into Bootstrap which allows you to split up your content
into different columns. All right, so here's an
example for 13 columns, which is what we're about to do. You can use the rule and the Nietzschean say col, col, col. Frankly, as many
calls as you put in, it will try its best to split
that space from left to right evenly between as many gives that you
have that say call. If you want fixed sizes, you can actually say
col dash under numbers. So in other words,
you want 5050, we can use color if you
want 123, call, CAFO call. But then if you want, let me see if I can
find one that is exactly the example
I'm talking about. Here we go. So there are 12, basically
concentrated there, 12 columns from left to right. So you can always split
those evenly, right? So you can split it
into four, right? Four columns, that will be
each one being size three. Or I can split this into three, which each one being size for
you again, splitted 5050. So both would be psi seeks. Or if you want, want to be significantly
wider than the other, you can see you are, It's bases on UR for species. But any combination of
numbers that sum up to 12 is a good combination
for that splits. All right, so if
you scroll through, you'll start seeing
other examples. You can see a col, md and the MD and the LG and the different names
you're seeing those really refer to
that as screen size. So you could be seeing
that on a medium screen, which would be like a
regular computer screen take off for species. But in you'll see like col, dash ASM, which means small. So while on a computer
screen it should take up x number of species on a smaller screen
like a mobile phone, take up more space
because you probably want that element is stretched
across the entire screen, as opposed to Diigo pop off the screen like you
would on a computer. That's so easy to
do these layouts. So like I said, I
did want something looking more like
this, three columns. So here's a example div class
rule, call, call, call. So I'll actually just borrow this code already,
have the robots. That's fine. I'll just override
it and put that in. Alright, so my three
columns, no problem. Now instead of the three
columns, what do I want? I'm just going to put
in some sample text, and this is heading and a
paragraph tag and button. And that's all I'm putting in. So I'm going to type that
from scratch with you, right? No. So they can understand
exactly what's happening. Notice this is sample ticks. It starts off Latin, it's sort of garbage. But I will show you how to get that kind of text quite easily. So for call, for
the second column, when to have an H2 tag. Mel is going to see is hitting It's whatever it is you
want as your heading. If you are building up promotional websites
are protocols, that is where you talk up the talking points
about this bread oat, you know, costs friendly, effective, efficient,
et cetera, right? Just giving you ideas. So that's the heading. Then in the p tag, I want some sample text so I can actually just write the
word lorem, press Enter, and it will generate
a whole paragraph off alarm takes so I'm sure you've seen this somewhere
in your life, somewhere on the Internet. If not, that's fine. But the point of this
takes place holder, so this is where
you put whatever, you transform that into
the useful information. All right? Generally speaking, when you're wireframing and you want
to show a client watts, the website will
look like you would want to kind of putting
that kind of place. Well, a solute C, okay, if takes those there,
that's what it looks like. Then for the last one, I'm just going to have
this p tag that has this on crypto unit and I'm
not went to retype that goes, I think the combination
of those tags, you already know how to
do that to a p tag with an anchor tag, btn secondary. So yes, I agree button
and the role is button. So it knows that it's
only a button, right? Or it should act
like double or other and this interferes
going nowhere. View Details. That's fine. All right. No, you'll see these kinds
of what should I say? These symbols are
these Unicode text, different places are
on the Internet. These are, he gets special
symbols into your website. So for instance,
usually in the footer, you would see something
like copyright information. And how do you get
a copyright sign? So you do ampersand
and I think it is C. So if you just did a
outbursts and I use scroll, you'll see all of the special characters kind of coming up in the IntelliSense,
what they represent. So if I say something, that copy, there we go, That's a copyright sense. So ampersand copy, semicolon. So when you see a
Lamberson rock cool, I don't know It Rock cool in English translates to about UC, that that's where you're getting that little
double arrow. Alright, so let's just replicate this section or this code
for our third column. And then let's
take a quick look. The OK, calm, There we go. So now we have our three
headings underneath our slideshow and
our sample text, and our grid buttons
that navigate nowhere. So UCO, everything is
coming together, right? So I hope you're as excited about what
we're accomplishing. Retinoids I know for the footer and then
I'm just going to cap it off right
there for what we're doing on the speech
photo filter. Or at least at the end of this, I'm going to put an horizontal rule so
we get a little line. All right, and then I went
to change this filter to be something more like
an actual filter tugs. So you'll see footer tags, you'll see header tags. And that's what we
call semantic HTML. And it's just a different
style of writing, but it's still
kind of ultimately basically comes down to looking like it's
just a container. And semantically,
this container is for the filter content or so
inside the filter contents. Well first, then
once you give it a class called container, we know Container going
for a more bootstrap. And then instead of this p tag, I'm going to add R
or copyrights and so ampersand copy, right? And then I'll see my websites. This is 2021. Alright. So we see our website again, something that is
so we have our nav, you have heading and
then we have that. No notice how on this
slide are kind of mart. So those are little things
they can start looking out for if you want some
daylight between them. It's basically as easy
as putting a break tag between the nav
and the container. So you get that little
BH3. There you go. Nice and easy, right? What some people do
also is they actually create a div or something, or create a class that
automatically says, give me X amount of
margin from the top. So they will split
that's on the container div Excel model
margin from the top. So if you ever wanted
to change that margin, you just genes class
because he can't really change how much break and
get to with our breakpoint. So that's really it for what we're doing
with the homepage. The abode page can
use some work. Definitely, the contact
page can use some work. So when we come back, we will look at styling
of the above peach.
22. Redesign About Page with Bootstrap Grid and Buttons: All right guys. Welcome buck. So we already looked at
restudying or homepage. Let's turn our attention
to our bolt or speech. Know, once again, these are
not giving you prescribed with stuff that you must do experiments if you don't like
the way I did something, feel free to explore and
try something else, right? These are just
merely guidelines. I have a different
point of view from you as you would
with other people. So it's okay to experiment
and try something else. All right, so let
us firstly bring a bolt us up to the same
standard as the homepage, meaning in terms of the layout, remember consistency is key. So we had borrowed the navbar, but we had made changes to the homepage navbar that we
have interpreted created. We also have changes to our footer area that we
have not replicated. So let us focus on doing that. So in the Navbar section, I had taken its old
off the container or the mean Contian is I'm just going to copy the new
navbar code to make it easy. And I'm just going to collapse this navbar code, remove it. And then this navbar-default
set off the container div. While I'm here, I'm
just going to do the same thing on the
contact page, right? So actually like to do that whenever I make
a change, it's, I know it's global
and has tried to make it as many
places as possible, just the same time. So I don't forget later on. So after we've replicated it, navbar, we see, okay, good. It's working on the boat us, we also need to do
that on the footer. So we're in the filter code
and it must have an EHR. So go back to the boat, collapsed and I went to just remove this
content div altogether. But we can remove this filter. I'm going to put in that each are and put in our
footer, right? So when we look back,
we see the footer looking like what we want. Now we can remove
this content and get started on the redesign. Or do remember that we had
a break right here between the content or the container
area and the nav Hero. So with all those changes made, visual for that, both pages more like a profile page, right. I want to see, Hey, this is a paragraph about me and then probably have
like some social links. And then just like a profile, you know, I'm just thinking about the different
things that we could do. So inside the container, let us create our role. So anytime we are going to
have the column separation, so if we have to start off
with class equals roll, are, then inside of this row, I'm going to have a div. And this div will
have class equals. And notice how particularly
Amabile my indentation. Indentation is very
important when it comes to the readability
later on, right? So always try to make sure
your code looks clean. So I wanted to give this
one called dash eight. Alright, I'm splitting the
beach into it and maybe three. So I'm going to see call it for this one and I'll just duplicate that line and do col dash three, but I also wanted to
have a col dash offset. All right, I'm actually
forgetting how the offset code loops someone to jump over here and look
for offsets, Right? So the offset, offsets here, a goal, so offset is actually in the columns were in grid. It's actually in columns. And here's a quote
for the offset. So offset dash,
whichever screen size, dash, whatever it says offsets that it means
hold mode space. Do you want between me and
the one I'm beside, right? So if we're using it and let me just copy
that if I'm using it. And three, that means I can at least have an offset of one. So one plus three
plus eight equals 12. Nice, right? So inside off the first one, I'm going to have a
little edge four. Goddess is equal to
maybe text, dash info. All right, so you'll
see what that means. Our primary, let me make it primary so you
can see the color gets and this would
be a boat me on that. This is for TAG. And went to have a paragraph, like I said about me, placeholder text lorem, and let it just
generate that text. For this text, I'm going
to give it a class. Text. Muted. All right, So if you're, if you're not so familiar
with the tech stuff. No problem. Bootstrap. So if you just type in text, jump over to that
documentation is the author of the wonderful ways they can
transform it to set the size, the different colors they
can get with the text. All of these wonderful
things, all right? And generally speaking,
when you talk about the primary or success or a warning or danger to seem
classes that you'll be seeing for BG dash or BTN, those seem keywords and the resulting colors are
available for your ticks. So if you want blue text, text dash primer takes info, green text, text, Fluxus,
et cetera, right? So I'm just pointing that toe. That's why you'll see a lot
of commonality between how these keywords are being
used all over the place. So now that I have at least
at least one column, don't. I went to jump down and get
started on buildup columnar. In this column,
what I would want would be contact
information, right? So I'm going to have
another age for tongue that has the same takes primary. But this one is going to
say contact info, right? And then I'm going to have, instead of a pita, let me use an unordered
list where I'm just going to some of
my social media links. So you see, I'm just putting all of these tags together and I'm just combining them
to get my desired result. So is it true or
if it, oh sorry, let me just open and
close this hunger TAG so that I can get rid of
some of those arrows, right? So f is equal to, and I'll just put a hashtag for null so that link looks alive. Class equals, maybe I could see text SSH muted or text
dash in full, right? It just so it's done. And I mean, once again, that's up to you take
such dark ticks, white, you want link as you know that a URL is going to
have a particular loop. So if you want to change
that look, then no problem. Alright. So I wanted to make
my links look dark. All right, let's see what
that will look like. And I'll see a tutor. And then I'll just
duplicate this. So one is Twitter,
one is Facebook. And won could be. Good job. All right, so let's take a look at what we're
getting with this page. So this is what a bolt
means flamingo to look like we have that
bolt me some bool. This is a bar graph trouble me. And then we have our
block links, right? So once again, mixin
much and experiments. So I wanted to continue on. I'm going to create another
section underneath that. And I'm going to
call that section maybe that my portfolio for something to accentuate what I have been working on for
all these years, maybe. I don't know. But let us say that we have so we're still
inside the container div, we're finished with this role. So let me just collapse it
and get it out of the way. All right. And then under that, I'm just going to have
a mother, another div. Once again, it's always
good to give your DBS IDs. So you could call this portfolio section just
in case or it was portfolio, whatever it is you want. It's always good to give them. So at least you can tell
what is in which section. Of course, it's not
mandatory as we've seen. So in this section I'm
going to have an H1 tag. And as a little separation, I'm just going to use an HR
toggle between these two. So i'm I'm, I'm
just using a hey, I'm just trying
things here, right? So a brick on HR
target, another break. And then I start my portfolio. So I'm going to
say my portfolio. That is the heading. All right, so you know
what section we're at. Then I have a p tag. And then let's see, I want to give this
one the class. You have another
one called lead. And I wanted to make it
takes Dash muted also, just for dramatic effect. It's there but it's, you
know, kind of circle. And I'll just give this Lorem. So that's my paragraph
about my portfolio. And maybe can I
have two buttons? We call them like a call to
action in web development. I just went ahead and did them. So we have class, sorry, H ref, nothing is
really going to go on their class BTN primary. And then you'll see em Y2. So a lot of little unique classes that
you see from time to time, especially if you're going
by a bootstrap example. So this one is seeing margin
on the Y axis of two spaces, and that's all it seeing. So Bootstrap has a lot of
these things to prevent. You are reduced the need
for you to actually go and write class just to
have a margin of two. The y-axis are from the
top to the bottom right. So to just give you
margin, why tool, if you want to just on
the topic would say empty or MB, et cetera, right? So those are the
policies that you can look out for and use
them to your advantage. Now after doing all of that, I have the toolings
want to say, hire me, wanted to say leave
feedback, right? And one is primary,
one is secondary. Once again, you can mix
and match your clothes, but I'm going to just jump over and see
what that looks like. Okay, my portfolio. So you see here that my header
text is kinda defaulting to what my custom style
hitting takes is. I don't want to kind
of mix them much. Btn-primary and descendants
understand that, right? I have two options. I could just remove all of my custom styling, or I could once again just
override this one until it's your class is
x86 dash primary. So it just knows when
you get rendered, you render as blue and everything else can
look in line, right? If we wanted all of this to be center aligned so that on to just lift her at a sled
that I could jump buck. And I could say to this div that your class is equal to text, the center, so that we, all the text in there is
no center aligned, right? So I'm just showing you how easy it is to just start making some crazy modifications with very minimal code
when using Bootstrap. So let us move on to some other content that could
be useful in the speech. Now we are showing a portfolio, so it would be prudent
novelist again. Oh sure, like a gallery of the work or something like that. Maybe our photographer
or a web designer or even just that close
design or whatever it is, whoever you are, No problem. What we can do is
actually just create a mini gallery right underneath this div
for the portfolio. So I'm going to just
create another div. I wanted to give
you the ID gallery. And then inside this div, I'm going to have our role are, you know, I could actually
just meet this div role. So I wanted to just say cross
is equal to rule and your ideas gallery and
insight or four roll, we're going to have div. So here's another thing, null when we use call. So what if we wanted to
rows with three items each? All right, so we already
looked at how we can set a size using
color. It's on whatever. And we also see that if
we just say call it, it will automatically section analyze the role
for many columns. So in this case I want two
rows with three items each. So I can do the math. If it's 12 across, I want three, that means BY columns E
to B for size for it. So I can just say cars
equals col dash four. Alright? And I can replicate
that as many times. So what I want to
make multiple roles. So what one pattern is that
you make multiple rules and 3 each or you can desaturate it puts all of
them in the same rule. Because what will happen is that the rule will
automatically assign four spaces for spaces
for species in one line, then go to the next
line automatically and continuous supplying the
space available are needed. So we don't have to really
worry about that bit. I'm not ready to duplicate
this yet because the code between them is going
to be fairly consistent. So I'll just do one
properly and in this copy and paste
it across, right? As a matter of fact,
I think I'm going to use up Bootstrap card for this. So let's jump over
to the documentation and look for cards are red. So you see here is an example of what the card looks like. So imagine having your gallery
and you have one-off this. And you have three per rule. And you have your little
image and maybe the name of the project description and something for them to
bite or few more details, our contact your
boat, it's right. And have all the
examples of cards. I mean, if you don't want the
image again, do it simple. You have this version of it, et cetera, et cetera, right? So I think I'm going to go
with the first example where we would have had that
image and the body. So that's, here's
the quote we need. I'm just going to copy that. Jump over to our code. And then inside of col dash 4, we put that card. So that's the first column. All right, we don't
have any image. You can go and get
the image on Putin. I'm just going to call
this one shopping cart. So that's my first portfolio. And then you can leave
that old problem. And then I'm just
going to copy this. Two more times. All right. So one is shopping cart, this one is jewelry store, and this one is
attendance system. So these are my projects
that I've worked on throughout my carrier
theoretically speaker. So just showing them off to
the visitors for the website. And then when I jump back and see what my page
is looking like, her it's seeing shopping cart or restore attendance system. Based on the size
of these cards? I could probably
take you no more. I could probably squeeze
in on other ones. I could easily just say our Jacob three spaces
instead of four. And then add another one just so we can fill
up that space. All right, that looks a bit like a better
use of the space. That's called the swan. Sorry, checkout. All right, so I'm just not odd strengthened example
where it's to use. So I'm just showing you
how you can do that. And then if I wanted
a second rule, if I just replicated
all four of these, look at what happens, it just automatically creates
the new rule. Of course, I'll probably want
some daylight between them. So it would be at that
point is when people would tend to want to have a separate div for
the rule, right? So at that point, what I'll do is remove this ID because this
is not just stir rule. I will also remove the
excess which I already did. So I will just create another rule or
rather out of those, duplicate this since we were duplicating them all
this time anyway. So just I refactor null, right? Which is apart of
parts of the process. Sometimes you do a
design like I just did. I thought I could just use
the one rule and whatever, but I don't like what it looks. Non-problem. So div your ID Is gallery. And then inside of
the Galleria have multiple roles with
multiple columns, such as this entire roll code. And I paste it twice inside
of the gallery view. So I have this rule, which is the first row and
the novel cyclone rule. And it, When I look back at it, it's still kind of looks it's still choked
up, but guess what? Because now I have the
two distinct roles. I can easily put up brick in-between the lives
and look at that. I get that daylight. So that's all containers on
Dave's help you to kind of keep sections together and
then move them as one unit. So I have this entire row
in a div, this entire want. So if I just put a break
point between the two divs, then I get that daylight
I'm looking for. Of course we don't
have any images, so that's why we're only
seeing those broken links. You can put in images and beautify and modify
this as you wish. But I think this is,
I think this is cool. I think we've done
quite a bit and we looked at a
number of options. We were able to split our
rules on our columns. And we see where splitting
even more and mixing and matching the different
elements that come together to make a website. So now we're, I can call
it done with Apple page. The home looks this way
and that looks good to me. The abode, of course, consistency once
again, these key, so you can just make sure
that all the headings are consistent colors
throughout your website. Unless you deliberately wanted him to be a different color, then that's fine.
That's up to you. So when we come back, we'll look at redesigning
our contact form. That is going to definitely
be a very fun activity.
23. Redesign Contact Page with Bootstrap Forms: All right, so we're
back and we are modifying our contact form. So the thing about
forms is that there are people who take it
as their day job as challenged as a rite of passage to make sure that
they can design a form. Form can be as complex as it needs to be simple
because that is the way that a user actually feels invited to
interact with you. This is the gateway to
your application or at the basic level where we're
not necessarily collecting anything too
sensitive. It's fine. We can just school
through with this. But then later on when
we started looking at more complex
development in dotnet, then you definitely will start thinking about
security on whole. Having appropriately
designed form is essential. For now, however, we're
just focused on the layout. Know what I'm going
to do is jump over to Bootstrap and see
what form ideas they have for us, right? Sometimes you want to
do something, well, you need inspiration and there's
nothing wrong with that. So if I just jump over to
the form documentation, we look through the
form controls already, had looked at some of these
and we saw that we have the form dash control
class which we could use. But then we saw also that you have some samples like if you
jump poets of form control, you see, okay, They
have an example where, I mean, this is
really all that's needed for our contact form. All right, so literally we could just borrow
this genes are few things and we would be
quote unquote, done, right? If I look at layouts, sure to have some nice
ideas for OK. Whoa, we can have a grid
layout, right? So we can make some much the input tags
with the columns, right? Holy can get what are
called gutters know, to have a gutter width are not entirely sure what that one
would do, but that's fine. Here's a nice complex form using the grid layout answered. So if wanted email password or maybe email contact number, address, and everything for somebody to sign in or register. You have tons of options and
ways of doing this thing. All right, so what I'm
actually going to do is borrow this complex layouts. It's complex layouts. Of course, we can find other
things to put in. So right now, what we have for our form is
just the full name, the e-mail address,
and what your queries. If we borrowed
this complex form, we could easily say
firstName, lastName. Change this to the maybe
the email address, and let this be
the query and then remove those excess lines. And then of course we have
the button to submit. So i'm, I'm going to do that. I'm going to just copy this
one because I like it. I'm going to jump
over to our code. And then I'm going to jump to the contact page
also notice that the filter needs
some modification. So let me just Caleb's this nev, go into the container, remove the contents,
all of the contents. Remember that we have to
end with that is our line. And then I'm going to borrow the footer so to navigate
quickly, What's that? It's just collapse what I
need to see at the time, borrow the footer, and then
I'm going to place it here. So no label twice, once again, it
exists in Charlotte. All RPGs have the very
similar elements. So that is what our
page looks like. I do need that break tag between the nav
and the container. There we go. Alright, so let's
start modifying or form. So we have our
form, input, email. All right. I did say we're going to
change this to be first name, last name, and address
to be the email. So instead of
changing one by one, I'm willing to be
strategic bubble is I do have the input for
email already. And I did want to change
the address into email, so I'm just going to copy the label and the
input for e-mail. And I'm going to override
the first address line. Notice it's called twelfths, I'm not over it in the div, just the two controls. So I've preserved
the e-mail control. No, I can go ahead
and modify this, the first name and last name. And of course, you
want to make sure that your labels much what
is being asked for. So FirstName input, firstName for labor for much
is the ID, right? So if it's input
firstName for me first, sorry, I think it is
spinning red firstName for. Then. We need to make sure
we have the ID, right. Same thing for this one
That was that was password. It's no last name. So lastname. And the type was password is no text and your type was email. It's an all text for it. The email is still preserved. So FirstName, lastname,
email, no problem. And then don't here, we can remove the ones that
we know we don't need, so I don't need anything
about the city and zip and anything else. I don't need that
checkbox either. Someone splinter, move
all of those things. All right, but then address two. I'm going to definitely modify. So this is going to
be input, query. And no place holder
for this one. As almost all thought, this is not immune
to be at text box. This is going to be a text area. But this is the query, right? So text area, open
and close tag. No problem. Takes area. I'm going to give you
the class control. So forum control
as your class and your ID is going to be the new
idea which is input query. I'm going to remove this input. And the label here is once you see your query for the button, I went to rename this from
seeing San into submit query. In addition to that, I
want it to stretch across someone to make it btn block. And when I take a
look at what we get, so kids, so the eye, okay. All right. This is good. This
is good to see. It means that somewhere
along the way I have so mismatched tugs have the first name and last name
okay. The e-mail address. Okay. But then I'm
syncing address through and seeing the input
inside of some things. So something went
wrong along the way. We need to fix it and
that's more problem. So let's try and
figure it totes. And I'm looking and honestly
not seeing anything wrong. So probably we just need
to update the bitch and DFS of the refresh the
page is displaying better. So I think that was just a
blip in the live server. But you see the consequences of not closing it out
properly at times, sometimes when you do that, the page does not
display what you expected it to and the
editor won't tell you why. All right, So just be vigilant when you see
those little things. And as you grow, you'll get more
comfortable and learn how to modify them better. But I think this looks
like a good form. Can put some verbiage
on the page, not just the form red, but we can probably use
like something that we have up by the bolt oh,
speech section. So in the photos page, we had this whole
row talk boats who we are, and contact information. I think that could be
useful on that form also, once again, it's up to you. You may disagree. So I'm actually just
going to put all of that above the form. So when somebody
navigates to the farm, they're seeing this is me, this is how you can
contact me or you can fill out the form
and submit your query. All right, I think that's
nice and easy to do. Now, obviously, the extent or modifications is up to your imagination and
your objectives. So I'm not being prescriptive, I'm just giving you guidelines and showing you how
it can all come together with various
Bootstrap elements to make your pages. At this point, I think that
the website looks good. Read my website. Obviously, when you click it, it should navigate home. It's not navigating. I'm clicking render
is not navigating. So that's one thing
that I would want to change definitely while I'm here to have this probably
go to the index.html. All right, and then if I
do it in that section, I'm definitely going to have
to do it in the other ones. Alright, so I just
made the mod spinal, you should be able
to just go ahead and copy and paste it and
change it, right? But after making the module, see that it works, right? And those are little
things that improve the usability of your website. And you want to make sure that
your users are satisfied. And who would have had a good
experience on other thing to bear in mind is
that less, is more. Alright, so when we come back, we'll just check in
all of our changes to GitHub and then take a
look at our live website.
24. Complete and Update Live Website: Now we're going to
be checking into GitHub and I'm
just going to buck chuck a bit and suggests
or see ideally, what you'd want to
do is check into GitHub each time we
hit a milestone. So it's always dangerous when
you make all these wants, all of these pages and you
go and TVA buckle, right? So upon to know we haven't had a buckled or at least since these last sets
of modifications, we did not have a buckled. If my computer went on
between the last lesson, this lesson, all of that
work would have been lost. So it is in your best
interests that at least after you finish working on a page and you have
it up and running, and it's working that you
check it into GitHub. So you save that space in time. Every time you check into GitHub or your source control monitor, it is like you making a bookmark in the amount of work that you are
doing or have to do. So it's always good
to keep short cones. And you know, you'll always have a recent version on to roll back to a should
anything happen. So with all that said, let us go ahead and
update our changes. And if you I hope you went
through and you put in other images and
updated other things. No problem. I'm going to show you some
of the other changes I made. Some very minor mode. So on the index speeds all it
was changed these headings. Just something. Instead of hitting, hitting, hitting also fix the spacing
between the headings and the slider by just introducing our break tag between
those two divs. Nice and simple. On the about page actually went and got my little
image that's stuck in to make it looks
at that is what it can look like if you
didn't go and get the image. This is what it can look like. At this point, I didn't
get a huge image, only. I got the smallest size
image actually from Pixabay. For this particular
one here it is. I just downloaded
the 640 big so on or it because I didn't need that huge image to fit
into that tiny space. So you'll always
want to make sure your image size is as close to what you
need it as possible. You don't want huge
files on your website to hamper the user experience on whole quickly
or website loads. And the other thing
that I did was to just send both of these buttons
that are contact speech. At that point,
arguably that could be redundant because higher
misaligned Contact page, leafy BAC is going to send
it to the contact page. So actually, what I'm
going to do right here, I know it seems a
hire me to actually trigger an e-mail. All right. So you ever clicked on boatman know websites? I
went to click it. It's trying to launch
the e-mail or brings up the email address to
send the inquiry to. That's what we're
going to do here. So I'm jumping over to my buttons and both of them
are going to contacts. But this one which I hire me, I'm going to give it
a male 2 directive. And then an email address. I'm going to say
test example.com. And they'll let us look at
what happens when we click. So leave feedback, okay, it navigates, that's fine. However, hire me is
actually going to launch my e-mail client. Have no additional
you, the full client, but it's actually launching
my e-mail client and attempting to send the
email there. See that? So that is what the
whole, you know, you can make your URL tried to send an e-mail tool and address. Nice and easy, right? So as we're going along, like I said, unless a
scenario appears sometimes, you mean never have to do
something when it goes up here, it's good to be comfortably
and often all whole. You can maneuver the situation and get what you need ultimate. However, there is no course on Earth that is
just going to teach you every single thing that you need to know in one sitting. You have to experiment. You have to encounter
certain things on your own. And that is how you will
grow as a developer. So with all that said and done thing got walks
for it to get off. Let us go ahead and
check in our changes. So let's just so
important to get section. I'm going to say better
styling to web pages. All right? And then I'm just going
to go ahead and commit. Say yes. And we need to
synchronize when 23 dots pull, push and click sync. And then I'm going to
navigate to the live site. So I'm not going to go to
GitHub to see if it works. So this is the test I went to
navigate to the live site. I still love the URLs
somewhere and look at that. It's automatically updated. So already paths
that pass through that stage of amazement where just tricky to GitHub
updates our website. Well, I'm just
showing you this is our handiwork live
on the internet. Now everybody can see
what's watt. All right. One other modification I think
I would want to do is to change the navigation bar, the active link
each time we bro, so for context, let me just
zoom in as far as practical. So you notice that the
whole miss kind of highlighted and the others
are kind of adults. And even when I click a bolt, home is still highlighted and contact home is
still highlighted. And the other thing too,
which is an easy fix, is that the favicon is
only on the homepage, which I'm sure we know
the remedy to that one. We just need to make
sure to 50 icon is on every beach bullet. I think the issue of the
navbar is a bigger issue. It's kind of not
that big of a deal, but at the same time
we want to make sure user experience is good. So far that we're going to have to employ some JavaScripts. So back in our code file, we know that we have
script.js and that is our script file for
all of these things. We have some coastal
methods that I'm really just going to erase
those who are samples. Nowhere going to do something
that's actually meaningful. And we're going to be mixing some JavaScript and some
jQuery to get this done. And on that note, we also want to make sure that our script files
are present on every pH. So you can just copy all
of that. Had to do that. The bootstrap, the jQuery
and the script file, you can just copy all of
this and make sure that it is on every page right
underneath the footer section. So on a boat, it should be
underneath the footer section. It would just collapse all
of these things, right? He can place it there. And the same thing for contact. Alright, so that we can
just write the script one time and it serves
across all pages. So let's get back
to our scripts. I wanted to be using jQuery, someone to do my document
dot heredity syntax. Or we can just say
dollar sign function, open and close, brace open
and close, and then close. So always open and
close. Just soda. We don't forget to close. Even though the editor
may hint at it. There's some editors that don't necessarily HE into
two like that. So just get angry indeed
new so that you can reduce the likelihood of getting errors based
on your environment. So what I want to do is kind of dynamically load
which page has the octave. So for context, in our nav bar, I kinda removed it's already
bought in the navbar. You'd, you'd have noticed that
the home link had active. I think I still have it in the contacts just for reference. The home link had
to give their goal. So they tied the
active grass and an inside this area, Korean PJ. So because we copied the
code from bootstrap, it came over with that in the example that a
homepage was active. However, in a real website, you don't want to, or it can be as easy as taking this code and putting it
on the relative pH, right? So if I'm on the contact page, then I'm going to
see the contact link is the active one and
that's the current beach. If I wanted to abode page, I didn't seem well
DO of course, no, that's introducing
variation on sudden navbar. So he gets a new page off to be meticulous enough to
remember to do that. And to me that's just
hard maintenance. So you do have that option
and that option works, it will work fine. However, I wanted to
be a bit more dynamic. So what I'm going to do in
the script file is firstly take our register off all the paths or to
pj is that I have. So let's just go this far. Pages. And I'm willing to
do an artery, right? So pages will have an array that has the
different page names. Index speech of a
bullet has a page. Sorry, let me get my
spilling red contact. And then we have external links. But that's not really a PHP
page that's just done URLs. So these are the pages
I'm dealing with. And if I add another
page I just added to it, I'm not putting success because it's also a
mountain enough bar, so I don't need to make
her for institutes. All right. So anything that's Atlanta
within the navbar, I'll just extend this
list accordingly. So the next thing that I want
to do is get the path name. So var pathname, which
when we say path me would be the window
dot location. I think it's pathname. There we go. So in other words, give me the URL, right? So when you're browsing, you're on this page, on that page, et
cetera, et cetera. Which URLs are you on right? Now, after doing all of that, I'm going to set up a nice
little event or a click event. So I'm going to say, Well
actually I'm thinking habits. Then I click event might be a bit more work because then
I would have to find out. Which link was clicked. And then try and locate that exact URL and denote
off to refactor lot. So I'm going to, I'm going
to change my strategy. Instead I'm going to say, give me all the
NovaLink, so nav link. And then I'm going
to say dot each. And grown-up foam Sean, where I'm taking each one
that is being iterated again, it's asserting gets into
a variable called i. All right, so in other words, get everything with
the class nav link. That's our class meetings. So naught is not blink. Novalink is the class
that is given to each navigation items either
nav link, link, right? So I'm getting all of them. So as many links as
maybe on the beach, I'm just going to get all of them and go through each one. And for each one That's I'm
looking at, I'm calling it i. All right. So then at that point I went
to see if the path name or, or just got the
URL that we're on. If the path theme dot includes, meaning whatever
the path theme is, if it somehow includes
this particular nav item. All right, so I'm
going to compare the nav item name
with the page's name. And if the one I'm on
some hold that name is involved are included
in the pathname. Then what do I want to do? Then this is an if statement. So if, if this is true, then do this state this auction. And then I'm going to
have an else if to see this dot class name. Dot includes, meaning if
the item we're on, no, if the class name
already includes up to then we want to
do something else. So I'm just giving you the
conditions are the skeleton. So you have an idea of what
we're trying to accomplish. So if the page we're on no much is one of these
from the index, then I want to, or from the irony is sorry. Then I want to see that
dalda saying this sermon. But when it's ever want
to get the item we're on during the triggering off
on event our function, we have the keyword,
this dot class. So that's one of those
dynamic things we can do. What we see on the fly. Please add the class octave. And then we saw that to touch
something about earlier. Aria current page, someone to add on attributes that says REO, current page also. Alright. Now if the second condition is true mean in the class
name includes active already, then I'm just going to say
remove the class active. So we don't want it to have two octaves if it's already
seeing up to the t-cutoff, but make sure you add it if
we're on that cart beach. So I think that's done. Let us test and see and
you want to make sure that your pages are in the same order that they
would appear in the navbar. Don't mix and match them. All right, So index then
a boat and contact. So in the code anywhere
That's I had the whole active being hard-coded and
the area pj being hard-coded. I'm going to remove that. So no, I went alone the jQuery to do all of that hard work
in the bug grown for me. So I removed it from the edge. And it's also removed
from that page table, the area according pij. And then let's do
this for a spin. So we'll embark here, or it's, or on the index exceeds
highlights that we click our boats
all look at that. It changed. We click Contact, it
change on a boat. Our home on it genes. So everywhere we go, you see that it will
definitely change. So no, with all of
that changed dawn and dusk for completeness before I don't know the chicken, I'm just going to make
sure that all pages of the icon or the company
logo in their code, then I'll just jump over to get and then put in my message. I did dynamics, nav links, go ahead and commit locally. They'll say always. And then after that
committee is completed, I'll just go ahead and synchronize so it pushes
our changes and then we can give it maybe a minutes
or 30 seconds like stem. And then we should be
able to see our changes reflecting in the website in a very short order.
And there we go. So I'm already
navigating and you see that the pages are being
changed accordingly. All right. And then
because there's a delay in when it happens, because the page
loads than the script drones you see kind
of feeds in, right? So it's a nice effect, the beige loaded without
it and they realize, Oh, I need to do this. So it just kinda looks
like a fade effect. All right, so I
think that's it for OBC code website activities. At this point, you
have learned a lot. You have, you should be at least comfortable with
basic HTML syntax. But once again, you just have to practice and half
the experiments. And that's the only way
you really, really, really grow in this discipline.