Transcript for:
Ultimate HTML and CSS Series - Part 1

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