 Hello and welcome. In this video, we are going to download and install Visual Studio code. What is Visual Studio code? Visual Studio code is a free open source modern text editor. By open source, it means the source code is open for developers to contribute in making it better. Visual Studio code is cross platform. That means it will work across multiple operating systems. So it will work on Windows. It will also work on Mac. Visual Studio code can be extended in functionality by installing extensions. So if you want to add functionality to Visual Studio code, you can download and install extensions to extend its functionality. The official link to the Visual Studio code is displayed on the screen. You can download the Visual Studio code from this link and also learn more about the text editor from the link to download Visual Studio code. Just go to the link that I previously showed you. And that's the link that displayed. And it will show up the download tab for your respective operating system. If you're running a Mac, it will display a download button for a Mac. If you're on a Mac, just download, extract, and then drag the DMG file, which is a disk image file into your applications folder. And that will install it for you. If you're running a Windows like I am, just click on the download for Windows. And that will start downloading the files. There you go. It's downloaded the files for installation. So I'm just going to give it a couple of minutes to complete the download. There you go. It has completed. So I'm just going to double click and begin the installation. So you'll get a pop up like this. I'm just going to click Next. I'm going to check this tab to accept the agreement and click Next. And it's prompting me for a location. I'm just going to accept the default location. It's telling you the disk space that is required. So I'll click Next. Again, asking you to select a folder that it will install into is suggested a default here. I'm going to accept that and click Next. And then we have some boxes here is checked here. Add path. This I would recommend you leave. If you want to add, for example, a shut cut icon, I'm going to click on that. So it creates a desktop icon on my desktop. And just click Next. If you're interested in the other options, just check it. Once you're done, click Next and click the install button. And that will begin the installation. Once the installation completes, you are given this completion screen. And there is a box there to say launch for your studio code. If you don't want to launch it, you can uncheck it. It also, if you've checked the option to create a icon on your desktop, you will get an icon like this on your desktop. So I'm going to leave the launch for your studio code so that it launches it or click the Finish button. And then it will launch the application. So I click Finish. So this is what the interface looks like here. So there's a file option that also has a preferences tab and a settings option. If you want to change the theme, for example, you can customize it by going here. You can see I've got a dark theme at the moment. If I click on color theme, and if I wanted to select a lighter theme, it will give you the options to it tells you here, this is my default team, which is dark. So if you want a lighter team, just select one of the options. So this is where you can go and change your theme. If you haven't got the theme that you like there, you can always click on the extensions option, this option, yeah, this tab here, that says extension, if you click on that, and there's a search option that you can type in, whatever extensions you want to install. While I'm here, there is an extension I want to install is called paste and indent. And what that does, it allows you to automatically indent your code. If you paste the code into your code editor, it will automatically indent it. So this is it. So if you want to install it, just click install, and that will install it. And you can see here is doing the install, what is done, you can click reload, and that will reload the editor and tells you here, the option has been enabled, paste and indent enabled. To learn more about the editor, there is a help option here. And there is a documentation here you can always go to. So that's it for this video. In this video, I showed you how to download and install Visual Studio code. Thanks for watching. Bye for now. Hello and welcome to this video. In this video, I will be showing you links to where you can download and install some popular web browsers. You need web browsers in order to access web based applications. In this slide, I will list some of the most commonly used web browsers and their corresponding links to where you can download and install them. You may already have some installed already. However, I recommend you have a list two to three different web browsers installed on your computer. They are all easy to download and install. The most commonly used web browsers today are Google Chrome, which is developed by Google. And then we have Firefox. Firefox is developed by Mozilla. We have Safari, which is developed by Apple. And this comes shipped with Mac OS. Apple no longer supports Safari for Windows. We have Internet Explorer. This is developed by Microsoft and comes shipped with Windows operating system. We also have Edge. Edge is developed by Microsoft and comes shipped with the most recent versions of Windows operating system, for example, Windows 10. Another good web browser is called Opera. And this is developed by the Opera Corporation. You can visit any of the links displayed on the screen to download and install the web browser. But note that Apple no longer supports Safari for Windows. I have already caught some of these installed on my computer, as you can see on the screen. I will strongly recommend you have at least Google Chrome and Firefox web browsers, as they are mostly used by web developers and designers for developing and testing. Hello there. Many people may think that the Internet and the web or Worldwide Web are the same thing. While they are closely linked, they are very different systems. What is the web? Also known as the Worldwide Web. The web basically is a collection of web pages that is found on the Internet. What is the Internet? The Internet is a huge network of computers all connected together. So there's a clear distinction between the web and the Internet. They are linked while the Internet is a huge networks of connected computers. The Worldwide Web refers to a collection of web pages found on the network of computers. Your web browser uses the Internet to access the web. What is a client server network? Anytime you make a request or you're searching for something on the Internet, you are actually making a request to a web page that is in a remote location. So that usually is done over the Internet and the location where the information or the resources you're looking for is usually stored in what is called a server. So normally you would use your web browser via a client. The client can be your laptop. It can be your phone or it can be your tablet or any device that you can connect to the Internet can be used as or referred to as a client. So usually you would use a web browser via a client machine over the Internet to connect to the resource you want. Say for example, I wanted to look for a YouTube video. I would type in www.youtube.com via my web browser and then that request goes over the Internet to the remote server which could be anywhere in the world. So let's say I assume this is the video server that contains the request I made. So the request comes in. It does a search for the video I want. It finds it, sends it back via the Internet back to the client through the web browser and then I see the video and play the video. So these here are the server. Anytime you make a request to your web browser, it's usually going over the Internet and it will go over the Internet to search for the server that contains the information you request. So this process is called a client server network. The device that you use to access the Internet is known as the client. While the resource that contains the data or the information you want is referred to as the server. So there are tons and tons of servers located all over the world. So anytime you make a request, the request can go to anywhere the server is located. If for example you wanted to maybe pull up some images from an image sharing site, you make the request via your web browser again over the Internet. It locates the server that has the information you want. The server processes the information, sends it back really in the Internet and then you get the response displayed on your device. So that's basically how the client server network works. That's basically how the Internet works. Anytime you make a request through the web browser, just know that you're doing that using a client. So the machine that contains the web browser is the client and then it goes over the Internet, looks for the resources which is located on the server, the server then processes that sends that back through the Internet to the client who's made the request. So that's it. Thanks for watching. Bye for now. Hello and welcome. In this video, I will introduce you to some key questions you need to ask before you begin any development. Before you do anything, you need some ideas. What should your website actually do? A website can do basically anything but for your first try, you should keep things very simple. We'll start by creating a simple webpage with a heading, an image and a few paragraphs. To begin, you will need to answer these questions. What is your website about? Do you like pets? Do you like games? Do you like travel? And so on. What information are you presenting on the subject? Write a title and a few paragraphs and think of an image you would like to show on your page. What does your website look like? In simple high level terms, what's the background color? What kind of font is appropriate? Formal cartoony looking font, bold and loud, subtle. These are some of the questions that you need to answer in order to help your planning stage. Hello and welcome. In this video, I will introduce you to sketching out your design. Get a pen and paper and sketch out roughly how you want your site to look for your first simple webpage. There's not much to sketch out, but you should get in the habit of doing this now. It really helps. You don't really have to be a van Gogh. This is my sketch. This is what I have sketched out on paper. So there will be text at the top here and also a name. And then this is an image. When you click on the image, it will change to another image. I've also got a few paragraphs and on ordered or bulleted list of items also got a paragraph with a link embedded. Also a button at the bottom of the page. When the button is clicked, you can change the name on the page save from John to Jane or whatever name you prefer. The page will have this inner content area and also this outer content area here that will have a different color. You can design your website, whatever way you like, but try and keep it simple at this beginner stage. Hello and welcome. In this video, I will introduce you to some assets you will need to develop your website. Assets are various components you will use in building your website. Let's take a look at some assets. We'll start with a text. You need to know what text you want to use. For example, paragraph, title, list items and so on. You can choose the theme color by using any free color pick a tool. For example, webpage effects.com. There are so many color pick a tool. Just do a Google search for color pick a tool. You can select a color by its name or by the hexadecimal or hex values, which is something like this here. This is what is called the hex value. So the idea is to go through and just pick out whatever color you need. You can play around with these. Once you find the color you need, you can just copy the hexadecimal values into your code editor. You also need images, but you must be careful not to just grab any images you see on the web because they may be copyrighted. However, there is a good website called unsplash.com that allows you to use its images for free. But they do ask if you could give the owner of the images some credit. It's not mandatory, but it's useful to acknowledge if you do use any of their images. This is unsplash.com. And they have lots of free images you can use. All you need to do is you don't necessarily have to log in. You can just explore by clicking on these three dots here. And you can just go and there's option for you to search depending on what type of images you are looking for. You just type in whatever you're looking for. For example, if you're looking for something relating to beaches, you just type in beaches and it has different images that comes up. And there should be an option to just download. And you can just give the credit when you click on this download link. There's an option here to tell you say thanks. And so that means you can copy this when you click copy. That means it will put a reference on your web page to this image so they know who created the image. So I strongly recommend you give credit to whoever has designed the image if you decide to use any of their images. Another asset you are going to need is fonts. So you need to know what type of fonts you'll be using for your website. Google has a collection of fonts quite a big library. So you can go there and just look through the fonts and see whatever one you like. If you do find one you like, you can reference them inside your code editor. This is the Google font home page. So you basically the idea is it gives you a sample of what the font is going to look like. So you just look through and if there's any fonts that you like, you can just take note of the name and then you can reference that from the link inside your code. Hello and welcome in this video. I will show you how to assemble the various files used in building a website in a way they can talk to each other. A website consists of many files, text content, code, style sheets, media content, and so on. When you are building a website, you need to assemble these files into a sensible structure on your local computer and also make sure they can talk to one another and get all your content looking right before you upload it to a server. A server basically is a powerful remote hosting computer that is always on 24 seven. This is where your website will live if you want the world to access your website. There is usually a charge for this hosting service. When you are working on a website locally on your computer, you should keep all the related files in a single folder. That single folder should mirror the published websites file structure on the remote server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your desktop, in your home folder, or at the root of your hard drive. You can also create sub folders to store images, media files, and so on. The index dot html file contains the main content of the website and also connects to the sub folders. It is usually stored in the root of the project folder. So the index file does not get stored in a folder itself. It's usually in the root of the main project folder. Choose a place to store your website projects. Let's create a new folder called my projects or similar. This is where all your website projects will live. So I've already done that. I've created a folder called my dash projects. Notice that they are all in lowercase. So the way I created this folder, you just right clicked on my desktop, I went to new and clicked on folder and just gave the folder a name. So just do the same right click on your desktop and just give the folder a name. So this is going to be the main project folder for all my website projects. Then inside this folder here, I'm going to create another folder that will store the content of my first website. And I've decided to call this sample site, but you can call it something more imaginative. So if I click on this now, you can see I've created another folder here folders are also called directories. So this is going to be the main project folder for my first sample website. So if I open up this folder here, you can see I've got other sub folders. I've got a sub folder for images. So if I have any images I want to use for my website, I will store the images inside this folder. If I've got any JavaScript I want to use, I'll store it inside this folder called script. If I've got any CSS, I'll store it inside this folder called style sheet. And then in the root, this is called the root in the root, I've got the index.html file. This basically is the homepage for the website. So when someone goes to your website, say for example, Google.com, they'll be loading the index.html file. So this index.html file will link to these other sub folders. So any file I place inside these sub folders, I will link to them from this index.html file. So when someone calls or goes to my website address, they will be referencing this index.html file, which also has linked these other files inside these sub directories. It's also a good idea to name your folders and files in lowercase, you can see I've named my sub directories in lowercase. And he also you can see my main project folder is in lowercase. This is because many web servers are case sensitive. So for example, if you have the wrong format, if I called a file, if this is in lowercase, and I try and upload it to the server and change it later to uppercase or vice versa, it may not work. So you have to maintain the format. If you specified lowercase, make sure when you are invoking or trying to call the files inside here, make sure they are specified in the same way. But it's generally a good practice to name your files and folders in lowercase with no spaces. To make the files in the individual folders, talk together, we have to make sure the file path between them is correct. A file part, basically, you can see here, this is known as a file path. A file part is the location of the actual files in the directory. So this here is referred to as a file path. So when I'm linking to this index.html file, because they are all in the same directory, I don't need to give the full path, I just need to indicate the name of the folder slash the file, and that will link it to the correct path. So this is the ideal way to assemble your files and subfolders that you want to use to build your website. Thank you for watching and bye for now. Hello and welcome to this video. In this video, I will walk you through a basic anatomy of an HTML element. What is an HTML element? An element is part of a web page. An element may contain a data item, text or an image and can also be empty. An element usually consists of an opening and closing tag. An element with no content is referred to as an empty element and does not have a closing tag. Let's take a look at a basic illustration of the anatomy of a HTML element. So this is a basic illustration of an HTML element with several parts. So the HTML element basically consists of an opening tag, which is this P here, in this case, a paragraph tag. This P here is what you use to insert a paragraph in a HTML document or a web page. So this is the opening tag, which is where the paragraph begins. And this is the closing tag. The closing tag is differentiated with the forward slash before the actual tag is closed. And the actual element, which is the P, which stands for paragraph, is enclosed in angle brackets. So we've got the left angle brackets and the right angle brackets. And the content between the paragraph tag, the beginning of the opening tag to the end, is what is called the content. So this area here is referred to as the content. While the element is the beginning to the start to the from the opening tag all the way to the closing tag is what is referred to as the element. So the HTML element is everything from the start tag to the end tag. So anything from here all the way to the to the closing tag is referred to as the element. Notice the key difference between the content and the element. So this area here is what is the content, while anything from the opening tag to the closing tag is referred to as the element. Hello and welcome. In this video, I will walk you through a basic HTML document structure. This is an illustration of a basic HTML document structure. So I'm going to walk you through the structure from top to bottom. I'll start with the dog type. The dog type is what is called is called a declaration. It must be the very first thing in your HTML document before the HTML tag. The dog type declaration is not an HTML tag. It is an instruction to the web browser about what version of HTML the page is written in. It lets the web browser interpret the HTML document as a web page. You always have to add the dog type declaration to the very top of your documents. The first thing you should do. So the web browser knows what type of document to expect, and then they can render the correct document. I have written the dog type in uppercase, but it is not case sensitive. So you can also write it in lower case. So in the illustration here, I'm saying dog type space HTML. So I'm basically saying the document type is an HTML document. So you write the way you write the dog type, you do the less than sign exclamation mark dog type and then HTML, and then a greater than sign. Next, we have the HTML element. So we've got the opening HTML element and the closing HTML element. The closing element is identified with the forward slash before the tag is closed. The HTML element wraps all the content on the entire page. And it is sometimes known as the root element. Next, we've got the head element, which contains all the meta information about the document. Meta basically refers to information about information. So it's micro information about information. The head element acts as a container for all the stuff you want to include on the HTML page. So whatever content is enclosed in the head between the head element, isn't the content that is visible when someone visits your web page. So within the head element, you can add tags like the meta corset, also the page title, you can also include that in there. What is a meta corset? The meta corset basically has a value of utf-8, which is the attribute. This element basically is used to set the character of your document. So the standard is a utf-8, which includes most characters from the vast majority of human written languages. So when you have your meta corset set to utf-8, it essentially means that it can handle any textual content you might put on it. The title element is used to set the title of your page, which is the title that appears in the web browser tab. So when the page actually loads, it will have a title on the web browser. This is the title you would have set within the document. So that will get displayed and people can bookmark that and also save that as a favorite. Next, we have the body element. The body element actually contains the visual content of the page. So when you visit a website, the actual content you can see is the content that is wrapped between the body tag, which is anything between the opening and closing body tag is the visible content that is displayed on the web page. So it contains all the content that you want to show to the web user or visitor when they visit your page, whether that is text, images, videos, games, playable audio tracks, or whatever content you have, you have to place it between the body element for the visitor to see it. Inside the body element, I have got some other nested element. I've got a h1 tag. The h1 element basically is used for heading tag. You can use that if you want to create a heading. And usually there are h1 to h6, h1 being the largest. We've got the P which stands for paragraph. You use that to add paragraph to a web page. Next, we've got the IMG, which is an image tag. If you want to add images to your web page, you use the IMG tag. The IMG is what is known as a self closing tag. It doesn't have a closing tag. Inside the IMG tag, you have to specify a couple of attributes. The first attribute is called the SROC or the source. So basically, if you're adding an image, you need to use the source attribute to specify where the image is going to be referenced from. And every attribute, you assign a value using the equals two, and you enclose the values in quotes. So in my example here, I've said the image is located in my images folder. And the name of the image is called poppy dot jpeg. Next, I've got another attribute called alt. This is called the alternate text. And you have to give it a value, I've given it a value of cute poppy image. Basically, what that does, if for any reason, the image that is meant to be on this page does not get displayed, the alternate text will display the text instead. So the text will advise visitors that there was an image here, or maybe a cute poppy or whatever. But basically, you have to give a descriptive text that will show up if anything happens to the image. For example, if the image is moved, or not positioned properly, or for some reason or the other doesn't display, then the alternate text gets displayed instead. There are so many HTML elements. I've only just used a tiny bit here in this illustration. But as you continue to get more knowledgeable in HTML, you begin to get more exposed to more HTML elements. So that's it for this video on the basic HTML document structure. Thank you and thank you. Hello and welcome. In this video, I will show you how to create a basic HTML document structure. This is an illustration of a basic HTML document structure that I am going to replicate inside a text editor, and then save it as an index dot HTML file. Web pages are saved with a dot HTML file extension. And the index is basically the homepage or the entry page to your website. If your website has multiple web pages, let's begin by creating a folder structure for our sample HTML document. I have already created my folder structure on my desktop, but you can create yours anywhere on your computer. So this is my folder structure here. And the way I created it is by right clicking on a blank space on my desktop, and just click it on the new option and selecting folder, and then just giving the folder a name. In this case, I've called my folder my projects. So that's the first step. Once you've done that, then open up the folder and then you create a project folder. This outer folder here will be a container for all your website projects that you want to create. It's always a good idea to keep all your projects in one location. So if I open that up and then I've created another folder inside this folder, basically the same way, right click and go new folder and then give it a name. I've called it sample dash site. It's a good practice when naming your project folders or your folders in general to give them lowercase names. If it contains more than one word, use a hyphen like I've done here. I've done sample dash site to give the folder a name. So it's good to use lowercase. It's a better naming convention. So now that we've created a folder for our project, we're going to create three subfolders inside this folder. So click on it and create three folders. Just right click and go new folder and do that three times and just give each of the folders a name. Call one images, the other call scripts and the other one you call it style sheets. And this basically helps you organize your file. So if you've got any images you want to use, you put the images inside the images folder. If you've got any scripts like JavaScript, you place that inside the scripts folder. And if you've got any CSS that goes in the style sheets folder. If you are using a Mac computer, you can create these folders the same way as well. I have added a couple of images to my images folder. I've got these two images here. And I've got them set at 256 by 256, which means the width and the height have been set to 256. And I got these images from a website called on splash.com, which is this site here. So basically, you just type in whatever you're interested in your subject title. Say for example, if you're interested in dogs, you type in dogs there, and you can just get a variety of images relating to your search. And then you just download what you want. So that's what I did. I just went through these images and just downloaded a couple of them. So feel free to type in whatever subject you want. Doesn't have to be dogs, but anything that takes your fancy. So once you've got your images, so make sure you put them in your images folder, the images will probably not be the same size. So you can resize them. And you can use any image editing tool. If you're on a Windows computer, you can use Microsoft Paint. So the way I resize my images, I just right clicked and went to open with Paint, which is Microsoft Paint. And while you're in Paint, you just click on the resize button. Make sure it's set to pixels. Okay, you can see this is my current size. And when you want to reset your or resize your images, make sure you check on pixels, put in the size you want, the horizontal, the vertical, which is the width and the height. And make sure this option here that says maintain aspect ratio, make sure that is unchecked when you set the horizontal and vertical values. So I've already done this, I'm not going to do this again. I'm just showing you how I did it. Once you've done that, then you can save that back into your images folder and just give it a relevant name. So that's it for this part of the video. Hello, and welcome to the part two of creating a basic HTML document structure. We are going to be using a text editor. And the text editor I'll be using is called brackets. I recommend you use brackets. So it's easier for you to follow along in the example. However, if you haven't got brackets, or if you've got a preferred text editor that you're used to, please feel free to use that. To open the brackets text editor, just locate the icon. If you're on a Mac, go to your applications folder. If you're on Windows, go to all programs and you see the icon for brackets, just click to launch the application. If this is the first time you launch the brackets text editor after installation, it provides some sample code for you here just to illustrate how various parts of it work. But what we're going to do, I'm going to open up our project directory inside the text editor. So I'm going to navigate to it, I'm going to click file, open folder, and the folder is on my desktop. So I'm going to navigate to my project folder, which is this one here. And this is what I want. I just click and that will open it inside the text editor. So on the left pane here, you can see my sub folders and my main project folder. So if I expand this folder here, you can see I've got a couple of images in that folder. So I'm going to create a new file and I'm going to save that file as an index dot html. Any file that's called the dot html extension is treated as a web page or a html document. So I'm going to go to file and click new. And you can see it's given a new here. And I'm going to click on save. I do save as and I'm going to save it into the root. This area here is a root and I'll call it index dot html and click save. So you can see on the title here, it shows the name of the file I've just created. And you can see where it's got working files. It's got the file currently highlighted, which means any file in this area is the file you are currently working on. So any code I write in here now will now be an html code. So when I launch this with a web browser, it will know that it's an html document. So the very first thing you do in an html document is indicate the dog type. So the way you do that, you do a less than symbol on your keyboard an exclamation mark. And then you type in the word dog type, you can make it lower case if you like. It's not case sensitive. And then you do a space. And then in lower case, you type in html and then you do a greater than sign. So that's the very first line of code you write inside an html document page. So let's move on to the next line. So the next line here we are, you can give a couple of spaces if you want. I'm going to now specify the html document. So you do that by again, less than sign on your keyboard, type in html. And then a greater than sign. Most tags have an opening and a closing tag. One good thing about brackets is that it automatically also adds the closing tag for you. So all you need to do is just press enter on your keyboard. And that will separate them. So any code between the opening and closing html tags will now be referred to as an html document. So anything between these elements, the opening and closing is treated as a web page. So next let's tap down. And then we create the head section, which is the head element. Again, you do a less than sign, you type in head and then a greater than sign. And it automatically places a closing element for you. So just press enter to separate. And in between the head element inside the head element is where we're going to specify some other nested element. So we're going to place some other elements in between the head element in the next video. But before I wrap up this video, I just want to create the body element. So again, the way you do that, you do a less than sign, and then type in body, and then a greater than sign, you can see automatically places a closing tag. And inside the body element is where we'll have some other elements. Any elements inside the body element is the content that the visitor to the page will see. Any tags or element inside the head is just for informational purposes. It doesn't get displayed. The only thing that gets displayed if you have a title here, the title will show when the page is rendered by the web browser. Just as you have the title here, see an index.html. When the web browser launches this web page, it will have whatever title you've given to the page, it will have it displayed in the web browser window. So that's it for this part of the video. In part three, we will add more elements to the document structure. Thank you for watching and bye for now. Hello and welcome to the part three of creating a basic HTML document structure. Before we carry on from where we left off in part two, I just want to show you something. If you notice here, we've got some indentation inside the text editor. Indentation is very important. It helps makes your code get more organized and neater and makes it easier for someone to read your code and also for you to read your code. So looking at the code here from the indentation, it can tell that the head and the body elements are child elements to the HTML element. So any content I add inside the head element will become child elements of the head and then grandkids of the HTML. Any content any elements I add inside the body element will become child or children element of the body element. And there will be grand children for the HTML element. So you can tell the way the elements are related from the indentation. So indentation is very important. So I'm going to add a couple of elements to the head section. So I come to the head inside the between the head element. I just do a tab. And if you notice as I do a tab, it automatically indents the place where the cursor is flashing. So again, to create a new tag, I do a less than sign. I type in the name of the tag. It's going to be a meta space car set. Okay. And then the value this meta car set is an attribute. And the value I'm going to set this value to utf dash eight. And then I close it with a greater than sign. The meta car set basically is used to set the character set for the document so that any text you enter will be recognized by anywhere, anybody who's viewing this all over the world. So it makes it easier to interpret the characters in the document. When you set attributes, you always have to use the equals to to give the value. And the values are enclosed in quotes, as you can see here. So I'm going to add another element. This time is going to be a title element. So again, left angle bracket or less than sign, I'm going to type in title. And then a greater than sign, you notice automatically, it does that for us, not all text editors do that. So you have to manually do it yourself. But brackets automatically places the other tags for you. So it saves a bit of typing. So in between the tag, I'll type in my title. I'm just going to say my sample web web page. I'm going to leave it like that. If you notice the indentation, you can tell that these two elements are child elements of the head element. So I'm just going to remove some spacing. So that's it for the head element. That's all I'm doing for the other moment. Next. So any content inside the head element is not visible. The only thing that is visible is this title here that will show up on the title of the web browser when the page is viewed. But everything else is just information and purposes or used to reference other related documents. So now let's add some elements inside the body element. And anything between the body element is the actual content that is visible on the web page. So I'm going to add a h1 element. So again, I do a less than sign, type in h1 and then close that. And I'm going to just say hello, hello world. Okay, the h1 is basically used as a heading. So if you want to add some kind of heading to your web page, you use the h1 tags. And there are six of them, h1 to h6, h1 being the largest heading, and then h6 being the lowest heading. Another thing I want to do is add a paragraph tag. So the way you add paragraphs to a web page is by using the p tag. So again, I do a less than sign, type in p, and then a greater than sign. And in between the opening and closing p element, you just type in your whatever text you want. So I'm going to say today is a new day. So that's all I'm typing in for now. So you can use as many paragraph tags as you want to insert paragraphs anywhere within your document. All right, I want to also add an image to my page here. And the way to add the image you use the IMG tag. So you do a less than sign, you type in IMG, IMG stands for image, you do a space, you need to add an attribute. And the attribute I'm going to add is called a source attribute. This is important, because I'm using this to reference where the image is coming from. The image is located inside this images folder here. If I expand that, so this is the image I'm targeting. So I need to reference the source. So you use equals to sign. And then you use quotes. In between the quotes, you specify the location of the image. So it's located inside my images folder. And the name of the image is called poppy.jpg. All right, you see that's this one here. It's a JPEG file. And I'm going to add another attribute called the alt. This is an alternate text. And basically what this means, I'm going to give it a value first, I'll use equals to to give it a value. And I'll just say, you can type in whatever text you want. And just type in poppy image. And then I'll do a greater than sign to close the image tag. So with the image tags, they don't have a specific closing tag, like the other tags. So they have what you call a self closing. You only have just the opening, you don't have a closing when you're using an image tag. So what this alt attribute will do, if for some reason, this image is not able to be displayed, then this text will take its place. The text will just indicate to the visitor of the page that there was an image here. So this will only show up if this image is not displayed correctly or not displayed at all. That's why it's called the alt. It's an alternate text. So that's it for the document. I'm just going to click on the file option and click save all. And that is safety document. One thing I want to point out inside this image here, where I've indicated the source, because it's located inside the same project directory as this index dot HTML file that I'm working on, you only need to specify the name of the folder, and then the name of the image just like I've done here. All right. One good thing about the brackets text editor is that it's got a live preview where you can preview your page. So I'm going to click on this live preview. And that will open up the Google Chrome. It only works with Google at the moment. So if you click on that, it will launch, you can see here is changing color. So this is what the webpage looks like here. This content here, this piece of this code here is what has been rendered here in the web browser. So you can see here where it's got my sample webpage. That's this title here. So anything inside the head content is not displayed. The only thing you can see is the title, which shows up here inside within the web browser. And then you can see here hello world is this h1 element here. And then the paragraph is this here. And then we have the image which is this image here. And notice the also the document is rendered in the way it has been displayed in the editor. So you can see we had the title first, which is this on this page here. We inside the body element, we've got the h1, which is this, the paragraph and then the image of the puppy. So that's basically a very basic HTML document structure. Hello and welcome. In this video, I will explain what attributes are. And we'll also show you an example of an HTML attribute being used. What are HTML attributes? Attributes basically are used to provide additional information about an element. So they contain extra information about the element that you do not want to appear in the actual content. All HTML elements can have attributes. There are some properties that all attributes should have. They should have a space between it and the element name. The equals to sign is used to assign a value to a attribute. The value of the attributes are enclosed in quotes. Attributes are always specified in the opening element tag. Attributes are paid. That means they will have a name and they will also have a value. I have used an attribute in one of the previous videos. In this course, I use a source attribute. I'm going to go over that attribute again. There are different types of attributes. And the source attribute is one of such attributes. It's usually used inside an image tag. So when you are using the HTML image tag to define an image, you use the source attribute, which I have used here on line 11 of my code editor. You can see the source attribute and is spelled src. So this is the name of the attribute. And you can see the equals to sign here. The equals to is used to give the attribute a value. And you have to enclose the value in quotes. So you can see here I've enclosed the value of this attribute, which is called source. I've enclosed it in quotes. The source attribute when used with an image tag, basically is used to reference the file name where the image is located. In my example, my image is located inside my images folder, which is this image and inside and this is the name of the image. So I'm referencing the location of the image using the source attribute. I also want to introduce you to another attribute that we've also used before. The attribute is called the alt attribute, also referred to as alternative attribute. This attribute basically is used to specify an alternative text to be used when an image cannot be displayed in my code editor here inside the image tag. I've also got this alt attribute here. So if for any reason this image cannot be displayed, the alternative text I have specified here will be displayed instead. Say for example, I know that the name of this image is called puppy.jpg. If I come here and just add a one to it, you can see the image no longer shows is now showing the alternative text instead, which says puppy image. So that's one of the ways or benefits of using the alt attribute with an image tag. So I've corrected that now. You can see the image is now showing correctly. Another valuable reason for using the attribute, the alt attribute is that the value of the attribute can be read by screen readers. This way someone listening to the webpage, for example, a blind person can hear the element. So the descriptive text helps users who have visual impairment and cannot actually see the image. So they're able to interpret or read the text instead. And they're able to do that using special software called screen readers, which enable them to read the text that is on the screen for the visually impaired. So that's it for this brief introduction to HTML attributes. I've only introduced you to a couple of attributes in this video, but there are tons of HTML attributes out there. Thank you for watching and bye for now. Hello and welcome. In this video, I will cover some of the basic HTML elements you will use for marking up text. I'm going to start with the headings. So the heading elements allow you to specify that certain parts of your content are headings or subheadings of your content. Just in the same way that a book has a main title, a chapter, titles and subtitles, and HTML document can also have similar properties. HTML contains six heading levels, which are from H1 to H6. The H1 being the largest heading. Normally, the most common level used is usually three to four. Most people don't tend to use five and six. So just remember that H1 is the largest, H6 is the lowest. In previous videos, I created this HTML document here, which is rendered as this page. So here we've got a heading tag, which is the H1. You can see here, I've used it on line 15. So if I wanted to, for example, add a couple more, I'm just going to copy this. I'm just being lazy here. And I paste that a couple of times. And you can see, so what I want to do here, I want to change this to H2. So you can see the different levels of heading tags that you can use. You can see here, this is a H2, which is smaller than the H1. And if I come here, type in H3 and change this to H3. And you can see this is smaller. So this is H1, H2 and H3, depending on how big you want your headings to be on your webpage. We have also used the paragraph tag so far in this course. So I'm going to show you an example of using a paragraph tag to markup or add paragraph to your webpage. Inside our document here, you can see on line 18, I've used a paragraph tag to add a paragraph to the page. And you can see the content inside the paragraph says today is a new day. And that's today's a new day display. So you can use the paragraph tag to add as many paragraphs as you want and to any areas of your webpage or document. Next, I want us to take a look at lists. A lot of the web content is made up of lists. And HTML has special elements for these type of lists. Marking up a list or list always consists of two elements. The most common list types are ordered and on ordered list. The ordered list is represented with the ol tag. And the on ordered list is represented with the ul tag. The ordered list are for lists where the order of the items matters. For example, a recipe where you have to follow the recipe in a certain order. With on ordered list, these are lists where the order of the items does not matter. For example, a shopping list. And this is usually wrapped up in a ul tag. So with on ordered list, by default, when you create them, they appear as a bulleted list. So I'm going to create an on ordered list inside this HTML document. So I've added an extra paragraph here on line 20, which is this text here. So I'm just going to create an on ordered list. So to create an on ordered list, you do the less than sign, you type in ul, which stands for on ordered. And then the greater than sign, you can see it's automatically placed in the opening and the closing. I'm just going to press enter on the keyboard to separate that list. And inside that list, you also need the list tag to list the individual items for the on ordered list. So inside there, you type in the li. Again, you do less than sign. And then you type in li to indicate it's a list item. And then the greater than and inside in between the list tag is where you list the item. So I'm going to type in kind. And just being lazy here, I'm just going to copy this and paste it a couple of times and just change the content in the list. I'm just going to indent that a little bit. So with the on ordered list I've created here, you can see the output here, you can see inside the output is bulleted here. That's the default when you create an on ordered list. By default, when it creates the list, it will have them in a bulleted format as you can see here on the webpage. If I wanted to turn this into an ordered list, I'll just replace the ul with an ol. The list item stays the same. All I need to do is replace the ol, the ul with ol, and this with ol, and that will become numbered. So you can see I've replaced the u with the o to show that it's an ordered list. And you can see it has changed from bulleted to an ordered list. You can see it's one, two, three. So that's the main difference. If you want something to be in a specific order, then you have to use the ordered list. If you don't care what order they're in, then use the ordered on ordered list. So I'm going to change this back to on ordered list, I just replace the u with the o. So that's basically how you markup text. So this illustration here is a very, very, very basic level markup. It can get more complex than this. But if you can understand the basic concept, then as you progress to more advanced stuff, you'll be able to have a better understanding of how the old stuff works. So that's it for this lecture on markup text. Many thanks for watching and bye for now. Hello and welcome. In this video, I will show you how to create links for a web page or website. Links are very important. They are what makes the web a web. The web is basically comprised of a collection of links. So links are found in nearly all web pages. They allow users to click their way from page to page and also enables them to access resources on the web. A link does not have to be a text. It can be an image or any other HTML element. To create or add a link, you need to use a simple element which is referred to as the anchor tag, which is abbreviated to A. And you also need a special attribute called the href attribute. The href attribute is used to specify the destination address. So when the link is clicked on, you want it to take the visitor somewhere else. So you use the h attribute to specify the destination address. So let's create a very simple link. I'm going to create a link that will take me to Google. So to create a link, you start with the less than sign. You type in A, which is the anchor. And in between the anchor, you type in the text. I just type in Google. And that's the closing tag. So you can see here, there's no link at the moment. For that, this text here to be linkable, you need to include the href attribute inside the opening anchor tag. So now that I have added this href attribute inside the opening anchor element, you can see here now that it's turned into a link. You can always tell it's a link because of the hand symbol. It turns into a hand. So if I click on this now, it will watch out for this address. It will change to Google. If I click on that now, it takes me to Google. You can see it's taking me to the Google homepage. I'm just going to click to go back. So that's basically how to create a link in a nutshell. So if you want to turn an entire paragraph into a link, all you need to do is insert the anchor tag. For example, at the beginning of the paragraph and one at the end, you can nest it inside another element. And that would turn the entire content into a paragraph. When you create links, you can wrap an entire paragraph into a link, can make it linkable, like I've done here online 34. I've just added this paragraph here. And you can see here, I've made the entire content of the paragraph into a link. So if I click on this link now, it will take me to this website here. So this website here is the value for the href attribute. You can see I've embedded the anchor element inside the paragraph tag. So I've nested it. So you can nest elements within elements. So I've nested the anchor tag here. You can see after the paragraph tag, that's the beginning where the link will start. And you can see the closing anchor tag here. And also we've got the closing paragraph. Hence is the entire content of the paragraph is turned into a link. So you can turn any text into a link depending on where you place the anchor tag, the opening element and the closing anchor element. So if I click on this now, it will take me to this website here. So let me click on that. And you can see here is taking me to this website. So that's basically how you create a link. So if you only want certain part, for example, if I only wanted this part here, that says gratitude, if I want to turn that just that text into a link, all I need to do is relocate the anchor and the href attribute, I just relocate all this and place that at the beginning of this here, and also in the anchor element there. And that will make only this text into a clickable link. So in my paragraph here, I have relocated the anchor tag and also the href attribute from the entire content. So I've wrapped it around just this text here called gratitude. So you can see this is the beginning and this is where it ends. So as you can see, for the content for this paragraph, you can see the only thing that's linkable here is this text called gratitude. So if I click on that now, it will take me to this website, which is the value of the address for the link. Another thing I want to highlight with links is that links have different colors based on whether the link has been visited or not been visited. By default, when you create a link on your webpage, and if that link has not been visited, it is highlighted in blue. As you can see here, on line 17, I've added two elements here, I've added an h2 element and I've nested an anchor tag inside that element. You can see this link here because I have not visited it. By default, it is blue. Any link that has been visited becomes purple. You can see here, this link here is purple because I've already visited that link. And the Google link also is purple because it has been visited. So that's basically how you create links. So you can create links in any area of your webpage or HTML document. So I'm just going to get rid of this one here. I don't need this link here on line 17. I'll get rid of that. And I also want to get rid of the Google link. I just wanted to show you an illustration of how to create the link. So that's it now. I'm just going to save my document. So this is a refresh the page. So this is basically how I want the document to link to look like. So I've only got a link here, which is this particular text. So that's it for this video. Thank you so much for watching and bye for now. Hello and welcome. In this video, I will be showing you how to use HTML comments. What are HTML comments? HTML comments are used to describe your code. You can also use them to debug your code. Debug basically means finding trouble. If there are troubles within your code or your code doesn't work properly, you can debug it. That is try and find out what the problems are in the code. HTML comments are ignored by the web browser when the web browser renders the page. Let's take a look at the syntax syntax basically refers to how something is written. So we're going to take a look at the syntax. So this is a typical syntax for adding a comment to your HTML code. So you do the less than sign, the exclamation mark, two dashes, then you put in the text for the comment, and then two dashes again, and then the greater than sign, and that will insert the comment. So where you insert the comments is very important, because if you insert it in the wrong place, then it will affect that part of the code from being executed. This is an HTML document I've been working on so far during the course. So I'm going to try and illustrate inside this HTML document how a comment is added and how it may impact on what's on your document. You keep the best way to add a comment. If you want to add a comment, you can add a comment on a separate line by itself. For example, here, I can come here and just add a comment. So I do the less than sign, the exclamation, two dashes, and I'll say this is the largest heading size. And then you do two dashes and a greater than sign. So this has inserted a comment. Now, this is known as a single line comment. This comment will be ignored when the page renders. So if I refresh this page now, you would not see this line of comment here. You can see the hello world, which is this, but you would not see this line here because comments are ignored when the web browser runs. So comments are useful. You can use that to describe certain part of your code. When you write code, you may want to come back and view that code, maybe a few weeks or a couple of months down the line. And you may not really understand what the code does or what aspects of the code does. So if you comment your code, it can help you understand what you're doing or what the code does. And it will also help others who have to look at your code at some point. So if someone looks at this code here, they can say that looking at this, they will know that this is the largest heading size, h one. So it helps describes that part of the code. You can also use it to troubleshoot or debug. If there's some issue, for example, this image here, if for any reason this image is not showing, you can or any part of your web page is not working properly, you can use comments to just comment out certain aspects of your code, just to check why it is not working. You can also place comments on the side of the element. For example, this comment here, I can copy it and place it on the side. And it will still function as a comment. And when the web browser loads, if I refresh that, you will not see that because it's okay. However, if I place it here, this line of code will not work, it will impact on that line. So let me get rid of this and paste it. So if I come here just in front of the element here and paste it, you see that line of code should disappear. If you notice everything on my page has disappeared. And the reason being is that where I've inserted the comment here on line 15, I forgot to close the comment, which is a common mistake that beginners can make. So I've got the opening one, but I've not closed it. So it's commented out the entire code on the page. That's why it's not in this showing. Alright, so it's very important where you insert your closing comments. If I insert it here, for example, I do two dashes and migrated and sign. If I refresh, you can see it's all come back. But my hello world is not showing anymore because it has now been commented out. So you can see because the end or closing comment tag is here, and the beginning is here. So where you place your comment, the beginning and the ending is very important because it will affect the code on the document. So so far, I've shown you how to add single line comment, you can also add comments on multiple lines. For example, if I wanted to comment out all this list, I can come here inside and just do my comment here. I do less than sign, exclamation, two dashes, and I'll just say type in a text, and I'll come here at the bottom and do two dashes and close it there. So you can see here now it has commented out the comments, the content of this list. So this is known as a multiple line comment where you can have comments inserted, and it will affect multiple lines. So if I take this out here and take that out, that should make the content so you can see the content is showing now. So when you are adding comment, be very cautious as to where you place your comment, especially the closing comment tag, which is this one is very important, because if you don't place it correctly, it will affect other content within the document. So that's basically it for comments. Thank you for watching and bye for now. Hello and welcome. In this video, I will explain what a source code is. And we'll also show you how to view a webpage source. What is a source code? Source code basically refers to all the components used in building a website or creating a computer program. This includes things like text, images, scripts, style sheets, media files, and so on. This is a basic webpage or HTML document I created in previous videos. A webpage is also referred to as an HTML document. So this is the piece of code, the HTML code that has created this basic webpage. And if you look on the page, we've also got images. I've got image not images, we've got an image. And this image here obviously is part of this webpage. So if someone sees this page and they ask me, can I have the source code for this webpage? So what I need to do basically is give them the project folder, which is this folder here. This here is what I would have to send to them or make this folder available for download, or I can compress it using a software compression tool like Winzip, Winrar or 7zip, make it compressible so that it is easier to send via email, or we can make that available as a download. So this will be what I will send to whoever's made a request for the source code for the webpage. So if I open up this folder here, it contains everything that was used to build the webpage, we can see this is the index here, which is this page here. And then we've got inside the images folder, we've got the image I used, which is this, which is the image of this poppy. And and we've got the other folders, although there's nothing in this script folder, and there's not in the style sheet at the moment. But this is basically what is known as the source code or the components you use in building your website or creating a computer program. Next, I'm going to show you how you can view the source for a webpage. So I'll start with this page here. So to view the source, all you need to do is right click anywhere inside the page that is open. And there's an option here to that says view page source. If you click on it, it opens up as you can see here, we can see the HTML we've used to construct this page, which is this HTML here. So that's basically how to view the source for a webpage. Obviously, this is very simple page. But if you want to view the source for a more complicated website like Facebook or Google, there will be a lot more in here. And some of it you may not be able to read because it will contain other stuff, apart from HTML as well. So this is the Google homepage. So if I wanted to view the page source for here, I just right click and click on view page source. You can see when it launches that there's a lot of stuff in here, but you can see just about make out the HTML, the doc type, which is there. And then you can see other stuff as well, because there may be things like advertisement and other things related. You can see this is more complicated than a very simple webpage we've seen. So basically, if you want to view the sum of the code behind a website, you just go to the page source and you can see it. A lot depends if on the programming language used. There are some programming languages that the actual source code is not displayed when you go to view page source. The actual code is processed by the backend server. And then the server returns the processed after converting it into a way the web browser can read, it then sends that back to the web browser. So sometimes you may not always be able to read what's in the page source. This is a simple website called example.com. So www.example.com, you can see it's a very basic website. If I wanted to view the page source to see how this page was constructed, I just right click and go to view page source. And you can see the page source, it tells you, you can see the HTML used to build the page. This is some CSS here as well. And here we've got some media files. So basically it shows you how the page was constructed. Hello and welcome. In this video, I will show you the various ways you can apply CSS to an HTML document. There are three main ways you can apply CSS to an HTML document. You can apply CSS externally. You can apply CSS internally and also apply CSS inline. I'm going to illustrate with a basic example of how you apply CSS using these three methods. I'm going to start with an external CSS. An external CSS is basically CSS that is referenced from an external file. So to begin, I want to create a CSS file. So inside my project here, I've already got a folder called Style Sheets. So I'm going to click on that folder. And inside that folder, I'm going to create a new file. Just right click and click on new file. And I just give the file a name. I'll call it mystyle.css. And just press enter. You can see now it's showing us style sheet mystyle.css. So this file now is a CSS file. Any content I write in here is going to be CSS. So the example I want to do, I want to style all the paragraph tags. So this is a paragraph tag here. This is also a paragraph tag. If I click on my index.html, you see that I've got a p tag here, which is this one. And the bottom here, I've got p tag here, which is referencing to that. So if I click on my style sheet again, this mystyle.css. So in order to create a style that will make all the elements, all the paragraph elements a different color, you start with the selector. So p will be the selector because that's the element I'm targeting to apply styling to. Next, you need curly braces, opening and closing. You do enter to separate. And in between the curly braces is where I will apply the styling. So what I want to do, the property I want to style is the color. So I write color. And then you must put a colon followed by the value I want to give a color. I'm going to make it blue. And then a semicolon. So that's basically all the CSS. So I'm just going to save that. Click Save all. So now I've got a CSS. So I need to find a way to reference CSS from my index dot HTML file. And the way to do that is by a link element. So I have now added the link element here. So this is it. You've got link. That's the name of the element. And then you need the href attribute. I forgot to put a closing quotes there. That's why the rest of the text is highlighted. So if you notice here, the href is basically an attribute. And the value is style sheet, which is this folder is referencing the location of the style sheet. And the name of the style sheet is called my style.css, which is this. And then next we've got this rail attribute. The rail attribute defines the relationship that the linked resource has to the document from which it is referenced. So here we're referencing the style sheet. And the type, this is another attribute, which indicates what type of document the style sheet is. And the value is a text is a text slash CSS file. So this is how you would reference an external CSS inside your HTML documents. I'm referencing this CSS file from my HTML document. And it's important to know that you must place it in the head section. The reason for this is that before the page loads, you want any CSS that's available to be applied as page loads. So if I save this save all and refresh, you can see here now, my paragraph has turned blue. Because if I click into my CSS here, I've given it the property of blue. That's how this came about. And I've referenced that using the link element, which must be placed in the head section of your HTML document. So the external CSS is the most effective way of applying CSS. You can imagine if you have a website that has several hundred pages, you can you can apply CSS just from one file. So that's the benefit of using CSS from an external file. And if you want to make changes, you know, you only have to go to one file and make the changes on that file. And it will replicate across the relevant pages. Next, I want to show you how to add an internal CSS. So what I've done, I've commented out the external CSS reference so that I can show you how to add an internal CSS. And you do that using the style tag. So you type in styles, use the style element. So with all elements, you should have an opening and closing. So I'm just going to tab to separate the style element. And in between the style element, element is where you apply the actual CSS rule. So I'll start with the element I want to style, which is a paragraph. And then I do a calibrations opening and closing. And I select the property I want to style, which is a color. You add a color and then give it a value. And then semicolon to end. You can see here it's already changed. Alright, so that's basically how you add a style to a HDR element internally inside the document. This is not a very effective way. If you've got a tiny document, it's okay. But if you've got multiple web pages, always best to go for an external CSS. You can imagine if you have to change all the styling in the HTML document, also it makes the HTML document a bit messy. So it's always good to separate the CSS if possible. So that's an example of an internal CSS. So next I'm going to show you how to apply an inline CSS. To show you the illustration, I'm going to target this element here. This H1 here is going to be my selector. So when you are applying CSS in line, you have to do it in the opening element. So I'm going to make this element here, this H1, I'm going to make the text red. So inside the opening, I just do a space to tab. And then I type in the word style, followed by an equals to and in quotes, I have to type in the value, the property I want to style. So it's going to be a color. And the value is going to be red. Alright. And then when you're done, you put closing quotes, and then you close, you can see it's turned red already. So when you are using an internal CSS, you have to add it in the opening element, you can see here, I've done it inside the opening element. And it uses the style as an attribute. So this now this style becomes an attribute, where the values is the property you're styling, and the value for the prop and the property value. So this is a property. This is a property value. So you can see here, it has reflected, but very, very sparingly, you should use internal CSS. You can imagine if you have to change CSS in line, or internally, it will take a lot of time. So it is rarely used just in very rare cases. Do people use inline CSS? For example, inline CSS will override the external or internal. So if you specified a different color inside the external, and you change the color in line, the inline will supersede the external, but very rarely do people use inline styling. I've just shown you here just for illustration purposes, what people use, what the professional use, and the proper way to do it is to use an external CSS style sheet and define all your CSS inside the external file. And then it's easy to just make the changes on just the one file. So to conclude, I've shown you how to apply CSS externally, internally, and inline. And the most effective way is external. So what I'm going to do, I'm going to get rid of my inline here, just to bring my document back to how it was. Okay, you can see it's returned back, and I'm also going to get rid of the internal CSS. I'm going to remove the comment from the external CSS. And that should be it. So I now have my external CSS, I'm going to leave that link there. So if I want to add more CSS, all I need to do is go into the CSS file here, and just add all my CSS. So you can see it's very effective to do it this way, rather than internal or inline. So that's it for this video on applying CSS. Thank you and bye for now. Hello and welcome. In this video, I'll be showing you a basic example of styling multiple properties. I have already got an external CSS. And if I click on this, this is my external CSS. So it's got one property in there at the moment. When you are applying CSS to an HTML element, you can style multiple properties for that element. For example, this paragraph element here, which is the selector, if I want to add more properties to style, I'll just tap down. Say for example, I want to increase the size of the font. I just come here and type in size and do a colon. Maybe I give it 30 pixels. And then a semicolon. And I want to let's say I want to apply a border to the paragraph. So I type in border. This would be the border property. And then a colon to separate the property from the property value. And I want this to have a one pixel solid border that would have a color of red. Okay, so that's it. When you're writing your CSS, always make sure you terminate each property and value with the semicolon at the end. So I'm just going to save this, save my external file and just refresh my document. You can see here, the CSS has been applied. The border, you can see the border around the paragraph, which is this, which is the line five here. Line one is a color, which is blue. I've also increased the size of the text to 30 pixels. You can see the size. When you are using the size property, you have to attach the font. You can see I've used size, but I didn't say what size I was referring to. So I've now added font, which means I want the size of the font, which is the text inside the paragraph to be big. You can see the text is gone big now, because I've changed the value or the size to 30 pixels. And you can see the border around it. So this is a simple example of using multiple properties to style an HTML element. Hello and welcome. In this video, I'll be showing you how to select multiple elements and apply a single CSS rule to all the elements. So I've got several elements in my HTML document. So let's assume I want to style the paragraph. I want to style the H1 heading, which is this one here. And I also want to style the list item, which is the li element. All I need to do is go into my CSS. You see, that's the advantage is having an external CSS, you just do everything on one file. So I'm going to modify this one slightly. I'm just going to get rid of that for a minute. All right, so I want to select multiple elements and apply a single CSS rule to all those elements. So the way you do that, you separate each of the elements with a comma. So I want to apply CSS to the paragraph. I do a comma. I want to apply CSS to my h1 element. I do a comma. And I want to apply CSS to my list item, which is my li item. So you can see I've separated them all with a comma, you got the p, the h1 and the list item. So I want to make all of them have a red text. So what I'll do, I'll just style one property, which is a color and separate the value of the property from the property with a column. So the color is a property. And the value of the property is red. Okay, you can see now it's all changed. You can see that this is the h1 element. This if I open up my index, you can see properly. The h1 is this one here. That's this the paragraph as one paragraph here today is a new day. That's it. I've got list item. You can see this is my li. These are all my list item. And I've got another paragraph here, which is let's try to be which is this one here. So that's basically how you can style multiple elements with a single CSS rule. So you can see using one rule. And I'm applying it to multiple elements. So that's it for this video. Thank you for watching. Bye for now. Hello, and welcome in this video. I'm going to make some modifications to the CSS that I have applied to my HTML document. In a previous video, I used this CSS styling here to style multiple elements. As you can see, my text is red. So I want to modify that and style things properly to make it look a bit more decent. So what I'm going to do in this video, I'm going to style the h1 element, which is this here, which is a title. I'm going to style that separately. I'm going to let the color go back to the standard color, which is black. But I'm going to make the font size bigger. And I'm going to align the text to the center. I'm also going to style both the paragraph and the list item. So I'm going to apply some extra properties, going to change the font size, the line height and the letter spacing. So let me head over to my CSS. I just click on the CSS file here. And this is where I can make the changes. So the first thing I wanted to do here is get rid of the list, the h1 item, because I want to give that a different style. I will just leave the paragraph and the list item. And I'm going to change some properties. I'm going to change the font size. Set that to I'm going to give you a value of 17 pixels. Pixels is a unit of measurement when you how you measure the sizes. So that's going to be set to 17 pixels. And then I put a semicolon to terminate that. And then I'll add another style. This time, I want to do the line height. That is the height between you can see this text here and this text. So that's known as the line height. I'm going to change that as well. So I'll do line. This is another property you can see is giving me suggestion here. So I just click on that. That's the property. I'm going to make it two, give the value of two and do a semicolon. Next, I'm going to do the letter spacing. Basically is a space between the letters. I'm going to type in letter. You can see it's giving me suggestion. I just use that. And I'm going to make that one pixel. Okay, you can see the letters, you can see this, you can see the line height and the spacing is already effective here. All right, you can see the changes are already reflected on the page. So that's my list item and my paragraph. Next, I want to style my h1 element. So h1 is going to be the selector and do my curly braces. In between the curly braces, I'm going to change the font size property. So I want to change the size of the font. And I want this, I'll give it a big size. I'll make this one 65 pixels. I'm just being adventurous here. You can see how big it is. Next, I want to align the text to the center. So the property is text align property. And the value I'm giving it is center. That's it. And I will save that and refresh. So you can see here the text has been aligned. You can see it's moved away from the other content towards the center. So if I expand the page, you can see the text being aligned to the center. Okay. So that's basically how you change. You can make modifications to any CSS at any time just by going to the CSS file and making the relevant changes. And you can also add more CSS rules to your style sheet. So that's basically it for this video on modifying your CSS. Thank you for watching and bye for now. Hello and welcome. In this video, I will be introducing you to some basic CSS selectors. There are different types of selectors in CSS. We've already used the element selector and also the grouping selector. But I'll just run through these basic selectors on the screen. So we've got the element selector, basically refers to the actual HTML element. For example, the paragraph element, which is the P element that is known as an element selector, the heading or each one that could be another element selector. So there are different element selectors. You specify an element selector based on the HTML element you're trying to apply the CSS styling to. Next, we've got the ID selector. The ID selector basically is used to select an element on the page that has a specific ID. The IDs are unique. You can only have one element per ID on the page. You can't use the same ID for multiple elements on the page. So ID selectors are unique. And they are represented in the CSS by the hash symbol. So anyway, you see the hash symbol on the CSS sheet, you know, that's referring to an ID selector. Next, we've got a class selector, which is similar to the ID, but the key difference with the class selector is that you can reference it multiple times, you can declare a class selector on a page and use it on several elements on that page. In comparison to ID selector, that is unique per element on the page. And you characterize the class selector with a period or a dot. So anyway, you see a period on a dot in a CSS style sheet, you know, you are referring to a class. Next, we've got a grouping selector. We've used the grouping selectors so far in this course where we selected multiple elements and group them together to apply styling, just like I've done here. So that is known as a grouping selector. There's also another selector here, which is represented by the Asterix symbol. What that does is use to select all the elements. If you want to apply a certain style to all the elements on the page, then you can use the Asterix selector, and that will apply the styling to all the elements in the page. So this is my HTML. If I click on my CSS file here, we can see an example of the grouping selector here. This here is a grouping selector where I've used grouping more than one element and applying the styling to that to those elements. Here, this is an element selector. I've just used one element. So what I'm going to do, I'm going to define an ID selector and also a class selector so that I can show you how they are used. So I'm going to go back to my HTML document. So I'll click on the index.html. And I'm going to the way you add, you have to add an ID, you do that using the ID attribute. The ID is an attribute. So what you do here, for example, I want to make this paragraph here, I want to make the content in italics. So what I do, which is this content here, inside the paragraph tag is where I need to specify, I do a space and just type in ID, which is the ID attribute, you give it a name, a value, you surround the value in quotes. So I'm going to call this quote. All right. So I've given this paragraph an ID now, which is unique. I cannot, now that I've used this here, I can't use the same ID anywhere else in the page because it is unique to the page. So now I go into my CSS. And the way to do to use the ID, you indicate a pound sign, which indicates that you are referencing an ID, followed by the name of the ID, I called mine, quote. Let me go back just to make sure if you don't get it right, it will not apply the CSS. So that's my ID, quote, quote. And next I do the curly braces, open and closing. And all I want to do here is make the font, the style of the font, I want to make it italics. And just end that with a semicolon, you can see is already reflected. Look at it here. You can see that's already turned italics. So I just click save all. So this is an example of using an ID attribute, where you use the ID attribute inside the opening element like I've done here. So you can only have one ID per page. So I cannot use this ID called quote anymore on this page on any other element. Next, I want to add a star a class at class attribute ID. So I want to this paragraph you are called today's a new day, which is this one here. And also this here, which is this year, I want to use class selectors to apply CSS to them. So what I'll do inside here, with a class selector, you can use it multiple times in a page. While ID selector, you can only use it once. So here I'm going to define a class, you define it inside the opening elements. So I'm going to type in class as the attribute. I'm going to give you value, I'm going to call this call it para. Okay. And I can use it again here. And I'm going to use it again here. Type in class, give it a value of para. So you can see here, I'm using the same class twice. So you can use it any number of times on any element on your page. Whereas the ID you got this ID is unique. So I can use this ID called quote anymore on this page. So now that I've defined the class inside the HTML element, I need to go to my CSS and add the styling for that. So it's called para. So I come here to my CSS. And you do a period or a dot followed by the name of the class. And then my curly braces. And now separate the curly braces in between the curly braces, I will now indicate the style rules I want to use. So watch out for this paragraph here. And this one here, as I begin to type in the style, it should change. I will say font size. I want to change the font size and make that say 25 pixel. Have you noticed it's changing now? Next, I want to change the color. I'll make this a blue. I forgot to separate. There you go. You see that. So now I've used the class. You can see it has reflected in this two paragraph. So that's basically how you use a class selector and an ID selector. So always note that the key difference between a class selector and an ID selector is that a class selector can be used multiple times on any element on the page. An ID selector is unique to the element. Here I've got ID call quote, I cannot use this ID quote anywhere else on the page or on any other element. Whereas this class I've got para I can use it anywhere I want. So that's it for this basic introduction to CSS selectors. Thank you for watching. Bye for now. Hello and welcome. In this video, I'm going to introduce you to CSS comments. Comments are used to explain your code. They can also help you to edit your source code at a letter date. Comments are ignored by the web browser. So if you've got comments in your code, when the web browser loads the page, it completely ignores the comments. You can use single line comments or multiple line comments. So I've got my CSS file opened. So the way you insert comment, for example, if you wanted to insert a single line comment, all you need to do is just do slash and asterisks and then the text you want to add to the comment. So I would just say this makes text italic and you put another asterisks and then a forward slash. So we can see it's ignored by the web browser. So you do forward slash asterisks, the text you want to write and then asterisks and then you close it with another forward slash. So this is known as a single line comment. So you can have it positioned anywhere. I can have it there or I can decide to move it and place it on the side here somewhere here. It will not affect the code because it's on the right. The only way it's going to affect the code is if I move this beginning to the beginning here and the ending here and then it will affect that code. You can see this code here is italic. If I decide to move this, for example, if I'm testing something and I want to check for different things, you can see now the italics is gone because I've commented out the entire code. But I can just get rid of that bit and just position the comment here just by the property and the property value that way it doesn't affect the actual element that is being styled. So that is called a single line comment. So you can use it to describe various parts of your CSS to yourself or to others who may want to look at your CSS at a later date. So if you want to add multiple line comments or you need to do, you do the asterisks and then you do the asterisks again and in between you just type in your text just say this is a multiple line comment. Alright, so for example here, if I wanted to comment out to comment out this entire block of code, I just come here, maybe just grab my CSS, put that opening one there and grab this one and put it here that will completely comment out that block of code. You can see the effect is affected the the element that I'm styling because I've commented out that block. Alright, so that's how you add or use a multiple line comment. If you want to comment out multiple lines of code, you can do it that way. So that's basically it on using CSS comments. They can come in handy. I recommend you use them. The earlier you start adopting that practice, the easier it would be in on the long run, then you get used to it. So just comment out bits and pieces of code, anything you don't understand. Or you know, if you understand it, you may understand it when you're writing the code, but maybe six months down the line, you may come back to your code and may not know what certain things mean. So commenting your code is very useful. Thank you and bye for now. Hello and welcome. In this video, I will be explaining what the CSS box model is. What is the CSS box model? The CSS box model is essentially a box that wraps around every HTML element. In CSS, the term box model is used when talking about design and layout. The box model comprises of several components or parts. So we have the margin, which is the space around the outside of the element. Next, we have the border. This is the solid line that sits outside the padding. We've got the padding. This is the space around the content. For example, if you have a paragraph, the space around the paragraph can be regarded as the padding. And then we have the actual content. This is the area where the text, the images and other contents you have on the page. This is where it appears to show you what the box model looks like. Just if you go any basic web page open, or I'm going to use this web page, I've been working on so far in the course. So if I'm just going to expand the web page so you can see the box model properly. So all you need to do is just right click on any element, say right click on the image element and click on inspect. And that will show the box model. You can see this is a box model here, this area here. So that's the margin. And it has four sides. We've got the top, we've got the right, the left and the bottom. Next, we've got the padding. All right, also the padding has four sides, we've got the top, the right, the bottom and the left. And here, this is the content. So this is where all the content of the page will appear, like images and so on. Yeah, that's where that we appear. So this is a content area. And then you can see the border. You can see this is a border, which sits just on top of the padding. So you can see the border goes around the padding and the content. You can assign values to the margin, the border and the padding properties. So just by using CSS, you can assign pixel values to them. And when you apply values, the values depending on the number of values, remember that the margin and the padding, they have four sides, the top, the right, the bottom and the left. So depending on if you're adding four values, then it will be applied to all the four sides. But if you're only applying two values, then they'll be distributed accordingly. In the next video, we're going to experiment adding values to margin and padding so that you can see how the various values work when you apply them. So that's it for this video on CSS box model. Thank you for watching and bye for now. Welcome. In this video, I will be explaining how the CSS margin property works. The CSS margin properties are used to create space around elements. Each margin has four sides. And you can use the CSS margin property to set the margin area of all four sides of an element. The four sides of the margin properties are margin top, margin right, margin bottom, and then the margin left. When you use margins, you can specify the values for the margins. Margins can be specified using one, two, three or four values. The values can be applied to the margins based on the number of values specified. So let's take a look at how the values are applied based on the specified values. So this is a table. Say if you have just one value specified, that value is applied to all the four sides of the margin. If you have two values specified, the first margin applies to the top and the bottom. The second applies to the left and the right. When there are three values specified, the first margin applies to the top. The second goes to the left and the right. And the third goes to the bottom. When you have four values specified, the margins apply to the top, the right, the bottom and the left in that order. So it's in a clockwise order. The way I tend to remember this is by using the word trouble. So if you type in the word trouble, take out the vowels, you'll be left with TRBL. So when you have four values specified, you need to apply it in that order. Top, right, bottom, left. All margin properties have several values. So the margin property can have a length, value, percentage, inherit, and also the keyword auto. The length basically specifies a margin in pixel point centimeter value. And so depending on whatever unit of measurement you are using, but it basically specifies a margin in whatever measurement you are using, which basically refers to the size of the margin as a fixed value. Then we have the percentage. This is the size of the margin as a percentage relative to the width of the containing block or parent element. So the percentage specifies a margin in percentage of the width of the containing element. Then we have the inherit, which specifies that the margin should be inherited from the parent element. We also have the keyword auto. Auto, basically, this is when the browser calculates the margin. The browser will select a suitable margin to use. In certain cases, the browser can set a value that will center an element. Each value can be positive, a zero or a negative. So now that we've learned a little bit about the CSS margin property, let's try and set margin for some HTML element. So if I look at my HTML here, I'm going to set a margin for my body element here. So I go into my CSS, and I just come here and type in body. I do my curly braces, and I separate it. And I'm going to make, give the margin property. I'm going to make it give it two values. The first one is going to be a zero. And the second one is going to be auto. That means I'm leaving the second value for the browser to set. We've already gone through how to apply the values. So if I if I do a save on here, and just refresh my browser, you can see the body has been resized. So the margin first value zero, and the rest is auto. That means the browser will reset it. So you can set the margin property for as many HTML element as possible. For example, I could set a margin for this image, if I also wanted to do that. Next, let's quickly go through the CSS padding property is really similar to the CSS margin property. The only difference is that CSS padding property does not allow negative value. Apart from that, everything else is different. Also, they don't use auto keyword. So let me just run through the properties of the CSS padding, which is really similar to that of the CSS mat margin property. So here for the padding, the properties are used to generate space around the content of an element. So if you think of the space inside an element that is known as a padding, the space outside the element is known as the margin. Each padding has four sides just like the margin. So we have the padding to the top padding to the right padding to the bottom and padding to the left, just like the margin property padding can also be specified using 123 or four values, because they have four sides. So the application is the same way as that for the margin. So if you've got just the one value specified, it applies to all four sides. If you've got two, he applies to the top, the bottom. And then the second applies to the left and the right. If you've got three values, first padding goes to the top, second goes to the left and right, the third goes to the bottom. If you've got four values specified, the padding is applied in the order of top, right, bottom and left, which is a clockwise direction. All the padding properties have the following values. So if you've got the length, which specifies a pattern in pixels, points, centimeters, or whatever measurement you're using. And we also have the percentage, which refers to a pattern in percentage, which is relative to the width of the containing element. We also have the inherit, which specifies that the padding should be inherited from the parent element. The key distinction between the padding property and the margin is that with the padding, negative values are not allowed. So I'm going to add some padding properties here to my CSS. And I'm going to add it in the body area as well to the body element. So I'm just going to tap down and type in padding as a property. Okay. And I'm going to give it four values. So when I'm giving it the four values, it will be applied in the order of top, right, bottom, left. The way I tend to remember this is by the word trouble. But if you take out the vowels from the word trouble, your left foot T, R, B, L. So that's how I remember it. So I'm going to give this four values. First one will be a zero. The unit of measurement is going to be pixels. Second value is going to be 20 pixels. Third will be 20 pixels as well. And four value will be 20 pixels. You can see that the if I expand this page, you can see that the values, the padding is already taken a pet. All right. So as I'm being applied, you may not see that this that distinctly distinctively, but it is applied, you can see the space padding refers to the space inside the content of an element. All right. So we've used four values here to apply padding to the body element. So the body is basically the content that is visible. So that is it for this video. In this video, I explained how the CSS margin and padding property works. The work in identical fashion. The only key distinction is that the padding property does not allow negative values. And also it does not use the auto keyword. So these are the two distinct differences between the padding and the margin property. Thanks for watching and bye for now. Hello and welcome in this video. I'll be showing you how to change the background color of an HTML element using the CSS background color property. So the CSS background color property is basically used to change or specify the background color of an HTML element. When you're changing the background color, you can either use a valid color name like red, or you can use the hex value. So when you're setting the background color, if you prefer to use the name of the color, then by all means use it. If not, you can use the hex value. They both work the same way. There are also lots of tools that you can use to help you. There are color pick a tool that will give you the color name and also give you the hexa decimal values. In my CSS, what I'm going to do, I am going to set the background color for my entire HTML element. And I'm going to use a color pick a tool just to guide me so that I know which color I want. There's this tool here on this website called HTML color course.com. So basically you you highlight whatever color you want and just look through I've already picked out the color I want. So once you select the color you want you can play around with the wheel also once you use this to move things around. I have picked this color here. This is the color I want, which is a color displayed. It tells you this is a hex value. It tells you that there. I'm just going to grab that. Most developers tend to use the hex value is quite common. You can use the RGB value as well, which is red, green, blue, but most people tend to use the hex values, which is a lot easier. So if, for example, I wanted another color, I just move this and just play around, mix it a bit until I see the color I want and then grab the hex value here. So I've grabbed the one I want and I want to apply a background color to the entire HTML element. If I go into my index dot HTML, so this is my HTML, that's the beginning and that's the end. So I want to apply to the entire HTML content. I want to give it a background color. So inside my CSS, I just type in the word HTML and do my curly braces and separate them. Inside my curly braces, I type in background. You can see it gives me some suggestions here. I'll click background color. And for the background color, I've already copied in what I want. You can see it's already reflected. And just to enter, just to always end your CSS rules with a semicolon so that in the browser knows where it ends. I'm just going to quickly save that. You can see now the background color as reflected. If I just expand the web page, because I've applied it to the HTML element is applied it to the entire page because the entire page is an HTML document, which is where I have specified. But you can specify background color around any element you want. But in my case, I've done it around the entire HTML elements. So that's basically how to change the background color of an HTML element or your HTML page. Thank you for watching and bye for now. Hello and welcome. In this video, I will introduce you to the CSS border property and how it works. The CSS border property basically allows you to specify the style, the width and the color of an element border. So you define the border for an HTML element by specifying the style, the width and the color. The border style property specifies what kind of border to display. There are different types of borders. Example include dotted borders. So the borders will appear dotted. You got dashed borders and solid border. There are a lot more, but these are just some basic example of the different styles of borders. A border has four sides. So you can specify to apply styles, the border styles to different sides of the border, or you can just apply one style to all the four sides of the border. There's also a border width property, which is used to specify the width of all the four borders. When you set in the width of the borders, you can set it in pixels in points in centimeters in M and any other measurement value you want to use. But most people or developers tend to use pixels a lot. We also have the border color property. The border color property basically is used to set the color for all the four sides of the border. I'm going to illustrate by creating a border for the body element. So this is the body element here. So I'm going to create a border around it. But before I do that, I want to set a width for the body element. I want to give it a specific width. So I'm going to my CSS. And I've already got a body property here that I've applied some styling to. I'm going to add to this style rule here. So what I'm going to do first, I'm going to set the width. I want to give it a width. I'm going to set the width. This will determine how wide my body element will be. I'm going to set this to say 600 pixels. And now I'm going to apply a border. And the border, I'm going to set it to have a pixel value of four pixel wide. I want the border to have a black color and I want the border to be solid. So I'm going to be using the border style property, the border color and the border width. So to do that, I just type in border, I do the colon. And next I'll specify, I'll start with the width. I'll make it say four pixel. This is the width of the border. Next I want it to be solid. This is the style now. So it's going to have a solid style. Next I want the color, border color, to be black. So I'm using three properties here, the width, which is this one here, the style and then the color. So that's it for my border. So I'm just going to save that and see, let me expand this so we can see, you can see we've got a border around it now. Also you can see because I set the width to be 600 pixels, this content here is the body content, which is the other elements inside the body element. So I've given it a width of 600 pixels. So all hence is wrapped around the main HTML. This one outside here is the main HTML. What I want to do, I want to apply a color to the body so that it differentiates it from the actual parent HTML container. So I'm going to come here inside the body element, I'll type in background color, which is this one here. And I'm going to give it, I'll make it yellow. So I've given it a background color yellow, you can see it's reflected already. So if I expand this, you can differentiate the body content from the rest of the HTML, which is the actual document itself. This bit here is the HTML. And the yellow bit here is the body content, which is the other elements inside the body area of the HTML elements. If I go into my HTML code, so you can see the body element is highlighted. So all this here is a content represented in this yellow background. And then the HTML is from here. That's the beginning HTML, and that's the ending HTML. The whole document is the HTML, which is represented by the other color here, this color here. All right. So we can see by adding the border, the border has applied to all the four sides of the border, border has four sides. So you've got the top, the right, the left, and the bottom. In this video, I explained how the CSS border property works. And we use the border color property. We also use the border with property and also the border style properties. Thank you for watching. Bye for now. Hello and welcome. In this video, I'm going to position and style our page title. I've already applied some basic styling already, but I'm just going to add more to enhance the page title. So this is a page title at the moment. He just says hello world. And this is the styling I've already applied to it. It's got a font size of 65 pixels have aligned the text to the center. So I'm going to add a margin. I'm also going to add some padding. I'm going to give it a color. And I'm also going to apply text shadow properties. So you may notice there's a gap here at the top of the body from the page title. Basically this happens because the web browser applies its own default styling to the h1 element. It also not just to the h1 elements, it does that to other elements as well. So even when you haven't applied any CSS at all, there is some basic default CSS that the web browser applies. So that's why it's important to add your own CSS to override that. So let's get rid of this gap here at the top. To do that, I'm going to set the margin to zero. So inside my h1 element here, I'm going to type in margin, which is this here. And I'm going to set that to zero. And that should get you can see here is these got rid of that space, the massive space at the top of the body element. It's got rid of that. So that's what that does. The next thing I'm going to do is apply padding. So padding refers to the space inside the element content. So I type in padding, and I'm going to give it two values, going to make it 20 pixels and zero. So when the padding has two values, the first value is applied to the top and the bottom padding. And the second value is applied to the left and the right side padding. So 20 pixels will go to top and bottom, while zero will go to left and right. The next thing I want to do is give my title, I want to give it a color, a unique color. So color is different from background color, background color. It's this one here applies to the background. So color, if you want to change the color of a text, you the property, you use this color. So I type in color. And I want to make this. Let's look through the colors they have here. I want something sky blue, something deep sky blue. All right, I like this one. So I'll make it deep sky blue. You can see it there. That's the deep sky blue. I'm just going to save that. Okay. One good thing about this editor is that as you make changes, it reflects straight away in the web browser, although it doesn't actually save it until you save it, but it can enable you to see the impact of your CSS immediately. The next property I want to add is called a text shadow. What that does, it applies a text shadow to the text content of the element. It basically has four values. So to add a text shadow property, I just type in text dash shadow. And I'll give it the values. I make this three pixels, three pixels, one pixel and give it a black color. So you can see the effect of the text shadow. You can see it here, how it impacts on the title. So let me go through the values with you. The first pixel value, which is this one here, the first three pixel, the first pixel value sets the horizontal offset of the shadow from the text. Basically, it indicates how far it moves across. A negative value should move it to the left. Now the second pixel value, which is the second three pixel here is used to set the vertical offset of the shadow from the text. How determines how far it moves down. In the example I've given, a negative value will move it up. The third pixel value, which is the one pixel, is used to set the blur radius of the shadow. All right, gives it a kind of blur. A bigger value will mean it gives it a more blurry shadow. And then the fourth here, which is black, which is a color, it sets the base color for the shadow. You can see the base color is, I've set it to black, but you can set it to anything. So that's basically the values for this text shadow property. You can try experimenting yourself with different values to see, you know, just to see what you come up with. It's always good to try and play around with different values and see what takes your fancy. So in this video, I played around with some CSS for our page title and applied some extra CSS properties like text shadow. I gave it this color property. We applied padding and also some margin. That's it for this video. Thank you for watching and bye for now. Hello and welcome. In this video, I will be introducing you to the CSS display property. The CSS display property specifies how an element is displayed. The display property can be used to control the layout. Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is either block or inline. What are block level elements? A block level element always starts on a new line and takes up or occupies the full width available. So a block level element will stretch out to the left and right as far as it can. The paragraph element or the P element is an example of a block level element. So it occupies the entire width available and it will stretch out far to the left and to the right as far as it can. Other example block elements include a div. A div basically is a division of a web page when you section out a part of a web page that is known as a div. So a div is a block level element. H1 to H6 is also a block level element and the paragraph which we've already covered is also a block level element. What is an inline level element? The inline element is different from the block level in that with an inline element it does not start on a new line and it only occupies as much width as necessary. So it will only take up the width it needs. An example of an inline element is the anchor element which you need to add a link to a web page. It will only take up the required space it needs. Other example of inline element apart from the anchor element is the image element which is the img element. Img is the element you need to add an image to a web page. So by default it is an inline level element. So I've got my image here on my page which by default is an inline element. So the method of display is inline. So if I want to for example center this image I will have to do two things. I will have to set the reapply the margin of the image to probably give it a margin of zero and author and I will also change the display behavior from inline which is the default. I will change it to block so that it displays it in block. So let me show you how I would do that. So this is my css. I just need to create some space on my css. So I'll just tap down here and I'll type in the name of the element which would be the selector img and I'll do my curly braces and I'll separate the curly braces and in between the curly braces is where I will define my css rule. So I'll say display okay the display of the image I want it to be block. So the default is inline but I'm changing it to block. Okay so we're going to display in block and I want to change the margin. I'm going to give the margin two values. First value is going to be a zero and the second value I'm going to make it auto and you can see I misplaced my semicolon that's a semicolon. You can see it has centered the image. So when you have margin and you specify two values the first value here goes to the top and the bottom. Second values go to the left and the right. So just by changing the display property to block and the margin I've been able to center the image. If I just drag that along so you can see you can see the image is now centered using the css properties I have just applied. In this video I introduced you to the css display property and also illustrated how to use the display property. Before I wrap up this video I just want to comment out this text here. So you feel free to play around with any of these elements here just play around with the css if you want to make changes feel free to do so. So I'm going to go into my index dot html and comment this out. Again comments are useful you can use them to hide things because the browser will not display them the browser will ignore anywhere there's a comment. So I'm just going to look for where that paragraph is it is here. So what I'm going to do I'm just going to add a comment html comment so you do that with the less than sign exclamation mark two dashes and I'll close it here all right and that should take care of this. If I just save that you can see now that has disappeared and this image here has taken up that space and jumped up a bit. So let me just expand that yeah so that's it. So if I want later I can reposition this or if I want to add another text I can go back there and add it. At least you know how to do that now. So it's very important to be able to try different things out. You can comment setting aspects out of your code if you don't want them to display so that you can see how the page looks without that and if you decide to want the item again just on remove the comment and the text or whatever element will now display. Thanks for watching bye. Hello and welcome in this video I will introduce you to the CSS font property. The CSS font property defines the font family the boldness the size and the style of a text. If you want to set the type of font that an element uses you need to do that using the font family property. I've got my CSS here and I am going to add a font family for this paragraph here in blue which is controlled by this class here called para. So all I need to do is type in font family property and I'll define each of the fonts I want to use. It's always good to use more than one font just in case the computer that is viewing the page doesn't have that font then it will default to the next available font but always start with the font that you want to use first followed by the other one. You give substitutes so here I have listed three types of fonts so what will happen is the first choice will be aerial if the computer viewing the web page has now got aerial it will default to the next one which is helvetica if it hasn't got helvetica it goes to the next available one which is time so always good when you're defining your font family the values make sure you have more than one value specified. If you've got some text that you want to make italic the property you need to use to do that is the font style property. I have already illustrated this so far in this course if you look at this text here it's all in italics and I set the property here using the font style property and the value is italic okay so this makes it italic. If you want to change the size of a text you do that using the font size property. I've already illustrated that in a previous video on the course so if we look at line 12 here of my CSS I've used the font size property on the h1 element which is this element here which controls this heading so I set the font size to 65 pixels as we've got this big title. If you want to make your font bold just like that these are bolded out you use the font weight property that will make the font bold. So if I wanted to make this text here for this paragraph I wanted to make it bold all I need to do is come here inside the CSS and I'll just add a font weight property and that will and then I'll give it a value with the font weight you can set different values these are degrees of boldness that being the lightest and 700 being the lowest so you can do all that or you can just use bold you can use normal means it will give it a normal boldness but there are different weights in boldness which you can specify using these values so if you want to experiment just try the different values and you can see how bold it is I'm going to just leave it to this value which is bold you can see it's made that bold so if you want to make text pronounced or if you want to make it quite visible make it bold use the font weight property in this video I introduced you to the CSS font family which includes the font style the font size and also the font weight thanks for watching and bye for now hello and welcome in this video I'm going to show you how to use google fonts to search for the fonts you like and I'll also show you how to add that to your html so that you can access the font so first of all need to go to this address here with is fonts.google.com so this is the google fonts directory and basically you just look through to see whatever font you like and if you see the font you like you can click on the plus sign it gives you a description and it gives you some sample text to see what the font look like so just look through the font until you see the one you like I know the one I like if you know the one you like you can search for it the one I like is called open sans okay okay so this is the font I like so if you can see here you can see this specimen so you see specimen it will show you the specimen of the font tells you there it comes in bundle there's light there's light italic and so on so these are the fonts it also tells you the number of times the google fonts api served this font in the last week it tells you open sans is featured in more than 18 million websites so more than 18 million websites use this type of font so the way you add this font to your html so that anyone who's viewing your page can see it you do that using the google api api sans for application programming interface so on the address you need you go to developers.google.com slash fonts slash docs slash getting started so here this is a google developer site it gives you some clues as to how to add it tells you here what the google api fonts api does it gives you this guide explains how to use the google fonts api to add fonts to your web pages you don't need to do any programming all you have to do is add a special style sheet link to your html document so that you can refer to it in your css style font so if you include the link then you can use your css to manipulate it so it gives you an example here what you need to do you copy the link copy this link here and you specify the the font you want in my case it will be open sans so i'm just going to copy this and change this font from tangerine to open sans all i need here is this link here i need to copy this entire link this one here so i have now added the link from the google api and just changed the name of the font so this is the font i want here so that's how you include the google font to your html document once you've added it it must be added in the head section so add it before any other css you've got so this is my main css and this is a google css so this one will be referenced once you have to be online to access this google api font so whatever font you like on the google font you can add it using the same method so once you've done that just save it and you can now go into your css and set values using that font you've just added so if i go into my css i can add the font family so here where i've got my html i can decide to add the font family so i come here i do font family and for the font family i will just do if you're adding a font that has two words you need to enclose the words in quotes so i type in open and the other word is sans all right so that's one font you can see it has changed you can see the font has changed already because i've added the link to the google font when you're adding font family always good to add a substitute so i'm going to add another one called sans serif so this will be the substitute if that font is not available it will default to that one so that's my font added and the next thing i want to do is just add a font size for my entire html element so i do font size this is the current font size so i just want to try different size and see what it looks like this is 10 pixels let's see what it looks like for 10 pixels okay it hasn't changed that much i'll make it 12 and see what it does i'll save that okay so 12 made it a little bit bigger in this video i showed you how to use the google font directory to search for a font you like and i also showed you an example of adding the font to your html by the google font api so that's it for this video thank you for watching bye for now hello and welcome in this video i will introduce you to javascript javascript is one of the three languages that a web developer must learn what is javascript javascript is a programming language that adds interactivity to your website the interactivity can be when a button is pressed or when data is entered into a form it can even be animations so when you go to a website anytime you notice some interaction or where you have to press a button maybe complete a form those interactions are made possible by javascript when javascript is applied to an html document it makes the document dynamic and it adds interactivity to the website javascript was invented by brendan itch who is the co-founder of the mozilla corporation which also is responsible for the firefox web browser javascript is not java there is a completely separate language programming language called java so they are both different in design and other aspects as well javascript is one of the three languages all web developers must learn the other two languages are html and css another key distinct feature of javascript is that javascript is case sensitive so if you declare something with a lower case and let our own try to access that with an uppercase it will not work because they are two separate things it treats cases separately so uppercase and lower and lowercase are two different things in javascript so when you write in javascript code you need to be careful with your cases if you're using lowercase to define something stick to lowercase so that's it for this introduction to javascript thank you and bye for now hello and welcome in this video i'll be showing you where to place javascript there are two main places you can place javascript internally that means inside the html document so when you are adding javascript internally you have to use a script tag or script element to add javascript to an html document internally you can also add javascript externally via an external javascript file that has got a .js file extension so any file externally from the html document with a .js file extension is known as the external javascript and you can reference that from your html document using a script tag so let me show you an example of how both works you can use javascript to change the content of an html document so what i'm going to do i'm going to change the text here for the heading using javascript so what i'm going to do just before the closing body tag i'm going to add a script tag and the way you do that just type in script and put the closing and it automatically gives you an opening and closing script element so i'm just going to tab and in between the script element i'm going to add some values what i'm going to do i'm going to create a variable basically is a container that you can use to store values in so i'm going to create and the way you do that you you start with the word va so to define a variable you type in var that defines a variable then you give the variable a name i'm going to call my variable my heading this would be the name of my variable and i have to give it a value so the value i'm going to give it's going to be document yep dot query selector query selector which is this here document the query selector this query selector is a method that returns the first element that matches a specified css selector in the document so i need to give it a css selector so single quote i'll type in h1 h1 is going to be the selector so this is the name of my variable and i'm using the document dot query selector which is a method in javascript and what this is saying is that it's going to look for this element which is an h1 element which is this one here and i'm going to change the text so now that i've defined the variable all i need to do is call the variable by its name which is this and i'm going to add a property an element property called text content which is this one here this will enable me to change the content of this h1 element so now i need to specify what content i want to change it to i'm going to change it to say just make it simple i'll just say be kind and that'll be it and i'll save the document if i refresh the page you can see here it has changed the heading the original heading is this and i've used javascript here to change it so this is an example of how you would use javascript internally inside an html document in order to use javascript externally you need to have an external javascript file i've already caught a folder called script so i'm just going to click on this script folder i'm going to right click and click on new file and i'm going to call it my script dot js okay so this is now my script.js this would be a javascript file so all i need to do is go to my html i'm just going to grab this i'm actually going to cut and then paste that inside my script so this will be my variable and this will be the content i'm changing it to so when you are referencing or adding javascript to an external file you don't use a script tag if you notice here with the html i use script tag but you don't need that when you are adding javascript to an external file you omit the script so if i want to reference this javascript i'm going to be referencing it by its name it's complaining here because i have not done stuff with it i've declared stop i've not used it so what i need to do is go back to my html and make a reference to that so in order to reference the javascript from my html document i still need this script tag inside the html document and then inside the opening script tag i need to add the source attribute the source attribute will tell me where to pick up the file from all right and the name of the file is inside my script folder and the name is called myscript.js else by referencing it by its name it has changed the content of the document see the heading has changed the reason why i've placed the script element near the bottom of the html file just before the closing body element is that it enables the html to load faster because when the page loads the html basically will get loaded by the web browser in the order it appears in the file if the javascript is loaded first and it is supposed to affect the elements below it it might not work for example if i had the script tag above the hello world here it will not it will not impact on the change i want because the browser will run the page decode in the order it was written so that's one of the reasons of placing the javascript right at the bottom so that the content the main content of the page loads first before any javascript is applied so that's it for this video in this video i showed you how to add javascript internally and externally thanks for watching and bye for now hello and welcome to this video in this video i will be introducing you to javascript variables what are variables in javascript javascript variables are containers for storing data values in order to create a variable you need to use the var keyword which is spelled var it has to be in lowercase also when you create variables creating variable means declaring variables is the same thing when you declare variables you have to assign a value to variables and you use the equal sign to assign values to a variable for example if i wanted to create a variable x i'm going to give it a value of seven also if i want to create a variable called say my car and i give it a value of posh when you are creating variables is always good practice to name your variables closely to what they are going to store the type of data they're going to store for example here i've named this variable my car which is an indication that the type of data i'm storing is relating to cars notice the two difference in the two values here this one here the value is seven which is a number and notice here the value here is a posh and i've put quote around it when you are declaring variables if you are declaring a text you have to enclose it in quotes you either have to use single quotes or double quotes but you can't mix them you can't use a single quote here and then a double quote here that's the only way the computer will understand that it is dealing with a text you need to enclose the values in quotes you don't need to do that with numbers because the computer knows that that is a number but if you want the computer to know that is a string they call it a string in programming if you want to know that this is a string you need to enclose it in quotes also notice i've used semicolons here which is important that indicates that that is the end of that statement a javascript program is basically a collection of statement this indicates this is one statement this indicates this is another statement because of the semicolon so you have to do that when you're declaring variables you can also declare variables without assigning them a value so when you declare a variable without a value it is known as undefined once you have defined or declared a variable you can change its value for example here i've already defined a variable called my car if i wanted to change the value from posh for example to a rim driver all i need to do is call the variable by name and assign it a different value so that way i've already changed the value once you've declared the variable you can change the value a variable that is declared without a value is known as undefined also it's very important to know that javascript is case sensitive so for example here i've declared this variable my car with open case c if i try to reference it with a lower case c it will not work you can experiment with javascript inside your web browser console if you are using a mac you can access your web browser console by clicking on option command and j once you've got the web browser open if you are on a windows based computer once you've got the web browser open you can just press f12 that will give you the web console i've got the google on page open so i'm going to access the web console just by hitting the f12 on the keyboard and that will give me the console so this is this is the developer console where you can experiment with javascript so there are different ways you can dock it so if you click here at the moment is dock to the side you can also dock it to the bottom and that will give you the page the web page you're currently viewing and then you can experiment with the code on the side or you can do it on this side dock it to the left so depending on whatever you fancy you can dock it wherever you like i'm going to just dock it underneath for now so let's try and experiment with some javascript so i'm going to declare a variable inside the console here i'll just type in var to declare a variable and i'll give the variable a name of x give it a value of seven so now if i want to call this variable all i need to do is call the variable by its name if i press x it will return the value of seven now that i've declared the variable i can also change its value all i need to do is call it by its name use the equals two and assign it a different value now if i call the variable x again it no longer stores seven but it now stores eight same thing if i declare another variable called let's declare a new variable i'm going to call this variable my car okay my car okay you know i'll give it my car and i'm going to give it a value of say posh okay and i need a semicolon to end that so now if i call this variable by its name if i say for example if i call call it by car it will not work you know why because i've referenced it in lower case you know the c i use this in uppercase so it's very important that you reference your variables the way you've defined them if i now go back and call it again with uppercase c it should return the right you can see it's giving me the value of posh and once you've declared the variable you can easily change its name change its value so if i want to change that to something else i'll just call it by name so i want to change this to a ford for example and to a semicolon now that's changed it if i call the variable again by name it will no longer store range of it will be now storing ford so these are some of the basic examples you can use to play around in the browser console the console is very useful for playing around with little little little values like this so you can experiment and get acquainted so that's it for this video on javascript variables many thanks and bye for now hello and welcome in this video i'll be showing you some variable naming convention these are basic rules that you need to follow when giving you a variable names so i'm just going to read through this table so the first thing to take into account is that variable names cannot start with numerical for example you can't use a number you can't name a variable 3x or four cars just for example those would be illegal variable names however you can combine the numbers with text you can call a variable maybe cars four or go for it and things like that they are perfect valid variable name you cannot use operators operators i mean either mathematical or logical operators you can't use that in variable names for example you can't call a variable this plus that or this minus that or this times that you can't do that you cannot use any punctuation marks of any kind in a javascript variable name other than the underscore so you can't call your variable car colon or car hash but you can use an underscore underscore is allowed so you can give your variable name underscore car for example or something underscore something nothing that is allowed javascript variable names must never contain spaces never for example you can't name your variable my car space car that's not allowed however you can give it my car that is legal there cannot be any spaces between variable names variable names are case sensitive for example if you declare a variable called my car is different from a variable called my car or my car they are all different variations so when you're declaring variable names you've got to be careful the case you use so that when you want to refer to that variable name you are referencing the correct variable it's like having the key to the wrong door if you don't have the right key you will not be able to open the door so you must make sure you have your variable names correct in the correct case finally you cannot use any javascript keywords keywords are parts of the javascript language itself you can't use any of that for variable names for example window is a keyword in javascript it's part of the language things like open is part of the language location or string those are all parts of the javascript language so it will be illegal to use them on their own however you can use them in combination with other things or that other key was for example you can call a variable that window or maybe my string or whatever you can combine them with other text that is acceptable so these are just some key basic rules you need to take into consideration when you are giving your variable names that's it for this video thank you for watching bye for now hello and welcome in this video i'll be introducing you to javascript arrays what is an array an array is basically a structure that allows you to store multiple values in one single reference basically what that means is that it stores multiple values in a single variable so an array is a special variable which can hold more than one value at a time in comparison to a variable that can only hold one value at a time an example of an array is this here for example you create an array called my data and you use the equals to to assign the values you can tell it's an array because the values of an array are enclosed in square brackets also you can have different data types in an array in this example here i've got both number and string data type as values in an array so let's create a simple array using our web console to create an array you have to create the variable first so you just type in var to create or define the variable you do a space followed by the name you want to call the variable i'm going to call my my my data you then use the equals to sign to create the array and use the opening square brackets and you add the values or the elements in the array you can mix data types in my example here i'm going to mix the data type with a string and also a number so i've got a number and a string i'm going to add another number and then i'll add another string when you are using string don't forget to enclose them in quotes and when you are using arrays you separate each of the elements in the array by a comma you can see i've got comma here and comma here only the last value or element that does not require a comma so now that we've created an array to call the array we just need to call it by its name which is my data and it will display the information the information here tells you that we've got an array of four elements which is one two three four and it gives you the values if i expand this you will see all these figures here they are known as index the way you access the elements in an array is by the index so the very first element of value has index zero the next one will have index one and so on you can see here index zero belongs to seven index one belongs to john index two belongs to seventeen index three belongs to jane and so on tells you here the length of the array is four because it has four elements or values inside the array so if i wanted to access jane what the way i would do that would be my data and then square bracket and i'll type in three because that's the index for jane and press enter and it's giving me the value of jane because jane has an index of three as you can see here from the index so always remember that when you're trying to access the values in an array you have to access them using their index and the index starts from zero upwards when you work with arrays it is easy to remove elements and also add new elements to an array using a process called popping and pushing if you want to add elements you use a method called pushing to add an element and if you want to remove you use a method called popping so popping will remove and pushing will add an element to an array so let's add an element to our array and the way we do that we call the array by its name which is in my case is called my data and then you add a dot and type in push and then in parentheses you specify the value you're trying to push into the array so let's see i'm trying to add a number 10 into the array and i press enter so you can see now it's now showing that the array has five values so if i want to call this array again called my data it will now show that the length is five you see because i've now added a new element which is this number 10 here so if i expand that you can see the index we've got a new index four four which is number 10 if i wanted to remove an element from the array okay so i can do that using the pop method the pop method will remove the value that i've just so let's remove the value i've just added so i'll type in my data dot pop and this will remove the very last value i have just added on you can see here tells me 10 has been removed so if i now reference this array now it should go back to the original value which is an array of four you can see here this is the original length so that's basically how you can add and remove an element from an array so this concludes this brief introduction to javascript arrays there are other types of arrays and there are so many things you can do using javascript array this is just an introduction to what an array is thank you for watching and bye for now hello and welcome in this video i will introduce you to some javascript data types in programming in general and also in javascript the data types basically refers to the classification that specifies the type of value that a variable has or stores there are different types of data types in javascript here's a basic table with some basic javascript data types so i'm going to start with the top one which is a string a string basically is a sequence of text that must be enclosed in quotes you can use either single quotes or double quotes but you cannot mix the quotes for example here you can declare a variable called my data and set it to this value you can see i've got quotes around it i've got my web console open so the way to access your web console if you are on a windows computer open up just google homepage and type in control shift and j on your keyboard or f12 and that will give you access to the web console if you are on a mac you do command shift and j that will give you access to the console so let's create a simple variable that will store a string data type so in my console i'm going to create a new variable by typing in the keyword var and i'm going to call this variable my colors okay and i'm going to give it a value i'm going to give this value of red so that's the value you can see i've enclosed the value in quotes which means it's a string data type the computer will recognize that as a string data type so if i want to reference this variable all i need to do is call it by its name and it will just return the value red so that's a simple example of how a string data type can be used the next data type i want to mention is the number data type basically refers to any numerical value and it does not need to have a quote around its value so let me illustrate by creating a simple variable that will store a number data type so i'll declare a simple variable by typing in the keyword var and i'll call this variable don number and i'll give it a value of seven so this is known as a number data type you can see it doesn't need quotes around it so if i want to reference that variable i just call it by its name don number and it will return a value of seven the next data type i want to mention is called boolean a boolean basically represents two values one can be true the other can be false and when you're using boolean values no quotes required to illustrate a boolean value i'm just going to compare two values i'm going to say four is greater than three that will return true and if i say three is greater than four and that will return false so that's basically how boolean value data types work the next data type i want to mention is called an array an array is a data structure that stores multiple values as one single reference basically what that means a variable can store only one value but with an array you can store multiple values as one single reference you can see here i've got two values here ford and Toyota but i'm referencing it under one variable called my cars so let me show you a quick illustration inside the console so i'm going to declare a variable called my cars and i'm going to set it to equals two and this is how you declare an array with square brackets and inside the square brackets is where you place the values so let's say the first value i say it's a ford and second value i say is a Toyota when you are using arrays you separate each of the values with a comma but the only where you don't need a comma is a very last value so this basically here is an array and the way you access the values in an array is by their index so the way an array is referenced is by their index so this will be known as a zero index this will be one if you have several you can have as many as possible inside the square brackets but you need to separate the values with a comma and if they are of a string data type you enclose it in quotes if they are not then you don't need to enclose it in quotes so for example if i wanted to access value number one this is zero index zero which is ford all i need to do is type in my cars and in lowercase type in my cars and then in square brackets i type in value zero which will represent the index i'm trying to target and that should return you can see it has returned ford so that's how you if i had like 20 inside here i will reference it by the index based value number so ford the very first value is a zero index Toyota will be index number one and so on so that's how you access the values in an array so the key difference between an array and variable is that an array can store multiple values as one value if you see here i got just got this variable called my colors and it's only stored one value here i've got a variable called my cars and it stores multiple values but reference as a single values called my cars the next data type i want to quickly mention is called the object everything in javascript is basically an object so all the examples i've shown so far they are basically objects you can also represent javascript objects with curly braces as i've done here i've declared a variable called person and set the value to equals to the first name got john last name though so you can represent an object like this way as well but by using curly braces so if i wanted to access this object here all i need to do is call the variable by its name and it will return the you can see it's returned the first name as john last name as do another data type i want to introduce you to is called null you may come across this in your learning with javascript and basically a null data type is something that does not exist you can also use the null data type to empty the value of a variable and a null is also an object data type so you can see here i've got a variable here called dot number and with a value of seven so i can empty that value by just typing in the name of the variable which is dot number and setting the value to null and that will empty the current data it stores if i call this variable called dot number now it will come back saying null because i've emptied out the whatever it was storing okay so a null data type means basically nothing it doesn't store anything there's nothing in there the final data type i want to talk about is called undefined undefined is similar to null the only difference is that they are different data type undefined is undefined while a null data type is also an object data type well if you declare a variable and you don't give it a value that will become undefined for example if i come here and say variable sweets and i don't give it any value that would become undefined if i try to call it by its name it will come back undefined so that's the key difference key difference between a null and undefined is that undefined is not an object data type while null is an object data type so that's basically it for this video on javascript data types thanks for watching bye for now hello and welcome in this video i'll be showing you some basic examples of how you can mix data types when you are creating certain variables or objects in javascript you can mix the data type for example in an array you can have an array that contains a string and also a number so let me create a very basic variable i'm going to create a variable and i'm going to call this variable x i'm going to give it a value which is going to be an array you can tell it's an array because i'm using square brackets and i'm going to give the first value in the array i'm going to make that a string we'll call that john so you separate each value in an array with a comma and i'm going to make the second value in the array a number so here i've created a basic object which is an array that has two values which is also known as the length so the length of this array is two so if i press enter it comes undefined because i've not referenced it so if i want to reference it i just call it by its name which is x and press enter so it tells me here that this is an array and it has two values or length two and it tells you here the values john and zero so if i expand this now you can see an array basically is referenced by the index so the very first value will be index zero and the second value with it will be index one so if i wanted to access for example this value called seven i'll have to reference it by this index one and it tells you a length that means the length of the array is two it's got two values so you can see it's possible to mix data types so i've mixed a string and a number data type inside an array object when mixing data types you also have to be careful because it can lead to some unexpected results for example when you are performing calculation so you've got to be careful not to mix a string value and a number value so let me illustrate so let's say i create a variable a and give it a value of say seven plus seven all right and i create another variable i'll call this variable b and i'll give this a value of seven plus seven so i've got two variables now if i call variable a variable a will return a value of 14 which is seven plus seven if i call variable b it will return a value of 77 because the first value is a string so it uses this plus sign to concatenate or add this seven to the string so if i call the variable b now it will return 77 so you've got to be careful when you're doing calculations so as not to mix a string and a number if you don't want unexpected results it's okay if you're expecting the values that gets returned but if you're not expecting it then you need to be cautious when you are mixing a number for example and a string if i for example create another variable here i'll call this variable c and i'll set that to equals to say a string and i'll call this hello and i'll concatenate this i'll add a number seven now if i call this variable c i expect it to return hello seven all right so that's basically how you mix variable but you gotta be careful when you're doing calculations so you don't get unexpected results so that's basically it for this video thank you for watching and bye for now hello and welcome to this video in this video i'll be introducing you to javascript operators an operator is a mathematical symbol which produces a result based on two values or variables you should have already come across some of these operators and for example the addition multiplication subtraction and division these are all referred to as arithmetic operators there are different types of operators in javascript we've got the arithmetic operators we've got the assignment operator we've got a string operator sometimes called concatenation we've got the comparison operator we've got the logical operator and the type operators i will be briefly explaining each of these operators in separate videos thank you for watching and bye for now hello and welcome to this video in this video i'll be explaining what arithmetic operators are and also showing you basic examples arithmetic operators are operators that are used to perform arithmetic actions or functions on numbers or variables here's a table of some basic arithmetic operators so i'll start from the top where we've got the addition operator and basically that is used to add numbers or values together for example two plus two we've got the subtraction operator which is used to subtract numbers or values example four subtract two next we've got the multiplication operator which is basically used to multiply numbers or values example seven times three in programming and in javascript multiplication is represented by the asterix symbol next we've got the division which is used to divide numbers or values example we divide four by eight next we've got the modulus which is represented by the percent sign a modulus operator is used to return the remainder from a division so when you divide two numbers modulus will return only what is left from the division next we've got the increment operator which is represented by two plus symbols what that does it increases the value of a number or a variable for example if you've got a variable that has a value of seven and you want to increase that value to eight you use the call the variable name and then you add the plus plus symbol which is the increment operator and that will increase the value by one the opposite of that is the decrement operator which is used to decrease the value of a number or a variable by one so these are the basic arithmetic operators in javascript you also find that these are identical to most programming languages as well so i'm going to go over to my console and basically show you some basic examples open up google homepage and on the google homepage to access the console if you are on a windows computer you press control shift and j if you're on a mac you press command shift and j that will give you access to the console so i've got my console open and you should have this underline next to the world console so let me just run through the basic arithmetic operator the first i want to illustrate is a basic addition you may already know this already so do apologize if i'm going through this again so i'm just going to illustrate by adding two numbers together and i'm going to do two plus two and press enter and that will give you four next let me illustrate the subtraction i'm going to subtract two numbers also part four from two i'll press enter on my keyboard and that will return a value of two next i want to multiply two numbers so i'll do a seven and an asterix asterix is what you use to represent multiplication in javascript and i'm going to multiply seven by three i'll press enter that returns 21 next i'm going to illustrate a division example i'm going to divide two numbers so i'll divide eight by four and you represent division with the slash symbol press enter and that will return two next i want to illustrate the modulus operator modulus will only return the value of what is left after a division so i'll do five and the percent to represent modulus so i expect this to return one because two can only go into five twice and it should be remain the one you can see is returned one next i want to illustrate how the increment operator works first i'm going to declare variable called x i'm going to give it a value of seven so now if i call that value variable x it will return seven so if i want to change the value from seven to eight i can use the increment operator by just calling the variable by its name and doing plus plus twice and that will increase it if i now call the variable by its name it should now return a value of eight next i want to illustrate how the decrement operator works first i'm going to declare a variable called y i'm going to give it a value of five next if i call that variable it will return the five say for example i want to decrease it to four i'll just call the variable by its name and use the decrement operator which is two dashes press enter now if i call that variable y it will now show me a value of four so that's basically how the decrement operator works so these are just very basic examples to illustrate how the javascript arithmetic operators work thanks for watching bye for now hello and welcome to this video in this video i'll be introducing you to javascript operator precedence operator precedence basically describes the order in which operations are performed in an arithmetic expression the best way to show you this is by actually illustrating an example so i've got my console here so i'm going to create a variable so i'm going to create a variable called j you could call your variable anything i'm going to give it a value of 150 plus 70 and multiply by four this is going to be the value for my variable called j so if i press enter and try call this variable by name it's going to give me a value of 430 now if you use a calculator you get a different result so if you input 150 plus 70 times four on your calculator it will return a value of 880 the reason we get a different value here inside the console is that in programming and also in javascript there is a precedence of operators so what that basically means is that in terms of the order in which the operations are performed multiplication and division have a higher precedence than addition and subtraction that is why the multiplication is done first so it will do the 70 times four first before it adds the 150 so that is known as a precedence so the precedence is that where there is multiplication and division involved it will take higher order than where there is addition of subtraction involved so it does the multiplication first then the addition if there was division it will do that first and then the multiplication there is a precedence in the operator action however you can use parentheses to change that order if you wanted the addition to be done first all you need to do come here do a variable j and i'm going to set that to equals to i'll do a parenthesis i'm typing 150 plus 70 and i will close the parenthesis so what that does it will do the addition first because i've wrapped it around the parenthesis which gives it a higher order and then i can now do the multiplication so if i do this return this variable it will now give me a value of 880 because i have forced the addition to compute that operation first before the multiplication is done so i press enter if i call the variable j now i should get 880 which is the figure you will get if you had used a standard calculator but in programming and in javascript there is a precedence in the way the operator actions are performed so if you want a particular operator to compute its value first you need to wrap it around parenthesis and that will give it a higher order in the operator precedence so that's basically how operator precedent works thank you for watching bye for now hello and welcome in this video i'll be introducing you to the javascript comparison operators javascript comparison operators are used to compare values and will return a boolean result boolean basically means true or false so when you use javascript comparison operators it will always return either a true value or a false value so this is basic table illustrating some comparison operators so i'll start from the top which the first is known as the equal operator and it's represented with a double equal symbol so what that does it checks if values are equal okay so if you want to compare two values are equal you use the equal to operator if you want to check if values are equal both in value and data type you use this strictly equals two which is represented with a triple equal sign a single equal is used to assign a value so we must be careful between the distinction between single equals or double if you want to check if something is equal to something you use a double equals if you want to assign a value like you're doing variables you use just a single equal if you want to compare that the values are strictly equal in both data type and value you use the triple equal symbol if you want to check if values are not equal you use the exclamation mark and the equals to sign that will check if the values are not equal if you want to check if the values are strictly not equal in value and data type you use the exclamation and double equal symbol so if you want to check if your value is greater than another value you use the greater than sign for example you want to check if five is greater than two if you want to check if a value is less you use the less than symbol which checks if a number is less than another number of value you can also use the greater than or equal to which is represented by the greater than sign and the equals to sign what that does it checks if the values is greater than or equal to the less than or equal to is represented by the less than symbol and the equals to sign this checks if the value is less than or equal to so i'm going to jump into the console now and give you some basic examples of these comparison operators so when you're using comparison operators they will always return either a true or false result say for example if i want to check if four is equals to five that will return false because four is not equals to five if i want to check if a value is strictly equals in type and also in value so what i'll do first i'll create a variable called a variable called x i've given this a value of seven i'll create a variable called y and i'll give this a value of seven but the seven will be a string value so which means the data type is different from variable x so now i can do a comparison i can say x is equals to y this will return to true because both of them have a value of seven now if i use the triple equals to it will return to false because the data type is different but the value is the same so if i do x triple equals to y that will give me a result of false because they are not equal in data type the variable y has a data type of string you can tell because of the quotes that is enclosed around the value and variable x is numerical which has a value of seven so they are the same in value but not the same in data type so if you want to check if two values are the same for example if i say eight is not equal to seven that will return true because eight is bigger than seven so it is not equal to seven so if you want to check if a number is greater than another number you want to check if nine is greater than say eight that will evaluate to be true because nine is greater than eight if we say eight we call eight is less than say seven that again will evaluate to be true because eight is greater than seven so here i'm using the less than sign comparing if eight is less than seven that has returned false because eight is greater than seven if i was to say seven is less than eight that will evaluate to be true because seven is less than eight so let me create a couple of variables i create a variable a i give it a value of 17 and i use the comparison so if i say a is greater than or equals to 17 that will evaluate to be true because a the variable a here is 17 so i'm saying a is greater than or equal to 17 so that evaluates to be true if i create another variable say i create a variable b and assign it a value of 10 and i want to check comparison so if i say is variable b less than or equals to nine that will evaluate to be false because b is 10 so these are basic examples of comparison operators once you understand the basic concepts then you'll be easy for you to use the comparison operators that's it for this video thank you for watching bye for now hello and welcome in this video i'll be introducing you to the javascript logical operators the javascript logical operators are used to determine the logic between variables or values so this is a basic table that shows you two logical operators the first is called the ant and is represented by the ampersand symbol what that does it checks if all the conditions are met and it will return a boolean result either true or false if all the conditions are met it will return true if not it returns false the next is the or operator which is represented by the pipe symbol it checks if any condition has been met and it will return a true boolean result so the key distinction between the and and the or is that when you're using the and to check conditions all the conditions has to evaluate to true if they are not met then it will return a false boolean result boolean result basically means true or false in the or operator you only have to satisfy one condition it will return a true result so let me quickly illustrate how the logical operators are used in the console so i'm going to start by creating a couple of variables i'll create variable x i'll give it a value of seven i'll create another variable and i'm going to call this variable y and i'll give it a value of six now i can use the logical operators to check the condition so i can say x is less than 10 if x is less than 10 and y is greater than six this will evaluate to be false because the first condition is true x is less than 10 but second condition is false because y is not greater than six so it will evaluate to be false so if i use the or operator with the same condition it will return true because one part of the condition is true so it will return everything as true for example the same illustration if i come here and say x is less than 10 or y is greater than six this will evaluate to be true because the first part of the condition is true x is less than 10 so that's basically how you use a logical operator in a nutshell once you understand this basic use of it then it will be able to um it will make more sense when you start using it later thank you for watching and bye for now hello and welcome in this video i'll be introducing you to conditionals conditionals are code structures which allow you to test if an expression or a condition returns true or not they are used to perform different actions based on different conditions the common conditional statements are an if statement basically an if statement is used to specify a block of code that will be executed if a specified condition is true we also have an else statement basically that checks if the condition that is set within the if statement is true or false if that is false then the code inside the else block will execute so the else statement will only come into effect if the condition set within the if statement returns false so in my console i've got a variable here that i've defined called my number and i've given it a value of seven and i'm using an if statement which is a conditional statement to test a condition so i'm checking if the variable called my num is equals to seven if it is the code this code here will be executed which says console.log basically means it will print out this message inside this console it will say lucky seven if the condition is true but looking at the condition this condition is definitely true because the variable has a value of seven and i'm just checking here this is the condition the expression inside the if which is this here is the test okay so this uses the identity operator which is this equals to here to compare the value to compare if this value here is seven if it's equals to seven if it is it will print out that so i'm just going to press enter and it will print out lucky seven in the console so in this case the condition is true so no other code needs to be executed however you can also create a condition in which you add an else statement so that if the condition inside the if statement is wrong then a different block of code will execute which is located inside the else block so here i've got another variable same code my number i've changed the value to 10 and here i've included two statements the if statement and the else statement so what happens is the comparison is made the condition is tested and the test is inside the if block inside here so it's testing if this variable my number is equals to seven this will return force because the value is 10 so what happened this block of code here that says lucky seven will not run so it will not get executed because the value is wrong so what happens it will skip this block and it will execute this code because this condition inside the if is wrong it doesn't evaluate to 10 so once the comparison has been made it will run the code that matches the comparison so in this case the code inside the comparison is made inside the if block so it's tested the condition the condition has tested force because the value seven is not equals to seven so it's not equals to 10 so this block of code here that says lucky seven will not run instead it will run this inside the console anyway you see console.log means it's going to print a message inside the console so if i press enter you can see saying you're not very lucky today because this condition that we tested did not evaluate to true so this code here is executed instead so in a very simple example here to illustrate how the conditional statement works so there are other types of conditional statement but the very basic is the if and the else statement so the key thing to note here using the if and else statement is that the condition to be tested or the expression to be tested is always located in the if block so that's where you set the condition you can see here i've set the condition here so if that condition does not evaluate to be true then the block of code inside the if statement is skipped and the one in the else block is executed so in between the curly braces that's the opening curly braces and that's the closing curly braces is where you write the block of code that will execute you can see here this is the block for the if and in the f1 you've got the opening curly braces and the closing curly braces and in between you've got the code block that executes if the condition within the if statement or the if block is wrong so that's it i hope it makes sense if not please let me know thank you and bye for now hello and welcome in this video i will be introducing you to javascript functions functions are a way of packaging functionality that you wish to reuse so a function basically can refer to a block or a piece of code that is designed to perform a particular task a javascript function is executed when something invokes it by invoke i mean cause it so in order to activate a function after it has been created you need to invoke it or call it and usually you do that by its name javascript has many built-in functions that you can use a very popular one is the alert which enables you to create pop-up box messages javascript also enables you to create your own functions and the way you create your own functions in javascript is by using the function keyword functions often takes arguments arguments are bits of data that the functions need in order to perform or do their jobs and these arguments are placed inside parentheses which are separated by commas if there are more than one argument so inside my console i have created a function and the way you create a function you basically have to type in the keyword function followed by the name you want to call the function when you're creating function it's very nice to name your functions as closely as possible to the task that the function is meant to perform see my function i've called it add num which indicates that this function is going to be used to add numbers together so when you create a function you first of all have to type in the word function followed by a space then the name of the function and then you have to have parentheses sometimes the parentheses can be empty but you must have that in order to create a function and then if you've got any arguments you pass the argument inside the parentheses if there's more than one argument you separate them by a comma you can see here num one is an argument num two is referred to as an argument and once you specify the arguments if there are any inside the parentheses and then you have this curly braces you've got the opening curly braces here and the closing curly braces and inside in between the curly braces is the block of code that has to be executed when the function is invoked or called notice here i've also got a return statement here basically the return statement tells the browser to return the result variable out of the function so it is available to use all right this is necessary because variables defined inside functions are only available inside this function this is called variable scope so when you create the variables variables can be available throughout the application or throughout the scope which is known as global so if you create a variable and you declare it outside the function that makes that variable global that means you can use it anywhere within the block of code but if you define a variable inside a function like i've done here i've defined a variable called result and i've set that variable result to equals to whatever value is passed as number one and add added to value passed as number two so this variable is local to this function so it can only be accessed inside this function so when a variable exists inside a function once the function has been executed the variable basically is destroyed or you know it's it becomes on you can't use it again once the function has been called that's it is served this purpose however if you want the variable to be available you have to use the return statement that way it will tell the browser to return the result of the variable out of the function so that it is available to use you only do this for variables defined inside the function they are known as a local variable scope so variables defined outside the function are global so you can access them from anywhere within the within the javascript code whereas variables defined inside a function like i have done here i refer to as a local scope variable so here i have defined this variable called add num now to make or to invoke this function now that i've created it all i need to do is call the function by its name which is add num and then i have to you must add the parentheses and then i'm going to pass it two values because i've got two arguments there so if i say 10 comma 20 and i close the parentheses and i press enter that will add 10 and 20 together and give me 30 all right so anytime i want to use this function all i need to do is call the function by its name and then passing two arguments you can see it saves me having to rewrite the function again i've already written it defined it all i need to do is just call it i'm passing whatever arguments i need for the function so for example you can create the same thing maybe for multiplication or anything this is just a basic illustration to show you the importance of functions so you can create functions for different kind of tasks or to do different things but once you've created a function you don't have to write all the code again all you need to do is just call the function by its name and passing whatever arguments you need to do like i've passed in here and then you know the function executes if i want to add passing more argument i just call the function by its name and i'll pass in say i do six and six and that will add six and six together it will return 12 because i've already done written all the the functions here so all i need to do is call it by its name and passing the argument so that's basically how you create and use a function functions very powerful concept in javascript um i've only you know barely scratched the surface here this is just an introduction to javascript function there's a lot more to it so that's it for this video thank you for watching and bye for now hello and welcome in this video i'll be introducing you to javascript comments just like in html and css you can also add comments in your javascript code so this is the files we've been working on so far and on the course this is my javascript file you can see it's called myscript.js and there are two types of comments in javascript you've got the single line comments and we've got the multiple line comments i'll start with the single line comments so for example i've got this code here on line one if i want to comment that line of code out all i need to do is do two slashes and that will take that comment out you should comment out that line of code so you can see because i've commented out that line of code it has affected the text here that's been displayed all right so that is known as a single line comment comments are useful you can use them to troubleshoot different aspects of your code and more importantly you can use them to document what's going on in your code so that is a single line comment if you want to comment out multiple lines at the same time that is called a multiple line comment so what for example what i could do if i wanted to comment this entire code out for all these two lines you do a slash and then an asterix and then you do a asterix and a slash so that comments out everything on the code if i save that so if you can see the whole code has been commented out so this is known as a multiple line comment so if you want to comment out multiple lines this is how you do it you do you use the slash asterix then asterix slash that comments out everything within the opening slash and then this closing slash and the asterix so these are the two main types of comments a single line comment which is represented by two slashes on a single line and a multiple line comment i strongly encourage you to get into the habit of using comments to comment your code especially so when you write code always try to comment it or comment the areas you are likely to forget in future so that when someone else looks at your code or when you come back later to look at your code it makes sense to you because you've left a comment so that's it thank you for watching bye for now hello and welcome to this video in this video i'll be briefly explaining javascript linting tools what are javascript linting tools they are basically javascript code quality tools that enables you to check for errors or mistakes in your javascript code or script if you are using the brackets text editor it comes baked in with two javascript linting tools so it has js lint and es lint they are both baked into the brackets text editor so once if you've got the brackets editor installed you should have the js lint and es lint they both basically do the same thing they check for errors but they do it in different ways so they can check for things like syntax errors or if your javascript code is not valid it will highlight such errors so once you've got your javascript file populated i've got some code on it it is there behind the scene constantly scanning your javascript file for any errors and it will highlight them in the arrow window within brackets if you are a beginner programmer in javascript using linting tools will help you become a better programmer because it will help you catch a lot of common mistakes that will help you improve on your javascript code if you're using brackets you'll notice there will be an error screen here and normally you will have a warning so this warning basically will show you any errors you have or warnings warnings does not prevent your code from running it will still run it will just it's just highlights there are certain things that you could improve on it doesn't necessarily it's not a showstopper it will not prevent your code from working but it will help make your code more elegant so you can see here my es lint has identified a problem with my javascript code it's telling me here tells me line one which is just line one here it's telling me there's an error that the document is not defined basically what that means is that it does this document here has not been treated as a global object so it thinks this document is a local variable so with a global variable you can access it from anywhere within the file so it's thinking just lint is thinking that this document is not defined so the way around it is to make this a global object so that it can be accessed from anywhere within this page or document so the way we do that we just put a comment a javascript comment on the top of the file and what we do we just do slash and we do the word asterix i'm just typing the word global followed by the name of the document that is complaining about type document and we end it with an asterix and then the slash so that is a comment if we save that you can see the error has disappeared because it's now treating this document as a global object which means it can be accessed from anywhere within the file if you notice here if you're using bracket you can see here it says everything's okay no problem found so this is one place you need to check if there's any errors or any warnings it will be highlighted in this area here you can turn it off but i don't advise you do that so that you can capture any errors but if you want to turn it off go to the view tab and there's an option that says lint files on save just on check that but i don't advise you to do that's good you see whatever errors is captured so that you hello and welcome to this video i'll be introducing you to javascript events what are javascript events events are basically things that happens to html elements for interactivity to occur on a website events needs to happen to create that interaction an event can also be referred to as something that the web browser or the user does to create interactivity so you can look at events as code structures that listen for things happening in the browser and then respond into that by running a code so javascript will let you execute a code when an event is detected an example of an event could be when you click on a button or when you fill out a form on a website there are different types of events that cannot occur the most obvious event example is known as a click event basically this is fired by the web browser when you click on something with your mouse so to demonstrate how this works i've already entered some code in my console in some google homepage console here so got the document dot query selector the document dot query selector returns the first element within the document that matches the specified selector so here i've passed in the html as the specified selector which is the entire document this document here is known as the html and next i've attached an on click property so after the selector i've put a dot and then on click on click property basically is going to return the click event handler for the current element a handler basically is a function that is invoked or called by an event listener an event listener is a kind of function that waits for an event to occur then it responds with a code it then executes some code in response to that event so in here in my document dot query selector i've selected the html document as a selector which so this is where the event is going to be executed on and i've attached this on click property so and next to that i've set this to equals to a function you can see i've got a function that's opening curly braces and this is the closing curly braces when you define a function you define it like this with parentheses parentheses can be empty if you've got nothing to pass in as arguments and in between the curly braces will contain the block of code that will execute in response to an event so here the property here this code on click will be the event so what this is saying is that if i click anywhere inside this called this browser area it will execute this code ouch stop poking me so if i press enter on that now so it has now saved us so if i click here you can see saying ouch stop poking me so me clicking in that area is an event and by clicking on it it also runs or executes a corresponding code that responds to that event so if i click again it execute this code here which is responding to the click event clicking is an event in the browser so by me clicking it execute this code which is this code here it says ouch stop poking me i'm just going to click to exit that this is just one event i've just illustrated there are tons and tons of events that can happen within the browser and you have to also define the corresponding code that will respond to that event there are many ways to attach an event to an element so here i've only used one which i've attached the event to the html element which is this actual page and here i've also set the onclick handler property this is a property i've set that to equals to an anonymous function if you notice i've declared a function but i didn't give the function a name that is referred to as anonymous so i've assigned that to a nameless function which contains the code we want the click event to run so this is a code i want the click event to run when i click on the html which is the browser here it will execute that code so this is just a very basic introduction to events there are several tons of events that can happen in a browser and you can also have corresponding code you want to execute in response to an event so that's it for this video thank you for watching and bye for now hello and welcome in this video we are going to add some more functionality to our example website now that we have explored a little bit about some javascript basics so this is what the sample website looks like at the moment so what i'm trying to achieve here is incorporate an image changer at the moment i've only got one image i want to try and add another image so that when i click on this image here it will change to another image that's what i'm trying to achieve so first of all you need another image in your image folder if you've only got one image make sure you add more i've got a few images in my images folder here notice i've got one two three four but you only need another one just so that you can follow along with this example so make sure you add another image to your image images folder you should have an images folder so add another image make sure that the image is the same size all the images has to be the same size if possible i've already showed you earlier in the course how to resize your image so if you're not too sure if you could refer to the video on that and just try and resize your images to be the same size and once you've got the image save it inside the same images folder any code you have in your javascript file at the moment you can delete it if you want to keep the one we've already done it's up to you if you want to do that but for me i'm going to just delete what i currently have here when you are using the brackets folder anytime you make changes to your javascript file it doesn't automatically reflect as you can see here you can see this dot next to the live preview is basically telling you you need to save whatever changes you've done the only thing that trying that basically changes automatically is your html and css javascript you have to save it first and the way you identify that is by this little dot so if i save this here the title should change i'm just going to click file and save you can see my title has now changed i have added some bunch of code here to my javascript file so i'm just going to explain the code to you line by line if you notice here we've got some errors here js lint has 10 these are not errors they are warning so if it's yellow it's warning but if you notice here i've got an error which is the same document is not defined this is basically because it doesn't recognize your document as a global variable it thinks this it thinks we're using something that's not being defined so the way to get around that is just to put a comment so you do a slash and the comment and just type in global followed by the word document and then an asterix and then slash and save that anytime you see a dot next to the live preview means you have to save the changes you've made before it takes effect you can see now that error has disappeared but we've still got some warnings which we will address later anytime you have warnings warnings does not stop your code from running it just means there are some problems that it wants you to address so we'll address them later let me walk you through the code first line one already covered line one as we've put a comment here and inside the comment we put global document which makes it possible to access this document from anywhere within this page or this file here line three i have defined a variable called dog image and i've set that to equals to the document or query selector we touched on query selector briefly when we're exploring javascript and the selector here is the image so this is the target so i'm using the img stands for image i'm using the img element as the selector line five i've created this dog image here this variable called dog image i've attached an onclick property to it and i have set that to equals to an anonymous function anonymous function basically is a function that hasn't got a name it's a nameless function and inside the anonymous function i've got my opening curly brace and my closing curly brace in between the curly braces is the block of code that will execute based on the condition so i am storing the reference to my img element in my variable in this variable called dog image that's where i'm storing all the reference to anything that's called img so any img element is stored in this dog image variable and i have set the this variable here i have set these variables on click handler property okay this on click is a handler i've set that to equals to this anonymous function so every time that the element is clicked so this is the element which is the image anytime the element is clicked it will trigger the block of code inside it so this is the condition it's checking for online seven is saying if this variable called my images online six i defined another variable called my images and i set that to equals to this dog image variable and i attached a get attribute property to it and the get attribute property i'm attaching to it is the source source basically means it will grab the image from the location you have stored it line seven i'm saying if notice i'm using triple equals to when you triple equals to it will check the condition both the value and data type is so it's going to check if this variable called my images is strictly equals to the images which is this images folder here i've got slash poppy.jpg which is this current image if it's equals to that so i'm saying that if it's equals to that if this condition matches then i am changing the attribute on the dog image variable so i'm saying if this condition is true change the image to this image here so if i click on this now it should change the image this is change the image because this first condition is true if not changes it swaps the images over now it's saying if it is not true which is where the else conditional statement comes in then change the variable again to this so what it's saying is that if i click on this then this condition in the if block is no longer true then it will now execute this code so if i click on this it will return the original image so that's basically how i'm changing the images from this block of code hello and welcome in this video i'll be walking you through fixing the js lint warning messages that were generated when we added an image changer to our javascript code so these are the warnings at the moment we've got 10 js lint problems they're only warnings warnings do not prevent the code from working it just there's just some warnings in terms of suggestions as to how to properly write your code so you're basically not happy about the way i've written the code so let's try and go through them i've got 10 in total so i'll start with here it says line 5 which is here it's saying expected exactly one space between the function and the parentheses okay between the function and so it's talking about here it's telling me i should give a space all right so i tab some people don't like writing functions like that they like to have the parentheses close to the function but i'm going to save that and save that will disappear i'll click save okay it's happy with that that has disappeared so we've got nine left so online six year is complaining that i'm missing a use strict statement the strict statement basically helps prevent certain actions from being taken or thrown into error so it tries to catch some common errors so let's try and follow what it's complaining about so line six so i'm just going to come here and add the strict statement so the way you do that is just to single quotes and you type in use space strict and you end it with a semicolon all right let's save that solves it so i'm going to save that okay it's not happy about that in fact it's giving me one more error so i've definitely done something wrong there it's not happy about all right you can see here is saying that it's expecting me to use this statement at column five not column one so if you look in my code editor i've got it online six column 13 so i need to shift it to column five so let's try and shift that to column five alternatively i can move it to a separate line on its own let's see if that works so it's not happy because it's saying you expect it to be a column five not column one so let me move it to column five if you look down here as i'm moving it it tells you the column so if i shift it that's two three four five so let's save this see if it's happy all right it's happy about that so line six unexpected space okay you're saying i've got some space you can see here it says use strict so there shouldn't be any spaces so the space is complain about you can see where the mouse is where the cursor is flashing so i've tapped to reduce that space that's basically what's complain about so we now have eight errors line eight it's saying expected exactly one space between if and and so line eight so expected one space between if here and the parentheses all right so that's a if let's do a space again not everyone likes writing code this way but this is what it's suggesting so let me save that all right so it seems to like that so i've got seven left so let's go to the next one line nine expected dog image at column nine not column seven okay yeah okay so it should be a column nine not seven okay so let's move it that's eight you can see may says eight there so if i tab again that's nine because it's trying to create a proper indentation so it's quite useful because it enables you to get into the habit of writing code properly all right so we've down to six line nine unexpected space between set attribute and the parentheses line nine set attribute okay unexpected space so i'll just tab reduce by one let's save that it's happy five more missing space between and and images line nine between between and all right between the quotes and the images okay line nine between the quotes and the images in one space is really fussy this guy okay let's save that see if he likes that it does okay we'll go four more line 11 it's saying expected this variable to be a column nine not seven okay so line 11 let's tab that's eight nine because it makes sense because it's trying to create proper indentation if i save that that's good we're getting there three left hello and welcome to the part two of fixing js lint warnings so we initially had 10 arrows showing up in our js lint console we've got it down to three so online 11 is complaining that there is an unexpected space between the set attribute and the parentheses so this is what it's complaining about so we just need to tab and reduce the space and then save that all right so it's happy with that next a saying here missing space between the quotes and the image here okay so it's missing a space between the quotes and the image so it's expecting a space here okay let's try that and see if he likes that click save all oh no it doesn't like it that's not what it means okay let's try here to a space and do a save yep that's what it's complaining about wanted the space between here and there so finally got it down to the last warning line 13 so it's expecting a semicolon but instead it's all that so let's add a semicolon and see if he likes that so looks like it is happy with the semicolon you can see here my console arrow console is clean you can see it says no problem found good job so once you see this green tick it means your code is okay linking tools are very useful because they help you become a better programmer it makes you structure your code in such a way that it's easier to read and understand so following the warnings that the js link provided you can see that the code is in a much better structure than it was prior to the changes that are made following the advice from the js lint tool so anytime you're writing javascript code always look out for the warning errors here and if there are any just as much as possible to just follow the suggestion or what it's complaining about so that's it for this video thank you so much bye for now hello and welcome in this video i'll be showing you how to add a personalized welcome message to your website so this is what the website looks like at the moment so the goal here is that when someone first visits the website we want it to be a prompt where it will ask the user for their name once they enter their name it would then say rather than saying hello what you say hello world followed by the name of the person who entered the name the first thing we want to do is go into our index dot html file and i'm going to add a button so the button eventually when i program it will enable a user to change the name that is displayed on the welcome greeting so if you scroll down to the bottom of your html file just before the script tag just before the script tag here after the paragraph tag if you just enter a button the reason the script has to be at the bottom is to enable all the content all the other content to load before any script is executed so that there is no interference so here i'm just going to tap and create a button the way you create a button you do a less than sign type in button and a greater than sign and then just type in the text you want to show in the button i'll just say change change name all right so that the wall will appear on the button and then you save that click save you can see it has appeared here with this live preview any changes you make if it's html and css it appears instantly but if it's javascript you'll have to save it first before it reflects on the page i have added some more javascript code i started by modifying line one of the code the global comment i have included inside the global comment a window object and a local storage api reference so they will be available anywhere in the javascript file without including them in the global statement above the document it will not be available throughout the file it will create errors the window inside the global comment online one basically refers to a window object all web browsers supports the window object the window object represents the browser's window and all global javascript objects functions and variables automatically becomes members of the window object i've also added the local storage local storage allows you to save a tiny piece of data inside the web browser while the session is opened and also will retain that data even when you close the web browser and reopen it later at a later stage i added a comment on line three to indicate the code i used for the image changer the rest of the code i have added was from line 17 to line 37 so these are these are the new block of code from line 17 to 37 line 17 is just a comment to indicate where the code for the welcome message starts from line 19 is a variable that will store any references to the button element i created earlier in my html file line 20 is another variable that will store any references to the h1 heading element line 22 i have created a function called set username all functions should have parentheses the parentheses can be empty or you can pass in arguments into the parentheses and also functions should also have an opening and closing curly braces so this is my opening curly braces and that is my closing for this function so everything all the code within this block here will be executed when the function is called line 23 i have specified a strict mode inside the function strict mode basically is a way to introduce better error checking into your code so you can catch any errors the function contains a prompt so i've got a prompt here i've used a window because the prompt is a member of the window object which i defined here so i'm referencing i have to put a window before the prompt in order to call it to work so here i've created a variable called my name and i've set that to the windows.prompt and here is a message that will pop up when the visitor gets the prompt the prompt is a dialog box it's a bit like an alert box but the prompt will ask a user to enter some data storing and then it will store the data in this variable i've created call my name so when the prompt comes up it will prompt the user say please enter your name once the user enters the name and once they press okay at the dialog box it will then store that name they've entered in here it will store it in this variable called my name next online 25 here i'm making a reference call to the local storage local storage is an api api stands for application programming interface the local storage is going to allow us to store the data in the browser and later retrieve that data so the name that the user gets from the prompt that prompt is stored in the in this variable and that variable will store it inside this local storage which is located inside the web browser okay and we're using the set item here the set item function which is this one here to create and store a data item called name and we're setting its value to the my name variable which is this variable here the my name variable will contain the data the user would have entered from the prompt finally here we've got the text content of the heading so it's going to change so once the user stores the name inside the local storage the h1 heading title will then change to say have a nice day plus whatever name the users entered this my name here refers to this variable here so whatever variable or name the user entered from this prompt will be displayed here you can see my example here i've got my name here it says have a nice day rick so once you've entered the name it changes the title of the h1 tag to have a nice day plus whatever name you've entered in the prompt next i've got an if block here so we can see we've got some conditional statement online 28 to 30 here we've got the if block so i'm checking some conditions here so i'm saying if this local storage if it is not this exclamation means not if the local storage is not doesn't have any details that if there's not installed in the local storage we're telling it to set the username so it's going to call this function here and set the name so it basically is checking if the data exists and if the data does not exist we're using the set username function and that function will be called and it will then execute and create the name so that's the condition there so it's saying if it does not if it is not set it will set it if it is already set if it exists the user that is if the user has already set it during a previous visit we will then retrieve the stored name using the get item we're now going to retrieve if the name has already been stored we're going to retrieve it using this get item function and we're passing the name here whatever name was stored we're going to retrieve that from the browser and then display the heading we're going to change the title to this to say have a nice a plus whatever name that was stored in the web browser finally here at the bottom here from line 34 this block of code here from 34 to 37 is referring to this button here this button you can see here the change name button so basically what I'm doing here is that I'm attaching an on click event handler this is the on click event handler I'm attaching that to this button here so when the button is clicked the set username function is run so if I click on this button now it will call this function and prompt me for a name so let me do that so that you can see it in action let me bring this here a bit so if I click change name it will give me a prompt so if I change this to say john and say okay it will now say if I browse you can see you can say have a nice day john so that's basically how that button works this button yet so if you want to change the name that is displayed yeah you just click on this and it will trigger once you click on this that's known as an event if you click on this it will trigger this function and this function will call this it will call this here this set username which is this function here and to trigger the whole process again to check if you've got the name saved in the browser storage if it's not saved then it will create it so that's basically why the if and else statement is there if it's there if it doesn't exist it will create it using the set username function if it does exist it will retrieve it using the get item method method and function they kind of work in the same way so you may have heard me hear me use function or method I mean the same thing so the website is basically finished so the way this is going to work is that when a visitor first visits this page it will ask them it will prompt them for a name it will ask you for your username when you give your when you enter a username it will then personalize the message you just say you know have a nice day john or whatever name you have entered but you can also change it by clicking on this button here which will trigger the event and it will set this block of code in motion one good thing about the local storage is that even when you close the web browser and you reopen it for example now I've stole the name john if I close my web browser and reopen it it will still retain that name so let me close my web browser and I'll show you what I mean I'll exit this page I'll launch it again and it should still retain the name john that was safe it says to go john safe so that's possible because of the local storage facility in the web browser also make sure your code is well indented exactly the way I've done mine so that you don't see any unexpected and expected lint errors you should have this green tick which indicates that everything is okay with your code so that's basically it for our sample test website project so you should have a website looking like this you should be able to click on your image and it should change and this button also should change when you click on it it should prompt you to change or to add a name okay the reason is called null here is because I didn't enter a name so if I enter a name so let's say let's say call it toning you see it says have a nice day toning so the next time I relaunch the web browser it will still have that name saved until I change it so that's basically it thank you for watching and bye for