HTML Tutorial for Beginners: HTML Crash Course

0:04 Welcome to the first part of the ultimate HTML and CSS series.

0:08 In this series, I'm going to take you on a journey and teach you all the skills

0:11 you need to build fast and beautiful websites

0:14 that look great on all kinds of devices.

0:16 I'm assuming you know nothing about HTML

0:18 or CSS and want to learn everything from scratch.

0:21 So, in the first part of the series,

0:23 we're going to talk about the fundamentals of web development with HTML and CSS.

0:27 In the second part, we'll explore the advanced concepts.

0:30 And in the third part, we'll put everything together and build a beautiful,

0:34 responsive, and blazingly fast website

0:37 for an imaginary cloud hosting company called Moshify.

0:41 If you want to play with this website,

0:42 just head over to moshify.com and see it for yourself.

0:45 This is what you're going to build in this series.

0:48 I'm Mosh Hamedani, and I've taught millions of people how to code

0:51 or how to become professional software engineers

0:53 through my coding school and YouTube channel.

0:56 If you're new here, be sure to subscribe as we upload new videos all the time.

1:00 Now, let's jump in and get started.

1:13 All right, let's talk about the tools you need to take this course.

1:16 For the starter, you need a code editor.

1:19 There's so many code editors out there like Visual Studio Code or VS Code,

1:23 Sublime Text, Atom, and so on.

1:25 In this course, I'm going to use VS Code along

1:28 with a few extensions for starting a web server and formatting our code.

1:32 You're welcome to use your favorite code editor if you know what you're doing,

1:36 but otherwise, head over to code.visualstudio.com

1:39 and download the latest version of VS Code.

1:42 Now, here inside VS Code, we're going to install a couple of extensions.

1:46 So, let's open the extensions panel and search for Prettier.

1:53 Here's the extension we're going to install, Prettier Code Formatter.

1:56 With this extension, we can format our code and make it pretty.

2:00 This is a very popular extension.

2:02 As you can see, it's been downloaded more than 9 million times.

2:05 So, over here you're going to have an install button.

2:08 Just click it and you're done.

2:10 Next, we're going to install another extension called Live Server.

2:16 With this, we can launch our website inside a development web server.

2:20 Again, this is a very popular extension.

2:22 It's been downloaded almost 8 million times.

2:25 Now, in addition to these, we're going to use

2:27 a browser to view and test our web pages.

2:30 Again, you can use your favorite browser, but in this course,

2:32 I'm going to use Google Chrome and I encourage you

2:35 to use the same browser so you can easily follow the course.

2:45 We're going to start our web development journey here.

2:47 In every section, you'll learn something new about

2:49 web development and by the end of this course,

2:52 you will put all of this together to build a beautiful web page.

2:56 In this section, we're going to talk about the fundamentals of web development.

3:00 You'll learn the languages and tools used in web development,

3:03 as well as the key concepts and vocabulary such as URL, HTTP, DOM, and so on.

3:09 We're also going to talk about how websites work,

3:12 so you will understand what exactly happens under the hood

3:15 when you use your browser to visit a website.

3:18 You will also learn how to inspect network traffic using Chrome DevTools,

3:22 which is a very powerful tool used by front-end developers.

3:26 We'll also talk about the basics of HTML and CSS and validating web pages,

3:31 which is something a lot of developers miss.

3:33 This is going to be an awesome journey, so let's jump in and get started.

3:46 This course is your first step towards becoming a web developer.

3:50 So, let me give you a simple road map

3:52 to know where you are and where you should go next.

3:55 Every website has two parts, a front end and a back end.

3:58 The front end is the part that you see

3:59 in your browser and interact with, all the visual aspects.

4:03 The back end is the part that powers the front end.

4:06 It's behind the scenes and it's mainly about storing

4:08 data in databases and providing it to the front end.

4:12 So, web development jobs fall into three main categories.

4:16 Front end development, back end development, and full stack development,

4:20 which involves both front end and back end development.

4:23 Front end developers use HTML, CSS, and JavaScript to build front ends.

4:28 Back end developers have different sets of tools available to them,

4:32 which is outside the scope of this course.

4:34 So, let's talk about HTML, CSS, and JavaScript.

4:38 HTML is short for HyperText Markup Language.

4:42 I know it's a mouthful,

4:43 but basically we use HTML to define the building blocks of our web pages.

4:48 CSS is short for Cascading Style Sheet and is

4:51 used for styling web pages and making them beautiful.

4:54 JavaScript is used for adding functionality to web pages.

4:57 Let me give you an analogy.

4:59 Think of a building.

5:00 A building in the real world is like a web page on the internet.

5:04 It has a skeleton or structure.

5:06 It can have pretty walls, windows, and tiles.

5:09 And it can have certain functionality.

5:11 For example, when we press the elevator button, it comes to pick us up.

5:17 Here's a real example.

5:19 Let's say you want to build a website like Twitter.

5:21 For each tweet, we want to have a layout like this.

5:24 So, first we use HTML to define all the building blocks of this layout.

5:28 What are these building blocks here?

5:30 An image, some text indicating the user's Twitter handle,

5:34 another block of text containing the message,

5:37 and three icons for commenting, retweeting, and liking the tweet.

5:42 We use HTML to add these building blocks to our web page.

5:45 Then we use CSS to give it visual effects.

5:48 For example, with CSS, we can make the font bold,

5:51 we can make our image round, we can add some padding around here,

5:55 we can change the color of these icons

5:57 and define their look when we hover over them.

6:00 So, CSS is all about aesthetics or visual effects.

6:04 With CSS, we can also create beautiful animations.

6:07 Now, most web pages these days are interactive.

6:10 They respond to our actions like clicks and scrolls.

6:13 This is where JavaScript comes in.

6:15 With JavaScript, we can add functionality or behavior to our web pages.

6:19 For example, we can like a tweet.

6:22 So, JavaScript is a programming language, while HTML and CSS are not,

6:26 meaning we cannot use them to tell computers what to do.

6:30 We use them to define the building blocks of our web pages and style them.

6:34 Every web page you have seen

6:35 on the internet is built with these three languages.

6:38 So, the better you learn and understand these languages and their features,

6:41 the better you'll be at front-end development.

6:45 So, your front-end development journey starts with HTML and CSS.

6:49 I would say, if you spend 3 to 5 hours every day studying and coding,

6:54 you should be able to have a reasonable understanding of these two

6:57 languages in about a month or a month and a half.

7:00 Once you learn these languages, then you need to learn JavaScript.

7:03 I have a separate series for learning JavaScript.

7:06 So, after finishing this series, you may want to enroll in that series.

7:09 I would say, learning JavaScript would probably

7:12 take another 6 weeks of your time.

7:14 Of course, you're not going to be a JavaScript expert in just 6 weeks,

7:18 but you'll have a reasonable understanding of it,

7:20 and you will learn more as you work on different projects.

7:23 So, the first 3 months is all about the fundamentals.

7:28 Now, building websites often include a bunch of repetitive tasks.

7:33 This is where front-end frameworks and libraries come in.

7:36 A framework or a library comes with a lot

7:38 of code that we can reuse in our websites.

7:41 So, they help us get the job done faster.

7:44 That's why a lot of companies these days use

7:47 one of these popular frameworks like React, Angular, or Vue.

7:51 Now, technically, React is not a framework.

7:54 It's a library.

7:54 But, subtle distinction aside, all these tools serve the same purpose.

7:59 They help us build applications faster.

8:01 Now, you don't need to learn all of these to get started.

8:04 Different companies use different tools for different projects.

8:07 So, as you move from one project to another,

8:10 you may want to learn about the other If you're starting out,

8:13 just focus on React because it's the most popular tool in this space.

8:17 Once you learn React, you can always learn the other tools if needed.

8:21 For React, you would probably need 1 to 2 months.

8:25 Again, I have a comprehensive course on React.

8:27 More than 40,000 people have taken this course and loved it.

8:32 All right, what's the next step?

8:33 Version control systems.

8:35 We use a version control system to keep track

8:37 of our project history and work collaboratively with others.

8:41 There are many version control systems out there like Git,

8:44 Subversion, Mercurial, and so on.

8:46 But, Git is the most popular tool in this space

8:49 and is used in more than 70% of software companies.

8:53 That's why you'll see it in almost every job description.

8:56 I would say you would probably need 2 weeks for learning Git.

8:59 And again, I have a comprehensive course for you.

9:02 So, these are the essential skills that every front-end developer must have.

9:06 You'll see these listed on almost every job description.

9:10 Now, different jobs require other skills,

9:12 but these skills vary from one company to another.

9:15 So, you can learn these additional things in the future or on the job.

9:19 For now, just focus on these four skills or four steps.

9:23 Remember, less is more.

9:25 Don't try to learn too many things quickly.

9:27 You won't learn anything.

9:28 You'll just waste your time.

9:30 All right, that's your road map.

9:31 Next, we're going to talk about how the web works.

9:41 Have you ever wondered how the web works?

9:43 In this lesson, I'm going to tell you exactly what happens the moment

9:46 you type the address of a website into your browser and hit enter.

9:51 As part of this, we're going to talk about a few important

9:53 concepts and terms that you need to know as a web developer.

9:57 So, let's say we launch our browser

9:59 and head over to a website like codewithmosh.com.

10:02 Now, this address that we have in the browser address bar is called a URL,

10:05 which for uniform resource locator.

10:09 Basically, it's a way to locate a resource on the internet.

10:12 Resources can be web pages, also called HTML documents.

10:16 They can be images, video files, fonts, and so on.

10:20 So, we type the URL of a website and hit enter.

10:22 What happens now?

10:24 Well, there are two pieces involved here.

10:26 The browser, also called the client,

10:28 and the computer or computers that host our target website.

10:33 We refer to these as web servers or servers for short.

10:36 This is what we call the client-server model.

10:38 The client requests a service, the server provides the service.

10:43 So, our browser sends a message to the server and says, "Hey,

10:46 give me the home page of this website." This is kind

10:49 of similar to how you send your friend a text message.

10:52 You can think of your phone as the client sending the message,

10:55 and your friend's phone as the server receiving the message.

10:59 Now, back to our example.

11:00 This message is formatted based on a protocol

11:03 called HTTP or Hypertext Transfer Protocol.

11:07 You've probably noticed it before, but never knew what it is.

11:10 In simple terms, HTTP is a language that clients

11:13 and servers use to talk to each other.

11:15 It's not a programming language,

11:17 it's just a plain textual language for communicating over the internet.

11:21 You also have HTTPS, which is HTTP with encryption.

11:25 So, the messages exchanged between the client and the server are encrypted.

11:29 Here's a simplified example of an HTTP message.

11:32 With this message, the browser tells the server what it's looking for.

11:36 So, on the first line, it says that it wants to get a page

11:39 or a file called index.html using HTTP version 1.1.

11:45 Index.html often represents the home page of websites.

11:49 On the second line, we can see the host, that is codewithmosh.com.

11:52 And on the third line,

11:54 we can see the language that the client can accept, in this case, English.

11:58 Now, don't worry about memorizing any of this.

12:00 All I want you to understand here is that this message

12:03 is structured based on the HTTP protocol that clients and servers understand.

12:08 So, the server receives this message, it figures out what the client is asking,

12:13 and then it will send a message back to the client.

12:16 The first message is called an HTTP request,

12:19 and the second message is called an HTTP response.

12:22 Every data exchange using the HTTP protocol involves two messages,

12:26 a request and a response.

12:28 Now, what is in the response?

12:30 Here's a simplified example.

12:32 On the first line, we see the version of HTTP protocol used,

12:35 followed by a number, which is the status code.

12:38 200 means successful or okay.

12:41 Right below that, we can see the date and time of the response.

12:45 Next, we can see the type of content the server is sending back to the client,

12:49 in this case, text/html.

12:52 And after that, we can see the HTML code

12:54 or the HTML document that represents the home page of codewithmosh.com.

12:59 Of course, the actual HTML code is way longer.

13:02 Now, as the browser reads this HTML document,

13:05 it constructs what we call a DOM or a document object model.

13:10 Don't let this fancy name scare you.

13:12 This is a model that represents the objects or elements in our HTML document.

13:17 What are these elements?

13:19 All the building blocks of our page,

13:20 like paragraphs of text, images, links, and other stuff.

13:25 You will see this in action in the next lesson.

13:27 Now, as the browser is reading this HTML

13:30 document that is returned from the server,

13:32 it discovers references to other resources in this document like images,

13:37 fonts, and other stuff.

13:38 Each of these resources has an address or a URL.

13:42 So, for each resource,

13:43 the browser sends a separate HTTP request to the server to fetch that resource.

13:48 Many of these HTTP requests are sent in parallel,

13:51 so we can see the page as quickly as possible.

13:54 Once the browser has all the necessary resources,

13:57 it will render the HTML document.

14:00 Rendering an HTML document means displaying it.

14:02 It's a fancy technical term we use often.

14:05 So, in a nutshell, our browser sends an HTTP

14:08 request to the server and receives an HTTP response.

14:12 This HTTP response contains an HTML document.

14:15 The browser reads that HTML document to construct

14:18 a document object model and render the page.

14:21 In the next lesson, I'm going to show you all of these steps in action.

14:31 All right, let's see HTTP requests and responses in action.

14:35 So, open up Chrome and head over to google.com.

14:38 Now, we need to access Chrome DevTools.

14:40 This is a very powerful tool used by front-end developers.

14:43 So, on the top, we go to view, developer, developer tools.

14:49 Now, look at the shortcut.

14:50 On Mac, it's alt or option, command, and I.

14:54 On Windows, it's obviously different,

14:56 but remember the shortcut because it's much

14:58 faster to access the DevTools via the keyboard.

15:01 So, here's the DevTools.

15:04 The first time you see it, it might appear a bit intimidating,

15:06 but trust me, it's much easier than you think.

15:09 Throughout the course, you're going to learn more about the DevTools.

15:12 So, here we have a few different tabs,

15:14 elements, console, sources, network, and so on.

15:17 In this demo, we're going to go to the network tab

15:20 so we can inspect the network traffic to and from google.com.

15:25 Now, by default, DevTools is docked to the bottom of the screen.

15:29 We can dock it to the left, to the right, or undock it as a separate window.

15:33 So, over here, we can dock it to the left side.

15:38 A lot of front-end developers like this layout,

15:40 so they put DevTools on the left side,

15:43 and they have their website on the right side.

15:45 Now, in this demo, I'm going to undock it as a separate window,

15:48 so we have more space to work with.

15:51 So, let's undock it.

15:53 Good.

15:54 Now, we need to refresh our website.

15:56 As you can see over here, on Mac, we can press command and R.

16:00 On Windows, it's probably control and R.

16:03 Alternatively, we can go back to this window and press the refresh button.

16:08 Now, back to the DevTools, look at all these items over here.

16:12 These are the HTTP requests that are sent from our browser to google.com.

16:17 As you can see, they're totally 45 requests,

16:21 and here's the amount of data transferred over the network.

16:25 So, in this case, just over 94 KB.

16:28 Now, look at the first item in this list.

16:30 This is the first HTTP request that Chrome sent to google.com.

16:35 As you can see, with this request, the browser wanted to get a document,

16:40 and the status of this request is 200, which means okay.

16:45 Over here, you can see the amount

16:46 of data transferred over the network for this request,

16:50 and the time it took to get the response.

16:53 Now, if we click on this request, we can see more details about it.

16:57 So, here on the headers tab,

16:58 we can see all the headers of our request and response.

17:01 So, here are some general headers, like request URL,

17:05 request method, which is get, status code, that is 200, we talked about it,

17:10 remote address, this is the numeric representation of google.com.

17:15 Now, down below, we have response headers.

17:17 There are so many headers here you don't have to worry about them,

17:20 but as an example, look at content type.

17:23 We talked about this in the previous lesson.

17:25 So, the type of this response is text/html.

17:29 Below that, we have the date and time of the response.

17:32 Now, if you click on the preview tab,

17:34 we can see a preview of the HTML document that is returned from the server.

17:39 So, this is the homepage of Google.

17:41 Now, in this HTML document,

17:43 we have references to other resources like images, fonts, and so on.

17:48 So, all these subsequent requests are sent to download those resources.

17:53 So, right below the first request,

17:55 we have a request for downloading a PNG or an image file.

17:59 Here's another request for getting another image.

18:02 We have two requests for getting two different fonts, and so on.

18:05 Now, we can easily filter this list.

18:07 So, let's click on the filter icon here.

18:10 By default, we see all requests, but we can filter by request type.

18:14 For example, we can select doc to see requests for downloading HTML documents,

18:19 or font to see the request that were sent to download fonts, and so on.

18:24 Next, I'm going to show you how to create your first HTML document.

18:35 All right, first things first.

18:36 Here on your desktop or anywhere on your computer,

18:39 right-click and create a new folder.

18:42 I'm going to call this HTML, but we could call it anything.

18:45 Now, let's go back to VS Code and open the explorer panel.

18:50 Then, we go to open folder and open the folder that we just created.

18:57 Good.

18:58 Now, this folder is currently empty,

18:59 so let's add a new file here called index.html.

19:04 As I told you before, index.html often represents the homepage of websites.

19:10 So, let's go with that.

19:12 Now, we can close the Explorer panel by pressing command

19:15 and B on Mac or control and B on Windows.

19:18 Good?

19:19 Now, the first thing we need to do here is

19:21 to tell the browser that this is an HTML5 document.

19:25 So, we type a left angle bracket.

19:28 Now, look at this suggestion list.

19:30 The first item here is doctype or document type.

19:34 Let's press enter or tab.

19:36 VS Code generated this piece of code for us.

19:39 So, with this line of code, we can tell browsers that this is an HTML5 document.

19:44 This line of code here is called doctype declaration.

19:47 In the previous versions of HTML, our doctype declaration was so long,

19:52 it was so messy, but HTML5 solved this problem.

19:55 So, all we have to type is doctype HTML.

19:58 And by the way, HTML is not a case-sensitive language,

20:02 which means it's not sensitive to uppercase and lowercase letters.

20:06 But, conventionally speaking, we type everything in lowercase except doctype.

20:11 This is just a convention.

20:12 We could type this in lowercase, and that's perfectly fine.

20:15 So, let's revert it back.

20:17 Now, right after this, we need to use

20:20 our HTML elements to define the structure of this webpage.

20:24 The first element we're going to use is the HTML element.

20:27 So, we type HTML and then press tab or enter.

20:31 Once again, VS Code generated this piece of code for us.

20:35 So, what we have here on the left side is called the opening tag,

20:38 and what we have on the right side is the closing tag.

20:42 So, most HTML elements have an opening and a closing tag,

20:45 but there are exceptions, as I'm going to show you later in this video.

20:48 Now, inside this element, we're going to add additional elements.

20:52 Now, because I don't want to type everything in one line,

20:54 I'm going to press enter.

20:56 That's better.

20:57 Now, here we're going to add two elements, head and body.

21:00 So, once again, we type head, press tab.

21:03 Good.

21:04 And then, body.

21:06 We use the head element to give browser information about this page.

21:10 For example, here we can use the title element to specify

21:15 the title of this page that appears in the browser over here.

21:19 So, let's type my first web page.

21:22 Now, let's save the changes by pressing command

21:24 and S on Mac or control and S on Windows.

21:28 Good.

21:29 Now, before going any further,

21:31 let's right-click somewhere and go to open with live server.

21:35 So, we're going to open this page

21:37 using the development server that we just installed.

21:40 Okay?

21:42 All right, take a look.

21:44 So, our page is currently empty because

21:46 we haven't added any elements inside this page.

21:49 And over here, we can see the title that we just typed, my first web page.

21:54 Now, look at the URL or address of this page.

21:57 We have 127.0.0.1.

22:01 This number or this IP address represents the local computer.

22:05 It's globally known,

22:06 so everybody knows 127.0.0.1 references the current computer.

22:11 After that, we have a colon.

22:13 And then we have the port number on which our web server is listening.

22:18 So, our web server is waiting for HTTP requests on this port.

22:23 Okay?

22:23 Then we have a forward slash followed by the name of our file, index.html.

22:28 Now, back to VS Code, inside the body element,

22:32 we're going to add elements that would appear on our page.

22:36 So, let's say we want to display a tweet.

22:38 What elements do we need here?

22:39 An image and some text elements.

22:42 So, we type img, short for image, and then press tab.

22:47 Here's our image element.

22:48 Now, this image element is different

22:50 from the other elements we have created so far.

22:53 Can you tell the differences?

22:55 There are two differences here.

22:56 The first difference is that here we don't have a closing tag.

23:00 We only have an opening tag because

23:02 the image element cannot have any child elements.

23:05 That's the reason.

23:06 Now, in the previous versions of HTML,

23:08 we used to add a forward slash here, and this represents a self-closing tag.

23:14 But we don't have to do this in HTML 5, so I'm going to keep the code simpler.

23:19 Now, here we have two attributes, source and alt.

23:24 With these attributes, we can supply additional information about an element.

23:28 So, we use the source element to specify the path to our image.

23:33 So, let's open up the explorer panel one more time by pressing

23:36 command and B on Mac or control and B on Windows.

23:40 Here, I'm going to create a new folder called images.

23:45 Now, for this demo, I'm going to use my own image,

23:47 which you can also download right below this video,

23:50 but you can use any image that you want.

23:52 So, here's my image.

23:54 I'm going to drop it onto the images folder.

23:58 It's right here, okay?

23:59 Now, let's close this window.

24:01 Good.

24:02 So, where is this image relative to our index.html file?

24:07 It's inside the images folder, right?

24:10 So, here in double quotes, we type images/mosh.jpg.

24:16 Now, VS Code is suggesting this name, so we can press tab to complete the code.

24:20 Beautiful.

24:21 Now, alt is short for alternative text,

24:24 and we use this attribute to give the browser some

24:27 text to display in case the image cannot be displayed.

24:31 We'll talk about this in more detail in the future.

24:33 So, for now, I'm going to delete this attribute.

24:37 Good.

24:38 Now, after the image, we're going to add a text element.

24:41 So, we type P, that is short for paragraph, tab.

24:45 And here we can type my Twitter handle.

24:47 So, @moshhamedani.

24:50 After that, we're going to add another text element,

24:54 and here we can type the body of our tweet.

24:56 So, I love to teach you HTML.

25:00 Perfect.

25:01 Save the changes.

25:03 Now, back in the browser, our page refreshed automatically.

25:06 This is one of the beauties of live server.

25:09 So, we don't have to manually refresh the page every time we make changes.

25:13 Now, look at what we have here.

25:15 So, we have my image and right below that, we have two text elements.

25:19 Take a look.

25:20 Unfortunately, they're not very visible.

25:22 Obviously, this doesn't look like a tweet because we haven't applied CSS yet.

25:27 As I told you before,

25:28 we use HTML to define the structure or the building block of our web pages.

25:34 In the next lesson, I'm going to show you how to apply

25:36 CSS so our page looks kind of like a real tweet.

25:45 All right.

25:46 Now, let's see how we can use CSS to improve the look and feel of this page.

25:50 Look at our head element.

25:51 Currently, we have a single element inside the head element.

25:55 That is our title element, right?

25:57 Now, after the title, we're going to add another element called style.

26:02 This is where we're going to write our CSS code.

26:05 So, in between style tags, we're going to write a bunch of CSS rules.

26:09 First, we're going to work on this image.

26:12 Our image is currently too big.

26:14 So, let's make it a bit smaller.

26:16 Back to VS Code, over here,

26:18 we're going to type img to reference our image element.

26:22 Then, we type a pair of curly braces.

26:25 And inside the braces, we write one or more CSS declarations.

26:30 Each declaration contains a property and a value.

26:34 So, here we can set the width property to, let's say, 100 pixels.

26:38 So, we type the property, colon, and then the value.

26:42 And then we terminate this line using

26:44 a semicolon so we can write multiple CSS declarations.

26:48 Now, let's save the changes.

26:50 Back in the browser, our image looks smaller.

26:52 a lot better.

26:54 But look at the edges.

26:55 The edges are so sharp.

26:57 I would like to make them a bit round so they appear softer.

27:00 Now, back to our rule.

27:02 Here we're going to set the border-radius property to let's say 10 pixels.

27:08 Now, don't worry about memorizing any of these properties.

27:10 We're going to go over them several times throughout the course.

27:13 In this lesson, I just want you to get a sense of what it's like to use CSS.

27:17 Okay?

27:18 So, save the changes.

27:20 Now, look.

27:21 The edges are round and look softer.

27:23 Now, let me show you a trick.

27:26 If we set border radius to a value that is half of the width,

27:30 we will get a round image.

27:32 So, I'm going to set this to 50 pixels.

27:35 And here's the result.

27:36 That's a lot better.

27:38 Now, our elements are stacked vertically.

27:40 I want the image to be pushed to the left side.

27:43 So, let's set the float property to left.

27:47 This will push the image element to the left side of our text elements.

27:51 Take a look.

27:52 So, that's a lot better, but our image is so close to the text.

27:56 I want to add some space after the image.

27:59 So, here we use another property called margin-right.

28:05 We can set it to 10 pixels.

28:07 Save and that's a lot better.

28:10 Now, let's make the username bold.

28:12 So, we're going to repeat one more time.

28:14 This time we're going to apply a rule to our paragraph element.

28:19 So, here we're going to set the font-weight property to bold.

28:25 Take a look.

28:27 See what happened?

28:28 Both our text elements are bold.

28:30 But what if you want to apply this style only to the username?

28:34 Well, we have to separate these two paragraph elements.

28:37 So, I'm going to give the first paragraph element an attribute called class.

28:42 So, class equals double quotes.

28:45 Class is short for classification and we can use this attribute

28:49 to put this element inside a different class or a different category,

28:53 just like the products in a supermarket.

28:55 In a supermarket, we have products in different categories, right?

29:00 So, I'm going to put this paragraph element

29:02 inside a class or inside a category called username.

29:06 And then, I'm going to change this rule.

29:09 So, this rule is currently applied to all paragraph elements,

29:13 but I want it to be applied only to paragraph elements with a username class.

29:18 So, right after P, we type {dot} username.

29:22 Now, we can also remove P,

29:25 and this rule will apply to all elements that have the username class,

29:29 whether they're paragraph elements or other types of elements, okay?

29:33 Now, save the changes and take a look.

29:36 So, that's a lot better.

29:39 So, this is CSS in action.

29:41 As you can see, CSS has a different syntax or a different grammar than HTML.

29:47 Throughout the rest of the course,

29:48 you're going to learn both these languages in detail.

29:51 Next, I'm going to show you how to format your code using Prettier.

29:57 Hey guys, Mosh here.

29:58 I just wanted to let you know that this video you've been

30:00 watching is the first hour of my ultimate HTML and CSS series.

30:04 So, after you watch this video, if you want to learn more from me,

30:07 you can enroll in the full course,

30:09 which is about 13 hours long and covers everything you need

30:12 to know to build professional quality websites with HTML and CSS.

30:16 It also includes summary notes, exercises, a real project,

30:20 a certificate of completion you can add to your resume,

30:23 and a 30-day money-back guarantee to get a refund if you're not satisfied.

30:27 So, you have nothing to lose and a lot to learn.

30:30 So, if you're interested, I put the link in the description box.

30:40 One thing you need to know about browsers is

30:42 that they ignore white spaces in HTML and CSS code.

30:46 For example, I can put all these elements

30:48 on a single line and everything still works.

30:51 Let me show you.

30:52 So, save the changes.

30:54 Back in the browser, we have the same result as before.

30:57 Because browsers don't care how we format our code.

31:00 But formatting is very important when it comes to reading and maintaining code.

31:04 We want our code to be beautiful and perfectly formatted just like an article.

31:09 This is where we use the Prettier plugin.

31:11 With Prettier, we can format our code in a consistent fashion.

31:15 This is super important when you're part of a team

31:17 because different people have different ways of formatting their code.

31:20 But if everyone on the team uses the Prettier plugin,

31:23 the code will be consistently formatted.

31:26 So, let me show you how to use Prettier.

31:28 On the top, we go to the view menu.

31:31 Look at the shortcut for the command palette.

31:34 On a Mac, it's shift, command, and P.

31:37 On Windows, it's probably shift, control, and P.

31:40 So, let's bring up the command palette.

31:42 And here we search for format document.

31:46 Now, we press enter.

31:48 We get this message saying there are multiple formatters for HTML files.

31:52 Select the default formatter to continue.

31:54 The reason we're getting this message is that VS Code,

31:57 by default, comes with a formatter for formatting HTML files.

32:01 But we have installed Prettier, which is a separate formatter.

32:04 So, let's go to configure and tell VS Code

32:07 to use Prettier to format HTML and CSS files.

32:12 Okay.

32:13 Now, Prettier formatted my code.

32:15 So, none of those elements are on the same line.

32:18 This is a lot better.

32:20 But let me show you a trick.

32:21 We don't want to format our code every time we make a change.

32:24 So, we can configure VS Code to automatically

32:27 format the code the moment we save the changes.

32:30 So, on the top, let's go to the code menu, then preferences, and settings.

32:36 And here, search for format on save.

32:40 Here's the setting.

32:41 Let's enable this setting.

32:43 Now, every time we save the changes,

32:46 VS Code automatically formats our code using Prettier.

32:56 Earlier, we talked about the DOM or document object model.

32:59 I told you that when the browser reads

33:01 the HTML document that is returned from the server,

33:04 it constructs a document object model.

33:07 Now, let me show you this document object model in action.

33:10 So, once again, we're going to use Chrome DevTools.

33:12 The shortcut on Mac is shift, command, and I.

33:16 On Windows, it's probably shift, control, and I.

33:18 I'm not really sure.

33:20 So, let's open up DevTools.

33:22 Now, in this lesson, we're going to look at the elements tab.

33:26 Now, what we have here on the left side is our document object model.

33:29 So, we see the same elements that we created earlier in the course.

33:33 We have the HTML element, head, body, and so on.

33:36 But, we have some additional elements that are injected by Live Server.

33:40 For example, we have the script element and two divs.

33:43 Don't worry about these.

33:44 These are purely used by Live Server, so it automatically reloads our page.

33:48 Now, we can hover over any of these elements,

33:51 and you can see that element highlighted on the screen.

33:54 Now, we can click an element, and on the right side,

33:58 we can see the styles applied to this element.

34:00 So, look at the styles we defined for the image element.

34:04 Width, border radius, and so on.

34:06 We can enable or disable these styles.

34:08 So, we can disable the width property, and now our image is big.

34:12 We can bring it back.

34:13 We can also change its value.

34:15 So, we can set it to, let's say, 50 pixels.

34:18 Now, our image is smaller.

34:20 We can use the up and down arrows to change this value.

34:24 This is pretty handy.

34:25 So, a lot of front-end developers use DevTools to play

34:28 with these styles and get the look they want.

34:31 Once they figure out the exact styles and their values,

34:34 then they apply them in the code.

34:36 Now, one more thing.

34:37 Over here, you can see where these styles have been applied.

34:40 So, in index.html on line six, we can click on this link,

34:45 and this takes us to the exact line of code where we wrote that style.

34:50 Now, we're currently on the Sources tab,

34:52 so we can go back to Elements and inspect other elements.

34:57 So, this is the basics of inspecting elements using DevTools.

35:00 We're going to talk about this in more detail in the future.

35:09 The last thing we're going to cover in this section is validation.

35:13 So, as we write code, we may run into problems.

35:16 If we have a typo in our code or don't use the right syntax or grammar,

35:19 our web pages may not look as expected.

35:22 In these situations,

35:23 we can use a validator to identify the potential errors in our code.

35:28 Like currently, we don't have any problems on this web page.

35:30 It looks perfectly fine to me, but let's run it by the standard HTML validator.

35:35 So, we go to validator.w3.org.

35:39 This is a standard markup validation service.

35:42 We have three methods for validating our HTML markup.

35:46 We can validate by an address if our website is live on the internet,

35:50 but this doesn't work for us because our website

35:52 is currently hosted locally in our development server.

35:56 So, this IP address that we have over here,

35:59 127.0.0.1, this is a local IP address.

36:03 So, no one else can access our website.

36:06 So, here we have two other methods.

36:08 We can validate by file upload or by direct input.

36:12 In this case, I'm going to go with file upload.

36:15 So, let's upload our index.html file and check.

36:20 So, look.

36:21 We have one warning and two errors.

36:24 The warning is saying that we haven't added

36:26 the lang or language attribute to the HTML start tag.

36:30 This is a common best practice because with this we can

36:33 tell search engines what is the language of this web page,

36:36 so they can do a better job at displaying the results.

36:39 This is very easy to fix.

36:41 So, here's our HTML tag.

36:43 We're going to add the lang attribute and set it to en,

36:47 which is short for English.

36:49 Now, what is next?

36:51 We have an error saying the character encoding was not declared.

36:55 Don't worry about this, we'll talk about this in the next section.

36:58 So, let's look at the second error.

37:00 It's saying that an image element must have an alt attribute.

37:04 So, earlier we had this alt attribute,

37:06 I told you that we use the alt attribute to provide a description for our image.

37:11 So, if the image cannot be displayed, the alternative text will be displayed.

37:15 Again, we're going to talk about the alt attribute in more detail in the future.

37:19 So, back to our code.

37:20 Let's fix this error real quick.

37:22 Here's our image tag.

37:24 Let's add the alt attribute and for the description

37:27 I'm going to say an image of Mosh Hamedani.

37:32 Now, save the changes.

37:33 Let's re-upload the file and validate it one more time.

37:39 Okay.

37:40 This time we have only a single error

37:42 and that has to do with character encoding,

37:44 which we're going to talk about in the next section.

37:46 So, this is all about HTML validation.

37:49 Now, for CSS, we have a different validator.

37:52 So, we go to jigsaw .w3.org/css-validator.

37:59 Now, you don't have to memorize this address,

38:01 simply go to Google and search for CSS validator.

38:05 Here's the first link.

38:07 So, we have the same interface,

38:09 we can validate our CSS code using an address or by file upload or direct input.

38:15 Now, in this case, we have embedded all of our CSS code inside our HTML markup.

38:20 But, as our web pages get more complex, we want to separate our CSS code

38:25 into separate files so our code is better organized.

38:28 We'll talk about this in more detail in the future.

38:30 So, for now, I'm going to copy all of our CSS code and then go to the third tab,

38:38 paste it over here, and validate it.

38:41 So, we don't have any errors.

38:43 Everything's perfect.

38:45 So, this is all about validation.

38:46 Validation is very important if your web pages aren't displayed as expected.

38:50 Always start with a quick validation because

38:53 this can often point you in the right direction.

38:55 Right, that brings us to the end of this section.

38:57 In the next section, we're going to explore HTML in more detail.

39:09 We're going to continue our web development

39:11 journey and explore HTML in more detail.

39:14 So, in this section, we're going to cover the essential HTML elements

39:17 you need to know to build web pages.

39:20 You will learn all the elements used for displaying text, links,

39:23 images, lists, tables, as well as container and structural or semantic elements.

39:30 Even if you know the basics of HTML,

39:32 I would still encourage you to watch this section thoroughly because

39:35 a lot of people don't use these elements the right way.

39:38 So, let's jump in and get started.

39:50 Earlier in the course, I told you that we use the head section

39:53 to give browsers and search engines information about the web page.

39:57 So, let's explore it in a bit more detail.

39:59 I'm going to start with a blank document.

40:01 Now, let me show you a cool trick.

40:03 If we type an exclamation mark and then press tab,

40:07 we get a basic HTML boilerplate, which means a basic HTML template.

40:12 So, on the top, we have our doctype declaration.

40:15 Below that, we have our HTML element with the lang attribute,

40:19 which is a common best practice.

40:21 Next we have our head section with a bunch

40:23 of elements we're going to talk about in a second, followed by the body section.

40:27 So, this is a very basic HTML boilerplate.

40:30 Now, what do we have in the head section?

40:32 Well, we have a couple of meta

40:34 elements for giving information about this web page.

40:37 The first meta element is for defining the character set.

40:41 What is a character set?

40:42 Well, computers don't understand characters like A, B, C, and so on.

40:47 They only understand numbers,

40:48 which are represented in the binary format, zeros and ones.

40:52 So, using a character set, we can map a character to a numeric value.

40:57 The first character set that was designed was the ASCII character set,

41:01 which is short for American Standard Code for Information Interchange.

41:05 ASCII can only represent the characters in the English language,

41:09 so it's very limited.

41:10 So, over here different character sets have been

41:12 created to represent more characters in international languages.

41:17 The character set that we use most of the time these days is UTF-8,

41:21 which can represent almost all characters in the world.

41:24 So, back to our code.

41:26 With this meta element,

41:27 we're defining the character set used in this HTML document, okay?

41:32 Now, below that we have a meta element for configuring the viewport.

41:38 The viewport is the visible area of a web page.

41:41 So, it is this area over here.

41:44 Obviously, on a mobile device or on a tablet, our viewport is smaller.

41:48 But here on desktop,

41:50 we can change the size of the viewport by resizing the browser.

41:53 So now, our viewport is smaller, okay?

41:56 Now, back to our code.

41:58 With this element, we're defining the initial

42:01 width and zoom factor for the viewport.

42:05 We'll talk about this in more detail in the future.

42:08 For now, all I want you to know is that we

42:10 need this element so our web pages look good on all devices,

42:14 mobiles, tablets, and desktop computers.

42:17 So, as a best practice,

42:18 every web page should have at least these two meta elements.

42:22 But, we have additional meta elements.

42:23 Let me show you.

42:24 So, if you type meta, in this list, you can see all possible meta elements.

42:30 For example, we have this element for defining keywords on a web page.

42:34 So, let's select this.

42:36 Here we can type multiple keywords like HTML, {comma} CSS, and so on.

42:41 In the past, these keywords were heavily used for search engine optimization,

42:45 but these days, most search engines don't put too much weight on these keywords.

42:50 But, we can still use them to define the keywords that represent this page.

42:54 We have another meta element for defining a description for this page.

42:58 So, if you type meta {colon} desk, and then press tab or enter,

43:03 here we can type a description for this page.

43:05 What we type here will appear on Google

43:08 or other search engines when someone searches for our website.

43:12 For example, if you search for Apple, here's what we get.

43:15 Now, look at this text.

43:17 What you see here comes from this element over here.

43:21 So, this is the purpose of meta elements.

43:23 With these meta elements, we can give information about a web page.

43:27 All right, next we're going to talk about

43:28 the elements you need to know for working with text.

43:38 All right, now let's talk about the most common elements for working with text.

43:42 So, you learn about the P or paragraph element,

43:44 which we use for displaying some text.

43:47 So, here I'm going to say, I love to teach you HTML.

43:51 Now, sometimes we want to emphasize a part of our text.

43:54 Let's say, the HTML word here.

43:56 To do that, we can wrap it inside an M or emphasis element.

44:01 So, here I type M, press tab.

44:03 Here's the emphasis element.

44:05 Let's hover over it and see what the tooltips says.

44:08 It says the em element represents stress emphasis of its content.

44:13 So, whenever we want to emphasize some content,

44:15 we can wrap it inside the em element.

44:18 So, in this case, I'm going to move HTML inside these tags.

44:23 Now, let's save the changes.

44:25 Here's what we get.

44:26 So, by default, browsers display emphasized content in italic.

44:31 But, don't assume that whenever you want to display italic content,

44:34 you should use the em element.

44:36 Because the purpose of the em element

44:38 is to emphasize content in our HTML document.

44:41 And this helps search engines extract important content in our documents.

44:45 Anything to do with styling should be done in CSS.

44:48 For example, here we can change the default

44:50 style of emphasized elements and remove the italic.

44:54 Let me show you.

44:54 So, in the head section, we add the style element.

44:59 And here we define a rule for emphasized content.

45:02 We can set the color to red and font style to normal.

45:07 Now, don't worry about memorizing any of these CSS properties.

45:10 We're going to go over them multiple times throughout the course.

45:14 But, let's see what happens now that we apply these styles.

45:17 So, our emphasized content is displayed in red and it's no longer italic.

45:22 Now, in the past we had an element called i, which was short for italic.

45:28 If you use this element, we get the same result as before.

45:32 Our content is displayed in italic.

45:35 But, this element is considered deprecated

45:37 because HTML is not meant for styling.

45:40 It should only be used for structuring content.

45:43 So, don't use the i element to display content as italic, okay?

45:47 Now, we have a similar element in HTML called strong.

45:51 Let's hover over it and see what the tooltips says.

45:54 The strong element represents strong importance,

45:57 seriousness, or urgency of its contents.

46:00 Conceptually, it's kind of similar to the emphasis element.

46:04 So, where you should use it really depends on your context on your content.

46:08 Now, let's save the changes and see what we get.

46:11 So, by default, strong elements are displayed as bold.

46:15 But once again, we can always change the styling.

46:18 Now, in the past, we had another element called B, which is short for bold.

46:22 So, whenever we wanted to make something bold, we use this element.

46:26 But once again, this element is considered deprecated because styling

46:30 should be done in CSS and not in HTML, okay?

46:33 So, don't use B or I elements.

46:36 Now, I'm going to remove this element and just add HTML.

46:41 Let me show you a cool trick.

46:42 Let's say we want to wrap this word with the M element.

46:45 There is a shortcut for it.

46:47 So, on the top, we go to the view menu.

46:50 Look at the shortcut for the command palette.

46:52 On Mac, it's shift, command, and P.

46:55 And on Windows, it's probably shift, control, and P.

46:58 So, let's select HTML and then bring up the command palette.

47:02 With this command palette, we can execute commands in VS Code.

47:06 So, here I'm going to search for a command called wrap with abbreviation.

47:09 That is the first command on the list.

47:11 Now, we press enter,

47:13 and here we type the element that we want to use to wrap our selected content.

47:17 In this case, M.

47:19 Press enter.

47:20 Done.

47:21 So, I didn't have to manually create an M element and then move HTML inside it.

47:25 It's very handy.

47:27 So, this is all about text.

47:29 Now, let's talk about headings.

47:30 So, in HTML, we have six heading elements.

47:34 H1, we have H2, H3, H4, H5, and H6.

47:47 So, let's see what we get.

47:50 So, heading one represents the most important heading,

47:55 and heading six represents the least important heading.

47:58 Now, what common mistake that I see amongst a lot

48:00 of people is that they choose these headings based on their size.

48:04 So, if they want to have a heading with this size,

48:07 they would just use heading four.

48:09 That is not how you're supposed to use headings

48:11 because the size can always be changed with CSS.

48:14 It's a matter of styling.

48:16 We should use these headings to create a hierarchy.

48:19 So, every webpage should have one and only one H1 element.

48:24 This heading represents what this page is all about.

48:27 Now, nothing happens if you have multiple H1 elements.

48:30 For example, I can duplicate this line and say heading one plus.

48:35 Now, look.

48:36 We have two H1 elements, but this is going to confuse search engines.

48:40 They're not going to figure out what this page is really all about.

48:44 So, every page should have a single H1 element.

48:48 So, I'm going to remove this line.

48:51 Now, after we use H1, then we should use H2.

48:54 We should not jump to H4.

48:56 So, let's say on this page we're going to have two sections.

48:58 One for HTML, the other for CSS.

49:01 So, my next heading should be H2.

49:04 And here we can type HTML.

49:06 Obviously, below this heading we can have some text.

49:09 So, I'm going to say HTML tutorial.

49:13 Our next heading should be H2.

49:14 So, this is the CSS section.

49:18 And in this section we can have some additional text.

49:21 Let's say CSS tutorial.

49:23 Now, I'm going to delete these four headings.

49:27 So, let's take a look.

49:29 So, we have a hierarchy.

49:31 On the top we have an H1 element.

49:32 Below that we have two H2 elements.

49:36 Now, let's say in this section we're going to have two subsections.

49:39 There we should use H3 elements.

49:42 So, here's our HTML section.

49:45 In this section we're going to have two H3 elements.

49:48 Let's say code and exercise.

49:52 Now, take a look.

49:54 So, we have a hierarchy.

49:56 This is how we should use these heading elements.

49:58 The better we can represent the structure of our document using HTML,

50:02 the better search engines can read and understand our content.

50:06 So, that's all about text.

50:07 Next, we're going to talk about displaying special characters in HTML.

50:18 Some characters are reserved in HTML and to display them,

50:21 we have to use a special notation.

50:24 For example, let's say we want to wrap the word HTML with angle brackets.

50:28 See what's going to happen.

50:30 So, I type a left angle bracket and a right angle bracket.

50:35 See what happened?

50:36 VS Code thought we're adding an HTML element,

50:38 so it automatically generated the closing tag.

50:41 We don't want this, so let's delete it.

50:44 Now, back in the browser.

50:46 Look, where's our HTML word?

50:47 It's not here because the browser interpreted this as an HTML tag.

50:53 This is not what we want.

50:54 We want to display this exactly as is.

50:57 So, to solve this problem, we're going to use HTML entities.

51:00 All these entities start with an ampersand and end with a semicolon.

51:05 In between these two characters,

51:07 we type a few characters that determine the type of the HTML entity.

51:11 So, we have an entity for displaying the less than sign.

51:15 That is LT, short for less than.

51:19 Now, let's remove this.

51:20 Similarly, we have another HTML entity for displaying the greater than sign.

51:25 So, we type an ampersand GT,

51:28 which is short for greater than, followed by a semicolon.

51:31 Now, back to the browser.

51:33 That's exactly what we wanted.

51:35 Perfect.

51:36 Another common HTML entity is the copyright symbol.

51:40 So, at the end, I'm going to type an ampersand, copy, and a semicolon.

51:46 Now, take a Here's our copyright symbol, beautiful.

51:50 Now, we have so many entities in HTML and quite frankly,

51:53 you don't need to memorize any of them.

51:55 In fact, you're not going to use 99% of them.

51:57 But in case you're curious, let me show you the complete list.

52:01 So, on Google search for HTML entities and on the second link,

52:07 dev.w3.org, you can see the complete list of these entities.

52:12 So, as you can see, there are so many entities and honestly,

52:16 I have never used any of them.

52:17 The only ones I have used are these three plus non-breaking space.

52:22 Let me show you what that is about.

52:24 So, I'm going to delete this line and generate some dummy text.

52:28 So, we add a paragraph element.

52:30 Now, to generate some dummy text,

52:32 we type lorem followed by the number of words we want to generate.

52:36 Let's say 50.

52:37 Tab.

52:39 Look, this is some dummy text in Latin.

52:42 Now, let's preview it in the browser.

52:45 So, here's what we get.

52:46 Let's imagine that the last word on the first line

52:50 and the first word on the second line should be stick together.

52:53 Here we have a line break in between these two words.

52:56 We want to prevent that.

52:57 So, I'm going to copy this word.

53:00 Now, here in VS Code, let's bring up the search panel by pressing command

53:04 and F on Mac or control and F on Windows.

53:08 Now, we paste this word.

53:09 Okay, here it is.

53:11 We want to make sure that these two words are always together.

53:15 There's no line break in between them.

53:17 So, I'm going to replace this regular space with a non-breaking space,

53:21 which is an HTML entity.

53:23 So, we type an ampersand and nbsp,

53:27 which is short for non-breaking space, followed by semicolon.

53:31 Now, take a look.

53:33 So, both these words are on the second line.

53:37 So, this is all about HTML entities.

53:39 Next, we're going to talk about links.

53:47 Almost every web page on the internet has links to other pages or websites.

53:52 To create these links, we use the anchor element.

53:54 So, we type A, that is short for anchor, and then press tab.

53:58 Now, every anchor element should have an href attribute.

54:02 Href is short for hypertext reference.

54:05 I know, it's a mouthful.

54:06 It basically means a URL or a link.

54:09 So, for this demo, I'm going to create a second

54:11 page called about.html and then link to it over here.

54:15 So, in the explorer panel, let's add a new page called about.html.

54:22 Now, here we're going to create a basic HTML boilerplate.

54:25 Remember how to do that?

54:27 We type an exclamation mark and then press tab.

54:30 That's it.

54:31 Beautiful.

54:32 Now, back to index.html.

54:34 Here, we can use a relative or an absolute URL.

54:37 What do you mean by that?

54:38 Well, a relative URL starts from the current page.

54:42 So, currently we are on index.html and we want to go to about.html.

54:47 Now, currently both these pages are in the same folder.

54:50 So, we can type a relative URL to about.html like this.

54:55 about.html.

54:57 That's a relative URL.

54:59 Now, what if about.html was in a different folder?

55:01 So, let's add a new folder to our project

55:05 called company and then move about to this folder.

55:10 Now, where is about.html relative to the current page?

55:14 It's inside the company folder, right?

55:16 So, here we type company {slash} about.html.

55:21 This is a relative URL.

55:23 Now, let's give this link a text.

55:25 I'm going to say about me.

55:27 So, we type our text inside the anchor element, okay?

55:30 Save the changes.

55:31 Back to the browser.

55:33 Here's our link.

55:34 Click and we're currently on the about page, which is empty.

55:37 Beautiful.

55:38 Now, back to our home page.

55:40 Instead of a text, we can also use an image.

55:43 So, I'm going to delete about me and add an image element.

55:47 So, img tab.

55:49 Once again, here we can type a relative URL to our target image.

55:53 So, I'm going to go with images/mosh.jpg.

55:57 Now, save.

55:58 Take a look.

55:59 Obviously, this image is way too big.

56:02 We can always use CSS to resize it.

56:04 But, that aside, look at the mouse icon when we hover over this image.

56:09 It changed to a hand to indicate that this image is clickable.

56:13 Okay?

56:14 Now, back to our code.

56:15 To keep things simple,

56:17 I'm going to get rid of this image and get back to our text about me.

56:22 Now, let's go to the about page and add a link back to the home page.

56:26 So, over here, we're going to add an anchor element.

56:32 What should we type for the href attribute?

56:34 Well, currently, we are inside the company folder.

56:38 We have to go one level up so we can access index.html, right?

56:42 To do that, we type double periods and a forward slash.

56:45 With this, we can go one level up.

56:48 Now, at this level, which is the root of our website,

56:50 we have the company folder, the images folder, and index.html.

56:54 So, we can reference index.html.

56:57 And, for the text, we're going to say home page.

57:00 Again, this is another example of a relative URL because

57:04 it starts from the current page and go somewhere else.

57:07 Now, if you're inside a deeply nested folder structure,

57:10 we might have to go multiple levels up.

57:12 So, double period and a forward slash, then we repeat and repeat.

57:17 With this, we can go three levels up.

57:19 Now, as you can see, URLs like this kind of look messy.

57:22 They look hard to read.

57:24 In those cases, we can use an absolute URL.

57:26 So, we start with a forward slash and this represents the root of our website.

57:32 At this level we have access to index.html.

57:36 So this is an absolute URL, okay?

57:38 Now, back to index.html, here we are linking to an HTML document,

57:44 but we can also link to non-HTML documents like images,

57:47 PDFs, PowerPoints, and so on.

57:49 So, let's add a link to my image.

57:52 So, for the href I'm going to say images/mosh.jpg.

57:57 And for the text I'm going to say my photo.

58:01 Save.

58:02 Take a look.

58:03 So, here's our second link.

58:05 Click.

58:06 My image is displayed in the browser.

58:08 But what if I want to prompt the user to download it?

58:11 That's very easy.

58:12 We're going to add the download attribute to our anchor element.

58:16 So, we type download, press enter.

58:18 Now, this attribute doesn't have a value,

58:21 so we can remove the double quotes and the equal sign.

58:25 So, we just add the attribute name.

58:27 Now, save.

58:28 Back to the browser.

58:30 We go back.

58:31 Here we have to manually refresh the page

58:33 because the live server only refreshes the current page.

58:37 Now, previously we were on my image,

58:38 so that was the URL that live server refreshed.

58:41 So, here we refresh to get the latest changes.

58:44 Now, when I click on this link, instead of seeing my image,

58:47 we're going to see my image getting downloaded.

58:49 Take a look.

58:50 Click, and here's my image.

58:52 Beautiful.

58:53 Now, we can also link to other parts of this page.

58:56 So, let's create two sections with a lot of text.

58:59 So, I'm going to add an H2 element.

59:01 Of course, I missed the H1, but let's not worry about it.

59:05 For this H2 we're going to say HTML.

59:07 And below that we're going to add some dummy text with 200 words.

59:10 So, paragraph, Lorem 200.

59:14 Good.

59:15 Now, right after that we're going to add another

59:17 H2 for the CSS section with some more text.

59:22 Okay?

59:23 Let's save the changes.

59:24 Take a look.

59:26 As you can see, the CSS section is below the fold.

59:29 So, we have to scroll down to see it.

59:31 What we can do here is on the top we can add a link to the CSS section.

59:36 So, when the user clicks on that, they will immediately jump to the CSS section.

59:40 That is very easy.

59:42 So, here's the CSS section.

59:43 First, we have to give this element a unique identifier.

59:46 Just like everyone in the real world can have

59:48 a unique identifier like a driver's license or a passport,

59:52 every element on a page can also have a unique identifier.

59:56 So, here I'm going to set the ID attribute to CSS.

1:00:00 Or we can use a more descriptive name like section {dash} CSS.

1:00:06 The name doesn't really matter here.

1:00:08 What matters is that we're defining what is

1:00:10 called a fragment or a place on this page.

1:00:14 Now, we're going to add a link to this fragment.

1:00:16 So, on the top, let's add another anchor element.

1:00:22 Now, for the href, we're going to type

1:00:24 a pound sign followed by the name of our fragment, which is section {dash} CSS.

1:00:30 And for the text we're going to say CSS.

1:00:32 Now, back to the browser, take a look.

1:00:35 I'm going to click on this.

1:00:37 We immediately jump to the CSS section.

1:00:39 Beautiful.

1:00:40 Now, a lot of websites like this also have a link

1:00:42 that helps you jump to the top of the page.

1:00:44 Let's see how we can create that.

1:00:47 So, after the CSS section, I'm going to add another anchor element.

1:00:53 Now, for the href, I'm going to use an empty fragment.

1:00:57 So, we just type a pound sign without an identifier.

1:01:01 And then we'll say jump to top.

1:01:04 Take a look.

1:01:05 So, here's our link.

1:01:07 Click, and now we're on top of the page.

1:01:10 Now, let's see how we can link to external websites.

1:01:13 So, let's add another anchor element to link to Google.

1:01:17 Now, what should we type here?

1:01:18 Well, google.com is a different website.

1:01:21 So, here we cannot use a relative URL.

1:01:23 We have to use an absolute URL.

1:01:25 But, if you start with a forward slash,

1:01:28 we're referencing the root of our website.

1:01:30 But, in this case, we want to go to a different website.

1:01:33 How can we do that?

1:01:34 Well, we have to start with a protocol.

1:01:36 So, https colon two forward slashes google.com.

1:01:42 Now, let's type Google and test our page.

1:01:46 Click.

1:01:48 We're on Google, beautiful.

1:01:49 Now, sometimes, when linking to external website,

1:01:52 we want that link to open in a new browser window or a new tab.

1:01:56 Let me show you how to do that.

1:01:57 So, here's our anchor.

1:02:00 We set the target attribute to underline blank.

1:02:04 Save.

1:02:05 Now, back to the home page.

1:02:07 Once again, we have to manually refresh to get the latest changes.

1:02:11 Okay?

1:02:12 Now, when I click on Google, you see a new tab, beautiful.

1:02:16 And one last thing.

1:02:18 We can also link to emails.

1:02:20 So, I'm going to add an anchor.

1:02:21 And for href, I'm going to say mailto colon programming withmosh@gmail.com.

1:02:31 Email me.

1:02:32 Save the changes.

1:02:34 Now, back to our page.

1:02:36 When I click on this link,

1:02:38 my mail client will open and my email address will be pre-populated.

1:02:41 Take a look.

1:02:42 So, click and here's my mail client.

1:02:46 So, this is all about links.

1:02:47 Now, one last thing before we finish this lesson.

1:02:50 What is the difference between and hyperlink?

1:02:52 Well, a link is just an address, a URL, the location of the target page.

1:02:57 A hyperlink is the element that the user

1:02:59 can click on to navigate to that target page.

1:03:02 That is the difference between a link and a hyperlink.

1:03:04 But, quite often, these terms are used interchangeably.

1:03:07 All right, we're done with this lesson.

1:03:09 Next, we're going to talk about images.

1:03:17 All All now let's talk about embedding images in a bit more detail.

1:03:20 For this lesson, I'm going to grab an image from unsplash.com,

1:03:23 which is where we can find a lot of beautiful and freely usable images.

1:03:28 So, let's search for coffee.

1:03:31 There are tons of coffee pictures here.

1:03:33 I'm going to grab this picture.

1:03:36 We can download it for free.

1:03:38 Now look, this image comes in different sizes, small, medium, and large.

1:03:43 For now, we're going to grab this image in small size, but in the future,

1:03:46 we're going to talk about embedding images

1:03:48 at different sizes depending on the device.

1:03:51 So, on mobile devices, we want to serve a smaller image,

1:03:54 and on desktop computers, we want to serve a larger image.

1:03:58 For now, let's not worry about these complexities.

1:04:00 We'll have a complete section on this topic later on.

1:04:03 So, let's download the small image.

1:04:07 Now it says, "Say thank you to Nathan." Thanks, Nathan.

1:04:10 This is a beautiful picture.

1:04:11 You have done a great job.

1:04:13 Now I'm going to drag and drop this image onto the images folder,

1:04:17 and then rename it to coffee.

1:04:19 We want to give it a descriptive name.

1:04:21 This is a small search engine optimization tip.

1:04:24 When we provide descriptive names for our images,

1:04:26 search engines can better understand and index our pages, okay?

1:04:31 So, here's our image.

1:04:32 Now, let's add an image element.

1:04:36 We set the source to images/coffee.jpg.

1:04:40 Now, what about the alt attribute?

1:04:42 Well, I briefly mentioned that we use

1:04:44 this attribute to provide textual description of the image.

1:04:47 It's not compulsory, but it's highly recommended for a number of reasons.

1:04:51 The first reason is to make our page accessible to visually impaired people.

1:04:56 These people use a screen reader to read the web out to them.

1:05:00 So, with this alternative text,

1:05:01 we can tell them what we are showing on the page.

1:05:03 And that means we should write a good,

1:05:05 meaningful description here, like a coffee mug on a table.

1:05:10 Don't write something like image or image one.

1:05:12 That is pointless.

1:05:14 Now, the second benefit of providing an alternative text is that we

1:05:18 help search engines read this text and understand what we're providing here.

1:05:23 And there's one more benefit.

1:05:24 If this image cannot be loaded for some reason, the alternative text is shown.

1:05:29 Let me show you what I mean.

1:05:30 So, I'm going to add a typo here.

1:05:32 Now, back to the browser.

1:05:34 Look, the image is not loaded, but we see the alternative text.

1:05:38 This can also happen if there is a network connectivity issue.

1:05:42 If the user gets disconnected, they can still see the alternative text.

1:05:46 So, let's remove the typo.

1:05:48 Now, let's talk about sizing images.

1:05:50 As I told you before, we can use CSS to resize our images.

1:05:54 So, here in the head section,

1:05:56 let's add a style element and apply a rule to our image.

1:06:01 Now, this rule is applied to all images on the page.

1:06:04 This is probably not something we want to do in a real-world scenario.

1:06:07 In a real-world scenario,

1:06:09 we want to apply a class to this element and then define rules for that class.

1:06:14 We'll talk about this in more detail in the future.

1:06:16 So, for now, let's give this image a width

1:06:19 of 200 pixels and a height of 200 pixels.

1:06:24 Now, there is a tiny problem in our image.

1:06:26 Can you tell?

1:06:28 Our image is kind of squashed.

1:06:29 Here's the reason.

1:06:31 We're dealing with a rectangular image.

1:06:33 Look, this is a rectangular image, but we're converting it to a square image.

1:06:38 Now, look at the shape of this coffee mug.

1:06:40 It's kind of round, right?

1:06:41 Now, compare it with what we have over here.

1:06:44 Our image is vertically squashed.

1:06:46 Let me show you another way to verify this.

1:06:49 We can right-click on the image and then go to inspect.

1:06:53 This opens Chrome DevTools and selects our image in the DOM.

1:06:57 Now, on the right side, we can see the styles that we applied to this element.

1:07:01 Now, I'm going to disable the height property and I want you

1:07:05 to pay close attention to the image and see how the shape changes.

1:07:08 So, look.

1:07:11 Now, the coffee mug is more round,

1:07:12 but if I apply the height property, it becomes squashed.

1:07:16 So, how can we solve this problem?

1:07:18 Well, we have a new property in CSS called object-fit.

1:07:22 So, here we can set object-fit to one of these values.

1:07:26 Most of the time we use cover, so the image covers its containing box.

1:07:31 What is this containing box?

1:07:32 Well, first let me set this to cover.

1:07:35 Here we have this image element, right?

1:07:38 Conceptually, there is a box around every element in an HTML document.

1:07:43 We don't see this box,

1:07:44 but the browser uses that box to figure out how the page should be displayed.

1:07:48 So, here we have a box with this dimension, 200 by 200.

1:07:52 And in this box we're trying to insert this image, right?

1:07:56 Now, when we set object-fit to cover, our image will get resized and potentially

1:08:01 cropped so it covers the entire containing box.

1:08:05 Let's verify this.

1:08:06 So, save the changes and back in the browser, look, our coffee mug is round,

1:08:10 but if I disable the object-fit property, it gets squashed again.

1:08:15 So, object-fit is a very useful property.

1:08:18 Now, we can always play with all possible values over here.

1:08:22 So, I'm going to select this, delete it.

1:08:25 Now, using the up and down arrows,

1:08:27 we can go through this list and see the impact of every value.

1:08:31 Now, I'm not going to go over all these values and explain what they mean.

1:08:34 This is pointless.

1:08:36 You can always figure them out on your own.

1:08:37 Just remember that most of the time we use cover,

1:08:41 so the image covers the entire containing box.

1:08:44 All right, this is all about the images for now.

1:08:46 Next, we're going to talk about video and audio.

1:08:51 Hey guys, Mosh here.

1:08:52 I just wanted to let you know that this video you've been

1:08:54 watching is the first hour of my ultimate HTML and CSS series.

1:08:58 So, after you watch this video, if you want to learn more from me,

1:09:02 you can enroll in the full course,

1:09:03 which is about 13 hours long and covers everything you need

1:09:06 to know to build professional quality websites with HTML and CSS.

1:09:10 It also includes summary notes, exercises, a real project,

1:09:15 a certificate of completion you can add to your resume,

1:09:17 and a 30-day money-back guarantee to get a refund if you're not satisfied.

1:09:22 So, you have nothing to lose and a lot to learn.

1:09:24 So, if you're interested, I put the link in the description box.