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.  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.  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.  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.  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.   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.  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.  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.  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.  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.  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.  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.  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 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.  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.  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 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.   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