HTML Tutorial for Beginners: HTML Crash Course

0:04 welcome to the first part of the ultimate html and css series in this series

0:09 i'm going to take you on a journey and teach you all the skills you need

0:12 to build fast and beautiful websites that look great on all kinds of devices i'm

0:16 assuming you know nothing about html or css

0:19 i want to learn everything from scratch so

0:21 in the first part of this series we're going to talk about the fundamentals

0:24 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

0:32 together and build a beautiful responsive and blazingly fast

0:36 website for an imaginary cloud hosting company called

0:39 mashify if you want to play with this website

0:42 just head over to mashify.com and see it for yourself this is what you're going

0:46 to build in this series i'm ash hamadani

0:49 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 if

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

1:00 let's jump in and get started [Music] all

1:13 right let's talk about the tools you need

1:15 to take this course for the starter you need a code editor there's so many code

1:19 editors out there like visual studio code or vs code sublime text adam and so

1:25 on in this course i'm going to use

1:26 vs code along with a few extensions for starting

1:30 a web server and formatting our code

1:32 you're welcome to use your favorite code editor

1:34 if you know what you're doing but otherwise

1:36 head over to code.visualstudio.com and download the latest

1:40 version of vs code now here inside vs code we're going to install a couple

1:44 of extensions so let's open the extensions panel

1:49 and search for preview here's the extension we're going

1:54 to install prettier code formatter with this extension

1:57 we can format our code and make it pretty this is a very popular extension

2:02 as you can see it's been downloaded more than

2:04 9 million times so over here you're going

2:06 to have an install button just click it

2:09 and you're done next we're going to install

2:12 another extension called live server with this we

2:16 can launch our website inside a development web

2:19 server again this is a very popular extension

2:22 it's been downloaded almost 8 million times now

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

2:27 a browser to view and test our web pages again you can use your favorite browser

2:31 but in this course i'm going to use google chrome and i encourage you to use

2:35 the same browser so you can easily follow the course we're going to start

2:45 our web development journey here in every section

2:48 you will learn something new about web development

2:50 and by the end of this course you will put all of this together to build

2:54 a beautiful web page in this section we're going

2:57 to talk about the fundamentals of web development you'll

3:00 learn the languages and tools used in web

3:02 development as well as the key concepts

3:05 and vocabulary such as url http gum and so on we're also going to talk about

3:10 how websites work so you will understand what

3:14 exactly happens under the hood when you use

3:16 your browser to visit a website you will

3:18 also learn how to inspect network traffic using

3:21 chrome dev tools which is a very powerful

3:23 tool used by front-end developers we'll also talk

3:26 about the basics of html and css

3:29 and validating web pages which is something a lot

3:32 of developers miss this is going to be

3:34 an awesome journey so let's jump in and get

3:36 started [Music] this course is your first

3:47 step towards becoming a web developer so let

3:50 me give you a simple roadmap to know where you are and where you should go

3:54 next every website has two parts a front end and a backhand the front end is

3:59 the part that you see in your browser and interact with all the visual aspects

4:03 the back end is the part that powers the front end it's behind the scenes and is

4:07 mainly about storing data in databases and providing

4:10 it to the front end so web development

4:13 jobs fall into three main categories front-end development

4:17 back-end development and full-stack development which involves both

4:21 front-end and back-end development front-end developers use html

4:25 css and javascript to build front-ends back-end developers

4:29 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:41 i know it's a mouthful but basically we use html to define the building blocks

4:46 of our web pages css is short

4:48 for cascading stylesheet and is used for styling web

4:52 pages and making them beautiful javascript is used

4:55 for adding functionality to web pages let me give

4:58 you an analogy think of a building a building in the real world is like

5:02 a web page on the internet it has a skeleton or structure it can have pretty

5:07 walls windows and tiles and it can

5:09 have certain functionality for example when we press

5:12 the elevator button it comes to pick us

5:15 up here's a real example let's say we want

5:19 to build a website like twitter for each tweet we want to have a layout like

5:23 this so first we use html to define all the building blocks of this layout what

5:28 are these building blocks here an image some

5:31 text indicating the user's twitter handle another block

5:35 of text containing the message and three icons

5:38 for commenting retweeting and liking the tweet we

5:42 use html to add these building blocks to our web page then we use css

5:46 to give it visual effects for example with css we can make the font bold we can

5:51 make our image round we can add some padding around here we can change the color

5:56 of these icons and define their look when we hover over them so css is all

6:01 about aesthetics or visual effects with css we

6:04 can also create beautiful animations now most web

6:08 pages these days are interactive they respond

6:10 to our actions like clicks and scrolls this is

6:13 where javascript comes in with javascript we

6:16 can add functionality or behavior to our web

6:19 pages for example we can like your tweet

6:22 so javascript is a programming language while html

6:25 and css are not meaning we cannot use them to tell computers what to do we

6:30 use them to define the building blocks

6:31 of our web pages and style them every webpage

6:34 you have seen on our internet is built

6:36 with these three languages so the better you

6:38 learn and understand these languages and their features

6:41 the better you will be at front-end development

6:45 so your front-end development journey starts with html

6:48 and css i would say if you spend three to five hours every day studying

6:53 and coding you should be able to have

6:55 a reasonable understanding of these two languages in about

6:58 a month or a month and a half once you learn these languages then you

7:02 need to learn javascript i have a separate

7:04 series for learning javascript so after finishing

7:07 this series you may want to enroll

7:08 in that series i would say learning javascript

7:11 would probably take another six weeks of your time

7:14 of course you're not going to be a javascript expert in just six weeks but you

7:18 will have a reasonable understanding of it and you

7:20 will learn more as you work on different

7:22 projects so the first three months is all

7:25 about the fundamentals now building websites often include

7:31 a bunch of repetitive tasks this is where

7:33 front-end frameworks and libraries come in a framework

7:37 or a library comes with a lot of code that we can reuse in our websites

7:41 so they help us get the job done faster that's why a lot of companies

7:46 these days use one of these popular frameworks

7:48 like react angular or vue now technically react

7:52 is not a framework it's a library

7:54 but subtle distinction on site all these tools serve

7:57 the same purpose they help us build applications

8:00 faster now you don't need to learn all

8:02 of these to get started different companies use

8:05 different tools for different projects so as you

8:08 move from one project to another you may want to learn about the other tools if

8:12 you're starting out just focus on react because

8:15 it's the most popular tool in this space

8:17 once you learn react you can always learn

8:20 the other tools if needed for react you

8:22 would probably need one to two months again

8:25 i have a comprehensive course on react more

8:27 than 40 000 people have taken this course

8:30 and loved it alright what's the next step

8:33 version control systems we use a version control

8:36 system to keep track of our project history

8:38 and work collaboratively with others there are many

8:41 version control systems out there like git subversion

8:45 mercurial and so on but git is the most popular tool in this space and is

8:49 used in more than 70 of software companies

8:53 that's why you'll see it in almost every

8:54 job description i would say you would probably

8:57 need two weeks for learning git and again i have a comprehensive course for you

9:02 so these are the essential skills that every

9:04 front-end developer must have you'll see these listed

9:07 on almost every job description now different jobs

9:11 require other skills but these skills vary

9:13 from one company to another so you can learn

9:16 these additional things in the future or on the job

9:19 for now just focus on these four

9:21 skills or four steps remember less is more don't try to learn too many things

9:26 quickly you won't learn anything you'll just waste

9:29 your time alright that's your roadmap next we're

9:31 going to talk about how the web works [Music] have you ever wondered how the web

9:42 works in this lesson i'm going to tell you exactly what happens the moment you

9:46 type the address of a website into your browser

9:49 and hit enter as part of this we're

9:52 going to talk about a few important concepts and terms that you need to know

9:55 as a web developer so let's say we launch our browser and head over to a website

10:00 like codewithmosh.com now this address that we

10:03 have in the browser address bar is called

10:05 a url which is short for uniform resource locator basically it's a way to locate

10:10 a resource on the internet resources can be

10:12 web pages also called html documents they can be

10:16 images video files fonts and so on so we type the url of a website

10:21 and hit enter what happens now well there

10:24 are two pieces involved here the browser also

10:27 called the client and the computer or computers

10:30 that host our target website we refer

10:33 to these as web servers or servers for short

10:36 this is what we call the client server

10:38 model the client requests a service the server

10:41 provides the service so our browser sends

10:44 a message to the server and says hey give me the home page of this website

10:48 this is kind of similar to how you send your friend a text message you can

10:52 think of your phone as the client sending

10:54 the message and your friend's phone as the server

10:57 receiving the message now back to our example

11:00 this message is formatted based on a protocol

11:03 called http or hypertext transfer protocol you've

11:07 probably noticed it before but never know what

11:09 it is in simple terms http is a language that clients and servers use to talk

11:14 to each other it's not a programming language

11:17 it's just a plain textual language for communicating

11:20 over the internet we also have https which

11:23 is http with encryption so the messages exchange

11:26 between the client and the server are encrypted

11:29 here is a simplified example of an http

11:31 message with this message the browser tells the server

11:34 what it's looking for so on the first

11:37 line it says that it wants to get a page or a file called index.html

11:42 using http version 1.1 index.html often represents

11:47 the home page of websites on the second

11:49 line we can see the host that is codewithmosh.com and on the third line we can

11:54 see the language that the client can accept

11:56 in this case english now don't worry about

11:59 memorizing any of this all i want you to understand here is that this message is

12:03 structured based on the http protocol that clients

12:07 and servers understand so the server receives

12:09 this message it figures out what the client

12:12 is asking and then it will send a message

12:14 back to the client the first message is called an http request and the second

12:19 message is called an http response every data

12:22 exchange using the http protocol involves two messages

12:26 a request and a response now what is in the response here's a simplified example

12:32 on the first line we see the version

12:33 of http protocol used followed by a number which

12:37 is the status code 200 means successful or okay right below that we can see

12:42 the date and time of the response next we can see the type of content the server

12:47 is sending back to the client in this case text html and after that we

12:53 can see the html code or the html

12:55 document that represents the home page of codewithmosh.com

12:59 of course the actual html code is way longer now as the browser reads this html

13:04 document it constructs what we call a dom

13:07 or a document object model don't let this fancy name scare you this is a model

13:13 that represents the object or elements in our html

13:16 document what are these elements all the building

13:19 blocks of our page like paragraphs of text

13:22 images links and other stuff 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 it

13:32 discovers references to other resources in this document

13:36 like images fonts and other stuff each

13:39 of these resources has an address or a url

13:42 so for each resource the browser sends a separate http request to the server

13:47 to fetch that resource many of these http requests

13:50 are set in parallel so we can see

13:52 the page as quickly as possible once the browser

13:55 has all the necessary resources it will render

13:58 the html document rendering an html document means

14:01 displaying it it's a fancy technical term we

14:04 use often so in a nutshell our browser sends an http request to the server

14:09 and receives an http response this http response

14:13 contains an html document the browser reads

14:16 that html document to construct a document object model

14:20 and render the page in the next lesson i'm going to show you all

14:23 of these steps in action [Music] all right

14:31 let's see http requests and responses in action so

14:35 open up chrome and head over to google.com

14:38 now we need to access chrome dev tools

14:40 this is a very powerful tool used by frontend developers so on the top we go

14:45 to view developer developer tools now look

14:49 at the shortcut on mac it's alt or option command and i on windows is obviously

14:55 different but remember the shortcut because it's much

14:58 faster to access the devtools via the keyboard

15:01 so here's the dev tools the first time

15:04 you see it it might appear a bit intimidating but trust me it's much easier than

15:08 you think throughout the course you're going

15:10 to learn more about the dev tools so here

15:12 we have a few different tabs elements console

15:15 sources network and so on in this demo

15:18 we're going to go to the network tab so we can inspect the network traffic

15:22 to and from google.com now by default devtools

15:26 is docked to the bottom of the screen we

15:29 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 a lot of frontend developers

15:39 like this layout so they put devtools

15:42 on the left side and they have their website

15:44 on the right side now in this demo i'm going to undock it as a separate

15:48 window so we have more space to work with so let's undock it good now we

15:55 need to refresh our website as you can see over here on match we can press

15:58 command on r on windows is probably control and r alternatively we can go back

16:04 to this window and press the refresh button

16:08 now back to the dev tools look at all

16:10 these items over here these are the http requests that are sent from our browser

16:15 to google.com as you can see there are

16:18 totally 45 requests and here's the amount of data

16:23 transferred over the network so in this case

16:26 just over 94 kilobytes now look at the first

16:29 item in this list this is the first http request that chrome sent to google.com

16:35 as you can see with this request the browser

16:38 wanted to get a document and the status

16:42 of this request is 200 which means okay over here you can see the amount

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

16:49 and the time it took to get

16:51 the response now if we click on this request we can see more details about

16:56 it so here on the headers tab we can see all the headers of our request

17:00 and response so here are some general

17:03 headers like request url request method which is

17:06 get status code that is 200 we talked about it remote address this is the new

17:12 make representation of google.com now down below we

17:16 have response editors there are so many headers

17:18 here you don't have to worry about them but as an example look at content type

17:23 we talked about this in the previous lesson so the type of this response is text

17:27 html below that we have the date and time of the response now if we click

17:33 on the preview tab we can see a preview of the html document that is returned

17:37 from the server so this is the home page of google now in this html document

17:43 we have references to other resources like images

17:46 fonts and so on so all these subsequent

17:49 requests are sent to download those resources

17:53 so right below the first request we have

17:55 a request for downloading a png or an image

17:58 file here's another request for getting another

18:01 image we have two requests for getting two different fonts and so on now we

18:05 can easily filter this list so let's click on the filter icon here by default we

18:11 see all requests but we can filter by request type for example we can select doc

18:16 to see requests for downloading html documents

18:19 or font to see the requests that were sent

18:22 to download fonts and so on next i'm going to show you how to create your first

18:26 html document [Music] alright first things first here

18:36 on your desktop or anywhere on your computer

18:39 right click and create a new folder i'm going to call this html but we

18:43 could call it anything 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 good now

18:58 this folder is currently empty so let's add

19:00 a new file here called index.html as i

19:04 told you before index.html often represents the home

19:08 page of websites so let's go with that now

19:12 we can close the explorer panel by pressing command and b on mac or control

19:16 and b on windows good now the first thing we need to do here is

19:21 to tell the browser that this is an html5 document so we type a left angle

19:27 bracket now look at this suggestion list

19:30 the first item here is doctype or document

19:33 type let's press enter or tab vs code generated this piece of code for us so

19:39 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

19:46 declaration in the previous versions of html our doctype

19:50 declaration was so long it was so messy but html5 solved this problem so all we

19:56 have to type is doctype html and by the way

19:59 html is not a case sensitive language

20:02 which means it's not sensitive to uppercase

20:04 and lowercase letters but conventionally speaking we type

20:08 everything in lowercase except doctype this is just

20:11 a convention we could type this in lowercase

20:14 and that's perfectly fine so let's revert it back now right after this we need

20:19 to use our html elements to define the structure

20:22 of this web page the first element we're

20:25 going to use is the html element so we type html and then press tab

20:30 or enter once again vscode generated this piece

20:33 of code for us so what we have here

20:36 on the left side is called the opening tag and what we have on the right

20:40 side is the closing tag 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 now inside

20:49 this element we're going to add additional elements

20:52 now because i don't want to type everything

20:53 in one line i'm going to press enter that's better now here we're going to add

20:58 two elements head and body so once again we type head press tab good and then

21:05 body we use the head element to give

21:07 browser information about this page for example

21:10 here we can use the title element to specify the title of this page that appears

21:17 in the browser over here so let's type my first web page now let's save

21:23 the changes by pressing command and s on mac or ctrl and s on windows good now

21:29 before going any further let's right click

21:31 somewhere and go to open with live server so we're going to open this page using

21:37 the development server that we just installed okay

21:42 all right take a look so our page

21:44 is currently empty because we haven't added any

21:47 elements inside this page and over here we can see the title that we just typed

21:52 my first web page now look at the url or address of this page we have

21:57 127.0.0.1 this number or this ip address represents

22:03 the local computer it's globally known so everybody

22:06 knows 127.0.0.1 references the current computer after

22:12 that we have a colon and then we have the port number on which our web server

22:17 is listening so our web server is waiting

22:20 for http requests on this port okay then

22:23 we have a forward slash followed by the name

22:26 of our file index.html now back to vs code inside the body element we're going

22:33 to add elements that would appear on our page so let's say we want to display

22:37 a tweet what elements do we need here an image and some text elements so we

22:42 type img short for image and then press

22:45 tab here's our image element now this image

22:49 element is different from the other elements we have created so far can you tell

22:53 the differences there are two differences here

22:56 the first difference is that here we don't have

22:58 a closing tag we only have an opening

23:01 tag because the image element cannot have any child

23:04 elements that's the reason now in the previous versions of html we used to add

23:09 a forward slash here and this represents

23:12 a self-closing tag but we don't have to do

23:14 this in html5 so i'm going to keep the code simpler now here we have two

23:21 attributes source and alt with these attributes we

23:25 can supply additional information about an element so we

23:29 use the source element to specify the path to our image so let's open up

23:33 the explorer panel one more time by pressing

23:35 command and b on mac or control and b

23:38 on windows here i'm going to create a new folder called images now for this demo

23:46 i'm going to use my own image which you can also download right below this video

23:50 but you can use any image that you want so here's my image i'm going

23:54 to drop it onto the images folder it's

23:58 right here okay now let's close this window good so where is this image relative

24:05 to our index.html file it's inside the images folder

24:09 right so here in double quotes we type

24:12 images slash mosh.jpg now vs code is suggesting

24:17 this name so we can press tab to complete the code beautiful now alt is short

24:23 for alternative text and we use this attribute

24:26 to give the browser some text to display

24:29 in case the image cannot be displayed we'll

24:31 talk about this in more detail in the future

24:33 so for now i'm going to delete this attribute good now after the image we're

24:39 going to add a text element so we type p that is short for paragraph

24:44 tab and here we can type my twitter handle so at marsh hammondi after that we're

24:51 going to add another text element and here we can type the body of our tweet

24:56 so i love to teach you html perfect save the changes now back in the browser

25:04 our page refreshed automatically this is one

25:07 of the beauties of live server so we don't

25:09 have to manually refresh the page every time we make changes now look at what we

25:14 have here so we have my image and right below that we have two text elements

25:19 take a look unfortunately they're not very visible

25:22 obviously this doesn't look like a tweet because

25:25 we haven't applied css yet as i told you before we use html to define

25:30 the structure or the building block of our web

25:33 pages in the next lesson i'm going

25:35 to show you how to apply css so our page looks kind of like a real

25:38 tweet [Music] all right now let's see how we can use css to improve the look

25:48 and feel of this page look at our head

25:50 element currently we have a single element

25:53 inside the head element that is our title

25:55 element right now after the title we're going

25:59 to add another element called style this is

26:02 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 first we're

26:09 going to work on this image our image is currently too big so let's make it

26:14 a bit smaller back to vs code over here we're going to type img to reference

26:21 our image element then we type a pair of curly braces and inside the braces

26:27 we write one or more css declarations each

26:30 declaration contains a property and a value so

26:34 here we can set the width property to let's say 100 pixels so we type

26:39 the property colon and then the value and then

26:42 we terminate this line using a semicolon so

26:45 we can write multiple css declarations now

26:48 let's save the changes back in the browser

26:51 our image looks smaller that's a lot better

26:54 but look at the edges the edges are so

26:56 sharp i would like to make them a bit round so they appear softer now

27:00 back to our rule here we're going

27:02 to set the border dash radius property to let's

27:06 say 10 pixels now don't worry about memorizing

27:09 any of these properties we're going to go

27:11 over them several times throughout the course

27:13 in this lesson i just want you to get

27:15 a sense of what it's like to use css okay so save the changes now

27:20 look the edges are round and look softer now let me show you a trick if

27:26 we set border radius to a value that is half of the width we'll get

27:30 a round image so i'm going to set this to 50 pixels and here's the result that's

27:36 a lot better now our elements are stacked vertically i want the image to be

27:41 pushed to the left side so let's set the float property to left this will push

27:47 the image element to the left side of our text element take a look so that's

27:53 a lot better but our image is so close to the text i want to add some

27:57 space after the image so here we use

28:01 another property called margin dash right we can

28:05 set it to 10 pixels save and that's a lot better now let's make the username

28:12 bold so we're going to repeat one more time this time we're going to apply

28:15 a rule to our paragraph element so here

28:20 we're going to set the font dash weight property

28:22 to bolt take a look see what happened both our text elements are bold but what

28:30 if you want to apply this style only to the username well we have to separate

28:35 these two paragraph elements so i'm going

28:38 to give the first paragraph element an attribute

28:40 called class so class equals double quotes class

28:45 is short for classification and we can use

28:48 this attribute to put this element inside

28:51 a different class or a different category just like

28:53 the products in a supermarket in a supermarket

28:56 we have products in different categories right so

29:00 i'm going to put this paragraph element inside

29:02 a class or inside a category called username

29:06 and then i'm going to change this rule so this rule is currently applied to all

29:12 paragraph elements but i want it to be

29:14 applied only to paragraph elements with the username

29:17 class so right after p we type dot username now we can also remove p

29:24 and this rule will apply to all elements

29:27 that have the username class whether there are

29:30 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 this is css in action as you can see css has

29:43 a different syntax or a different grammar than

29:46 html throughout the rest of the course you're

29:48 going to learn both these languages in detail next i'm going to show you how

29:52 to format your code using prettier hey guys

29:57 mosh here i just wanted to let you know that this video you've been watching is

30:00 the first hour of my ultimate html and css

30:03 series so after you watch this video if you want to learn more from me

30:07 you can enroll in the full course which

30:09 is about 13 hours long and covers everything

30:12 you need to know to build professional quality

30:14 websites with html and css it also includes

30:17 summary notes exercises a real project a certificate

30:21 of accomplish and you can add your resume

30:23 and a 30-day money-back guarantee to get a refund if you are not satisfied so

30:28 you have nothing to lose and a lot to learn so if you're interested i put

30:31 the link in the description box [Music] one

30:40 thing you need to know about browsers is

30:42 that they ignore white spaces in html and css code for example i can put all

30:48 these elements on a single line and everything

30:50 still works let me show you so save the changes back in the browser we have

30:55 the same result as before because browsers don't

30:58 care how we format our code but formatting

31:01 is very important when it comes to reading and maintaining code we want our code

31:05 to be beautiful and perfectly formatted just like

31:08 an article this is where we use the prettier

31:10 plugin with prettier we can format our code

31:13 in a consistent fashion this is super

31:16 important when you're part of a team because

31:17 different people have different ways of formatting

31:19 their code but if everyone on the team uses the prettier plugin the code will be

31:24 consistently formatted so let me show you how

31:27 to use preview on the top we go to the view menu look at the shortcut

31:32 for the command palette on mac it's shift

31:35 command and p on windows it's probably shift

31:38 control mp so let's bring up the command

31:41 panel and here we search for format document

31:46 now we press enter we get this message

31:48 saying there are multiple formatters for html files

31:51 select the default formatter to continue the reason

31:54 we're getting this message is that vs code

31:57 by default comes with a formatter for formatting

32:00 html files but we have installed prettier which

32:03 is a separate formatter so let's go to configure and tell vs go to use prettier

32:09 to format html and css files okay now

32:14 prettier formatting my code so none of those elements

32:17 are on the same line this is a lot better but let me show you

32:20 a trick we don't want to format our code every time we make a change so

32:24 we can configure vs code to automatically format

32:27 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 like here

32:37 search for format and save here's the setting

32:41 let's enable this setting now every time we

32:45 save the changes vs code automatically formats

32:47 our code using prettier [Music] we talked about

32:56 the dom or document object model i told

32:59 you that when the browser reads the html document

33:02 that is returned from the server it constructs

33:05 a document object model now let me show

33:07 you this document object model in action so

33:10 once again we're going to use chrome dev

33:12 tools the shortcut on mac is shift command

33:15 and i on windows is probably shift control

33:18 and i i'm not really sure so let's open up dev tools now in this lesson

33:23 we're going to look at the elements tab now what we have here on the left

33:27 side is our document object model so we see the same elements that we created

33:32 earlier in the course we have the html element head body and so on but we

33:36 have some additional elements that are injected

33:39 by live server for example we have the script

33:42 element and two divs don't worry about

33:44 these these are purely used by live server so

33:46 it automatically reloads our page now we can

33:49 hover over any of these elements and you

33:51 can see that element highlighted on the screen now

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

33:57 side we can see the styles applied to this element so look at the styles

34:02 we defined for the image element with border radius and so on we can enable

34:06 or disable these styles so we can disable

34:09 the width property and now our image is

34:11 big we can bring it back we can also change its value so we can set

34:16 it to let's say 50 pixels now our image is smaller we can use the up

34:21 and down arrows to change this value this is pretty handy so a lot of front-end

34:26 developers use devtools to play with these styles

34:29 and get the look they want once

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

34:34 then they apply them in the code

34:36 now one more thing over here we can see where these styles have been applied so

34:41 in index.html on line six we can click on this link and this takes us

34:47 to the exact line of code where we wrote

34:49 that style now we are currently on the sources

34:51 tab so we can go back to elements and inspect other elements so this is

34:57 the basics of inspecting elements using devtools we're

35:00 going to talk about this in more detail

35:01 in the future [Music] the last thing we're going to cover in this section is

35:11 validation so as we write code we may run into problems if you have a typo

35:16 in our code or don't use the right syntax or grammar our web pages may not

35:20 look as expected in these situations we can

35:23 use a validator to identify the potential errors

35:26 in our code now currently we don't have any problems on this web page it looks

35:30 perfectly fine to me but let's run it by the standard html validator so we go

35:35 to validator.w3.org this is a standard markup

35:41 validation service we have three methods for validating

35:44 our html markup we can validate by an address

35:47 if our website is live on our internet but this doesn't work for us because

35:51 our website is currently hosted locally in our development

35:55 server so this ip address that we have over here 127.0.0.1 this is a local

36:02 ip address so no one else can access our website so here we have two other

36:07 methods we can validate by file upload or by direct input in this case i'm going

36:13 to go with file upload so let's upload our index.html file and check so look we

36:21 have one warning and two errors the warning

36:24 is saying that we haven't added the lang or language attribute to the html start

36:29 tag this is a common best practice because

36:32 with this we can tell search engines what

36:34 is the language of this webpage so they can

36:36 do a better job at displaying the results this is very easy to fix so here's

36:42 our html tag we're going to add the lang attribute and set it to en which

36:47 is short for english now what is next

36:51 we have an error saying the character encoding

36:53 was not declared don't worry about this we'll

36:56 talk about this in the next section so

36:58 let's look at the second error it's saying

37:00 that an image element must have an alt

37:03 attribute so earlier we had this auth attribute i told you that we use the alt

37:07 attribute to provide a description for our image

37:11 so if the image cannot be displayed

37:13 the alternative text will be displayed again we're

37:15 going to talk about the alt attribute in more

37:17 detail in the future so back to our code let's fix this error real quick here's

37:22 our image tag let's add the auto attribute

37:26 and for the description i'm going to say an image of mosh hammer daddy now save

37:32 the changes let's re-upload the file and validate

37:37 it one more time okay this time we have only a single error and that has

37:42 to do with character encoding which we're

37:44 going to talk about in the next section so this is all about html validation now

37:49 for css we have a different validator so

37:52 we go to jigsaw.w3.org css validator now you

37:59 don't have to memorize this address simply go

38:01 to google and search for css validator here's the first link so we have the same

38:08 interface we can validate our css code using

38:11 an address or by file upload or direct

38:14 input now in this case we have embedded all of our css code inside our html

38:20 markup but as our web pages get more complex we want to separate our css

38:24 code into separate files so our code is

38:27 better organized we'll talk about this in more

38:29 detail in the future so for now i'm going to copy all of our css code

38:35 and then go to the third tab paste it over here and validate it so we

38:42 don't have any errors everything is perfect so

38:45 this is all about validation validation is very

38:47 important if your web pages aren't displayed

38:49 as expected always start with a quick validation because

38:52 this can often point you in the right direction right that brings us to the end

38:56 of this section in the next section we're

38:58 going to explore html in more detail [Music]

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

39:11 journey and explore html in more detail so

39:14 in this section we're going to cover the essential

39:16 html elements you need to know to build

39:18 web pages you will learn all the elements

39:21 used for displaying text links images lists

39:25 tables as well as container and structural

39:28 or semantic elements even if you know the basics

39:31 of html i would still encourage you

39:33 to watch this section thoroughly because a lot

39:35 of people don't use these elements the right

39:37 way so let's jump in and get started [Music]

39:50 earlier in the course i told you that we use the head section to give

39:53 browsers and search engines information about the web

39:56 page so let's explore it in a bit

39:58 more detail i'm going to start with a blank document now let me show you

40:01 a cool trick if we type an exclamation mark and then press tab we get a basic

40:07 html boilerplate which means a basic html template

40:12 so on the top we have our doctype

40:14 declaration below that we have our html element

40:17 with the lang attribute which is a common

40:19 best practice next we have our head section with a bunch of elements we're going

40:23 to talk about in a second followed by the body section so this is a very basic

40:28 html boiler plate now what do we have in the head section well we have

40:33 a couple of metal elements for giving information

40:36 about this web page the first meta element

40:38 is for defining the character set what is

40:41 a character set well computers don't understand characters

40:44 like abc and so on they only understand

40:48 numbers which are represented in the binary format

40:51 zeros and ones so using a character set we can map a character to a numeric

40:56 value the first character set that was designed

40:59 was the ascii character set which is short

41:01 for american standard code for information interchange ascii

41:05 can only represent the characters in the english

41:08 language so it's very limited so over here

41:11 different character sets have been created to represent

41:14 more characters in international languages the character

41:18 said that we use most of the time these days is utf-8 which can represent

41:22 almost all characters in the world so back

41:25 to our code with this meta element we're

41:27 defining the character set used in this html

41:30 document okay now below that we have a meta

41:35 element for configuring the viewport the viewport is

41:39 the visible area of a web page so it is this area over here obviously

41:44 on a mobile device or on a tablet our viewport is smaller but here on desktop we

41:50 can change the size of the viewport

41:51 by resizing the browser so now our viewport is smaller okay now back to our code

41:58 with this element we're defining the initial width and zoom

42:03 factor for the viewport we'll talk about

42:06 this in more detail in the future for now

42:08 all i want you to know is that we need this element so our web pages

42:12 look good on all devices mobiles tablets

42:15 and desktop computers so as a best practice every

42:18 web page should have at least these two

42:20 meta elements but we have additional meta elements

42:23 let me show you so if you type meta in this list you can see all

42:28 possible meta elements for example we have

42:31 this element for defining keywords on a web page

42:34 so let's select this here we can type

42:36 multiple keywords like html comma css and so

42:40 on in the past these keywords were heavily

42:43 used for search engine optimization but these days

42:46 most search engines don't put too much weight

42:49 on these keywords but we can still use

42:50 them to define the keywords that represent

42:53 this page we have another meta element for defining

42:57 a description for this page so if you type meta colon desk and then press

43:01 tab or enter here we can type a description for this page what we type here

43:06 will appear on google or other search engines

43:10 when someone searches for a website for example

43:12 if we search for apple here's what we get now look at this text what

43:17 you see here comes from this element over here so this is the purpose of metal

43:22 elements with this metal element we can give

43:25 information about the web page alright next we're

43:28 going to talk about the elements you need to know for working with text [Music]

43:38 all right now let's talk about the most

43:39 common elements for working with text so you

43:42 learn about the p or paragraph element which

43:44 we use for displaying some text so here

43:47 i'm going to say i love to teach you html now sometimes we want to emphasize

43:52 a part of our text let's say the html word here to do that we can

43:57 wrap it inside an m or emphasis element so here i type m press tab here's

44:04 the emphasis element let's hover over it and see what the tooltip says it says

44:09 the m element represents stress emphasis of its

44:12 content so whenever we want to emphasize some content

44:15 we can wrap it inside the m element so in this case i'm going to move

44:19 html inside these tags now let's save

44:24 the changes here's what we get so by default

44:27 browsers display emphasized content in italic but don't

44:32 assume that whenever you want to display

44:33 italic content you should use the m element

44:36 because the purpose of the m element is

44:38 to emphasize content in our html document

44:41 and this helps search engines extract important content

44:44 in our documents anything to do with styling

44:47 should be done in css for example here we

44:49 can change the default style of emphasize element

44:52 and remove the italic let me show you

44:54 so in the head section we add the style element and here we define a rule

45:00 for emphasized content we can set the color to red and font style to normal now

45:08 don't worry about memorizing any of these css

45:10 properties we're going to go over them multiple

45:12 times throughout the course but let's see what

45:14 happens now that we apply these styles so

45:18 our emphasized content is displayed in red

45:20 and is no longer italic now in the past

45:23 we had an element called i which was short for italic if we use this element

45:30 we get the same result as before

45:32 our content is displayed in italic but this element

45:35 is considered deprecated because html is not

45:38 meant for styling it should only be used

45:41 for structuring content so don't use the i

45:44 element to display content as italic okay now

45:47 we have a similar element in html called strong let's hover over it and see what

45:53 the tooltip says the strong element represents strong

45:56 importance seriousness or urgency of its contents conceptually

46:01 it's kind of similar to the emphasis element

46:03 so where you should use it really depends

46:06 on your context on your content now let's save the changes and see what we get

46:11 so by default strong elements are displayed as bold but once again we can always

46:16 change the styling now in the past we

46:18 had another element called b which is short

46:21 for bold so whenever we wanted to make

46:23 something bold we use this element but once

46:26 again this element is considered deprecated because styling

46:30 should be done in css and not in html

46:32 okay so don't use b or i elements now i'm going to remove this element

46:39 and just add html let me show you a cool trick let's say we want to wrap

46:43 this word with the m element there is a shortcut for it so on the top

46:48 we go to the view menu look at the shortcut for the command palette on mac

46:53 is shift command on p and on windows is probably shift ctrl np so let's

46:58 select html and then bring up the command

47:01 palette with this command palette we can execute

47:04 commands in vs code so here i'm going to search for a command called wrap

47:08 with abbreviation that is the first command

47:10 in the list now we press enter and here we

47:13 type the element that we want to use to wrap our selected content in this case

47:18 m press enter done so i didn't have to manually create an m element and then

47:24 move html inside it it's very handy so this is all about text now let's talk

47:29 about headings so in html we have six heading elements h1 we have h2 h3 h4

47:43 h5 and h6 so let's see what we get so heading 1 represents the most important

47:54 heading and heading 6 represents the least important

47:57 heading now one common mistake that i see amongst a lot of people is that they

48:01 choose these headings based on their size so

48:04 if they want to have a heading with this size they would just use heading 4.

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

48:12 the size can always be changed with css it's a matter

48:15 of styling we should use these headings to create a hierarchy

48:19 so every web page should have one and only one h1 element

48:23 this heading represents what this page is all about now nothing

48:27 happens if you have multiple h1 elements for example i can duplicate

48:32 this line and say heading 1 plus now look we have

48:37 two h1 elements but this is going to confuse search engines they're

48:40 not going to figure out what this page is really all

48:43 about so every page should have a single h1 element so

48:49 i'm going to remove this line now after we use h1

48:52 then we should use h2 we should not jump to h4 so

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

48:58 one for html the other for css so my next heading

49:02 should be h2 and here we can type html obviously below

49:07 this heading we can have some text so i'm going to say

49:10 html tutorial our next heading should be h2 so this is

49:16 the css section and in this section we can have some additional

49:20 text let's say css tutorial now i'm going to delete these four

49:25 headings so let's take a look so we have a hierarchy

49:30 on the top we have an h1 element below that we

49:33 have two h2 elements now let's say in this section we're

49:37 going to have two subsections there we should use h3 elements

49:42 so here's our html section in this section we're going to have

49:46 two h3 elements let's say code and exercise now take

49:52 a look so we have a hierarchy this is how we should

49:56 use these heading elements the better we can represent the structure

50:00 of our document using html the better search engines can read

50:04 and understand our content so that's all about text next we're

50:08 going to talk about displaying special

50:10 characters in html [Music] some characters

50:19 are reserved in html and to display them we have to use

50:22 a special notation for example let's say we want to wrap

50:25 the word html with angle brackets see what's going to happen

50:29 so i type a left angle bracket and a right angle

50:34 bracket see what happened vs code thought we're adding an html

50:37 element so it automatically generated the closing tag we don't want

50:42 this so let's delete it now back in the browser look

50:46 where is our html word it's not here because the browser

50:50 interpreted this as an html tag this is not what we

50:54 want we want to display this exactly as this so to solve

50:57 this problem we're going to use html entities all these entities

51:01 start with an ampersand and end with a semicolon in between

51:06 these two characters we type a few characters that determine the type

51:09 of the html entity so we have an entity for displaying

51:13 the less than sign that is l t short for less

51:18 than now let's remove this similarly we have another html entity

51:23 for displaying the greater than sign so we type an ampersand gt

51:28 which is short for greater than followed by a semicolon now back

51:32 to the browser that's exactly what we wanted perfect another common

51:37 html entity is the copyright symbol so at the end i'm going

51:42 to type an ampersand copy and a semicolon now take a look

51:47 here's our copyright symbol beautiful now we have so many editors

51:51 in html and quite frankly you don't need to memorize any

51:54 of them 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

52:00 list so on google search for html entities and on this second

52:06 link dev.w3.org you can see the complete list of news entities

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

52:16 i have never used any of them the only ones i

52:18 have used are these three plus non-breaking space let me show

52:22 you what that is about so i'm going to do

52:25 this line and generate some dummy text so we add a paragraph

52:29 element now to generate some dummy text we type lorem followed

52:34 by the number of words we want to generate let's say 50.

52:37 tab look this is some dummy text in latin now let's

52:43 preview it in the browser so here's what we get let's

52:46 imagine that the last part on the first line and the first

52:50 word on the second line should be stick together here we

52:53 have a line break in between these two words you want

52:56 to prevent that so i'm going to copy this word now

53:01 here in vs code let's bring up the search panel by pressing

53:04 command and f on mac or ctrl and f on windows

53:08 now we paste this word okay here it is we want

53:11 to make sure that these two words are always together there

53:15 is no line breaking between them so i'm going to replace

53:18 this regular space with a non-breaking space which is an html entity

53:23 so we type an ampersand nbsp which is short for non-breaking

53:28 space followed by a semicolon now take a look so both

53:34 these words are on the second line so this is all

53:37 about html entities next we're going to talk about links [Music] almost

53:47 every webpage on the internet has links to other pages

53:50 or websites to create these links we use the anchor element so

53:54 we type a that is short for anchor and then press

53:57 tab now every anchor element should have an href attribute href

54:03 is short for hypertext reference i know it's a mouthful it

54:06 basically means a url or a link so for this demo

54:09 i'm going to create a second page called about.html and then

54:13 link to it over here so in the explorer panel let's add

54:18 a new page called about.html now here we're going to create

54:23 a basic html boilerplate remember how to do that we type

54:27 an exclamation mark and then press tab that's it beautiful now

54:32 back to index.html here we can use a relative or an absolute

54:36 url what do you mean by that well a relative url

54:40 starts from the current page so currently we are on index.html

54:44 and we want to go to about.html now currently both these pages

54:49 are in the same folder so we can type a relative url

54:53 to about.html like this about html that's a relative url now

54:59 what if about.html was in a different folder so let's add

55:03 a new folder to our project called company and then move

55:07 about to this folder now where is about.html relative to the current

55:13 page it's inside the company folder right so here we type

55:18 company slash about.html this is a relative url now let's give

55:23 this link a text i'm going to say about me so

55:27 we type our text inside the anchor element okay save the changes

55:31 back to the browser here's our link click and we're

55:35 currently on the about page which is empty beautiful now back

55:39 to our homepage instead of a text we can also use

55:42 an image so i'm going to delete about me and add an image

55:47 element so img tab once again here we can type

55:50 a relative url to our target image so i'm going to go

55:53 with images mosh.jpg now save take a look obviously this image

56:00 is way too big we can always use css to resize it

56:04 but that aside look at the mouse icon when we

56:08 hover over this image it changed to a hand to indicate

56:11 that this image is clickable okay now back to our code

56:15 to keep things simple i'm going to get rid of this image

56:18 and get back to our text about me now let's go

56:23 to the about page and add a link back to the home

56:25 page so over here we're going to add an anchor element

56:32 what should we type for the href attribute well currently we are

56:36 inside the company folder we have to go one level up

56:39 so we can access index.html right to do that we type

56:43 double periods and a forward slash with this we can go

56:46 one level up now at this level which is the root

56:49 of our website we have the company folder the images folder

56:52 and index.html so we can reference index.html and for the text we're

56:58 going to say home page again this is another example

57:02 of a relative url because it starts from the current page and goes

57:06 somewhere else now if you're inside a deeply nested folder structure

57:10 we might have to go multiple levels up so double period

57:13 and a forward slash then we repeat and repeat with this we

57:17 can go three levels up now as you can see

57:20 urls like this kind of look messy they look hard

57:23 to read in those cases we can use an absolute url so

57:27 we start with a forward slash and this represents the root

57:31 of our website at this level we have access to index.html so

57:36 this is an absolute url okay now back to index.html here

57:41 we are linking to an html document but we can also

57:44 link to non-html documents like images pdfs powerpoints and so on so

57:50 let's add a link to my image so for the href

57:53 i'm going to say images slash mosh.jpg and for the text

57:58 i'm going to say my photo save take a look so here's

58:04 our second link click 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 we're going to add the download attribute

58:14 to our anchor element so we type download press enter now this attribute

58:19 doesn't have a value so we can remove the double quotes

58:23 and the equal sign so we just add the attribute name

58:27 now save back to the browser we go back here we

58:31 have to manually refresh the page because the live server only

58:35 refreshes the current page now previously we were on my image

58:38 so that was the url that live server refreshed so here we

58:41 refresh to get the latest changes now when i click

58:45 on this link instead of seeing my image we're going to see

58:47 my image getting downloaded take a look click and here's my image

58:52 beautiful now we can also link to other parts of this page

58:56 so let's create two sections with a lot of text so

58:59 i'm going to add an h2 element and of course i

59:02 missed the h1 but let's not worry about it for this h2

59:05 we're going to say html and below that we're going

59:08 to add some dummy text with 200 words so paragraph lorem

59:12 200 good now right after that we're going to add another

59:17 h2 for the css section with some more text okay let's

59:23 save the changes take a look as you can see the css

59:27 section is below default so we have to scroll down

59:30 to see what we can do here is on the top we

59:34 can add a link to the css section so when

59:36 the user clicks on that they will immediately jump to the css

59:39 section that is very easy so here's the css section first

59:43 we have to give this element a unique identifier just like

59:47 everyone in the real world can have a unique identifier like

59:49 a driver's license or a password every element on a page can

59:53 also have a unique identifier so here i'm going to set

59:57 the id attribute to css or we can use a more

1:00:01 descriptive name like section dash css the name doesn't really matter

1:00:07 here what matters is that we're defining what is called a fragment

1:00:12 or a place on this page now we're going to add

1:00:15 a link to this fragment so on the top let's add

1:00:20 another anchor element now for the href we're going to type

1:00:24 the pound sign followed by the name of our fragment which is

1:00:27 section css and for the text we're going to say css

1:00:32 now back to the browser take a look i'm going to click

1:00:36 on this we immediately jump to the css section beautiful now

1:00:40 a lot of websites like this also have a link that helps

1:00:42 you jump to the top of the page let's see how

1:00:45 we can create that so after the css section i'm going

1:00:50 to add another anchor element now for the href i'm going

1:00:55 to use an empty fragment so we just type a pound sign

1:00:59 without an identifier and then we say jump to top take

1:01:04 a look so here's our link click and now we're on top

1:01:09 of the page now let's see how we can link to external

1:01:12 websites so let's add another anchor element to link to google

1:01:17 now what should we type here well google.com is a different

1:01:20 website so here we cannot use a relative url we have

1:01:24 to use an absolute url but if you start with a forward

1:01:27 slash we're referencing the root of our website but in this case

1:01:31 we want to go to a different website how can we

1:01:33 do that well we have to start with the protocol so

1:01:36 https colon to forward slashes google.com now let's type google

1:01:44 and test our page click we're on google beautiful now sometimes when

1:01:50 linking to external website we want that link to open

1:01:54 in a new browser window or a new tab let me show

1:01:56 you how to do that so here's our anchor we set

1:02:00 the target attribute to underline blank save now back to the homepage

1:02:07 once again we have to manually refresh to get the latest

1:02:10 changes okay now when i click on google you see a new

1:02:15 tab beautiful and one last thing we can also link

1:02:19 to emails so i'm going to add an anchor and for href

1:02:22 i'm going to say mailto colon programming with mosh gmail.com email

1:02:31 me save the changes now back to our page when i

1:02:36 click on this link my mail client will open and my email

1:02:40 address will be pre-populated take a look so click and here's

1:02:44 my mail client so this is all about links now one

1:02:48 last thing before we finish this lesson what is the difference

1:02:50 between a link and a hyperlink well a link is just

1:02:53 an address a url the location of the target page a hyperlink

1:02:58 is the element that the user can click on to navigate

1:03:00 to that target page that is the difference between a link

1:03:03 and a hyperlink but quite often these terms are used interchangeably

1:03:07 alright we're done with this lesson next we're going to talk about

1:03:10 images [Music] all right now let's talk about embedding images

1:03:19 in a bit more detail for this lesson i'm going to grab

1:03:21 an image from unsplash.com which is where we can find a lot

1:03:25 of beautiful and freely usable images so let's search for coffee

1:03:31 there are tons of coffee pictures here i'm going to grab

1:03:35 this picture we can download it for free now look

1:03:39 this image comes in different sizes small medium and large

1:03:43 for now we're going to grab this image in a small size

1:03:45 but in the future we're going to talk about embedding images

1:03:48 at different sizes depending on the device so on mobile devices we

1:03:52 want to serve a smaller image and on desktop computers we

1:03:56 want to serve a larger image for now let's not worry about

1:03:59 these complexities we'll have a conflict section on this topic later

1:04:02 on so let's download the small image now it says say thank

1:04:08 you to nathan thanks nathan this is a beautiful picture you

1:04:11 have done a great job now i'm going to drag and drop

1:04:14 this image onto the images folder and then rename it

1:04:18 to coffee we want to give it a descriptive name this is

1:04:21 a small search engine optimization tip when we provide descriptive names

1:04:25 for our images search engines can better understand and index our pages

1:04:30 okay so here's our image now let's add an image element

1:04:36 we set the source to images coffee.jpg now what about the alt

1:04:41 attribute well i briefly mentioned that we use this attribute

1:04:45 to provide textual description of the image it's not compulsory but is

1:04:49 highly recommended for a number of reasons the first reason is

1:04:52 to make our page accessible to visually impaired people these people

1:04:56 use a screen reader to read the web out to them

1:05:00 so with this alternative text we can tell them what we are

1:05:02 showing on the page and that means we should write

1:05:05 a good meaningful description here like a coffee mug on a table

1:05:10 don't write something like image or image one 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

1:05:22 here and there's one more benefit if this image cannot be loaded

1:05:26 for some reason the alternative text is shown let me show

1:05:29 you what i mean so i'm going to add a typo here

1:05:32 now back to the browser look the image is not loaded

1:05:36 but we see the alternative text this can also happen if

1:05:40 there is a network connectivity issue if the user gets disconnected

1:05:43 they can still see the alternative text so let's remove the typo

1:05:48 now let's talk about sizing images as i told you

1:05:50 before we can use css to resize our images so here

1:05:54 in the head section let's add a style element and apply

1:05:59 a rule to our image now this rule is applied to all images

1:06:03 on the page this is probably not something we want

1:06:06 to do in the real world scenario in a real-world scenario we

1:06:09 want to apply a class to this element and then define

1:06:12 rules for that class we'll talk about this in more detail

1:06:15 in the future so for now let's give this image a width

1:06:19 of 200 pixels and a height of 200 pixels now there's

1:06:25 a tiny problem in our image can you tell our image

1:06:28 is kind of squashed here's the reason we're dealing with a rectangular

1:06:32 image look this is a rectangular image but we're converting it

1:06:36 to a square image now look at the shape of this coffee

1:06:39 mug it's kind of round right like compared with what we

1:06:43 have over here our image is vertically squashed let me show

1:06:46 you another way to verify this we can right click

1:06:49 on the image and then go to inspect this opens chrome devtools

1:06:54 and selects our image in the dom now on the right

1:06:58 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

1:07:04 you to pay close attention to the image and see how

1:07:07 the shape changes so look now the coffee mug is more

1:07:12 round but if i applied the height property it becomes squashed so

1:07:16 how can we solve this problem well we have a new

1:07:19 property in css called object fit so here we can set

1:07:23 object fit to one of these values most of the time

1:07:26 we use cover so the image covers its containing box what is

1:07:31 this containing box well first let me set this to cover

1:07:35 here we have this image element right conceptually there is a box

1:07:39 around every element in an html document we don't see

1:07:43 this box but the browser uses that box to figure out how

1:07:47 the page should be displayed so here we have a box

1:07:49 with this dimension 200x200 and in this box we're trying to insert

1:07:54 this image right now when we set object fit to cover

1:07:58 our image will get resized and potentially cropped so it covers

1:08:02 the entire containing box let's verify this so save the changes

1:08:07 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

1:08:14 again so object fit is a very useful property now we can

1:08:18 always play with all possible values over here so i'm going

1:08:22 to select this deleted now using the up and down arrows

1:08:27 we can go through this list and see the impact of every

1:08:30 value now i'm not going to go over all these values

1:08:33 and explain what they mean this is pointless you can

1:08:36 always figure them out on your own just remember that most

1:08:38 of the time we use cover so the image covers the entire

1:08:43 containing box alright this is all about the images for now next

1:08:46 we're going to talk about video and audio hey guys mosh

1:08:51 here i just wanted to let you know that this video

1:08:54 you've been watching is the first hour of my ultimate html

1:08:57 and css series so after you watch this video if you want

1:09:00 to learn more from me you can enroll in the full

1:09:03 course which is about 13 hours long and covers everything you

1:09:06 need to know to build professional quality websites with html and css

1:09:10 it also includes summary notes exercises a real project a certificate

1:09:15 of accomplish and you can add your resume and a 30

1:09:18 day money back guarantee to get a refund if you're not satisfied

1:09:21 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