Introduction To Website Technologies - HTML, CSS, JavaScript and Bootstrap | Trevoir Williams | Skillshare
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Introduction To Website Technologies - HTML, CSS, JavaScript and Bootstrap

teacher avatar Trevoir Williams, Jamaican Software Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:31

    • 2.

      Install Visual Studio Code

      3:15

    • 3.

      Write Your First HTML Page - Text and Links

      15:50

    • 4.

      Explore More HTML Tags - Images, Forms and Lists

      25:19

    • 5.

      Even More HTML Tags - Tables, Comments and Inline Styles

      9:12

    • 6.

      Introduction to CSS - Inline and Internal and External Stylesheets

      17:33

    • 7.

      More Advanced CSS - Classes, Tags and ID Selectors

      21:04

    • 8.

      Explore JavaScript and the Browser Console

      5:43

    • 9.

      JavaScript Statements and Variable Declarations

      11:03

    • 10.

      JavaScript Arithmetic Operations

      8:23

    • 11.

      JavaScript Decision Statements

      15:17

    • 12.

      JavaScript Repetition Statements

      19:56

    • 13.

      JavaScript Functions

      17:21

    • 14.

      JavaScript Variables and Scope

      7:29

    • 15.

      JavaScript and HTML DOM

      7:42

    • 16.

      How To Use JavaScript

      15:49

    • 17.

      Using jQuery

      18:07

    • 18.

      Introduction to Bootstrap 5

      24:10

    • 19.

      Add Website to GitHub

      13:18

    • 20.

      Create Public Website with Netlify

      6:31

    • 21.

      Redesign Home Page with Bootstrap Slider and Layout

      30:04

    • 22.

      Redesign About Page with Bootstrap Grid and Buttons

      19:47

    • 23.

      Redesign Contact Page with Bootstrap Forms

      10:13

    • 24.

      Complete and Update Live Website

      16:07

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

109

Students

--

Project

About This Class

Overview

Learn how to build a website using HTML and CSS and Visual Studio Code. By the end of this course, you would have learned:

  • How to create an HTML Document
  • How to link HTML Documents and create a website
  • How to insert elements in an HTML document (images, lists, tables, text, etc.)
  • How to style one or more pages with CSS (Inline, Internal and External Style sheets)
  • How to upload code to GitHub.
  • How to publish your static website to the internet using Netlify. 
  • How to design a form to collect data.

Content and Overview

To take this course, you will need no prior knowledge of any programming language. The content of this course assumes no prior knowledge of programming or web development and will teach you how to setup up an environment to develop a website from scratch. This course is very beginner friendly and chock full of development tips.

This is a huge course. Over 5 hours of premium content, but smartly broken up to highlight a set of related activities based on each module in the application that is being built. We will also look at troubleshooting and debugging errors as we go along; implementing best practices; writing efficient logic and understanding why developers do things the way they do. Your knowledge will grow, step by step, throughout the course and you will be challenged to be the best you can be.

By the time you have finished the course you will have moved around in Visual Studio Code and examined errors so much, that it will be second nature for you when working in the Web development environment. This will put your new learned skills into practical use and impress your boss and coworkers.

The course is complete with working files hosted on GitHub, with the inclusion of some files to make it easier for you to replicate the code being demonstrated. You will be able to work alongside the author as you work through each lecture and will receive a verifiable certificate of completion upon finishing the course.

Meet Your Teacher

Teacher Profile Image

Trevoir Williams

Jamaican Software Engineer

Teacher
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

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.