Welcome to the first part of the ultimate HTML and CSS series. In this series, I'm gonna take you on a journey and teach you all the skills you need to build fast and beautiful websites that look great on all kinds of devices. I'm assuming you know nothing about HTML or CSS and wanna learn everything from scratch.
So in the first part of this series, we're going to talk about the fundamentals of web development with HTML and CSS. In the second part, we'll explore the advanced concepts. And in the third part, we'll put everything together and build a beautiful, responsive, and blazingly fast website for an imaginary cloud hosting company called Moshify. If you want to play with this website, just head over to moshify.com and see it for yourself. This is what you're going to build in this series.
I'm Mosh Hamadani and I've taught millions of people how to code or how to become professional software engineers through my coding school and YouTube channel. If you're new here, be sure to subscribe as we upload new videos all the time. Now, let's jump in and get started.
Alright, let's talk about the tools you need to take this course. For the starter, you need a code editor. There's so many code editors out there, like Visual Studio Code or VS Code, Sublime Text, Atom, and so on.
In this course, I'm going to use VS Code, along with a few extensions for starting a web server and formatting our code. You're welcome to use your favorite code editor if you know what you're doing, but otherwise, head over to code.visualstudio.com and download the latest version of VS Code. Now here inside vs code we're going to install a couple of extensions.
So, let's open the extensions panel, and search for prettier. Here's the extension we're going to install, prettier code formatter. With this extension we can format our code and make it pretty.
This is a very popular extension, as you can see it's been downloaded more than 9 million times. So over here you're going to have an install button, just click it and you're done. Next we're going to install a couple of extensions.
Another extension called live server with this we can launch our website inside a development web server again This is a very popular extension. It's been downloaded almost 8 million times now in addition to these We're going to use a browser to view and test our web pages again. You can use your favorite browser But in this course, I'm gonna use Google Chrome and I encourage you to use the same browser so you can easily follow the course We're going to start our web development journey here. In every section, you will learn something new about web development, and by the end of this course, you will put all of this together to build a beautiful webpage. In this section, we're going to talk about the fundamentals of web development.
You'll learn the languages and tools used in web development, as well as the key concepts and vocabulary, such as URL, HTTP, DOM, and so on. We're also going to talk about websites work, so you will understand what exactly happens under the hood when you use your browser to visit a website. You will also learn how to inspect network traffic using Chrome DevTools, which is a very powerful tool used by front-end developers.
We'll also talk about the basics of HTML and CSS, and validating webpages, which is something a lot of developers miss. This is going to be an awesome journey, so let's jump in and get started. This course is your first step towards becoming a web developer. So let me give you a simple roadmap to know where you are and where you should go next. Every website has two parts, a front end and a back end.
The front end is the part that you see in your browser and interact with. All the visual aspects. The back end is the part that powers the front end. It's behind the scenes, and it's mainly about storing data in databases and providing it to the front end.
So web development jobs fall into three main categories. front-end development, back-end development, and full-stack development, which involves both front-end and back-end development. Front-end developers use HTML, CSS, and JavaScript to build front-ends. Back-end developers have different sets of tools available to them, which is outside the scope of this course.
So let's talk about HTML, CSS, and JavaScript. HTML is short for hypertext markup language. I know it's a mouthful, but basically we use HTML to define the...
building blocks of our web pages. CSS is short for cascading style sheet, and is used for styling web pages and making them beautiful. JavaScript is used for adding functionality to web pages.
Let me give you an analogy. Think of a building. building in the real world is like a web page on the internet. It has a skeleton or structure, it can have pretty walls, windows, and tiles, and it can have certain functionality.
For example, when we press the elevator button, it comes to pick us up. Here's a real example. Let's say we want to build a website like Twitter. For each tweet, we want to have a layout like this.
So first we use HTML to define all the building blocks of this layout. What are these building blocks here? image some text indicating the users Twitter handle another block of text containing the message and three icons for Commenting retweeting and liking the tweet we use HTML to add these building blocks to our web page Then we use CSS to give it visual effects. For example with CSS we can make the font bold We can make our image round we can add some padding around here We can change the color of these icons and define their look when we hover over them So CSS is all about aesthetics or visual effects.
With CSS, we can also create beautiful animations. Now most web pages these days are interactive. They respond to our actions like clicks and scrolls. This is where JavaScript comes in. With JavaScript, we can add functionality or behavior to our web pages.
For example, we can like a tweet. So JavaScript is a programming language, while HTML and CSS are not. Meaning, we cannot use them to tell computers what to do. We use them to define the building blocks of our web pages and style them. Every web page you have seen on the internet is built with these three languages.
So the better you learn and understand these languages and their features, the better you will be at front-end development. So your front-end development journey starts with HTML and CSS. I would say if you spend 3-5 hours every day studying and coding, you should be able to have a reasonable understanding of these two languages in about a month.
or a month and a half. Once you learn these languages, then you need to learn javascript. I have a separate series for learning javascript. So after finishing this series, you may want to enroll in that series.
I would say learning javascript would probably take another 6 weeks of your time. Of course, you're not going to be a javascript expert in just 6 weeks, but you will have a reasonable understanding of it, and you will learn more as you work on different projects. So the first 3 months is all about the fundamentals. Now, building websites often include a bunch of repetitive tasks. This is where front-end frameworks and libraries come in.
A framework or a library comes with a lot of code that we can reuse in our websites. So they help us get the job done faster. That's why a lot of companies these days use one of these popular frameworks like React, Angular, or Vue.
Now technically, React is not a framework, it's a library. But subtle distinction aside, all these tools serve the same purpose. They help us build applications faster.
Now, you don't need to learn all of these to get started. Different companies use different tools for different projects. So as you move from one project to another, you may want to learn about the other tools.
If you're starting out, just focus on React, because it's the most popular tool in this space. Once you learn React, you can always learn the other tools if needed. For React, you would probably need 1-2 months. Again, I have a comprehensive plan.
course on react, more than 40,000 people have taken this course and loved it. Alright, what's the next step? Version control systems. We use a version control system to keep track of our project history and work collaboratively with others.
There are many version control systems out there like git, subversion, mercurial, and so on. But git is the most popular tool in this space and is used in more than 70% of software companies. That's why you'll see it in almost every job description.
I would say you would probably need two weeks for learning git. And again, I have a comprehensive course for you So these are the essential skills that every front-end developer must have you'll see these listed on almost every job description Now different jobs require other skills But these skills vary from one company to another so you can learn these additional things in the future or on the job for now Just focus on these four skills or four steps Remember less is more Don't try to learn too many things quickly. You won't learn anything.
You'll just waste your time. Alright, that's your roadmap. Next we're going to talk about how the web works.
Have you ever wondered how the web works? In this lesson, I'm going to tell you exactly what happens the moment you type the address of a website into your browser and hit enter. As part of this, we're going to talk about a few important concepts and terms that you need to know as a web developer.
So let's say we launch our browser and head over to a website like codewithmosh.com. Now this address that we have in the browser address bar is called a URL, which is short for uniform resource locator. Basically it's a way to locate a resource on the internet.
Resources can be webpages, also called HTML documents, they can be images, video files, fonts and so on. So we type the URL of a website and hit enter. What happens now?
Well, there are two pieces involved here. The browser, also called the client, and the computer or computers that host our target website. We refer to these as web servers or servers for short.
This is what we call the client server model. The client requests a service, the server provides that service. So our browser sends a message to the server and says, hey, give me the homepage of this website.
This is kind of similar to how you send your friend a text message. You can think of your phone as the client sending the message, and your friend's phone as the server receiving the message. Now back to our example. This message is formatted based on a protocol called HTTP or hypertext transfer protocol.
You've probably noticed it before, but never know what it is. In simple terms, HTTP is a language that clients and servers use to talk to each other. It's not a programming language, it's just a plain textual language for communicating over the internet.
We also have HTTPS, which is HTTP with encryption. So the messages exchanged between the client and the server are encrypted. Here is a simplified example of an HTTP message.
With this message, the browser tells the server what it's looking for. So on the first line it says that it wants to get a page or a file called index.html using HTTP version 1.1. Index.html often represents the homepage of websites. On the second line we can see the host, that is codewithmosh.com. And on the third line, we can see the language that the client can accept, in this case, English.
Now don't worry about memorizing any of this. All I want you to understand here is that this message is structured based on the HTTP protocol that clients and servers understand. So the server receives this message, it figures out what the client is asking, and then it will send a message back to the client.
The first message is called an HTTP request, and the second message is called an HTTP response. Every data exchange using the HTTP protocol involves two messages, a request and a response. Now what is in the response? Here's a simplified example. On the first line, we see the version of http protocol used, followed by a number which is the status code.
200 means successful or ok. Right below that, we can see the date and time of the response. Next we can see the type of content the server is sending back to the client, in this case text slash html, and after that, we can see the html code or the html document that represents the of code with mosh.com.
Of course, the actual HTML code is way longer. Now, as the browser reads this HTML document, it constructs what we call a DOM or a document object model. Don't let this fancy name scare you.
This is a model that represents the objects or elements in our HTML document. What are these elements? All the building blocks of our page, like paragraphs of text, images, links, and other stuff. You will see this in action in the next lesson.
Now as the browser is reading this HTML document that is returned from the server it discovers references to other resources in this document like images fonts and other stuff each of these resources As an address or a URL so for each resource the browser sends a separate HTTP request to the server to fetch that resource Many of these HTTP requests are sent in parallel so we can see the page as quickly as possible once the browser has all the necessary resources, it will render the HTML document. Rendering an HTML document means displaying it. It's a fancy technical term we use often. So in a nutshell, our browser sends an HTTP request to the server and receives an HTTP response.
This HTTP response contains an HTML document. The browser reads that HTML document to construct a document object model and render the page. In the next lesson, I'm going to show you all of these steps in action.
Alright, let's see HTTP requests and responses in action. So open up Chrome and head over to google.com. Now we need to access Chrome DevTools. This is a very powerful tool used by front-end developers.
So on the top we go to view, developer, developer tools. Now look at the shortcut. On Mac, it's alt or option, command and I. On Windows it's obviously different, but remember the shortcut because it's much faster to access the DevTools via the keyboard.
Sup? Here's the dev tools, the first time you see it, it might appear a bit intimidating, but trust me, it's much easier than you think. Throughout the course, you're going to learn more about the dev tools. So, here we have a few different tabs, elements, console, sources, network and so on.
In this demo, we're going to go to the network tab, so we can inspect the network traffic to and from google.com. Now by default, dev tools is docked to the bottom of the screen, we can dock it to the left, to the right or any other location. undock it as a separate window.
So over here, we can dock it to the left side, a lot of front end developers like this layout, so they put dev tools on the left side, and they have their website on the right side. Now in this demo I'm going to undock it as a separate window, so we have more space to work with. So, let's undock it, good.
Now we need to refresh our website. As you can see over here, on Mac we can press command and R, on windows is probably control and r. Alternatively, we can go back to this window and press the refresh button.
Now, back to the dev tools, look at all these items over here. These are the http requests that are sent from our browser to google.com. As you can see, there are totally 45 requests, and here's the amount of data transferred over the network.
So in this case, just over 94 kilobytes. Now look at the first item in this list, this is the first http request that chrome sent to google.com. As you can see, with this request the browser wanted to get a document and the status of this request is 200 which means ok. Over here you can see the amount of data transferred over the network for this request, and the time it took to get the response. Now if we click on this request, we can see more details about it, so here on the headers tab, we can see all the headers of our request and response.
So, here are some general headers, like request URL, request method, which is get, status code, that is 200, we talked about it, remote address, this is the new make representation of google.com. Now down below we have response headers, there are so many headers here you don't have to worry about them, but as an example, look at content type, we talked about this in the previous lesson. So the type of this response is text, below that, we have the date and time of the response. Now if you click on the preview tab, we can see a preview of the HTML document that is returned from the server, so this is the homepage of Google. Now in this HTML document we have references to other resources like images, fonts, and so on.
So all these subsequent requests are sent to download those resources. So right below the first request, we have a request for downloading a png or an image file. Here's another request for getting another image, we have two requests for getting two different fonts and so on.
Now we can easily filter this list, so let's click on the filter icon here, by default we see all requests, but we can filter by request type. For example, we can select doc to see requests for downloading html documents, or font to see the requests that were sent to download fonts and so on. Next I'm going to show you how to create your first html document. Alright, first things first, here on your desktop or anywhere on your computer, right click and create a new folder. I'm going to call this html, but we could call it anything.
Now, let's go back to VS Code and open the explorer panel. Then we go to open folder, and open the folder that we just created. now this folder is currently empty, so let's add a new file here called index.html, as I told you before index.html often represents the homepage of websites.
So, let's go with that, now we can close the explorer panel by pressing command and b on mac, or control and b on windows. Now, the first thing we need to do here is to tell the browser that this is an html5 document, so we type left angle bracket now look at this suggestion list the first item here is doc type or Document type let's press enter or tab. Yes code generated this piece of code for us So with this line of code we can tell browsers that this is an HTML 5 document This line of code here is called doc type declaration in the previous versions of HTML our doc type declaration was so long It was so messy, but HTML 5 solved this problem. So all we have to type is doctype html. And by the way, html is not a case sensitive language, which means it's not sensitive to uppercase and lowercase letters.
but conventionally speaking, we type everything in lower case, except doc type, this is just a convention. We could type this in lower case, and that's perfectly fine. So let's revert it back, now, right after this, we need to use our HTML elements to define the structure of this webpage. The first element we're going to use is the HTML element.
So we type HTML, and then press tab or enter, once again, VS code generated this piece of code for us. So, what we have here on the left side is called the opening tag, and what we have on the right side is the closing tag. So most HTML elements have an opening and a closing tag, but there are exceptions as I'm going to show you later in this video. Now inside this element, we're going to add additional elements.
Now because I don't want to type everything in one line, I'm going to press enter, that's better. Now here we're going to add two elements, head and body. So once again we type head, press tab, good, and then body, we use the head element to give browser information about this page.
For example, here we can use the title element to specify the title of this page that appears in the browser over here. So, let's type my first web page, now let's save the changes by pressing command and s on mac, or control and s on windows. Good, now before going any further, let's right click somewhere and go to open, with live server.
So we're going to open this page using the development server that we just installed. Okay? Alright, take a look. So our page is currently empty because we haven't added any elements inside this page, and over here, we can see the title that we just typed. My first webpage.
Now look at the URL or address of this page. We have this number, or this IP address, represents the local computer, it's globally known, so everybody knows references the current computer. After that we have a colon, and then we have the port number on which our web server is listening. So our web server is waiting for HTTP requests on this port. Okay?
Then we have a forward slash followed by the name of our file, index.html. Now, active VS code, inside the body element, add elements that would appear on our page. So let's say we want to display a tweet. What elements do we need here?
An image and some text elements. So we type img, short for image, and then press tab, here's our image element. Now this image element is different from the other elements we have created so far. Can you tell the differences?
There are two differences here. The first difference is that here we don't have a closing tag. We only have an opening tag.
because the image element cannot have any child elements, that's the reason. Now in the previous versions of HTML, we used to add a forward slash here, and this represents a self closing tag, but we don't have to do this in HTML5, so I'm going to keep the code simpler. Now, here we have two attributes, source and alt.
With these attributes, we can supply additional information about an element. So we use the source element to specify the path to our image. So let's open up the explorer panel one more time by pressing command and B on Mac, or control and B on Windows. Here I'm going to create a new folder called images. Now for this demo I'm going to use my own image, which you can also download right below this video, but you can use any image that you want.
So here's my image, I'm going to drop it onto the images folder. It's right here. Now let's close this window.
good, so where is this image relative to our index.html file? It's inside the images folder, right? So here in double quotes we type images slash mosh.jpg now vs code is suggesting this name, so we can press tab to complete the code, beautiful. Now alt is short for alternative text and we use this attribute to give the browser some text to display in case the image cannot be displayed.
we'll talk about this in more detail in the future. So for now I'm going to delete this attribute, good, now after the image, we're going to add a text element. So we type p, that is short for paragraph, tab, and here we can type my twitter handle, so at mosh hamadani, after that we're going to add another text element, and here we can type the body of our tweet. So I love to teach you html.
Perfect. save the changes, now back in the browser, our page refreshed automatically. This is one of the beauties of live server.
So we don't have to manually refresh the page every time we make changes. Now, look at what we have here. So we have my image, and right below that we have two text elements.
Take a look, unfortunately they are not very visible. Obviously, this doesn't look like a tweet, because we haven't applied CSS yet. As I told you before, we use HTML to define the structure or the building block of our web pages.
In the next lesson, I'm going to show you how to apply CSS, so our page looks kind of like a real tweet. Alright, now let's see how we can use CSS to improve the look and feel of this page. Look at our head element.
Currently we have a single element inside the head element, that is our title element, right? Now after the title, we're going to add another element called style. This is where we're going to write our css code. So in between style tags, we're going to write a bunch of css rules.
First we're going to work on this image. Our image is currently too big, so let's make it a bit smaller. Back to VS Code, over here, we're going to type img to reference our image element. Then we type a pair of curly braces, and inside the braces we write one or more css declarations. Each declaration contains a property and a value.
So here we can set the width property to let's say 100px. So we type the property, colon, and then the value. And then we terminate this line using a semi colon.
So we can write multiple CSS declarations. Now let's save the changes back in the browser, our image looks smaller, that's a lot better. But look at the edges, the edges are so sharp, I would like to make them a bit round so they appear softer.
Now back to our rule, here we're going to set the border dash radius property to let's say 10 pixels. Now don't worry about memorizing any of these properties, we're going to go over them several times throughout the course. In this lesson, I just want you to get a sense of what it's like to use CSS.
Okay? So, save the changes, now look, the edges are round and look softer. Now let me show you a trick.
If we set border radius to a value that is half of the width, we'll get a round image. so, I'm going to set this to 50px, and here's the result. That's a lot better.
Now our elements are stacked vertically, I want the image to be pushed to the left side, so let's set the float property to left, this will push the image element to the left side of our text elements, take a look. So, that's a lot better, but our image is so close to the text, I want to add some space after the image, so here we use another property called margin-right. We can set it to 10 pixels.
Save, and that's a lot better. Now, let's make the username bold. So we're going to repeat one more time.
This time we're going to apply a rule to our paragraph element. So, here we're going to set the font-weight property to bold. Take a look.
See what happened? Both our text elements are bold. But, what if you want to apply this style only to the username?
Well, we have to separate these two paragraph elements. So I'm going to give the first paragraph element an attribute called class. So class equals double quotes. Class is short for classification and we can use this attribute to put this element inside a different class or a different category. Just like the products in a supermarket.
In a supermarket, we have products in different categories, right? So I'm going to put this paragraph element inside a class, or inside a category called username. And then, I'm going to change this rule, so this rule is currently applied to all paragraph elements, but I want it to be applied only to paragraph elements with a username class.
So right after p we type.username. Now we can also remove p, and this rule will apply to all elements that have the username class. whether there are paragraph elements or other types of elements.
Okay? Now save the changes and take a look. So that's a lot better.
So this is CSS in action. As you can see, CSS has a different syntax or a different grammar than HTML. Throughout the rest of the course you're going to learn both these languages in detail. Next I'm going to show you how to format your code using prettier. Hey guys, Mosh here.
I just wanted to let you know that this video you've been watching is the first hour of my ultimate HTML and CSS series. So after you watch this video, if you want to learn more from me, you can enroll in the full course, which is about 13 hours long and covers everything you need to know to build professional quality websites with HTML and CSS. It also includes summary notes, exercises, a real project, a certificate of completion you can add to your resume, and a 30-day money-back guarantee. get a refund if you're not satisfied. So you have nothing to lose and a lot to learn.
So if you're interested, I put the link in the description box. One thing you need to know about browsers is that they ignore white spaces in HTML and CSS code. For example, I can put all these elements on a single line and everything still works. Let me show you, so save the changes, back in the browser, we have the same result as before. Because browsers don't care how we format our code.
But formatting is very important when it comes to reading and maintaining code. We want our code to be beautiful and perfectly formatted just like an article. This is where we use the Prettier plugin.
With Prettier, we can format our code in a consistent fashion. This is super important when you're part of a team because different people have different ways of formatting their code. But if everyone on the team uses the Prettier plugin, the code will be consistently formatted.
So, let me show you how to use pre-layer. On the top, we go to the view menu, look at the shortcut for the command palette. On Mac, it's shift command and p, on Windows it's probably shift control and p.
So let's bring up the command palette, and here we search for format document. Now, we press enter. We get this message saying there are multiple formatters for HTML files.
Select the default formatter to continue. the reason we're getting this message is that vs code by default comes with a formatter for formatting html files but we have installed prettier which is a separate formatter so let's go to configure and tell vs go to use prettier to format html and css files okay now prettier formatted my code so none of those elements are on the same line this is a lot better but let me show you a trick we don't want to format our code every time we make a change So we can configure VS code to automatically format the code the moment we save the changes. So on the top, let's go to the code menu, then preferences and settings.
And here, search for format and save. Here's the setting, let's enable this setting, now, every time we save the changes, VS code automatically formats our code using pre-dir. Earlier we talked about the DOM or document object model. I told you that when the browser reads the HTML document that is returned from the server, it constructs a document object model. Now let me show you this document object model in action.
So once again we're going to use Chrome DevTools. The shortcut on Mac is shift command and I. On Windows it's probably shift control and I. I'm not really sure.
So let's open up DevTools. Now in this lesson we're going to look at the elements tab. Now what we have here on the left side is our document object model.
So we see the same elements that we created earlier in the course. We have the html element, head, body, and so on. But we have some additional elements that are injected by live server.
For example, we have the script element and two divs. Don't worry about these, these are purely used by live server, so it automatically reloads our page. Now we can hover over any of these elements and you can see that element highlighted on the screen. Now we can click an element and on the right side we can see the styles applied to this element. So look at the styles we defined for the image element, width, border radius and so on.
We can enable or disable these styles, so we can disable the width property, and now our image is big, we can bring it back, we can also change its value, so we can set it to let's say 50px now our image is smaller, we can use the up and down arrows to change this value, this is pretty handy. So a lot of front end developers use dev tools to play with these styles and get the look they want. Once they figure out the exact styles and their values, then they apply them in the code. Now one more thing, over here, you can see where these styles have been applied. So, in index.html on line 6, we can click on this link, and this takes us to the exact line of code where we wrote that style.
Now we are currently on the sources tab, so, go back to elements and inspect other elements. So this is the basics of inspecting elements using devtools. We're going to talk about this in more detail in the future.
The last thing we're going to cover in this section is validation. So as we write code, we may run into problems. If you have a typo in our code, or don't use the right syntax or grammar, our web pages may not look as expected. In this situation we can use a validator to identify the potential errors in our code.
Like currently we don't have any problems on this webpage, it looks perfectly fine to me, but let's run it by the standard html validator. So we go to validator.w3.org, this is a standard markup validation service, we have three methods for validating our html markup. We can validate by an address, if our website is live on the internet, but this doesn't work for us, because our website is currently hosted locally in our development server.
So this IP address that we have over here, this is a local IP address. So no one else can access our website. So here we have two other methods.
We can validate by file upload or by direct input. In this case, I'm going to go with file upload. So let's upload our index.html file and check.
So look, we have one warning and two errors. The warning is saying that we haven't added the lang or language attribute to the html star tag. This is a common best practice because with this we can tell search engines what is the language of this webpage. So they can do a better job at displaying the results.
This is very easy to fix. So, here's our html tag, we're going to add the lang attribute and set it to en which is short for english. Now, what is next?
We have an error saying the character encoding was not declared. Don't worry about this, we'll talk about this in the next section. So let's look at the second error. It's saying that an image element must have an alt attribute.
So earlier we had this alt attribute, I told you that, use the alt attribute to provide a description for our image. So if the image cannot be displayed, the alternative text will be displayed. Again, we're going to talk about the alt attribute in more detail in the future. So back to our code, Let's fix this error real quick, here's our image tag, let's add the alt attribute, and for the description I'm going to say an image of mosh hamadani. Now save the changes, let's re-upload the file and validate it one more time.
Okay? This time we have only a single error, and that has to do with character encoding, which we're going to talk about in the next section. So this is all about html validation. Now for css we have a different validator, so we go to jigsaw.w3.org slash css dash validator, now you don't have to memorize this address, simply go to google and search for css validator, here's the first link, so we have the same interface we can validate our css code using an address or by file upload or direct input, now in this case we have embedded all of our css code inside our html markup.
But as our web pages get more complex, we want to separate our CSS code into separate files, so our code is better organized. We'll talk about this in more detail in the future. So for now, I'm going to copy all of our CSS code, and then go to the third tab, paste it over here, and validate it. So we don't have any errors, everything is perfect. So this is all about validation.
Validation is very important. If your web pages aren't displayed as expected, always start with a quick validation because this can often point you in the right direction. Alright, that brings us to the end of this section. In the next section, we're going to explore HTML in more detail. We're going to continue our web development journey and explore HTML in more detail.
So in this section, we're going to cover the essential HTML elements you need to know to build web pages. You will learn all the elements used for displaying text, links, images, lists, tables, as well as container and structural or semantic elements. Even if you know the basics of HTML, I would still encourage you to watch this section thoroughly, because a lot of people don't use these elements the right way.
So, let's jump in and get started. Earlier in the course, I told you that we use the head section to give browsers and search engines information about a webpage. So let's explore it in a bit more detail.
I'm going to start with a blank document, now let me show you a cool trick. If we type an exclamation mark and then press tab, we get a basic HTML boilerplate, which means a basic HTML template. So on the top, we have our doc type declaration, below that we have our HTML element with the lang attribute, which is a common best practice, next we have our head section, with a bunch of elements we're going to talk about in a second, followed by the body section.
So this is a very basic HTML boilerplate. Now what do we have in the head section? Well, we have a couple of meta elements for giving information about this webpage.
The first meta element is for defining the character set. What is a character set? Well, computers don't understand characters like ABC and so on. They only understand numbers which are represented in the binary format, 0s and 1s.
So using a character set, we can map a character to a numeric value. The first character set that was designed was the ASCII character set, which is short for American Standard Code for Information Interchange. ASCII can only represent the characters in the English language. So it's very limited.
So over here, different character sets have been created to represent more characters in international languages. The character set that we use most of the time these days is UTF-8, which can represent almost all characters in the world. So back to our code, with this meta element, we're defining the character set used in this HTML document.
Now, below that we have a meta element for configuring the viewport. The viewport is the visible area of a webpage. So, it is this area over here. Obviously, on a mobile device or on a tablet, our viewport is smaller. But here on desktop, we can change the size of the viewport by resizing the browser.
So now, our viewport is smaller. Okay, now back to our code. With this element, we're defining the initial width and zoom factor for the viewport.
We'll talk about this in more detail in the future. For now, all I want you to know is that we need this element so our webpages look good on all devices, mobiles, tablets, and desktop computers. So as a best practice, every web page should have at least these two meta elements. But we have additional meta elements, let me show you. So if you type meta, in this list you can see all possible meta elements, for example, we have this element for defining keywords on a web page.
So let's select this, here we can type multiple keywords like html, comma, css, and so on. In the past, these keywords were heavily used for search engine optimization, but these days, most search engines don't put too much weight on these keywords, but we can still use them to define the keywords that represent this page. We have another meta element for defining a description for this page.
So if you type meta colon desk and then press tab or enter, here we can type a description for this page. What we type here will appear on Google or other search engines when someone searches for our website. For example, if we search for apple, here's what we get, now look at this text, what you see here comes from this element over here.
So this is the purpose of meta elements, with this meta element, we can give information about a webpage. Alright, next we're going to talk about the elements you need to know for working with text. Alright, now let's talk about the most common elements for working with text.
So you learn about the p or paragraph element, which we use for displaying some text. So here I'm going to say, I love to teach you HTML. Now sometimes we want to emphasize a part of our text.
Let's say the HTML word here. To do that, we can wrap it inside an m or emphasis element. So here I type m, press tab, here's the emphasis element, let's hover over it and see what the tooltip says.
It says the m element represents stress of its content. So whenever we want to emphasize some content, we can wrap it inside the m element. So in this case, I'm going to move HTML inside these tags.
Now, let's save the changes, here's what we get. So by default, browsers display emphasized content in italic. But don't assume that whenever you want to display italic content, you should use the m element. Because the purpose of the m element is to emphasize content in our html document.
And this helps search engines extract important content in our documents. Anything to do with styling should be done in CSS. example, here we can change the default style of emphasized elements and remove the italic, let me show you. So in the head section, we add the style element, and here we define a rule for emphasized content. We can set the color to red, and font style to normal.
Now don't worry about memorizing any of these CSS properties, we're going to go over them multiple times throughout the course. But let's see what happens now that we apply these styles. So, our emphasized content is displayed in red, and it's no longer italic. Now in the past we had an element called i, which was short for italic, if we use this element, we get the same result as before.
Our content is displayed in italic, but this element is considered deprecated because HTML is not meant for styling. It should only be used for structuring content. So don't use the i element to display content as italic.
Now we have a similar element in HTML called strong. Let's hover over it and see what the tooltip says. The strong element represents strong importance, seriousness, or urgency of its contents. Conceptually it's kind of similar to the emphasis element, so where you should use it really depends on your context, on your content.
Now let's save the changes and see what we get. So by default, strong elements are displayed as bold. But once again, we can always change the styling. Now in the past we had another element called b, which is short for bold, so whenever we wanted to make something bold, we use this element. But once again, this element is considered deprecated, because styling should be done in CSS and not in HTML.
So don't use b or i elements. Now, I'm going to remove this element, and just add HTML, let me show you a cool trick. Let's say we want to wrap this word with the m element.
there is a shortcut for it. So on the top, we go to the view menu, look at the shortcut for the command palette. On Mac it's shift command and P, and on Windows it's probably shift control and P. So let's select HTML, and then bring up the command palette.
With this command palette we can execute commands in VS code. So here I'm going to search for a command called wrap with abbreviation. That is the first command on the list. Now we press enter, and here we type the element that we want to use to wrap our selected content.
In this case, m. Press enter, done. So I didn't have to manually create an m element and then move html inside it.
It's very handy. So this is all about text, now let's talk about headings. So in html we have 6 heading elements.
h1, we have h2, h3, h4, h5, and h6, so let's see what we get. So heading 1 represents the most important heading, and heading 6 represents the least important heading. Now one common mistake that I see amongst a lot of people is that they choose these headings based on their size.
So if they want to have a heading with this size, they would just use heading 4, that is not how you're supposed to use headings, because the size can always be changed with css. it's a matter of styling, we should use these headings to create a hierarchy. So every webpage should have one and only one h1 element. This heading represents what this page is all about. Now nothing happens if you have multiple h1 elements, for example, I can duplicate this line and say heading 1 plus.
Now look, we have two h1 elements, but this is going to confuse search engines. They are not going to figure out what this page is really all about. So, every page should have a single h1 element.
So I'm going to remove this line, now after we use h1, then we should use h2, we should not jump to h4. So let's say on this page we're going to have two sections, one for html, the other for css. So my next heading should be h2, and here we can type html, obviously below this heading we can have some text, so I'm going to say html tutorial. our next heading should be h2.
So, this is the css section, and in this section we can have some additional text, let's say css tutorial. Now I'm going to delete these four headings, so let's take a look. So we have a hierarchy, on the top we have an h1 element, below that we have two h2 elements.
Now let's say in this section we're going to have two subsections, there we should use h3 elements. So, here's our html section in this section we're going to have two h3 elements let's say code and exercise, now take a look. So we have a hierarchy, this is how we should use these heading elements.
The better we can represent the structure of our document using html, the better search engines can read and understand our content. So that's all about text, next we're going to talk about displaying special characters in html. Some characters are reserved in HTML, and to display them we have to use a special notation. For example, let's say we want to wrap the word HTML with angle brackets.
See what's going to happen. So I type a left angle bracket, and a right angle bracket. See what happened? VS Code thought we were adding an HTML element, so it automatically generated the closing tag.
We don't want this, so let's delete it. Now, back in the browser. Look, where's our HTML word?
it's not here because the browser interpreted this as an html tag. This is not what we want, we want to display this exactly as it is. So to solve this problem, we're going to use html entities. All these entities start with an ampersand and end with a semicolon.
In between these two characters, we type a few characters that determine the type of the html entity. So we have an entity for displaying the less than sign, that is lt. short for less than. Now let's remove this, similarly we have another html entity for displaying the greater than sign, so we type an ampersand, gt, which is short for greater than, followed by a semicolon. Now, back to the browser, that's exactly what we wanted, perfect.
Another common html entity is the copyright symbol. So at the end, I'm going to type an ampersand, copy, and a semicolon. I'll take a look. Here's our copyright symbol, beautiful. Now we have so many entities in HTML, and quite frankly, you don't need to memorize any of them.
In fact, you're not going to use 99% of them. But in case you're curious, let me show you the complete list. So on Google search for HTML entities, and on this second link, dev.w3.org, you can see the complete list of these entities. So as you can see, there are so many entities, and Honestly, I have never used any of them. The only ones I have used are these three plus non breaking space Let me show you what that is about.
So I'm going to do this line and generate some dummy text So we add a paragraph element now to generate some dummy text we type lorem Followed by the number of words we want to generate let's say 50 tab Look, this is some dummy text in Latin. Now. Let's preview it in the browser so here's what we get, let's imagine that the last word on the first line and the first word on the second line should be stick together, here we have a line break in between these two words, we want to prevent that, so I'm going to copy this word, now, here in VS code, let's bring up the search panel by pressing command and F on mac, or control and F on windows now we paste this word, okay, here it is, we want to make sure that these two words are always together. there is no line breaking between them.
So, I'm going to replace this regular space with a non-breaking space, which is an HTML entity. So we type an ampersand, nbsp, which is short for non-breaking space, followed by a semicolon. Now take a look. So, both these words are in the second line. So this is all about HTML entities, next we're going to talk about links.
Almost every web page on the internet has links to other pages or websites. To create these links, we use the anchor element. So we type a that is short for anchor, and then press tab.
Now every anchor element should have an href attribute. Href is short for hypertext reference. I know, it's a mouthful. It basically means a URL or a link. So for this demo, I'm going to create a second page called about.html and then link to it over here.
So, here in the explorer panel. let's add a new page called about.html. Now here we're going to create a basic html boilerplate.
Remember how to do that? We type an exclamation mark and then press tab. That's it, beautiful.
Now back to index.html, here we can use a relative or an absolute url. What do you mean by that? Well, a relative url starts from the current page. So currently we are on index.html and we want to go to about.html.
Now, currently both these pages are in the same folder, so we can type a relative URL to about.html like this. About.html. That's a relative URL.
Now what if about.html was in a different folder? So let's add a new folder to our project called company, and then move about to this folder. Now where is about.html relative to the current page?
It's inside the company folder, right? So here we type company slash about.html, this is a relative url, now let's give this link a text, I'm going to say about me, so we type our text inside the anchor element, ok save the changes, back to the browser, here's our link, click and we're currently on the about page, which is empty, beautiful, now back to our homepage, instead of a text we can also use an image, so I'm going to delete about me, and add an image element, so img tab, once again here we can type a relative URL to our target image. So I'm going to go with images slash mosh.jpg, save, take a look. Obviously this image is way too big, we can always use CSS to resize it. But that aside, look at the mouse icon when we hover over this image.
It changed to a hand to indicate that this image is clickable. Okay, now back to our code. to keep things simple, I'm going to get rid of this image and get back to our text, about me. Now let's go to the about page and add a link back to the home page. So, over here, we're going to add an anchor element, what should we type for the href attribute?
Well, currently we are inside the company folder, we have to go one level up so we can access index.html, right? To do that we type double periods and a forward slash. with this we can go one level up.
Now at this level which is the root of our website, we have the company folder, the images folder, and index.html. So we can reference index.html, and for the text we're going to say homepage. Again, this is another example of a relative URL, because it starts from the current page and goes somewhere else. Now if you're inside a deeply nested folder structure, you might have to go multiple levels up. So double period and a forward slash, then we repeat, and repeat, with this we can go three levels up.
Now as you can see, urls like this kind of look messy, they look hard to read. In those cases we can use an absolute url. So, we start with a forward slash, and this represents the root of our website.
Now at this level we have access to index.html. So this is an absolute url. Now, back to index.html, here we are linking to an html document. But we can also link to non-html documents like images, pdfs, powerpoints, and so on. So let's add a link to my image, so for the href I'm going to say images slash mosh.jpg, and for the text I'm going to say my photo, save, take a look.
So here's our second link, click, my image is displayed in the browser. But what if I want to prompt the user to download it? That's very easy. We're going to add the download attribute to our anchor element, so we type download, press enter, now this attribute doesn't have a value, so we can remove the double quotes and the equal sign, so we just add the attribute name, now save, back to the browser, we go back, here we have to manually refresh the page, because the live server only refreshes the current page, now previously we were on my image, so that was the URL that live server refreshed, so here we refresh, to get the latest changes, now when I click on this link, instead of seeing my image, we're going to see my image getting downloaded, take a look, click, and here's my image, beautiful, now we can also link to other parts of this page, so let's create two sections with a lot of text, so I'm going to add an h2 element, and of course I missed the h1, but let's not worry about it, for this h2 we're going to say html, and below that we're going to add some dummy text with 200 words, so paragraph, lorem, 200, good. Now right after that we're going to add another h2 for the css section with some more text.
Okay? Let's save the changes, take a look, as you can see the css section is below the fold, so we have to scroll down to see. What we can do here is on the top we can add a link to the css section. So when the user clicks on that, they will immediately jump to the css section.
That is very easy. So here's the CSS section. First, we have to give this element a unique identifier.
just like everyone in the real world can have a unique identifier, like a driver's license or a password, every element on a page can also have a unique identifier. So here I'm going to set the id attribute to css, or we can use a more descriptive name like section dash css. The name doesn't really matter here, what matters is that we're defining what is called a fragment, or a place on this page. Now, we're going to add a link to this fragment.
So on the top, let's add another anchor element, now for the href we're going to type a pound sign followed by the name of our fragment which is section-css, and for the text we're going to say css now, back to the browser, take a look, I'm going to click on this we immediately jump to the css section, beautiful. Now a lot of websites like this also have a link that helps you jump to the top of the page let's see how we can create that So after the CSS section, I'm going to add another anchor element, now for the href, I'm going to use an empty fragment, so we just type a pound sign without an identifier, and then we say jump to top, take a look. So here's our link, click, and now we're on top of the page. Now let's see how we can link to external websites. So let's add another anchor element to link to Google.
Now what should we type here? Well, google.com is a different website, so here we cannot use a relative url, we have to use an absolute url, but if you start with a forward slash, you're referencing the root of our website, but in this case, we want to go to a different website, how can we do that? Well, we have to start with a protocol, so, https colon, two forward slashes, google.com, now let's type google, and test our page, click, we're on google, beautiful, now sometimes when linking to external websites we want that link to open in a new browser window, or a new tab. Let me show you how to do that. So, here's our anchor, we set the target attribute to underline blank.
See? Now, back to the homepage, once again we have to manually refresh to get the latest changes. Okay?
Now, when I click on google, you see a new tab. Beautiful. And one last thing. we can also link to emails.
So I'm going to add an anchor, and for href I'm going to say mail to colon programming with mosh at gmail.com. Email me. Save the changes, now back to our page, when I click on this link, my mail client will open and my email address will be pre-populated.
Take a look. So click, and here's my mail client. So this is all about links. Now one last thing before we finish this lesson, what is the difference between a link and a hyperlink?
Well, a link is just an address, a URL, the location of the target page. A hyperlink is the element that the user can click on to navigate to that target page. That is the difference between a link and a hyperlink. But quite often, these terms are used interchangeably.
Alright, we're done with this lesson, next we're going to talk about images. Alright, now let's talk about embedding images in a bit more detail. For this lesson, I'm going to grab an image from unsplash.com which is where we can find a lot of beautiful and freely usable images. So let's search for coffee, there are tons of coffee pictures here, I'm going to grab this picture, we can download it for free, now look this image comes in different sizes, small, medium, and large.
For now we're going to grab this image in a small size, but in the future we're going to talk about embedding images at different sizes depending on the device. So on mobile devices, we want to serve a smaller image, and on desktop computers we want to serve a larger image. For now let's not worry about these complexities, we'll have a complete section on this topic later on. So let's download the small image, now it says say thank you to Nathan, thanks Nathan, this is a beautiful picture you have done a great job. Now I'm going to drag and drop this image onto the images folder, and then rename it to coffee.
We want to give it a descriptive name. This is a small search engine optimization tip. When we provide descriptive names for our images, search engines can better understand and index our pages. So here's our image.
Now, let's add an image element. We set the source to images slash coffee.jpg. Now, what about the alt attribute?
Well, I briefly mentioned that we use this attribute to provide textual description of the image. it's not compulsory, but it's highly recommended for a number of reasons. The first reason is to make our page accessible to visually impaired people. These people use a screen reader to read the web out to them.
So with this alternative text, we can tell them what we are showing on the page. And that means we should write a good meaningful description here like a coffee mug on a table. Don't write something like image or image 1, that is pointless. Now the second benefit of providing an alternative text, is that we help search engines read this text and understand what we're providing here. And there's one more benefit, if this image cannot be loaded for some reason the alternative text is shown.
Let me show you what I mean. So, I'm going to add a typo here, now, back to the browser, look, the image is not loaded, but we see the alternative text. This can also happen if there is a network connectivity issue.
If the user gets disconnected they can still see the alternative text. So, let's remove the typo, now let's talk about sizing images. As I told you before, we can use CSS to resize our images.
So here in the head section, let's add a style element, and apply a rule to our image. Now this rule is applied to all images on the page, this is probably not something we want to do in a real world scenario. In a real world scenario, we want to apply a class to this element, and then define rules for that class.
We'll talk about this in more detail in the future. So for now, let's give this image a width of 200px and a height of 200px. Now, there is a tiny problem in our image, can you tell? Our image is kind of squashed, here is the reason, we are dealing with a rectangular image, look, this is a rectangular image, but we are converting it to a square image, now look at the shape of this coffee mug, it's kind of round, right?
Now compare it with what we have over here, our image is vertically squashed, Let me show you another way to verify this. We can right click on the image, and then go to inspect, this opens chrome dev tools and selects our image in the DOM. Now on the right side, we can see the styles that we applied to this element.
Now I'm going to disable the height property, and I want you to pay close attention to the image and see how the shape changes. So look, now the coffee mug is more round, but if I apply the height property, it becomes squashed. So how can we solve this problem?
Well, we have a new property in CSS called object fit. So here we can set object fit to one of these values. Most of the time we use cover, so the image covers its containing box. What is this containing box? Well, first let me set this to cover.
Here we have this image element, right? Conceptually there is a box around every element in an HTML document. We don't see this box, but the browser uses that box figure out how the page should be displayed.
So here we have a box with this dimension, 200x200, and in this box we're trying to insert this image. Right? Now when we set object fit to cover, our image will get resized and potentially cropped so it covers the entire containing box.
Let's verify this. So save the changes, and back in the browser, look our coffee mug is round, but if I disable the object fit property, it gets squashed again. object fit is a very useful property. Now we can always play with all possible values over here. So, I'm going to select this, delete it, now using the up and down arrows, we can go through this list, and see the impact of every value.
Now I'm not going to go over all these values and explain what they mean, this is pointless, you can always figure them out on your own. Just remember that most of the time we use cover, so the image covers the entire containing box. Alright, this is all about the images for now. Next we're going to talk about video and audio.
Hey guys, Mosh here. I just wanted to let you know that this video you've been watching is the first hour of my ultimate HTML and CSS series. So after you watch this video, if you want to learn more from me, you can enroll in the full course, which is about 13 hours long and covers everything you need to know to build professional quality websites with HTML and CSS.
It also includes summary notes, exercises, A real project, a certificate of completion you can add to your resume, and a 30-day money-back guarantee to get a refund if you're not satisfied. So, you have nothing to lose and a lot to learn. So, if you're interested, I put the link in the description box.