Web Development with HTML & CSS – Full Course for Beginners

Key Takeaways

this comprehensive course on web development with HTML and CSS is created with beginners in mind it's Tau by Akash the CEO and co-founder of Jovian the course starts with the basics of HTML and CSS and gradually progresses into advanced concepts covering git GitHub and Cloud deployment using versell as well as mobile first responsive design the bootstrap CSS framework and the express web application framework so let's start learning hello and welcome to this course on web development with HTML and CSS HTML and CSS are the foundation of modern web design allowing you to create visually appealing and functionally uh visually appealing and functional web pages HTML specifically stands for the hyper text markup language and it is a standard language used to create web pages and this is what HTML code looks like this is some of the code that we'll be writing today it can be used to create headings paragraphs images links and many more things so if I head over for example to jan.com this is a web page now on this web page everything has been crafted using HTML and then styled using CSS so HTML is used to structure the content and add elements and then cascading style seet uh cascading style sheets or css is used to describe the presentation of HTML documents it allows you to control the layout and the appearance by defining styles for elements and you can configure things like fonts colors margins borders Etc so today we are going to look at the very basics of HTML and CSS we are going to start by creating an HTML file adding code into it using the Ws code editor viewing it in a browser we're going to then use some basic HTML tags to create a web page then we're also going to use some more HTML tags to structure content on a page things like headings lists paragraphs Etc then we're going to add styles using CSS and understand the CSS Box model for layout that is the core foundational Concept in CSS and then we're going to style these uh HTML tags using CSS to replicate the structure of a desired web page so we'll look at a problem statement and we'll try to replicate the web page that we have in mind using HTML and CSS and finally if time permits we are also going to try and dip deploy that website to the cloud using an online hosting service so in just about 2 and 1 half hours from now you will be in a position where you will have deployed your first website to the cloud so isn't that exciting the first very first lesson you will be deploying your own website and there are no prerequisites for this tutorial the best way for you to learn these skills is to follow along as you're watching the lesson pause it at various places follow along type out all the code yourself don't even copy paste just type everything out and then experiment with it using the exercises that are present in the lesson now you can find the completed code for this tutorial here in this GitHub repository specifically you can open up this folder my first web page and you will find all the code that we are covering today in this folder so we will explore the basics of HTML and CSS by attempting to solve this problem statement we will create a web page that show Cas is job listings for Jovian at Jovian we have a growing team we have a growing user base we're adding new programs so we have certain jobs for which we want to hire but we don't have a jobs page yet so we're going to try and create a jobs page for Jovian and on this jobs page we're going to show show a few things we're going to require our job space to have a few things one is a nav bar at the top showing the Jovian logo so something like this this is called a navigation bar or a nav bar then we may want a header section displaying a picture and some relevant information about Jovan so anybody who comes to our jobs page should learn a little bit about the company itself so we'll have that then maybe a list of job openings that include the job designation location and maybe salary details we'll see what we can put in there and maybe also a link to apply for the job and then a footer at the bottom of the web page with some important links so generally at the bottom of any web page and a website you might include you might have a bunch of links to other web pages on the same website or elsewhere so we are going to try and build all of this today in the next couple of hours and we will also attempt to make the page visually appealing and informative so let's see how far we can get this is a fairly ambitious problem statement while we are also learning the basics of HTML and CSS now creating your first web page is actually quite easy all you need to do is simply create a file put some text into it and then open that file within a web browser and while you can use any Text Editor to create the file and put some text into it web developers often use editors that are better suited for programming because they have certain features that will help you write code in various programming languages easily and these are called code editors or sometimes also called integrated development environments okay so in this tutorial for today we are going to use a code editor called Visual Studio code now you can download it for free it is a free and open- Source tool so you can download it by going to code dovisual studio.com all the links are present in the lesson resources and the lesson notebook now based on which operating system you're working on you'll have to download it for that operating system you can see that it is available for all major operating systems and it is developed by Microsoft so it also has great Windows support and you should download it and once it is downloaded just double click the installer and follow the instructions to install it on your computer and once it's installed we can then start creating our very first web page okay so let's get into it now the first thing we need to do is create a project folder typically whenever you're working on a project it's a good idea to create a folder where you're going to put all the files so that you don't pollute your desktop or your downloads folder so let me go in here and let me create a new folder so I'm going to call this folder let's see I'm going to call this folder my first web page okay uh I've just used hyphens here my first web page um if you can't see let me just zoom in here a little bit yeah so you should be able to see it now my first web page all right uh so I've just used hyphens here my first web page that is the name of the folder and now we want to open up this folder in vs code so let us first open Visual Studio code or vs code let me just type Visual Studio code here and open up visual studio code okay so now now I've opened up visual studio code this is what its user interface looks like you might also see something like this you might see a sidebar here as well so that depends you can hide or show the sidebar you have options to show this over here now what we want to do in Visual Studio code is open up this folder okay so you want to say file open folder so go into the file menu select open folder and I'm going to come into my desktop and select this folder my first web page don't double click on it just select it and then click open okay so now you will immediately see that you you will see the folder name here in the sidebar my first web page I hope you can see it and then you'll see this welcome screen I'm going to close this welcome screen but now this folder is open in vs code so VSS code is showing us this folder and what I can do is I can now create a file within this folder directly from vs code so if I just go here I should see a new button and and in this new button um I can using this new button I can create a new file and I'm going to create a file called Web page. HTML so any web page has the HTML extension just like images have a JPG extension or Excel files have XLS extension so web pages have the HTML extension okay so now I've created this file called webpage. HTML and I can verify that this file is actually present here webpage. HTML you can see that when I open that window when I open that folder I can see that the file webpage. HTML has been created okay now let me just get this onto the right now once I've created this file webpage. HTML and let me close the sidebar I'm going to put some text into it so let me just say hello HTML all right so I've just written the words hello HTML into webpage. HTML all right now here's what I'm going to do I am going to now open this file webpage. HTML in the browser so I'm going to say open with and I'm going to select the browser that I'm using or sometimes you can also just double click and it will automatically open in Google Chrome but just to be safe I'm opening it with brave browser that's the browser that I'm using and you can see as soon as I opened it the same text that I entered into the web page. HTML file the exact same text showed up here you can see I'm just zooming into about 200% so that you can see it more clearly okay let's keep it at 200 all right so hello HTML is what I typed here and hello HTML is what showed up when I opened when I opened webpage. HTML in the web browser so that's it that's how you create a web page you just create a text file call it something. HTML and then open it in a web browser and you have a web page however you want to put some kind of a structure into the web page because we don't just want to write text we can p paste a lot of text but it will all just be text on the screen so that is where you you use something called called Tags so first let me just put in some code here so I'm going to create this tag called HTML and you can see that this tag starts with a less than symbol or an arrow bracket and ends with an arrow bracket and every tag has a tag name in this case this tag has the name HTML let me zoom in further so it has the name HTML and every tag generally has a closing tag okay so this is the opening HTML tag and HTML is always the outermost tag in any web page and then there is the this closing HTML tag and the difference between the opening and the closing tag is this slash character before the tag name okay so any HTML page or any web page is built up using tags these tags are used to create structure within the page okay now within an HTML tag I'm going to put in a head tag okay we'll talk about what these tags do in just a second and again vs code does this nice thing that as soon as you create an opening tag it automatically adds a closing tag for you and that is why uh Developers use these code editors okay and then uh another tag that I'm going to put in here is called the body tag okay so now we have a HTML tag which is the outermost tag inside it we have the head tag and the body tag and let me just save that for a second and reload and you can see now all the content has gone away so now nothing is showing up on the browser because we've not put any content into the page the first thing I'm going to do is inside the head tag I'm going to put in a title tag okay um so I've just typed title I've created an opening tag and vs code added a closing tag for me and let me just say my first web page here inside the title let me save that let me come back here into the browser reload and now you will notice that nothing has happened here on the page but if you notice carefully the browser tab the the browser heading the tab the browser tab here it has the title my first web page Okay so it has the title my first web page and you can zoom in here and I can zoom in here and I can show you that has it has a title my first web page all right now uh let us add something here in the body so I'm going to just add something called a div here in the body so div is again another tag that is used to put some content into the body and let me just put here hello HTML and CSS okay so this is what a typical web page or typical HTML document looks like it contains a bunch of tags and then it contains tags within tags and each tag has a specific purpose okay so now let me put that in and let me reload and now you can see that here we have hello HTML and CSS and then you can go back and change this let's say let me make it hello html/css and let me reload now it says hello html/css okay so this is how you construct a web page you put in some tags and then you open the web page in a web browser all right so that the basics of how you create an HTML page you launch vs code open up the project folder within vs code and then put some code into it this is HTML code so we put in an HTML tag head tag title and body and then save the file once you've added the code and then open it with a browser and this is what it looks like okay now let's understand HTML tags a little better so tags are the building blocks of HTML and they are used to describe the structure and the content of a web page now normally every tag will will have an opening tag like the HTML tag had an opening tag like this over here and it will also have a corresponding closing tag and sometimes tags can have attributes and these attributes are used to provide more information to the browser or modify the behavior of a particular tag for example the HTML tag has this attribute called Lang which is simply written in within the opening tag itself and then the attribute Lang is given a value en which means English so here what we doing is we're indicating to the browser that this particular HTML page is written in the English language so now that browser can use it for let's say uh setting up a translation automatic translation tool or something like that right so an attribute is used to provide some additional information about that tag or modify the behavior of that tag and we look at a lot of attributes with time so I can say here for example HTML Lang equal to en and that doesn't do anything visible but that does inform the browser that this this is an English web page all right now so that's about tags and a tag can contain one or more children so like the head and the body are called the children of the HTML tag and a tag along with its children together is called an element okay so the tag is simply this piece this is the opening tag and this is the closing tag everything inside a tag is called its children which is again other tags and then a tag together with it children is called an element so this whole whole thing is an element and then this is an element and then this is an element so every tag along with its children is an element and then what's whatever is inside a tag is called children okay these are just some terminology that you'll see when you're reading about HTML and CSS all right now tags contain attributes we talked about that that and there are various different tags to create headings paragraphs lists images Etc and we look at those in just a bit now one thing I want to mention is that HTML is the outermost tag however in many web pages you will find a dock type declaration just above the HTML tag so you will find something like this you will find a doc type let me zoom in here so you will find dock type HTML at the top of most web pages and that is just a good convention that is followed that at the top of every HTML web page it's a good idea to just put this dock type HTML okay and this this is just something that you copy paste at the top of every HTML web page and you can literally just go on Google and search doc type declaration okay and you can find this link HTML doc type declaration and you can just copy this and put it at the top of each HTML page and if you want to understand what this does you can I encourage you to go through this H W3 schools link uh it's not important it's just a convention that you want to put in because there have been multiple versions of HTML and this is a way for you to indicate that you want to use the latest version of HTML to the browser okay now we have the doc type then we have a bunch of these tags now the HTML tag is the Autos tag we already talked about that and the HTML tag is typically only contains two other tags the head tag and the body tag and it has a lang attribute and it has some other attributes also that can be set and you'll see a doc type declaration just above HTML so that's the HTML tag okay then we have the head and title tags which are the tags that we are seeing here so so the head tag is a container tag in HTML that often doesn't contain any content that is going to be visible on the page exactly but it generally contains some information that is passed on to the browser and that is useful for the browser and that is also useful when you're sharing this link with somebody else so for example it contains the title tag we put in the title tag over here in the head and the title tag is used to set the title of the browser tab similarly there are some meta tags so and then some meta image tags Etc and these are used to set the preview image and the description that shows up when you share this link on a social platform or when this is seen by a search engine or something like that okay so the head tag is very useful it is also used to sometimes include maybe stylesheets CSS um files and sometimes used to include scripts we'll cover all of these don't worry if these terms don't make sense just yet for now we just using the title tag within head so within head we just have the title tag and then we have the body tag tag now within any HTML page you have a body tag and the body tag defines the main content of the HTML document it is usually placed after the head tag and it contains all the visible elements of a web page okay and the body tag can also include other HTML tags like headings paragraphs links Etc and here is the key thing here's the key difference between just putting some text into a file versus putting it in the body tag and putting it in in HTML tags you can add styling you can add colors fonts you can change the layout and you can even add interactivity using JavaScript and CSS right so all of these things are applied within the elements in the body tag to change the appearance and functionality of the web page which is what we're going to do today so here is an example of a web page with some content within the body tag so here there is an H1 uh which is a heading tag we'll talk about it there is a paragraph tag there is an image tag and there is a a tag so I will not paste these right now but I'll actually leave these as an exercise so maybe just try and paste this into an HTML Page open it in the web browser and see what you can come up with okay so that is the body tag it is what contains all the content of the web page that we are going to be building today then we have the div tag okay now you notice that inside the body I did not directly put in hello HTML CSS I created a div so I didn't have to do this I could have just put it into the body itself but the div tag is typically an HTML element that is used to group and organize other HTML elements together for example you can create one one piece of content here in this first div div this is some content and then you can have a second piece of content under in this second div and then you can have maybe a third piece of content which is itself divided into multiple pieces of content in this third div okay the div stands for division and it literally creates a division on the page vertically speaking it kind of divides the page vertically essentially you can think about it and it is used to divide or group content into logical sections and it is a block level element which means that it takes up the full width when you add a div tag it takes up the full width and then the next div tag is going to appear below it and the next div tag is going to appear below it and so on and it does not have any its own style or semantic meaning or anything but it is used with CSS for styling okay so the div tag is something that we will attach a lot of CSS properties into to style the web page so let us create uh let us look at an example of a web page create containing some div tags okay so here is the content that we're going to put in or type in one by one so first let us create a div tag and let us [Music] say this is some content okay so now we have put in some content into div tag and it says this is some content as we might expect then let me create another div tag and let me say this is a second line of content okay now if I reload the page you will notice that this content showed up below this content so that is what the div tag is creating it is basically creating a division within the page so this content it shows up in this area and then this content shows up below it in this area now notice that I can go into the next line I I can type this is isn't a third line now I'm not creating a new div tag I'm still using the second div tag but this time you can see that even though I've typed this content on a new line it is still showing up on the same line as the second line okay so here is the important of importance of div if you want to split content vertically on a on a web page then you want to create divs and each div is going to create a new vertical section or New Vertical division within the web page okay and if you simply create multiple lines of content like this all of that is going to show up in a straight line that is not necessarily going to show up one below the other now here is another example now this time I have a div div tag but inside the div I'm then creating more div so some more lines okay so now I have this third div tag and now in this third div tag I have again another div tag uh three more div tags one around each word so now even though all these three div tags are on the same line within the HTML source code you can see that each div each inner div tag takes up its own vertical space okay so that's what I want to convey here that as you want to keep building uh as you want to keep adding content below the existing content on a web page you should be creating new div tags okay so that is the div tag and those are the most basic HTML tags now we've just looked at what the head the HTML tag we've looked at the head and title tags we've looked at the body tag we have looked at the div tag and I'll encourage you to experiment with this what we really want to do though is maybe first figure out what our web what we want our web page to look like okay so when when you're building a web page it's a good idea to First plan ahead and create what is called a wireframe and this is what a wireframe for a web Page look like it just it is just a rough drawing of what the web page should look like okay that's what we typically called a wireframe like you don't put in colors you don't put in exact fonts and sizes of fonts Etc you just put a rough diagram of the structure of the page and you can use that as a visual guide while you're writing the HTML in CSS okay now if you don't already have a design to work with then sometimes it can be confusing if you're trying to design your web page as you're trying to code it so the having a wireframe is going to help a lot and you can use you can create a wireframe using pen and paper or you can use digital whiteboards like excal draw.com so excal door.com is a digital whiteboard so this is what it looks like and here on this digital whiteboard you can create boxes you can create circles you can create lines you can add text and you can do a bunch of things to create uh your wireframe okay so you can use a digital whiteboard any any one of your choice but I like using X cal.com um and the idea here is to separate the design and the implementation process to help you focus on one aspect of the development at a time okay now I will note however that professional web developers work with a detailed design mockup of the page and not generally wireframes because these design mockups or these design specifications are often created by uiux designers uh with a standardized design system so normally at a company you will receive a full-fledged design and that design will have all the colors all the fonts and everything specified there and you'll be working from that but for your own personal project it's okay to maybe just do a quick wireframe and then figure out the design over time okay so let's recall the problem statement and then create a wireframe for the problem statement we want to create a web page that showcases job listings for Jovian and it includes a nav bar at the top of the page showing the Jovin logo it includes a header section displaying a picture and some relevant information then it includes a list of job openings that includes the job designation location and then it includes a footer at the bottom of the web page with some important links okay so keeping these requirements in mind let us try to First design very broad very rough in a very rough fashion let's try to design what this web page should look like okay so I'm just going to zoom to an area of excal where I can actually design now you might see a bunch of these controls here so when you're actually drawing you might have these controls and you can always hide them so there's an option called Zen mode here uh but here let's say this is what our web page is going to look like okay now at the top of this web page we want a jovian logo so I'm just going to put a box here indicating the Jovian logo and I'm just going to put the word Jovian here all right and so now that's the Jovian logo that is going to show up at the top of the page and this is going to be the navigation bar so maybe let me just put a separator between this and the rest of the page then let us uh we want maybe a banner image a header section with a banner image and some information about Jovin so let's say this is going to be an image so I'm just going to draw maybe like some hills here uh we'll figure out something better than a hills and a sun but uh here we're going to put here we're going to put an image and then below the image maybe we could have a section called about Jovan because when somebody visits a job B job page we also want to tell them a little bit about Jovian so let me come in here and let me just put in about Jovian and then uh maybe on the left here we want a picture of the team so here we're going to have a a team picture maybe a bunch of people here all right very very rough drawing and here on on the right here and on the left maybe we have some information about Jan okay so some info about Jan now I'll show you a quick trick sometimes you need to generate or you need to get a bunch of text to fill the page now that you can do using this tool called lurm ipsum so loremipsum doio okay lurm ip. IO and the link is in the notebook is a quick tool to generate as much text as you need as many paragraphs of text as you need so I'm just going to copy a bunch of this random text this doesn't mean anything I'm just going to put that in here and let me just split it into multiple lines okay so yeah just about that and maybe also let me reduce its size a little bit so now we have this let me change its color yeah now we have this about Jovian section this nice about J section over here and let's move all this here as well so one nice thing about digital whiteboards is you can move some of this stuff around and then let us put a section called job opportunities okay and in this section job opportunities I'm going to just make that black in color once again in the section called job opportunities let's make that a little bigger like that let us put in a few job roles so we have a job Ro for a front end developer and then we have a job rooll uh and this is in bangaluru India and maybe we want like an apply button here or an apply link or apply button or something let's put that here a small apply button let's make this a little smaller like that so that is what our that is what a single job roll looks like and now once again the good thing about these digital whiteboards is I can just take this and I can create a copy and create a second job rooll and copy and create a third job Roll All right so let's call this backend developer and let's call this data scientist and maybe let's also put something like remote here and let me put Mumbai India here right and uh apart from the jobs we maybe also want to have a footer at the bottom of the page so I'm going to just add a separation here and maybe I'm just going to add a few links so one link to courses one link to programs and one link to YouTube okay and just put that in here hes programs YouTube Let's Line these up so these are going to be our footer links and finally right at the bottom I'm just going to add a copyright notice copyright 2023 Jian and let's make that a little smaller and put that in here as well okay so yeah just in about four or five minutes we have just created a wireframe for what our web page should look like all right and then you can C you can take this whole thing and you can copy it as PNG and save it somewhere maybe you can send it to uh send it to a coworker for review you can just like copy that as a PNG or I think you also have the option to export it you can go in here and you can actually export the image as well um so this is a good thing to do anytime you're building a web page first it's a good idea to just go ahead and create a wireframe using a digital whiteboard and something that you can modify easily as well okay so now that we have this wireframe you can see here this is what the wiame frame looks like we have the nav bar we have an image we have an about Jovian section we have the job opportunities we have an apply button or apply link and then we have a footer at the bottom okay so I encourage you to again try and replicate this wireframe on your own using excal maybe try adding a additional section here and there just to see if you can do this on your own okay so you should be following along with this lesson pausing the video following along pausing the video following along and trying to make changes here and there just to experiment with things okay so now that we have created this wireframe we can now use this wireframe as a reference to add content in our HTML page okay so right now we don't have any useful content in our HTML page so we can start adding the content one by one and the first thing that we're going to add is headings so let's figure out what headings we have within our web page so here we have a couple of headings we have this heading called about Jovian we have this heading called job opportunities and then I could even consider these as headings of each of the jobs okay so heading is generally just some big text on the page it is maybe the start of a section it is maybe a start of a subsection or it is maybe the most important piece of text in a particular element on the page so I'm going to consider about Jian job opportunities and front-end developer backend developer data scientist as headings now there are various kinds of headings in HTML uh in fact specifically there are six heading tags uh these tags are H1 to H6 and H1 is the highest or the biggest heading tag and H6 is the lowest now heading should always be used in a logical order and should accurately describe the content on the page so if you're using H1 then for subsections you should be using H2 and then for sub subsections you should be using H3 and so on don't use an H2 as the heading of the entire page and an H1 in the middle of the page because that is going to confuse people even though you can change their font sizes from the default but still it's logically it makes sense for you to use um use the headings that are uh use headings appropriately within the page so H1 should be used for the most important heading H2 for the subheading and so on okay so let's go ahead and let's add some headings into our page so the first thing I'm going to do is clear all of this let me also just let's see let me get rid of this piece over here yeah so the first thing I've done is I've cleared out all the existing content on the page and let me save that and that that has all gone away so let's add the headings one by one the biggest heading on my page is about Jovian so let me add that and once I do that you can see that okay now now I have a nice big about Jin section the next heading on the page is job opportunities great and then we have three of these jobs so you can see here we have front-end developer backend developer data scientist so let's go H3 front-end developer H3 backend developer and H3 data scientist okay I can go up to H6 but I'm just going to use these three headings here now we have this nice logical separation between headings so we have about Jovian then we have job opportunities and then we have these three job roles and all these three job roles should use the same header ideally because they're indicating the same level of hierarchy okay so that is how you create headings really straightforward just put H1 H2 H3 and keep going all right so now we've added headings and this is what that looks like great and our page is start slowly starting to take shape not exactly what we're looking for just yet but it's getting there next is there are specific text there there are specific tags for adding text specifically we have a couple of tags one is a P tag or a paragraph tag and the second is a span tag and both are used to define text in HTML so this is some text you can see that we we going to add below about Jin and this is added using the P tag so the P tag defines a paragraph of text and it is typically used for longer sections of text that form a distinct block so if you have an entire paragraph that is what you should put into a P tag and then the span tag tag defines a small section of text typically if you have maybe just a few words or maybe a single line somewhere within a div you can use it and it is typically used for inline styling let's say you have a longer piece of text and within it you want to make U some specific piece of text bigger or of a different color then you will wrap that around a span and we look at examples as we go along but p and span are the two tags that I used to create text on a web page okay of course you don't need to use a span or a p you can directly put a text within the div tag as you saw already but p and span gives some one they semantically inform the browser that now inside this tag there is going to be text and second the div is going to automatically create a vertical separation the span doesn't do that so sometimes if you want text to maybe join together and show show up in a single line you can use a span and the P tag has some spacing before and after so it automatically adds some separation between the text and the rest of the content okay so let's use use the P tag to add some description below about Jovian so here is the description that we're going to add at Jovian we're on a mission to build the world's highly most highly reputed Technical University and we're building it complete building it completely online let me change that to it and we're building it completely online we offer several beginner friendly courses that are taken by 300,000 plus registered users okay so right below the H1 right below the section here I can put in all of this content and I can just click save and then I reload this and you can see that this P tag has been added and in this P tag we have this basic text now somebody had a question why not use a div tag here well if I just use a div tag you can see that the amount of well it it works just just fine but as you noticed as we put in multiple paragraphs of text you will notice that the P tag automatically adds some gap between paragraphs so that is going to be the difference between using a P tag versus using a Dev tag okay all right so now we've added a P tag then uh the other place where we can possibly use a span is within the job opportunity section notice that under each job opportunity we have also put in the location of the job so let's put that location of a job using the using a span okay so here's what I'm going to do I am going to first wrap I'm going to create a span and I'm going to take the span and the H3 and put that in a div tag because each job is logically separated so each job we want it to show up in a logically separated area that is why we're putting a div around the uh job okay and don't worry if this doesn't make sense if you're wondering when should I put a div around something when should I not put a div around something well uh you just experiment with ITT HTML is all about experimentation all right so here we have an H3 tag and and then I'm going to put a span and I'm going to put in bangaluru India then I'm going to put in another div here and I'm going to move this backend developer role here and I'm going to put in a span I'm going to put in let's put remote here and I'm going to put in another div here and I'm going to put in the third H3 here and I'm going to put in a span let's put Mumbai India here okay so now we have added these job opportunities uh locations and we've put each of the job opportunities plus location in a div tag now one quick thing I want to show you is let's say you're typing and maybe things go a little bit Haywire uh and you don't have this nice indentation or this nice logical structure visible anymore just right click and select format document and that is going to automatically arrange all the tags in this nice fashion that tags that are children of an outer tag are automatically going to get some indentation or some space before them and then it's also going to split up the lines nicely so anytime you want you can right click and select format document and there's also a keyboard shortcut to do it and then you can save it and let's reload now and all right so now it's starting to look a little better now we have the front-end developer role and under it we have bangaluru India then we have backend developer under it we have remote and data scientist under it we have Mumbai great so our notebook our our web page is starting to take shape pretty nicely okay so now we have this information now apart from this there are also several smaller modifier tags so there's a tag called B in case you want to make something bold in with within a paragraph there's a tag called I in case you want to make something italic there is a tag called u in case you want to underline something now you can use these tags in between I'll show you an example let's say we want to highlight 300,000 plus I'm just going to put it in a b tag so there's a opening B tag and then there is a closing B tag and you can see that 300,000 is now bold however these specific tags are slowly falling out of fashion what is being done instead is you just put a span around a specific piece of text and then use it use CSS to style it and we'll look at CSS soon so uh just know that although you have all these tags the use of these modified tags is now considered a bit outdated and it is recommended to use CSS Styles instead okay so but still as an exercise I will encourage you to just play around with these tags and check them out okay perfect so now we have looked at text we have looked at headings we have looked at spans as well um next let us look at lists in HTML so almost every web page that you might have seen contains some form of lists and there are two types of lists in HTML specifically there are more but these are the two that are commonly used one is an unordered HTML list and an unordered HTML list is simply a bull bullet list it does not have any ordering it is ordered but it doesn't have numbers for the elements or the items within the list and then you have an ordered HTML list an ordered HTML list simply has numbers associated with each of the items and special HTML tags are used to create lists which allow for presentation of information in an organized and structured manner so there are two types of lists as I said unordered and the unordered lists are created using the UL tag and then list items within an un list are created using the LI tag and bullet points are used to denote the list items and you can change the appearance of bullet points using CSS or using some attributes as well similarly you have ordered lists and ordered lists are created using the o tag so o is ordered list UL is unordered list and list items are added using the LI tag and numbers or characters are used to denote list items okay and the appearance of the numbers can be customized using CSS or using attributes Within the HTML element itself you can also Nest lists within each other so you can have maybe a list and then each list item can have a sub list inside it and so on so you can do a bunch of interesting things but it's important to close all your tags properly to ensure that the page is rendered properly otherwise the browser is going to run into issues and things are going to look a little weird Okay so remember we had a footer on our page uh let's try and maybe this looks like a list of links so let's try and maybe create a an unordered list for the footer elements so I'm going to come in here and again I'm going to just create a logical Separation by creating a div and I'm going to create a UL or unordered list and then in the unordered list I'm going to have three list items so I have a list item called courses and I have a list item called programs and I have a list item called YouTube okay and then below this I also have this copyright thing you can see we have this thing copyright 2023 Jovian so I need the copyright character so I'm just going to go on Google and I'm just going to search Copyright symbol okay this is the copyright symbol and I can just go ahead and copy it from here and paste it so this is how you get special characters in your HTML you just search the special character online and then you can copy it from there and put it in the copyright 2023 Jan okay now let's reload the page and just like that you can see here at the bottom of the page we have courses programs YouTube and we have copyright 2023 Chan great so our page is taking shape and apart from this let's also add a an ordered list somewhere so maybe in the about Jovian section in this region let's maybe also list the programs that we offer so let's add another paragraph here let's see what do we want to do well we we add another paragraph and we're going to say we also offer two industry Focus boot camps so let's create another paragraph p and let us put in this text we also offer to Industry Focus boot camps and in this paragraph let us create an ordered list because we are we have two programs and we can list them one by one so let's create an Li here one or actually I don't need to put the number one the number one is going to come automatically full stack developer boot camp and then the second one is data science boot camp okay I think we want Jovian postag developer boot camp and Jovian data science boot all right so now you can see that we have we offer two industry Focus boot camps the Jovian fullstack developer boot camp and the Jan data science boot camp and the numbers one and two have been added automatically just as it was done in the case of the photo writer where here it just added a bunch of bullet points great so so far so good we have added some lists as well and that has added some more content on the page next up we can add some links now since we have added some footer uh we had added some footer items we also added maybe a couple of programs so we can now link these to other Pages you know that any web page on the internet typically contains links to other pages and that is how you navigate a website now links can be to the same website links can be to other web pages on the internet um it it is completely up to you but links in HTML are created using the a tag the a tag is used to create hyperlinks and the a tag must have an hre attribute to specify the URL of the destination page and the text that is displayed as the link is placed between the opening and closing a tags and let's say you want to link to open in a new tab then you can use a Target attribute to specify where the link page should open Okay so let's see that step by step let's first do this for the Jovian fullstack developer boot camp so what we what we want to do is we don't just want to show this text Joan fullstack developer boot camp we actually want it to point to the program application page because let's say somebody's applying for a job but they also want to see what kind of programs we offer it would be a good idea to maybe just link that from here so let me go to www.j.com and I'm going to scroll down here and I'm going to find the section full stack developer boot camp and I'm going to grab the link of that and let's come back here and let's create an a tag inside the LI item so inside the list item we creating an a tag so a and then you provide an hre href href is the attribute and then the attribute Valu is always put within double codes so Within These double codes I'm going to paste the link okay and then I'm going to close the a tag and I'm going to take the closing tag and put it outside the text okay so now you have a HF and then you have the HF of the or the you have the URL of the Jin fullstack developer boot camp and then you have closing the a tag inside the LI tag so remember your tags have to be matched up properly when you you cannot put the a tag closing a tag outside the LI tag because that is going to cause some problems so just be careful as you're doing this and now if I reload the page you can see that clicking on this is going to take me to the full stack developer Boot Camp Page great let me grab the data science boot camp page as well so data science boot camp copy that link and once again let's put that on a new line let's create an a tag here AHF equals oops yep data science boot camp and let's take the closing a tag and let's put it here and let's save that and now we have the Jovin data science boot camp linked from here as well and that is how easy it is to add links within a web page let's go ahead and maybe let's also link a bunch of these uh footer links so I'm going to come in here and I'm going to say let's see a href equals let me just point it to jan.com learn for now yeah all right and let's let me also point the second one to jan.com learn okay so both the courses and the programs voter links for now are just going to go to the same page join.com learn and then the third footer link let me point that to our YouTube channel so a hre equals atps YouTube Jovian HQ okay let me just format that so let's say format document and that's going to just indent things a little better all right so now we have this courses link that opens the courses and we have the programs link that opens the programs um but of course both are going to the same place uh but what we have here is this particular section within the page it actually has an ID so the section has an ID called courses so if we actually type something like this ash courses at the end of the URL okay that doesn't seem to work never mind yep so uh yeah we have linked the courses we've linked the programs and we've linked the YouTube channel now one thing that I want to do here is I also want to add a new I want these links to open in a new tab I don't want to change the current tab because if somebody's looking for jobs I don't want to get distracted and lose track of the jobs page so I'm just going to add Target equals underscore blank okay so anytime what does this mean what does underscore blank mean why do you need that underscore don't worry about all that this is a very standard syntax anytime you need to open a link in a new tab just put Target equals uncore blank as an additional attribute in your a tag okay that's all it is used for um there are other targets that are POS possible as well but underscore blank is typically what you should be using in most cases okay so now if I click on courses that is going to open it in a new tab Okay then if I click on programs that is going to open it in a new tab if I click on YouTube that's going to open it in a new tab all right so now we've added links and our page is shaping up quite well now we have links on the page as well what next what else is missing from our page so we've added headings we've added some text we've added some um jobs as well uh We've added footer links I think the images are missing so let's add the images as well how do you add images in HTML well so the way to add images in HTML is using the IMG tag so there's a tag called IMG and you can use that to add images now the just like links are added using the a tag a a is short for anchor so links are added using the anchor tag or a tag and you have to specify spe an href attribute similarly images are added using the IMG tag and you can specify the SRC attribute with the location of the image the image could be on your computer the image could be uh next to the web page basically or the image could be somewhere on the internet both of these work um you can just specify the location of the image using the SRC attribute apart from that because images also typically have you should also indicate what that image is about this is for screen readers and for search engines Etc so you can also add an ALT attribute or an ALT attribute which is used to provide an alternative text for the image which is displayed if the image is not loaded and it is also read by screen readers for people who are unable to see the image and it is also read automatically by search engines uh to improve the visibility of your page on search now the width and height attributes of the image can also be set using the width attribute and the height attribute and you can specify the width or height of the image as pixels on the screen so if you know the resolution of your screen the resolution of your screen is typically given in pixels for example 1 1280 pixels horizontally and 720 pixels vertically something like that so you can specify the height and width of the image in pixels as well okay now the last thing is that the image tag or the IMG tag is a self closing tag which means that it does not require a closing tag you just put the IMG tag you put its Sr C you put its alt alt attribute you put its width you put its height and if you want and that's it you don't have to put a closing tag you don't have to put anything within the image tag as children okay so let's check out some images that we can possibly use we need a couple of images One image here as the banner that's going to show up on the entire page left to right and one one one image here which is going to show up here on the right okay so how can we add how can you find these images well one good place to find great photos that you can use for free is unsplash so unsplash.com is a great place so I'm going to search for career here and let me scroll down to find an image that might be good as a banner I think this image looks good so this image is a nice image that I could use as a banner on the page maybe not the entire height of the image but maybe like just this section would be good so I'm just going to go here and I'm going to say download free and from here I'm selecting the medium size okay so that is going to download a JPG file and I'm going to come into my desktop go into the folder where I actually have the web page. HTML file and put in the image file here so let me just call it banner.jpg okay so now we've created a banner. JPG file so that is going to be the banner that we use on the page let me grab another image which is going to show up here maybe here I want to show a team picture so let me close this and let me search for team let's see if we can find a good team image or let's search for maybe people working okay that looks good not the Jovian team but uh never mind we can still put it on the careers page so let's download this also in medium quality so let's go and call this team. jpg all right so now if I open up the sidebar once again by the way you can open the sidebar using this button here or you can also just use command b or I believe it's control B on Windows you can see that along with web page. HTML we now have these files team.jpg and banner.jpg and now we can add these images into our HTML page the first image the banner. jpg image is going to show up above The Heading about about Jovian so I'm just going to add IMG SRC equals and paste okay I'm just going to put in the file name here banner.jpg remember this could also be a URL of an image on the cloud or somewhere on the internet but for now the image is right here next to the file that I have so I can just put that and let me just put the alt text here and the alt text I'm going to put here is uh Banner this is just the banner and I'm going to close this tag let me now reload the page and you can see that the image has been added here but it's too big let me just shorten the image so what I'm going to do is I'm going to just say height equals and I'm going to set the height of the image to let's say 360 pixels so when I say height equals 360 and reload now you can see that the height of the image has been reduced to 360 pixels okay I can reduce it further maybe just for now and we can make it bigger later yeah now the height of the image has been reduced so now we have this image of course it's not out how we want but it's there in the right place and then the second team image is going to show up on the right side so in some sense right is next or after so I'm just going to put that second image after this speed tag before job opportunities so I'm going to say IMG SRC equals team. jpg and ALT equals team and let me give it a height of uh 200 okay let's reload that okay so now we have the image here as well great so again you should what you should be doing is pausing this video watching maybe five minutes and then following along typing out everything on your own and build this step by step the best way to become a better programmer is to just code write a lot of code and even if you're writing the code that you're seeing on the screen you should be asking yourself what that code means and and you should be experimenting with it a little bit and if something breaks you should be searching online and maybe asking us a question okay that is how you're supposed to do this it's not enough to just watch this but at this point I feel like we have all the content that we require on the page it's just not laid out properly all right so we have all the content let's see yeah we have all the content we needed we have this about Jovian we have this image okay maybe we don't have this Navar logo right now how about we fix that sometime later we we'll figure it out um but we have job opportunities we have uh this image here we have this footer and we have this copyright section now one thing I want to mention about HTML tags and CSS HTML and CSS in general is that there is so much here so many different tags and everything that you shouldn't go about trying to learn every single tag and every single attribute of every tag before you start building web pages because then you'll just be doing that for years it's uh you should take the opposite approach where you start trying to build something and whenever you feel that okay you're not able to build it with the tags you already know then go and search online to see if there is certain tag or maybe a certain other CSS property that is going to help you do it and over time the things that are going to be used most frequently are going to become second nature to you and you won't need to look them up that is what I do I still look up some fairly basic stuff on CSS even after 15 plus years of web development and I do this every week so uh one exercise for you is to check out this tutorial on htmld dog.com on the various beginner and intermediate level tags so you can check out the HTML beginner tutorial in the HTML intermediate tutorial so up once you're done with this lesson itself check this out at the very least go through all these different types of tags and if you have the time you can also go through Advan but that is something that we're going to cover in a future lesson anyway okay but this is a good place for you to practice another good place for you to practice is the w3schools.com webbsite this contains a great HTML tutorial so if you want to learn about a specific type of HTML tag just go find it in the sidebar here and go ahead and do it we not going to look at every single HTML tag here because that's that is defeating the point the the reason we are here is because we want to build good web pages okay so let's move forward we are halfway there let's go ahead and style the web page now cascading style sheetss or css is used to describe the presentation of HTML documents it allows you to control layout and it allows you to control the appearance by defining styles for elements such as fonts colors margins borders and more so let's look at some different ways to apply CSS Styles there are a few ways to do this by and we'll do this by attempting to just Center this about Jovian heading we just want to bring it into the center of the page um horizontally speaking we want to bring it in the horizontal Center like that and let's see how we can achieve that using CSS okay so the first way to do it is using something called inline Styles now in inline Styles you can achieve this simply using the style attribute and you can put that directly within whatever HTML tag you're trying to style so let's say we have H1 and we want to style it so we want to set the style and then within the style attribute we want to set this as the value so this is what a CSS declaration looks like so what you do is you declare certain properties about that tag using CSS you have a CSS property so here the property that you are fixing is called text align and there are hundreds of such properties but text align is the property that is used to decide the alignment of the text should the text be aligned on the left Center or right and then you have a colon the colon separates the property from the value and then you have a value okay so all of that goes inside the double quotes that are used to enclose the value of the attribute so yeah so you have the CSS property and then you have a colon and then you have the value and then you have a semicolon to end the Declaration and then you can have multiple declarations here let's say apart from Center lining it you also want to change the color to Indigo that is something that you can do here as well okay so that is the simplest way to apply H uh apply CSS to some HTML tags you simply go into the HTML and then you add a style attribute and now within the style attribute you add a property so let's say we want to do text align and for now let me put Center here and then you put so you have the property colon you have the value generally CSS values do not require qu quotations some of them do most of them don't and then you put a semicolon and let me save that and let let's just reload that here and just like that this is centered you if your experiment you can go and change this to right and you can see that that should bring you to bring it to the right of the page and again you can go back and change it to Center and that should bring it to the center of the page okay let me also add a color so color is added using the color attribute and let me set the color to Indigo you can create any color you want using something called an RGB or a hex formula but there are some named colors within CSS and you can always look these up so you can search CSS named colors so these colors are recognized by every uh these colors are already recognized by every browser so these are all the colors that are already available in CSS and you can use all of these color names whenever you want directly okay for example I could use dark blue instead of indigo and that would work as well and let me just reload the page here and you can see that now the content is centered on the page um just the about Jovian heading is centered on the page and it has the color dark blue okay if you want to create colors that are not named already in CSS then we'll talk about that in the next lesson all right um so that is one way to add Styles this is called the inline style and you simply add a bunch of CSS declarations in the style attribute the other thing because you might want to add a bunch of different styles or you might want to add the same set of styles to multiple tags is to use a style tag so you can create a style tag within the head or the body and then you can put some CSS code within the style tag let me put the uh let me create a style tag within the head here so I'm just going to going to create style and now inside the style tag the first thing you need to put in is a selector because now you no longer know where you want to apply the style to unlike this attribute which was associated with a tag already so you need to put in a selector okay so there are many ways to select a particular or a bunch of HTML tags on the page the easiest way to select a bunch of tags is by the tag name so when you say H1 and then you open these braces or curly brackets what you're saying that whatever I put Within These curly brackets or these braces should be applied to all the H1 tags on the page now of course here we have just one H1 tag but if you had multiple of those then it would apply to multiple H1 tags but let me get rid of the inline style here so now that the inline style is is gone you can see it's back to this position and now in the style tag I'm just going to write text align Center and now one of the benefits of using a style tag is you can use multiple lines you can make your code easier to read instead of stuffing a bunch of styles within the same attribute and color what was that deep blue or dark blue yeah okay so now we have about Jovian which is at the center of the page horizontally and it has the dark blue color okay now notice that this style did not get applied to any other element on the page but suppose this second element on the page job opportunities was also an H1 tag you will notice now that job opportunities is also receiving the same style that the first H1 received okay so that is the benefit of using the style tag you don't have to retype the same style over and over for each tag but let's revert that back for now we are going to make this in H2 okay so that is the second way to do it which is let's just revert that yeah this is fine so that is the second way to do it which is using the style tag so in the style tag you have a selector and then you have this bracket and then you have a property and then you have a property value okay and then you close the bracket and of course you can have multiple properties that you can apply using to the tags that have been selected using the selector and the simplest selector is just a tag we look at other selectors as well now yet another way to create to apply CSS to an HTML file is to create a separate file containing CSS this is very popular because that way you can put all your Styles in a single file and all your HTML in a single file and then link the file link the CSS file within the HTML page using the link tag okay so you use a link tag to specify within the HML page that the Styles should be picked up from this particular CSS file so let's do this let's create a file styles. CSS so let's first get rid of this H1 all of that and let's get rid of the style tag okay and you can see that the style is gone now let us open up the sidebar once again and let us create a new file styles. CSS and now in this styles.css file let us add H1 and let us put text align Center and let us put color dark blue okay and let's save that and let's reload the page nothing happened because we've not connected the CSS file with the HTML file so let's come back here and now I don't need the sidebar anymore let's add a link here so link is a tag special tag this typically used for adding stylesheets and it has a structure like this so you say Rel equal stylesheet you basic you basically specify what is the relevance of this link uh to this page so stylesheet or what is the relation of this link to this page stylesheet and then you say HF equal to styles.css okay and that's it and again you don't need a closing tag this is a self closing tag so there are a lot of self closing tags in HTML now this hre can be a CSS file that is sitting right next to to your web page or it could be in a subfolder let's say it was in a folder called CSS then you could put it under CSS SL st. CSS or you could also specify something on the Internet so that is what is done typically with Frameworks like bootstrap somebody has put up a bunch of styles on the internet and we simply include it link it to our page using the link tag and notice that the link tag is different from the a tag which is the anchor tag which is used to add links on the web page the link tag is used to Simply link stylesheets it's a bit confusing the terminology because of how HTML evolved but uh that's what it is okay so now we have link Rel equal stylesheet styles. CSS let's reload the page and once again this is now back to the center and it has the deep blue color okay so those are the three ways in which you add CSS you have the style attribute you have the style tag and then you have CSS files now one thing I want to mention is CSS stands for cascading stylesheets and inline Styles take precedence over style tag tags and style tags I believe take precedence over the um external external files and there are also other ways in which precedence is decided so for example I if I went in here and I added a style tag I added a style attribute and I change the color to Black again you will notice that even though the styles. CSS file says color dark blue because I've specified the Styles explicitly on the H1 tag that takes precedence and that is going to apply the black color to it okay so keep that in mind this can be sometimes confusing and generally speaking keep things as simple as possible so that you don't run into all these issues okay so now that we have done we've added CSS let's maybe look at what are some other ways in which we can select specific elements and then apply styles to them so when using the style tag or a separate CSS file CSS properties can be applied to multiple desired elements on the page using three types of selectors one is the tag selector this is something that we've already seen for example we've done this text line Center and color deep blue or dark blue for the H1 tag the second is the ID attribute so typically what you can do is you can set the ID attribute for a particular tag and then use the hash prefix within CSS to select it okay so I can do this I can add an ID for this banner.jpg image so I can just say ID equals banner and generally as a rule there should be only one element with a specific ID on a page you can have multiple and the browser won't complain but just as a rule semantically speaking you should have one element with a particular ID on a page okay so ID should be an unique identifier so now we have banner and now we can select the Banner element so now if I said IMG that would apply to all the images on the page right if I said IMG that would apply to all images on the page but now I only want to apply to the tag which has the ID banner and that is why I have have this hash or pound character and now I can set something like width 100% okay and now you can see that this image has a width of 100% 100 width 100% simply means occupy the entire space available horizontally even if you resize the page you can see that this image automatically resizes of course there is an issue here that it this image is getting stretched we'll fix the stretch in just a bit but at the very least we are able to apply the width of 100% to just this specific image and not to this image so that is the second way to select an HTML tag and apply some CSS styles to it then the third way to select an HTML tag is using a class now sometimes what you might have is a several tags which you want to style at once and all these tags have to be styled using the same set of styles so here is an example let's say I add location let's say I add here no I have location somewhere here let's say I look at the location here yeah so I have locations here I have location for the front end developer role I have location for the remote developer role I have loc or the backend developer role and the data scientist role let's say I want to make the color of the location gray so I can do this I can say span and I can say class equals location okay and let me go in and let me add that here as well fan class equals location span class equals location so there may be many spans on the page you can see that there is a span right here at the very bottom as well but these three particular spans have the class location and now I can apply some styles to specifically these three spans by using dot location so I can say dot location dot is used to indicate a class you can either select a tag where you don't need any prefix or you can select an ID which is Hash or you can select using a DOT which is a class and now I can say color gray okay and let me reload the page and now you can see here we have bangaluru India remote and mobile India so this is applied this color is applied specifically to these specific sections okay now you might ask okay how do I know when I should use color when I should use text align when I should use what the simplest way is to just go on google.com and search okay how to center text in CSS and you can say it uses the text align property but now we also have tools like chat GPT where you don't actually have to go and search this on Google and browse various web pages so this is something that I've been using a lot these days you can see that I have a bunch of conversations here already with chat GPD regarding HTML but you can just go into chat GPD or chat. open.com and you can search how to center text in CSS okay and it is going to tell you that it's going to come up with an answer for that it's maybe also going to come up with an example and you can ask it some follow-up questions as well okay let's give it a second maybe it will come up with yeah to Center text in CSS you can use the text align property and set its value to Center okay and it's showing you an example as well right and that's it so you this is great it works really well it doesn't always give you the right answer but you could ask it a couple of things and you can try it out it's a good starting point whenever you face an issue to go ahead and ask in chat gbt in fact I'll encourage you some of the questions you've been posting on Zoom try posting them to chat GPT and uh you might be surprised uh at how well it can answer these questions okay so that is about the different ways in which you can select things now I encourage you to learn more and experiment with various types of CSS selectors what you can also do is you can combine selectors of various types to select a specific set of elements that match all the conditions for example let's say you have certain divs with the class location and you have certain spans with the class location and you only want to apply these uh settings to the span with the class location then you can say span do location and I believe that is going to a span do location and I believe that is going to just select the spans which have the class do location okay now the next thing want to tell you before we go ahead and actually style the rest of the pce is the CSS Box model the CSS Box model describes how HTML elements are rendered as rectangular boxes in a web page okay and the box for any HTML element is composed of several layers that determine the layout and the sizing of the element so let us create um there are a few components to the Box model there is the content there is a padding there is the border and there is a margin we're going to understand all of these terms and we'll do that by creating another web page just so that we can experiment with the Box model so I'm going to open up the sidebar here and open up another page called box model.jpg okay there it is box model.jpg oh sorry box model. HTML let me rename that let me create another page called box model. HTML okay and I can open up box model. HTML here in my web page in my web browser like that just double click on it now that opens up box model. HTML for me and now inside this let me start putting in some content so HTML let me put in the doc type declaration as well you can see that vs code Auto completes a docp declaration it's nice so let me add head let me add a title here so CSS Box model and let me add the body here and let me add a couple of divs so let me add a div called first let me add another div called second and let me give both of these divs a class each so let me call this box one by the way for class names you can put hyphens in between so in CSS whenever you're using class names or IDs you can put hyphens let me call this box two okay and let's reload that let me zoom in a little bit 200 is good enough yeah you can see that we have content as we expect first and second okay let me add a style tag here and for box one I'm going to set some Styles and then for box two I'm going to set some Styles okay no change here so far um now the first thing I want to point out is what does the content of a div look like well uh let me add a background color so the way you add background color is you just start typing and vs code shows you so let me add a background color let me add the background color aqua for box one and let's add a background color let's see beige for box two let's reload that and now you can see that each of these boxes or each of these uh divs and a div is essentially a box which occupies the full width of the page mostly each of these boxes have a background color one has a background color aqua and one has a background color base okay just first notice that the content of the of the Box occupies the entire width by default when you create a div okay you can see that there is some empty white space around that is because the body the body tag which is the outermost tag on the page contains some margin and padding which I'm going to or some internal spacing which I'm going to just set to zero for now um we'll understand these terms margin and padding in just a second okay yeah so now you can see we have first and second we have box one which is first and box to which is second so you have the actual content which is the innermost component of the box and right now our boxes just have content they don't have anything else no no border margin padding nothing now the content itself can be controlled using the height and the width properties of course if you put in a lot of content the height will automatically expand but I can also set the height specifically I can say this should have the height 240 PX and this is how you specify length in a CSS you specify a number and then you specify PX now you can also specify in inches you can also specify in percentages and all but in in the current case I'm just going to use PX okay 240 seems too big let me just set it to 40 PX right now yeah now we've set the height to maybe 80px okay so now we've set the height of the first container or the first box to 80px and let's set the height of the second box as well height 60px so the height of the second box is set as well so so far we just our boxes just have a Content nothing special now the next thing that we can add is something called a padding now the padding is the space around the content so you have the content and then you have padding which is the space around the content okay so let me add padding 20px and reload the page and now you can see that we have this box first and the content itself is of height 80 but then around it there is this additional space of 20 PX okay you can you can by the way you can uh just comment out something or you can disable some CSS property simply by putting it under these U slash star commands um and you can do this using the command slash okay command plus slash is going to comment something out you can see without the padding it this is the size and then with the padding this is the size and clearly it is added more uh it we we have added some space before the on the left and also you'll notice on the right as well if you try to actually do something with it okay so let's say we set a width I can also set a width here width 100 PX again you can see that this is the structure or this is the content of the box without padding this is what it looks like and with padding it is added around the content so padding is space around the content but the key thing about padding is that the background color or the background image or whatever also applies to the padding okay now next thing that you can do is you can set a border you can you can set a border and you can set a border of let's say one pixel and let's just reload nothing happens because when you're setting a border you need to specify not just the Border width you also need to specify what kind of Border you need and the typically the border that you need is like a line border which is solid and you also need to specify what is the col of the Border okay so one PX solid blue that is what I'm setting as the border of the of the of the Box okay so now you can see that outside of the padding a border has been added which is blue in color let's make that 10 pixels so now we have a 10 pixel border and you can see once again the size of the entire box has grown so first we have the content and then around the content we have the padding which is indistinguishable because uh it has the same background but it is space you can clearly see and then around the pading we have the Border by the way you can also add a border radius radius here let's say you can add a border radius of 20 pixels and a pixel is simply one point on the screen okay and you can just you can just play around with the pixel values when you're experimenting and over time you'll get a sense of which what pixel values make sense for the web page you're working on okay but I'll remove the Border radius for now so now we've added a height we've added a width we' add we've added a border so we have the content and then we have the padding and these two are in distinguishable because the they have the same background then we have the border and the Border has its own color it can match the background it can be different but it's going to show up separately then you can add some space outside the Border as well okay and that is called the margin so margin and padding are the two most confusing things for when people they're getting started with CSS so I hope this is going to clarify so let's say margin 20 PX and when we add a margin of 20 PX you can see that outside the Border 20 pixels have been added left and right around the entire box okay so the CSS Box model basically tells you that you can get some content then put some padding around it and that will have the same background then add a border around it and then add a margin around it which is going to space it away from the other elements on the page okay now uh with border and Mar padding and margin you can actually use a different Border Side uh you can use a different border width or a padding width on each side so for example you could say something like this padding left is 10 PX padding right is 100 PX padding top is 20 PX and padding bottom is 30px okay let's for a second let's just disable that I'm just commenting it out or uh basically this is done using command plus slash okay and you can see now we have a some padding here and then we have some padding here here which is which seems to be higher and then we are going to have some padding at the bottom as well you can you'll be able to see it more accurately if I hide so there's higher padding at the bottom lowest ping at the left and then there is some medium padding here and then there is of course a lot of padding here without the right padding is going to be different right so that is one thing you can do you can actually specify padding properties for each side separately or you can also just specify for all sides directly here so you can say 10 PX left padding 100 PX right padding 20 PX sorry you have left no I'm not sure well um I think you start from the tab you start from the top so padding property order yeah so the first first padding applies to the top the second to the right the third to the left and the third to the bottom and then uh the last one to the left okay so instead of padding left left right bottom top bottom you can have padding and then you can specify what padding you want for the top what padding you want for the right what padding you want for the bottom and what padding you want for the left so 20px okay and that is going to set the padding top right left top right bottom left okay clockwise order starting from 12:00 so that is padding top right bottom left and similarly you can specify margin separately as well so you can say 20 PX at the top 30 PX on the right 50 PX at the bottom and 100 PX on the left and that is our margin applied properly okay now one thing you can also do is let's say your top and bottom margins are equal or top and bottom paddings are equal then you can keep them the same so you can um you can do this you can say margin or padding 10 PX and 100 PX so the 10 is going to get applied to top and bottom and then the 100 PX is going to get applied to left and right okay again top bottom left right if you put just two values it is going to repeat uh those two values okay top bot top top right left bottom clockwise order top right left bottom always get confused all right so that is margin and padding now here's one interesting thing I want to point out though I hope this is all clear and you can also of course go say border bottom width is 30px and that is going to just change the Border bottom width now here's one interesting thing I want to point out let's say we give this a padding as well padding 20px okay so now it has some padding and let's say we give it a border border 10 PX solid red now it has uh now it has the second box as a border as well now let us give it some margin specifically let me give it some margin top okay so notice keep your eyes here keep your eyes here and I'm just going to add a margin top of 20 PX and let me just save that and reload you can see nothing happened so what happens is that margins between consecutive elements can collapse into each other okay so what happens is this has a margin bottom of this has a margin bottom of 50 PX you can see here it's coming from here it's it has a margin bottom of 50 pixels and this has a margin top of 10 pixels so when you have two elements side by side or one above the other and both of them have margins then both those margins collapse into each other and only the bigger of the margin is maintained okay so even if I had let's say margin 20px all around and reload this page you can see that a margin got added here a margin got added here a margin got added here but a margin did not get added here because this margin is shared with the margin of the above element okay so that's something that you should keep in mind that margins of successive elements collapse don't worry if you forget this you're going to figure it out when you build your web pages anyway here's another thing that I want to tell you you can use another margin setting called Auto so let's say I said margin top to be 20 pixels margin uh right to be Auto margin bottom to be 30 pixels and margin left to be Auto what happens is and I also set a width for this let me set the width to 80px you can see what happened that the width constrained how much space the div can take up because you've set a width properly and then the margin on the top and bottom apply as usual but because we've set the margin left and right to Auto both of those are automatically adjusted to be equal and this is a very powerful thing this doesn't work with top and bottom this works with left and right only if you set the left and right margin to Auto what that does is that centers the div horizontally on the page you can see as I change the size of the browser the second div stays in the center so that's a good neat trick to center a div horizontally on a page just set the margin to Auto for left and right all right so that's about the CSS Box model and generally speaking if you want to if you have a doubt about where a particular space or margin or padding is coming from here's what you can do let me just zoom U let me just make this full screen for for once and you can right click on an element and this works in Chrome or Brave browser doesn't work in Safari I believe but right click on an element and click inspect and when you click inspect the browser is going to show you the actual HTML structure of the page so you can go into any web page on the internet you can right click and you can inspect and you can study the HTML source code of the page you can see here it has all the entire style it has the entire body div all of that and when you hover over a particular div it shows you what that div looks like and specifically the green area the the green area that you're seeing that is the content of the div including the padding and then the orange area that you're seeing that is the general the margin of the div okay you can see the orange area is the margin and the green area is the content you can also come in here on the right and you can study all the styles that are applying to this particular component and you can actually look at the Box model for that particular so if you select box one you can see it Box model here you can see that it has the size 100x 80 and it is highlighted and it has a padding of 10 at the top 100 at the right and then 10 at the bottom and 100 on the left and you can see it has a border of 10 on each side and finally it has these margins 20 30 50 and 100 on each side okay so that is one great way for you to explore the CSS properties if you scroll up you can also see what are all the CSS properties that are applied here you can actually turn off these CSS Properties or you can add additional CSS properties for example you can say text align Center and that is going to apply that additional CSS property so this is a great way to just experiment with your web page in the browser itself before you go back and make some change in your code okay and if you load the page all of these changes will go away but uh the Box model is useful to explore then the CSS properties are useful to explore and you can also add additional Properties or you can change the values of specific properties let's say instead of Aqua I want to change this to Gold I can do that here as well and again all of this is just changing in the browser it's not going to go and save anything all right so that's an interesting way for you to explore uh web pages by the way if you're not able to see the Box model let me just turn this off here yeah so this is the Box model uh you can see that if you scroll up you can see here that you have the Box model you can see the margin you can see the Border you can see the padding and you can see the size of the Box itself okay that is the CSS Box model okay so let's go back into the page webpage. HTML and let's also open up styles.css so let's go back to styles.css by the way you can use command P within vs code to open styles.css vs code is really nice for coding it makes your job really really easy you can also close or collapse some of these HTML tags in case you don't want to see them and that way you can reduce the structure of of your page so I'm just opening everything for now but you can do that if you want okay and let's go back here to my first web page and let us now try and achieve this layout step by step okay so the first thing I'm going to do do is go into styles.css right at the very top I'm going to go into body and I'm going to set a few things right because every browser has its own setup of the body uh the its own margin and padding you can see here that there is some white space around this image even though I've set it withd to 100% So within the body I'm just going to set margin as zero and I'm going to set padding as zero as well great so now this is completely out there touching the edges okay one other thing that I want to do in the body is I don't like this font which has these things sticking out of the J you can see right at the top it has this old look uh this is called a serif font this small piece sticking out of the J this thing over here is called a serif and similarly this is called a serif so this is what is called a serif font um generally speaking Mo most modern web ites are built using Sans serif fonts so I'm just going to go in and change the font now the way you set the font is by setting the font family and there are many font families that are available on the internet uh by default browsers support several font families and then your operating system may have certain font families and then you can include new font families from the internet from a resource like Google fonts and we'll do all of those things but for now I'm just going to say Sans siif okay what that does is if I reload the page you can see that now it looks a lot more modern now it looks that now it doesn't have those things sticking out of the J and out of the B and all so that's one other thing that we've done let me just zoom out a little bit okay so now we've done that uh let's start fixing things or let's start implementing the wireframe by applying the styles step by step okay so the first thing that I'm going to do is I'm going to add a header so I'm going to go in into webpage. HTML and here right at the top I'm going to create a div and I'm going to give it the ID Navar okay this is going to be the nav bar right at the top so over here and inside this I'm going to need an image I'm going to put that image in in just a second but let us give me let us give some styles to the Navar so let's go in here let's add I've given it the ID Navar so I can select it using hash and let me then set the height or let me just give a padding to the nav bar let me give it a padding of 8 pixels let's just set it to 8 pixels for now okay nothing happened oh there it is yeah there is so that is a nav bar right there it has eight pixels of padding that is why it's just showing up like that let's now put an image under it so image SRC what is going to be the location of the image well I have picked out a jovian image logo here so I have this image hosted online okay so whenever you're using an image from the internet make sure that you're actually getting the link to the image itself and not the link to a page containing the image for example this page over here contains the image but I shouldn't put this in the SRC because then the browser is going to try to fetch this entire page as an image no so you can do two things right click if you want to include an image from the internet on your web page right click and say copy image address and then just put that here in SRC or you can right click and say open image in new tab and then grab the URL of just that image okay always open the image in a new tab and then grab the URL that is the safest way to do it all right so IMG SRC equals uh that and I'm just going to give it an ALT because that's a good practice so I'm just going to say Jovian logo and I'm going to give it uh ID logo all right and now this image should show up here but it's obviously too big let's go in here and let us set the so we have the logo which is an image let us set its height to 32 PX okay that looks nice maybe even 30 PX and remember this is zoomed in I've actually zoomed it to about 150% in your on your side it may actually look a little smaller all right so that is starting to look good is there a margin for the snap bar let's set the margin to zero let's make sure that there is no margin here okay there's no margin and this is looking good so now we have this nice it's looking a bit unequal you can see on the top and at the bottom we have unequal um space so we can verify why there is this unequal Space by checking the nav bar and looks like well looks fine to me okay I have no idea why this is unequal that is something in CSS sometimes you have to figure out ways to fix but in any case I I think one one way we could do this is maybe just chug this into a div nope that doesn't do it oh that's a wrong thing maybe I can just set the height directly here so height equals what is the height we need for the image 30 PX so let me just set the height to 30 here directly sometimes that tends to do the trick and let me remove the height from here so I've just set the height directly okay still doesn't do it so you're going to run into these issues in CSS where something is slightly off and I normally just keep these towards the end so that I don't worry about them immediately but in any case now we have the nav bar in order and then let us fix this image so this image looks fine but the only trouble here is that the image is stretching okay now what I want you to do what I want this image to do instead is just to cover the entire area that is available to this image instead of stretching and the way you can do that is by adding something called an object fit into the image okay again something that you can look up so this image has the ID Banner I'm going to come in here and I'm going to add for Banner I'm going to set object fit cover okay and now you can see that whether I zoom it in or Zoom whether I increase or decrease the size of the web page the aspect ratio of the image isn't changing so this is the way you you fix your stretchy images you simply set object fit cover whenever you see that an image is stretching okay so that takes care of our Navar that takes care of our Banner fine let's fix the about Joan I think we don't need the dark blue color I'm actually okay with the black color and now here we have these two things so we have the left and we have the right so we want to show two divs side by side each taking half the screen and again this is something that I I would search online I would say how to show two divs side by side with same width and you can see I've searched this already I think this one was one that I found useful so yeah you can explore this a little bit but I'm just going to go ahead and show you the solution here um whenever you need to show show two Dives side by side what you need to do is first make sure that this content and this content both are within a div so let's take uh let's see let's go to about Jovian and under about Jovan first let's create a div called description let's give it the ID uh let's give the ID about okay this div is going to capture everything under the about section and then let's create two divs inside it let's give this the ID description and this is going to be the description and then let's create another div let's give this div the ID team and this is going to be the team image okay so we have created two divs one is called description and one is called team now by default divs are going to show up one below the other in HTML if you want to change that here is a quick trick you can apply if you want the divs inside a particular outer div to flow not horizontally but vertically then what you can do is go in and this outer div is called about so I'm going to just go into about so I'm selecting the outer div with the ID about and I'm going to just set display Flex okay we're going to learn about Flex the flex display in a lot of detail later on but the quickest or the easiest reason to use flex is to change the orientation of the divs inside and outer div from horizontal from vertical to horizontal okay and I reload that and you can see now we have description and team image coming side by side now here's what I can do I can set the width for description and team okay so I can do something like this so we have description and I can set width 50% what I wanted to do is occupy 50% of the area of the parent div and similarly we have this team image uh or this team div and I want that to occupy 50% as well okay and now you can see that description takes up 50% if I added a background to it you'll be able to see let me add a background just to show you yeah so you can see around description there is this background so description takes a 50% and the team image takes a 50% and of course now I can go in and I can put these two pieces of content inside those divs okay so I have this P tag with a with this o and all of that so let me just grab that P tag and cut that and put this in the place of description okay and let me just right click here and indent I think it should be formatted already and now you can see that this P tag contains the data or shows this ptag shows the information on the left half similarly we can take the image now this contains this is the team image and we can put that here in the team section okay now we have the team image on the right all right so that's one thing that I want to point out to you that you should what you should do is you should first try to create a layout using a couple of empty divs maybe even add background colors and borders to them just so that things are super clear and once you've created the layout with those empty divs especially horizontal layouts then put the content inside because otherwise you might just lose track and become confused but now once you put the content inside later you have actually already fixed all of this so you have fixed what the description and team should be laid out as and then the content inside can be laid out independently okay so build your web page step by step in these steps okay let's maybe clean this up a little bit further let's see so maybe this team image Um this can have a border radius so this it's looking too sharp let me just call give this an ID team image and let me come in here theme image and let me give it a border radius let's give it a water radius of five pixels again experiment with it trial and error but yeah five pixels looks good I think I would like to have maybe some space here so maybe I can go in and I can add some padding into team so let me come into team and add or let me come into description and add some padding let me add a padding of 8 pixels okay so now I've added a padding and maybe let me add this padding only on the left and right so let me keep the padding top and bottom as zero and let me add that padding but you can see here that there seems to be some space above this as well and I believe that is because of this paragraph tag because this paragraph tag generally has some space above and I can verify this by creating in by clicking inspect and verifying that in description this paragraph tag has a margin above so I can just set for this particular paragraph tag style equals margin Z or margin top so when you're specifying a zero margin you don't need to say PX you can just say margin okay right so the page is starting to look pretty good I would say um one issue here is that if I extend this forward ah looks like I have a for the steam image looks like I have a width set let me get rid of that width here or a height for the team image where is the team image over here yeah this is a team image I think I have a height set for it let me get rid of the height that I've set and now it ends up taking up the entire space so maybe what I can do is I can just come back in here under team and or under team image and I can set the height to I can simply set the width to 100% of the parent which is half the div okay so that's nice now it is taking up the entire space inside the inner div and it is expanding um in size based on that but as the page gets bigger and bigger this content becomes too wide so maybe I want to limit the overall width of this description right so overall width of the about section itself right so the about section I don't want it to become too big the about section should maybe I just want to restrict it to this region generally speaking so what I can do is I can set a Max width I can set a Max width now the max width is the maximum width that this particular section can take so max width let me set it to 800 PX and let me reload the page so now you can see that even as as we make the page smaller both of these are going to take half the space and as we make the page bigger it's going to stop at 800 pixels but of course it would be nice for this to be centered on the screen so that's where I can also use that margin trick I can say margin zero Auto so zero margin on the top and bottom and then uh right and left margin can be Auto and now you can see about Jin and here we have this and then we have here we have this image and it's all nicely centered okay so remains centered remains centered and then it goes out here and it becomes small okay and maybe we can also add some padding here let's see let's add a padding of maybe 8 pixels just so that it's it doesn't touch the edges okay and if we've added padding here then maybe we don't need this padding here over here maybe we just need a padding right 8 pixels okay so this is what web developers sit and do all day they fiddle around with small CSS settings just to get things to look exactly as they desire uh but this is looking fine to me I think the about section looks good largely yeah somewhere around that is looking good yes this is slightly falling over into the next uh outside but that's okay okay so now we're done with the about Jing section let's go ahead and fix the job opportunities section so I'm going to go in and under job opportunities okay once again the H2 as well I'm going to add a center so H2 I'm going to say text align Center okay now this has centered then I can go in and I can maybe again create another outer div called jobs so I created a div called jobs so let me give it the ID jobs all right and again for jobs I'm going to set a maximum width so max width for jobs is 800 PX and I'm going to set margin zero Auto and I'm going to set adding 0 8px okay all I'm doing is I'm creating an outer div into which I can then put in all my jobs so let me grab all these jobs and this is all the footer yeah all this point till this point we have the jobs and I'm going to put it under the jobs div and let me reload again and you can see that it has this nice it remains centered on the screen that's nice pretty good centered on the screen and it is also not touching the edge of the screen so generally you want to have some space from the edge of the screen here so that's it okay then we have this H3 over here there's a lot of space between front end developer and then bangaluru India how about we come in this is an H3 remember it's an H3 uh let's give it a class called uh job roll so that we don't affect other h3s on the page if we had any at the moment we don't but yeah okay and let me come in here H3 and let us just give it margin bottom zero I believe it's a margin let's see okay margin bottom zero this is looking good now it is much closer maybe Zero's too little maybe let's make it 8 PX maybe 4 PX should do the job so normally with margin and paddings you want to use multiples of four that's a good idea and you want to go double double double half half half and that's a quick way to work around this stuff okay now what would be nice if we could also get that nice apply button or apply link here on the on the job page so I'm going to again show you a quick trick we're going to learn a lot more about things like flexbox Etc but a quick trick to just get one single element pulled to the right side is using something called a float so I'm going to show you right now so let me say a href equals nothing for now and let me just put in apply and let me give this a class as well and this class is also called apply and let me put it above every H3 here okay so now we have this apply apply apply that is going to show up above every H3 and I think I can go in and I can fix the margin top as well for this H3 to be zero yeah so now we have apply apply apply and what we can do is take the apply class so dot apply that is the that is a class given to this apply link and I'm just going to add one thing float right okay so that's just going to pull this apply all the way to the right that's nice it's going to just pull it all the way to the right and I think we need probably under the location we need some spacing so I'm going to go back and add some location add some spacing under location so we have class location and class location has already add we've added the color gray let me add margin bottom 16 PX okay that's a span so that's another learning margins don't work for spans I know it's confusing happens all the time margins don't work for spans so I'm just going to go in and I'm going to change these spans to dibs okay margins and paddings don't apply to spans because they are inline elements I'm going to change these all to divs and now it's going to apply okay great so this is is looking nice now we have the front end developer we have Bangalore India and we've pulled this or we've floated this apply link to the right so that's nice one thing that I would want to do now is maybe get rid of these underlines under these links uh these underlines aren't looking that great so I'm just going to go in and then for all the anchor Tags I'm going to remove the underline how do you remove the underline all the anchor or the link tags well remove underline from a tags CSS I just search that and it says that it can be removed using the text decoration property so you can say text decoration none and that should do it so if I go text decoration none that should hopefully get rid of all the underlines right we have gotten rid of all the underlines as well now we have these apply links as well last thing is the footer I think we're almost there we just need this footer at the end so let me come in and once again let me create this div called putter okay it's already there so I'm just going to give it the ID putter okay and then we have this list let me just call it let me give it the ID putter links okay so I'm going to do a couple of things first I'm going to give the footer so dot um it's it's an ID so hash footer I'm going to give it the background color gray or something very light gray let's see gains borrow okay that looks like a nice grayish color oh what is the lightest gray we can find let's search for a very light gray ghost white okay that is interesting let me just get Ghost white yeah that's a very light grayish color you may not even be able to see it on the screen but it's there then for the footer links I want to get rid of these bullet points and let me just bring that up here so for the footer links I want to get rid of the bullet points and I just want to keep them all on the same line so I am going to say putter links and again this is something that I would look up normally but uh I happen to remember it what the way you can get rid of these bullet points is to say list style none I believe that should do it and now you can see that the we the bullet points are gone now of course for the footer itself it might be nice to maybe add some padding at the top and bottom and maybe all around so let me just add a padding of 8px and okay now the footer is looking nice too and maybe let me also add some margin top the footer is too close to the data scientist job Ro let me add a margin top I'm going really fast but I'm expecting you to follow along here pause follow along and maybe also look up what each of these properties mean because that's really how you do web development mment 16 PX so let's add a margin H let's see did not do anything maybe let's make that 32 PX yeah that increased it so remember our location also has a margin so the margins collapse into each other um all of that happens okay final thing we want to make these list items come up in line so there whenever you have three divs showing one below the other and you just want to show them all in line now another quick way to do it is well we could just do I think display flex and that would do it yeah display flex and that should do it uh for foter links um we can also add but I want to show another way to do it and this is something that you can set on individual list items so you can say putter links l and that is going to select the LI items under the ID footer links and I'm going to say display in line okay and you can see now they're showing up in line so the difference between flex and inline is flex is something that you apply on the parent and that applies to all the items within it and then inline is something that you apply to the child element let's say you went into one of these list items and applied in line only that would appear in line instead of block which is is the entire horizontal width um but here we are applying to all the list items and I'll tell you why in just a second but apart from the inline we also want to add a margin so let's add we don't need a margin at the top let's add maybe 16 pixels of margin on the left and right so let's add the margin here let's reload okay so now we have a margin and the last thing that I'm going to do is I'm going to say text align Center and that is going to Center these links on the page okay and in fact text line Center can be done not just for footer links but for the entire footer itself we can do it like that and finally let's fix this as well so let's go in and let's call this copyright class equals copyright and let's come back in here and well we could also give it an ID but fine class is fine copyright and let's give it the color gray okay so that is our page I think that is looking pretty good so we have the nav bar at the top we have this banner and this Banner always occupies the entire length and it doesn't stretch the image too much um then we have this about Jan section that is always at the center and then we have the job opportunities that are also in the center if we want we can experiment with the colors of these and finally we have these apply links uh they don't do anything right now but it wouldn't it be nice if they could at least maybe trigger some sort of an email and that's where I want to introduce you to another form of Link called mail to Links okay so just search for mail to Links what is a mail to Links well you can do this instead of having a link point to some website on the internet you can have a link say mail to colon and then some email address and when the user clicks on that link it is going to open their email application whether it's Gmail or whatever email application they're using it is going to open their email application and put in this address in the subject line okay so that's a very interesting hack so this is what we can use here for our apply so I can go in here into apply where is my apply yeah I can go in here and in the HF I can say mail to I can just say mail to support at jan.com okay and let me come in here and let me say mail to support join.com and mail to support join.com and reload the page now if I click the apply button you can see that it opens my mail application which is Gmail and it has automatically filled in the address support at jan.com okay and then here you can actually then fill out the subject and you can send an email so essentially what we're saying is when the user clicks on the apply button that is going to trigger their email client and they can just send us an email that they're interested in a particular um job one thing that we can also do is we can also put in a subject here so we can say mail to and you can just say subject you can say question mark subject after the email address equals front end and question mark subject equals backend and question mark subject equals data scientist or just say data all right and I'll also add a Target uncore blank so that it opens in a new page underscore blank and let's add Target equals uncore blank and let's add Target equals _ blank okay so now each of these mail to Links is going to have a different subject and it's going to open a new tab you can see here that it has automatically added the subject front end and you can construct more complex subjects and in fact you can also set up some kind of a body directly as well and similarly you can go in here and uh let's click on backend developer and it fills up the subject backend and you can go in uh click on the data scientist and it fills up the subject data okay great and then all these other links are working fine as well I think I'm very happy with this I'm very happy with this web page at this point so I'm just going to save it and let's see I'm just going to reset the zoom level Okay so so this looks good at the normal zoom level and it contains everything that I'm looking for I have the header I have the banner I have this section I have some text on the left I have something on the right yep I have a couple of links here as well I have the job opportunities and I have locations I have this apply button and then I have this footer and then I have this copyright at the end as well great so I'm feeling very happy with this web page now the final step now that we have completed this web page the final step is to go ahead and deploy it so this is what it looks like roughly now we can deploy this web page to the cloud now we're going to cover deployment extensively over the course of this program over the course of this next few lessons as well and there are many many ways to deploy a website to the cloud there are hundreds of platforms but the simplest thing is to just upload a zip file right wouldn't it be nice if we could just zip up our web page and just upload it on the cloud well that is what you can do using this platform called static. apppp and there are a bunch of these platforms but static. apppp allows you to Simply drag drop an arch with your page or a website in it and it will take care of the rest okay it'll automatically set up a website for you now here is what we do first we have to make sure that we have an index.html page so there is this convention in HTML that a file called index.html is going to be the root page of a website okay or the root page so when you open jan.com that's actually opening jan.com index.html so let's go back here and let us rename webpage. HTML to index index.html let's rename this to index.html and then let us go and zip up this folder so we have this folder over here which has a index.html file which is the sort of the root page or the root web page and it has a bunch of other files and images as well I'm going to zip it up so I'm going to say uh compress and depending on your operating system you may have a different way to zip things and then on static. apppp I'm just going to click upload for free I am then going to upload this ZIP file over here and that is going to then ask me to maybe pick a domain name so it's going to be a subdomain of static. app so let me just put it as Jovian J V I can't spell my own company name okay and let me just put in a email here Sydney is the account I'm using Sydney jan.com and let me put in the name here Sydney Carton okay let me put in a password here I'm not going to say that and let me just accept the terms of privacy and let me just say continue okay looks like this email has been taken let me just provide a slightly different email yeah so now that is going to ask me to verify my email I've uploaded the zip file already so I'm just going to go ahead and verify the email I am going to let's see let's open up gmail.com and here is the account and here is the verification link okay now my email is verified and now you can see that Jan careers. static. apppp this website is getting deployed okay so let's give that a couple of minutes looks like it is deployed so let's maybe go and check it out let me just click Joan careers. static. apppp and yes looks like this website is already deployed and in fact you can open it up on your end as well and because we have set up because we have set up this page web page. HTML as index.html that is why it's opening up directly but I can also just type index.html and it will open the exact same page okay not only that remember we have this other page called box model. HTML well box model. HTML should open up just fine as well there you go box model. HTML and in fact if we had a link here from index.html to box model. HTML then that link would work properly as well and you can see that both these images got uploaded as well so that is how you deploy a site the the simplest way to deploy a site is to just zip up your code and put it up online you don't need any G AWS deployment commands Etc it's all really simple to do okay and that's it so let's take a quick summary of the whole thing here's what we did we created an HTML file on we created a folder on our desktop we put in a HTML file into it we added some code into it using vs code and then we tried to view it in a browser then we using some basic htl tags like HTML head title body div Etc we created a web page then we use some more HTML tags H1 to H6 P list links Etc to structure content on a web page so remember this piece before we added any CSS we just put up a bunch of content on the web page and here is what it looked like then we learned how to apply styles using CSS so cascading Styles sheets the way we saw we saw that we can apply Styles in line we can apply styles using the style tag we can apply styles using CSS files and the key idea is you have a selector and then you have a property and a value then we looked at the different kind of selectors we have tag selectors we have ID based selectors and we have class selectors then we learned the CSS Box model which is how you have content and around the content you can add padding and the padding is also shares the same background and then the padding is inside the border the border is something that you can set width for and then outside you have margin and margins can overlap for side by side elements and then we of course we implemented a wireframe using excal draw.com and we then tried to replicate this wireframe within CSS You by adding a bunch of CSS properties starting from the top so we picked section by section we added an app bar we added a logo in it we fixed the banner we fixed the section about Jovian then we went into job opportunities and then we added a footer right so that's what we did and finally we just deployed our website to the cloud using static. apppp we just went to static app created a zip file renamed our main page to index.html and uploaded that zip file verified our account and it is deployed as a um yeah so it is deployed where is it yeah it is deployed as a subdomain of static. apppp but within static. apppp itself you can also go into settings and actually configure a custom domain so you can actually put this on Jovian careers.com or something like that you can go and up you'll have to upgrade your plan you'll have to pay you can set up a custom domain you can just set up a domain like Joan careers.com and you can set up some DNS settings and make sure that that is where your web page shows up so that's not bad for a first lesson we probably spent about 2 hours 2 hours 15 minutes if I exclude the breaks and we were able to build a pretty good functional website and clicking on this website the actual functionality is also present because you can click apply and you can actually go ahead and send out an email to the L team to apply for a job so that's how simple HTML and CSS really is once you can become familiar with just the most basic parts now of course there's a lot more to it there are tables there are forms there are various CSS properties Flex boox Etc but what I want you to take away here is that you should try to First figure out what you want to build and try to build it using what you already know and then just try to learn as you go along the things that you don't already know okay and here are some references that you can check out you can find the completed code for this lesson it may be slightly different because we've done this live you can find the completed code for this lesson here you have this index.html over here so that's great and then you have maybe some beginner friendly HTML and CSS tutorials in case you want to look at other tutorials as well after practicing this you can go and check that out so HTML dog.com is something that I found very simple to follow along with but you want some if you want some Interactive HML tutorials you can go to w3schools.com and if you want more detailed and comprehensive tutorials check out mdn or Mozilla developer Network you can check that out as well they have fairly detailed tutorials um and a lot of text lot of explanation as well so take your pick depending on how new you are depending on how comfortable you feel after practicing this lesson after watching this lesson and practicing it writing out all the code by hand you can pick whichever other tutorial you want to take and some of the other things you can look at is the lm. this is the text generator that we normally use so that's something that you can use to generate text when you want to fill a page um if you want to learn about the CSX CSS Box model you can check out this YouTube tutorial there is this website called csst tricks.com this has a lot of great guides on various topics in CSS um don't recommend doing all these guides but whenever you're working on a particular topic if you need need to maybe get help with a particular Topic in CSS you can check it out and normally you can just search online and you'll find something good enough and then if you want to create more advanced mail to Links so you can use this mail to link. me and you can craft maybe a a very interesting mail to link which can have a two line a subject line a body and a bunch of other things as well you can add CC BCC all of that too so the last time we looked at the very basics of HTML and CSS and we did that by working on a problem statement where we built a simple jobs careers website for Jovian so today we are going to continue building on that in this tutorial we will dive deeper into the world of web development and we will learn some Advanced Techniques for Designing and styling websites using HTML and CSS we will learn how to create HTML tags of various types we will learn how to use some Advanced CSS properties and we'll also learn how to optimize your code a little bit for performance and accessib ability so here is what we're going to cover today we're going to iteratively improve the existing web page we are going to create and style HTML tables we're going to understand various text related and color related CSS properties we're also going to create an HTML form to collect user inputs and we're then going to send those user inputs to a server and finally we're going to use metatags to improve how a deployed page is previewed when it is shared as a link so there's a lot to get through let's get into it and the best way to follow the best way to learn these skills is to follow along step by step you don't have to do that if you're watching live but as you're watching the video just pause at various places and try to write out all the code yourself that is how you learn this quickly and of course we are assuming some basic knowledge of HTML and CSS here from the previous lesson so we'll explore these Topics by attempting to solve this problem statement we will try and improve the Jovian careers website that was created in the previous tutorial so here is what the Jovian careers website looked like let me zoom in here so that you can see it easily so we have a Navar here with the Jovian logo we have a banner image here it says do something great then we have an about Jovian section and then we have some information about Jovian we also have an image ideally this should be the Jovian team but this is just to indicate something about the team and we have information about job opportunities and you can click cck apply and an email will get triggered you'll be able to send out an email applying to these jobs and then there are some links in the footer as well for courses programs and YouTube so this is what we built the last time and we are going to improve upon this by making the following changes we going to show the list of jobs in tabular format with separate columns for the job title location salary and the job posted date we are also going to show an application form below the jobs table where a user can fill out and submit an application then we also going to improve the Aesthetics of the page bring it closer to the Jovian brand using the appropriate fonts text sizes and colors then we're going to deploy the page to to the cloud and ensure that it previews properly when it is shared as a link so this is what we're going to work on today now the code for this tutorial can be found here so the starter code which is the finished website from the last tutorial is available at this link the completed code for today's tutorial will be available at this link and finally the finished site that we're going to create today will be available at this link so check these out in case you have in case you face issues at any point so let's just take the starter code and we're going to download and extract the starter code first and then we're going to open it up in Visual Studio code so let's open up this link this contains a starter code and I'm just going to save it on my desktop it's going to be saved with the name my first webpage. zip you can see that I have a zip file here I'm just going to open up this ZIP file so extract it and now I no longer need this original zip file so I'm going to delete it then I am going to rename this so I'm going to rename this to my second web page since this is our second web page so you can see here I've renamed it to my second web page now I want to open this up in Visual Studio code so let me open vs code or visual Visual Studio code and I have Visual Studio code I've installed it already in case you don't know don't have it installed just go online search for visual studio code and install it and now I'm going to go into the file menu and I'm going to select open folder and now I'm going to just select the folder my second web page that I have just downloaded and let's open it up and here you go now we have this HTML file now we have a CSS file and we have a bunch of other files as well from last time so this is all the starter code that we have and let me also open up the web page in the browser so I'm just going to open it up in the browser here as well so that we have it open both for editing and for previewing so now we have a file index.html here and that file contains all the content for this page let's quickly review what this file contains so that we when we start modifying it we'll know exactly what to do now of course we have this head tag here here which sets the title of the page notice that we didn't actually set a proper title right now it just says my first web page it should say something like Jovian careers so we'll fix that then it contains a link to a stylesheet or a CSS files so there are many ways to attach CSS styles to HTML web pages and one way to do it is by using the link tag and putting all the Styles in a separate CSS file which we have here then of course in the body itself we have the nav bar over here and this this is all the code for the Navar so we have the Navar which is a div and then an image inside it which is the logo over here then of course we have a banner which is an image tag right here then we have an header we have a header H1 which is right over here you can see that all of these are styled as well so we have the body the body we've set the margin and padding to zero and we've set the font family to Sans serif we've also set a text decoration for the nav bar we've set a padding we've also set a margin for the banner we've also set an object fit over here so that it shows up properly no matter what the size of the page is and for the header we've set the text Line to Center so we've added various Styles as well then we have this about section and in this about section we have a left section and a right section so the way we did this is we have this about div and for this about div we have set the display to flex and we have set a maximum width for this about div so you can see here that the maximum width is ensuring that this about div doesn't become too big apart from that we've also set a margin that ensures that it is always at the center okay so I'm going through this quickly but review the previous lesson if not if some of this doesn't make sense we've also added a padding so remember the CSS Box model the padding is inside the border the margin is outside the Border um it's a good thing to practice and review from time to time then of course we have we have the description which takes up 50% of the width then we have the uh Team image which again takes up 50% of the width and the team image also has a border radius over here and then we have these job opportunities so we've used an edge2 here so you can see we have the description we have information about the two boot camps which we have used a list for a list tag and then we have job opportunities we've used an H2 here then we have a div called jobs and in this div we have the three jobs front end developer backend developer and data scientist and finally we have courses programs and the YouTube link in the footer okay uh of course there are some Styles related to the jobs div as well there are some Styles related to each of the jobs we have those are H3 and there are some Styles related to the footer as well okay so very basic HTML and CSS that we applied and we of course deployed it to the cloud using uh simple hosting platform where we could upload a zip file all right so that's what we have from the last time so we've opened up the web page we've opened up the project in vs code and we have renamed it to my second web page now the first thing we'll do is try to improve the wireframe in the previous tutorial we first created a wireframe this is what it looked like so it contained this Navar banner and it contained the same sections that we have on the actual page and we used this as a visual reference while creating the page so now we are going to improve that wireframe we're going to make sure that we are covering all of these things a list of jobs in tabula format the application form below the jobs and also maybe the other things will follow not necessarily in the wireframe but when we Implement them and this is something that you'll see as a very common practice in the world of web development this process of improving the design of a web page and then going ahead and implementing it on an already live web page is called iterative development and a website goes through multiple iterations or even web applications so when you look at Jovian we add new features more or less every week and that is how we approach building things so the one approach that you could follow is something called the waterfall approach where you identify all the requirements then you come up with a final design then you do the development for the entire set of requirements at once then you test it and then you maintain it that takes a lot of work and you often end up building a lot of features that nobody might use and missing out on some very important features so another way to think about web development is to take an iterative approach you should at the very least push something out deploy something that people can use every week or or if possible every single day so whenever you're building a website or a web application you should think okay what can I build in a day that people can start using however limited it is which is what we did the last time and then once people start using it depending on their feedback depending on what else you have in mind and how much time you have try to come up with a second version with a new set of features and repeat that process so iterative development is a very common practice in modern web applications so this is something that you should get used to so there are a couple of changes that we are making today the first thing is to replace the list of job openings with a table and some benefits of the table are they it leads to an improved readability because tables make it easier for people to scan things visually tables also offer better organization so because organizing them in a table you can also group them by Department location or other relevant criteria later on when we Implement more interesting tables and then tables can also have things like sorting searching filtering Etc which we'll look at once we look at web application development later in the program apart from the table we'll also add an application form below the table so the form will ask for the users's first name last name or maybe the name as a whole let's just change that to name so the form will ask for whoever is applying the form will ask for the applicant's name email the job that they're applying for their phone number their resume and a cover letter and here's what you can do you can actually start revising the wireframe here itself so you can take this and then create a copy of it and then paste it and then start moving things around for example you could get rid of you could get rid of these and then you could insert a table here so I could for example go like this and create a table and then I could make some more changes let me change that to Black yeah so I for I could for example create a table here and then into that table I could add various columns like this so here's one column here's a second column here's a third column and then I could start adding rows within the table and then I could maybe start adding information like job title so these would be the column headers and after adding the column headers I can also add some data within those columns so this is how you enhance your wireframe you are visually trying to put together what you want your next version of the wireframe to look like and then you could also go ahead and maybe extend this a little bit so move all this forward let's see let's move all this down and you could then add a application section so you could add a section called submit your application and then you could go ahead and maybe add a various input fields for example you could get an input field called name here and put an input box below it and then just create multiple copies of that to create the other input fields and so on and you could add maybe a submit button somewhere at the end right so this is how you enhance a wireframe just create a copy of your existing wireframe and keep adding new things new sections before you go out and start coding now I already done this so I'm not going to show this entire process to you but I encourage you to just do it all yourself get into the habit of creating quick wireframes before you uh start writing HTML code that will save you a lot of time while coding so here we have added a job opportunities table and you can see that we have a job title location salary and posted on so we have the job titles we have a bunch of locations we have salaries both in Indian rupees and in dollars and then we have a poster on date and below that we have a submit your application form and in this form we ask for the name email phone number and there's a drop down here asking for the position the user has applied to and then there is a cover letter uh there's a box here for submitting a cover letter okay and there's also this check box here that we're asking the user to agree to the terms and conditions which is to be contacted by us or uh for their resume to be shared within a company and so on and there's a submit button so now we have a clear idea of what we want to build today specifically these are the two sections that we want to work on today and of course we want to make them aesthetically pleasing and then we also want to make some other changes to the site in general so this is the revised wireframe we still have the Navar Banner about section but now we have a job opportunities table and we have a submit your application form and of course we have the footer as well again for personal projects a wireframe is usually enough to of websites design and layout but in a professional settings UI developers will often create detailed mockups providing more information on colors fonts and visual elements that you can work uh that you can use while actually coding the web page so as an exercise I encourage you to replicate this wireframe and maybe also add some new sections see if you can add a new section and Implement that while you're working through this lesson but let's come to tables in HTML now tables are a fundamental component of HTML used to display data in a structured Manner and tables are created using a combination of the table TR TD and th tags so there are a bunch of tags that have to come together for you to create a table and tables can be styled using CSS just like all other HTML tags to add borders backgrounds and other visual elements tables can also be manipulated to merge cells so if you see here it's not just a simple table with rows and columns you can see that these two are merged and then these two are this is vertically merged as well you can do LS of interesting layouts with it using tables but I do want to mention that tables should be used appropriately don't put everything within a table you might get this temptation to just use a table for the entire web page to lay things out but that's not a great idea you should be using CSS for layout and tables should be used only when you want to show a grid of data which fits in neatly into a table so A good rule of thumb is if something can be represented using a spreadsheet then a table is a good way to represent it in HTML okay so a table is created using the table TR and TD tags the table tag is used to create a table in HTML and all other table related tags are nested inside this tag then the TR tag is used to create a table row and each row contains one or more table cells and the table cells are created using the th tag and the TD tag okay so let's see these an action and it'll start to make a lot more sense so the first thing I'm going to do here is go down and find the section job opportunities and I'm going to remove this div containing job opportunities and if I just reload here you can see that now we no longer have job opportunities on this page let me just zoom in a little further okay now let's start adding a table here so let me add a table okay and let me save that and you can see nothing really happened some additional space got added but the first thing I'll do is I'll add a row within the table so a row is added using the TR tag and let me save that and still nothing happens now let me actually put some headings so let me create a heading called heading one so I'm going to create two column headings one called heading one and one called heading two and these are created using the pH tag okay so now you can see over here in the corner we have heading one and heading two and normally you might want a table with a border so one quick way to add a border for a table is just by specifying the Border attribute okay now once I've added a border you can see that there is a border around the entire table and then there is a border around heading one and there is a border around heading two as well okay let's add more rows within the table so let's add a TR now let me add another element so now I'm no longer adding headings now I'm acing I'm adding actual data elements okay so I'm just going to call it data 1 for now and TD data 2 okay and let me just replicate that for one more row PD data 3 and TD data 4 all right so now we've created a table successfully I hope you can see it you it's right here in the bottom left corner of the web page and now now that you've understood how tables work we have this table tag and in this table tag we have a row this is the header row and that contains these th tags so th is header then we have these uh more rows and in these rows we have the TD and TD creates normal data you can see the difference between the heading and the normal data is that the heading is bold and if the table was bigger you would also notice that the headings are centered but the normal data is left aligned so that is a difference but it's also semantically informing the browser what is a heading and what is just data within the table it is also used by screen readers and search engines to identify the structure of the table okay now I encourage you to experiment with the table what happens if for example I put an additional column here let me just save that and you can see that a new column got added here but they you don't have that same column here available and that is why you have empty space here or what happens if let's say you have like a stray TD somewhere so let's say you have this data five somewhere what what does that do so that creates a new row even though you do not have a proper TR so even if you do not have a perfect structure of table and then TR and then TH or TD most browsers will still render your tables but it's a good idea to M maintain the proper structure while building a table okay so that's how you build a table in HTML fairly straightforward okay so let's maybe go ahead at this point and let us add this data into a table so we want to get the job title we want to get the location we want to get the salary and we want to get when the job was posted now here's a quick tip for you whenever you're building HTML tables it's always a good idea to First maybe create a spreadsheet like I have done here I've created the spreadsheet let me Zoom that in a bit and I am simply going to now use the spreadsheet as a reference for creating the table and I can also just copy paste the data very easily from the spreadsheet onto the table so let me just go in here and copy the table headers and now I am going to paste in these headers so my first row is going to be a row of headers and that is going to contain these th tags so now we have a th for job title we have a th for location and we have a TH or table header for salary and finally we have a TH or table header for when the job was posted great now let's start adding the jobs one by one so once again I'm going to go in and copy this front end developer bangaluru I'm going to copy the salary and the posted on date as well and let me get rid of these and paste that in here let's bring that into new lines over here okay and let's put in a TD here so again wrap the data inside a TD and you don't just have to put simple text you can put entire lists you can put paragraphs you can put whatever you want you can put images into a table but for now we'll keep things simple we are just going to put some normal text into each table cell so each box that you see within the table is called a table cell so that is something that you will notice in the terminology especially if you're searching for questions online okay so that is the second job rooll let me just grab this and create a few copies of this and in fact what I'm going to do is also give it a couple of classes so I'm going to give it the class I'm going to give the entire table an ID job stable and I'm going to give this a class job stable header and or jobs header row let's just call it jobs header row and let's give this a class jobs data row okay and let's create copies of this so we are adding the classes because we're going to use them later for styling now we have the jobs header row and then we have jobs data row let's add the second role full stack developer I believe the second role is in New Delhi India and the salary here is [Music] 15 let's see and the Feb 1 2023 is when it was posted let's create a couple more copies for the next couple of rows okay we have a data scientist this is in San Francisco USA and this is I believe 175,000 yep and this was posted in December 22 20 December 22nd 2022 and finally let's get get that last role in here as well ml engineer and this one is a remote job and this one is $80,000 and I believe this was posted on September 19th okay so that's our table we have a table inside the main div and then the table has a border and the table has the ID jobs table then we have these rows and the first row is the jobs header row because it is for the header we style header separately and then the rest of the rows are data rows and we are using TDS inside instead of pH which is what is used for the header and let's save that and let's reload the page and you can see here now we have the job title locations salary posted on and we have all the information here that we had in our spreadsheet so this is roughly what our table looks like we do have borders but the borders are not very pretty so as an exercise I would encourage you to try adding more columns to the jobs table for example requirements and responsibilities try including paragraphs or lists within table cells and as you do so you might need to V vary the widths of different columns you might need to say that the requirements column should be at least 30% of the tables width and so on and that is something that you can add by following this tutorial so sometimes depending on the kind of data you have you may need to vary the wids and that is all something you can control using CSS or just using normal table attributes but let's talk about styling HTML tables styling HTML tables with CSS can greatly improve the visual appeal and the readability of a website so here for example is the careers website at stripe which is a p payment processor company and you can see that they're also using a table but their table clearly looks a lot better than our table so let's try and make our table look a little better not exactly like this but we'll try and come close so here's what we're going to do we can use Simple CSS properties that we already know to make some changes to our table one we'll add borders around the table and table cells using CSS not using the Border proper property or the Border attribute because CSS allows us to control other things like color then we will also make the table full width on the page and then we'll align the headers we left align the headers headers are Central by default we left align them and we'll also show a different background color for headers and we'll add alternate colors to the rows so here for example you can see that rows have alternate colors so we'll add this kind of an alternate color pattern to our table as well okay so let's try doing this step by step the first thing I'm going to do is grab the ID jobs table and I'm going to style it by putting some content into the styles.css file and remember that the styles.css file is linked here using a link tag from the head tag of the page that is how you connect a CSS file to apply the Styles into an HTML file okay so let me open up styles.css and I am going to come down here to let's see this region over here so I think we don't need this do location this was there in the previous page but we don't have location with this class anymore so we don't need that let's put in the table let's select the jobs table so I'm selecting it by ID so I'm using the hash or pound character to select the jobs table by its ID jobs hyphen table and let me set its width first to 100% so what I wanted to do is take up the entire width of the parent div okay okay not the entire width of the screen but the entire width of the parent div you can see that we have this jobs we have this jobs div over here and this jobs div is set to have a Max width of 800 pixels and it has a margin of zero Auto that is what centers it on the page so there's this outer jobs div and inside it we have this jobs table which is now taking up the entire width of the parent okay so that is one way to specify width apart from pixels you can specify it in percentages okay that's great what next well let us now add a border so let us remove the border from here first and let us first look at that how it looks okay this is what it looks like let's add a border here so border one pixel solid border there are various border Styles solid means you do not want any dashes or anything in the Border it's a complete continuous straight line and let's make it gray let's not make it black back so that's the Border let's see okay so now we have a border for the table but apart from the table we also need to add a border for each cell so I'm just going to say job stable or actually I'm just going to select the cells let's see so we have we have jobs header row so let's get the header row using jobs header row and this time I'm using the dot selector from CSS not the the hash selector because the hash selector is used to select by ID but the dot selector is used to select by class and this T this TR or this row here has the class jobs header row that is why we using the dot selector okay and I am going to give it a border as well border 1 PX solid gray and oops this is not doing it so so if you notice here the TR over here contains the class jobs header row but what we want is a border around each cell not around the entire row so that is where we have to select that th cell inside the TR of the class jobs header row and you can do it very simply by simply writing the tag that you want to select so now what we've done is we are saying select using the class jobs header row so that is going to select the row that is going to select this row and then we saying inside the jobs header row class inside an element with the class jobs header row look for a th look for a table header cell and apply this border to it and now if I reload you can see that now our table headers have these borders okay I hope you can see this our table headers now have these borders let's also add borders to the table cells so I'm just going to grab the data row class so jobs data row is the class for the row containing the jobs data and now we have the TD or the table cells over here which contain the actual data and I'm going to set border 1px solid gray okay and let's set that as well so now once again we have borders now but now these borders have been added using CSS which is somewhat nicer we have more control now the next thing I want to show you is how to get rid of these double borders you can see that we have these double borders over here so we have the salary posted on and then we have this border around it and then another outer border around the table the way we can do this and this is something that you just have to look up is using the Border collapse property okay so border collapse collapse you will almost always have to put this on a table if you're just styling from uh styling on your own so I'm just put border collapse collapse and this is something that you could looked up you could have looked up how do I get rid of the double Border in a table and this is what you'll see okay so this is nice now I have the Border collapsed now the border is looking nice next let us maybe space things out a little bit the data is very close to the edges it would be nice if there was some space around it so here's what we can do we can go in and we can put in put in a padding here so let me put in a padding of 8 pixels so remember the CSS Box model the padding is inside the Border okay let me add a padding of 8 pixels in the data as well so both of these will add space inside the border so you can see here inside the border of a cell we have added additional space if we had margin on the other hand that space would get added outside the Border okay so keep the CSS Box model in mind you can always just search online CSS Box model whenever you are unsure how this works okay so we have the content then we have the padding uh then we have the border and then we have the margin outside it all right so this is looking pretty good let us now maybe add a background color to yeah let's add a background color to the header so background color let's see I am thinking of the color let's maybe just add the color Alice blue for now one of the named colors okay nice we have a nice background color for the header I hope you can see it it's very light um we are not going to use very strong color see what happens is if you use a proper strong color like this your text becomes unreadable that is why you always want to use very muted very light colors and we'll talk a lot about color guidelines later down the line okay this is looking good let's also add a background color now for each of these alternate rows so we don't want to add a background color for every single row we want to add it for alternate rows and this can be done using again using a special property now this is the thing about CSS that you have to look these up look up these special properties from time to time there's no way to remember them I just looked it up a few hours ago that's why I can partially remember so you can say TD and in the TD um I'm actually just going to look it up over here in the TD or actually not in the TD I want to add this for the header row so I want to get the rows from the table which are the nth child where n is odd okay and I'll just show you what this does first and then you will see yeah and then you will see exactly uh then we'll discuss how it works okay let me make that job stable yeah so here's what we've done we have said job stable so select the job stable by ID inside the job stable select a TR a row okay so we have the jobs table here with the ID jobs table inside it we want to select a row so each TR represents a row but we only want to select the rows which are the nth child okay where n is odd so all the odd rows which selects a full stack developer row and which selects the ml engineer row so all the odd rows get selected by putting this colon nth child odd and then we are giving them the background color of ghost white okay again if you see carefully here we have of course a color background color for the header that we have specified then we have this background white color for this first row which is row number two technically and then we have for the third row New Delhi India we have another background color okay uh it is very light but I hope you can see it and we've selected alternate rows using the nth child and how do you know this well you just have to look it up I just look it up every time so I don't worry about it too much okay great one last thing we want to do is maybe this is looking a bit odd that the headers are centered so let's maybe put the headers on the left so I'm just going to say text align left okay now the data is now the headers are also left align all right so I think we've with that we've implemented everything that we set out to implement we added borders around the table we made the table full width we left align the headers we are showing a different background color for the headers we are using Alice blue and we are using alternate colors for the rows using the nth child e using the nth child odd property okay so that is the CSS that we need to style our table not a lot it's about 10 12 lines but it look it makes a table look rather nice I would think okay great so that is how you style tables with CSS and you can also verify if I resize this that the table remains in the center then it occupies the full width of the parent component okay so that's tables now I would would encourage you to maybe also learn a little more about styling of the rows and columns so there is this tutorial on HTML table styling you can have these zebra stripes which is what we've implemented or you can also stripe you can also have colors for the different columns if you want again using nth child and you can also combine vertical and horizontal stripes so you have a lot of different ways in which you can combine of course you can do tables you can have tables Without Borders so one change for example we might make is we may not want the borders between the inner rows so we can come in here and we can say that for the TD for these data cells we don't want a border bottom we just want a border right okay and what that's going to do is that's going to remove this border bottom because we already have alternating colors and that's just going to keep this border on the right all right um yeah so that is how you style tables in CSS so moving right along we'll also talk a little bit about merging rows and Columns of data in tables now you can use you can create all sorts of interesting tables in HTML what you can do is you can merge a bunch of data cells to look like a single cell either vertically or horizontally so what would be nice for us is to maybe try that with one of the columns here so let's do this let's get the location column and let's have the location column split into two columns City and Country okay so here is how I'm going to do it I'm going to have sub columns under location called City and Country let's come back here into the table definition and we have this first row we have this first row and this first row now contains a location so that's great let me add a second header row so let's add TR and here again I'm going to add let me keep that class here as well okay now here I'm going to add a couple of headers one is called City and the second is called country all right and what does that do well as you might expect that add the second row of headers but now in this case the second row of headers says City and Country below job title and location that's not what we want what we want is to show to make this show up under location itself so here I'm going to use two special attributes the first is called call span or row span okay so we want the job title to actually span two rows so row span equals two and now what this does is the job title the job title header is now taking up two rows of data okay we we've simply added the property row span equal to two the attribute and that ensures that job title take takes up two rows of data whereas location salary posted on are still taking up only one of data now we want the location to take up two columns so that City and Country show up under location so we can add a call span and we can say call span equal to two for location and let's reload that and now you see that the location cell takes up two columns so that's why the city and Country headers show up under location because each of them take up only one column each and now let's go ahead and finish this Heading by actually giving row span of two to salary and posted on as well so let's set row span equal to 2 for salary and let us set row span equal to 2 for posted on okay so now we have the job title which spans two columns then we have the location which spans two rows uh sorry now we have the job title which spans two rows then we have the location which spans two columns but only one row then we have the salary which spans two rows and then we have posted on which spans two rows however we have now also added the second row in which we have the city and Country both of which only span one row and one column and because we have these other values spanning two rows they automatically get adjusted under location okay so this can be complicated at first you're not going to get it just by watching so practice it try watching the video re-watching the video and typing it out step by step and it'll start to make a lot of sense okay now finally let's also split up the data right now you can see that the data is a bit messed up so let us split up the country and city for the data so I'm going to come into the first row here First Data row and add another column so now we have bangaluru India as the country and city and Country let's do that for New Delhi India as well so let's come in and add India okay that's good let's do this for San Francisco USA as well again let's extract out USA and put it in a separate table cell all right so now we have bangaluru India New Delhi India San Francisco USA now remote creates a problem for us because it's neither a city nor a country so how about we expand remote to take up two cells so let us simply come in here and let us sell call span equal to two for remote and let's reload that and now suddenly you can see that we have the job title and then we have the location and under location we have City and Country and then we have the salary and posted on and of course City and country are split properly except in the case where it is remote where it is just a single cell okay so this is how you create a more complex table by merging rows and columns using the row span and call span attributes now that we have this slightly more complex table I think it might be better to maybe bring these headings back into the center so I'm just going to go in here and I'm going to remove this text align left or I'm just going to put in text align center for the headings so under the jobs header Row for the th which is the header cells I'm going to Center the headings so I've centered the headings right here perfect and I think I'm also going to bring back the separators because here this line ends abruptly so I'm just going to come in here and change the border right for the T or the data cell to border so that the Border shows up on all sides not just on the right okay so now this is our job opportunities table now it contains the job title it contains the location split by City And Country it contains the salary and it contains the posted on information as well okay so now our table is looking very nice we have simply added some row span and call span properties and we've added some updated some CSS to make it look something like this exactly what we are looking looking for now you can again check out this resource to experiment with the row span and call span property to become familiar with CSS and HTML you have to practice you have to experiment you have to break things and only then you understand how things work okay so here's one exercise for you create a layout on paper which contains different merged cells and columns and then put in some sample data into that layout and try to replicate it using HTML and CSS tables the next thing that we're going to talk about about is text Styles in CSS now that we've set up our table uh one thing that we also want to do is we want to improve the Aesthetics of this page and there are two parts to Aesthetics there is the text and then there is the colors as well right so let's talk about text Styles in CSS now CSS provides a wide range of text styling properties and they allow you to change the appearance of text in your web pages and these properties can be used to modify the font the size the color spacing and other ual aspects of your text specifically you can use external fonts within your HTML Pages using C CSS okay now why do you want why might you want to use external fonts there are some inbuilt fonts that most browsers come with but that differs from browser to browser and the selection is very small when you're working for a company the company may have its own design principles may have its own design guidelines may have its own fonts that it is using and and you may want to incorporate those fonts into the website and that is what you use external fonts for so external fonts make your website stand out and look more unique compared to other websites on the internet and you can add external fonts to your website using the Google fonts web uh using the Google fonts tool okay so let's visit Google fonts and let's check out some fonts okay so looks like we have a bunch of fairly interesting fonts here and of course there are fonts in all kinds of languages now uh you can click on any one font for example I'm clicking on Roboto and then once you've clicked on a font let me just reset the state over here once you've clicked on a font you can then select some styles of a font so each font can have many styles so you can see here we have the thin font we have the thin italic font we have a bunch of different styles from thin to thick let me just switch to light mode yeah so we have a bunch of styles here and you can then select a bunch of styles so you can uh select which Styles you want to use in your website for example let us use the regular style let us use the regular italic style let us use the Bold style let us use the black style and let us use the medium style okay so I've selected a bunch of styles for the Roboto font this font is something that I want to use on my page and then there's a button here called view selected families on the top right and now you can simply copy this code over here so there's a bunch of code here that you can copy and paste into the head of your HTML page to use these fonts within your site okay so that's what we'll do in just a second but the basic idea is if you want to use external fonts first you choose a font from Google fonts then you add the font to your CSS using the link tag and we're going to look at that in just a second then you use the font within your CSS so let's say you've Incorporated the Roboto font now to actually use it on the page for a particular tag you can select that tag and within your CSS file you can simply specify the font family Roboto or whatever font you have downloaded or included on your site and that is how you can set fonts for various elements on the page okay so that is how you use external fonts you find something from Google fonts add it to your page and then just add some CSS properties now it is common practice to use one font family for all the head headings and use a different font family for all the body text and at Jovian we use the inter font so this is the inter font right here uh which looks pretty similar to Roboto but has some small differences so we use the inter font for headings and we use the Roboto font which we already looked at for text within our web page so let's grab a bunch of styles from the inter font and the Roboto font and then include them on our web page okay so here is the inter font and on the inter font I'm going to select let's see I'm going to select the regular I'm going to select the medium I'm going to select semi bold bold all of these so those are all the styles that I selected from the inter font and from the Roboto font I have regular medium bold all right so now we have styles from Roboto and we have styles from inter and now I can go in here and copy all this so if You observe this link tag over here it contains information about which fonts we want to include in our page and then I can come back into my HTML page index.html come up into the head and before my CSS file I'm going to paste all these link tags okay so just to show you what that looks like it looks like we have added a link tag called preconnect and two of these preconnect tags one goes to Google apis one goes to gstatic not something we need to worry about we just have to paste it in but here is the interesting thing we have this link tag which contains the link to Google fonts and it contains these font families inter and Roboto so we have these font families and these font families are included as a stylesheet okay and in in each of these font families various weights are also included so you can actually go in and edit this URL slightly in case you want to include different weights but I'm just going to save this now and at this point the fonts have been included on our page okay so if I reload the page you can see that nothing has happened yet because I've simply included the font right now the next thing I need to do is actually use this font on the page and that is something that we're going to do in the CSS file okay how do we do it well we need to add the font family for the B body and then we also need to add the font family for the headers let's do that first I'm going to add the font family for the body so let me change this to font family Roboto okay so what we often do is we specify a font family for the body but in case this font was not loaded properly in case the request failed or something we also specify a backup as one of the default font families from that are already present in CSS so in this case the backup is Sans serif okay then I am going to just reload the page after saving this and you can see that there was a small change in the font so if I disable this and reload you can see that the font looks different and if I enable this and reload you can see that the font looks different and if I remove Roboto you can see that font looks slightly different it's a very slight difference all of these fonts are very similar often but Roboto is what our design team has told us to use so that's what we going to use for our body okay great next let us set a different font enter for the headers so let's select H1 H2 H3 so you can also select multiple tags like this using commas so H1 to H6 we're going to apply this style to all of them and let us set font family enter and let us set the backup as Sans serif okay and let's reload and now you can see that again there was a slight change if I show you so this is without the inter font family and this is with the inter font family okay slight changes but it looks on brand it looks closer to what we have Elsewhere on Jan all right so that is how you use external fonts now there are thousands of fonts available on the internet and you should try to pick simple legible fonts for a good user experience otherwise you might run into issues where people are not able to actually read what's on your site even though it looks pretty so check out this link to explore some other font pairings so a header and a body font pairing is often called uh is often so there are many header and body font pairings that people have created by looking at Google fonts for example Calbert and acumin so this is a good combination yeah calart uh calart and Acumen is a good font combination monster art and corer is a good font combination but obviously it looks very different from what we have then we have a bunch of these These are serif fonts these are not s serif uh and we have these more interesting fonts we have some fairly nice cursive looking fonts so depending on what you want you can use various fonts on your web page and I encourage you to experiment but also be conservative stick to some of the more standard types so that people can actually understand what's on your page now apart from the font of course there are many other text styles that CSS also offers and we're just going to run through them very quickly we're not going to cover everything necessarily but uh I encourage you to explore these and experiment with these as you are working through the lesson so the first is font family this is something that we've already looked at it seel it sets the font family of the selected text we set a font family for the body and then we over road that font family so we set a font family for the headers as well and the specific setting for headers will override the setting from the body which is applied by default then we have a font size so we can actually go in into the body and we can change the default font size so let's say I set the font size to 24 pixels and reload the page you can see that all the fonts have become slightly bigger um I'm going to keep it to what it was earlier the default now there are many ways to specify sizes and we'll look at those as well then we have the font weight so we have a bunch of properties that we can use to set the weight or the thickness of the font so I can show you here in terms of the body so if if I set font weight to 400 that's basically the regular font weight but I can set it to 600 and then it'll be slightly thicker and I think we included a bunch of other font weights as well let's see we also included 500 700 and 900 so let me select 7 00 okay that's about the same then let's select 900 that's really thick uh we also have 500 which is like a medium weight so that's a less less thick so depending on what you want to convey how prominent you want the text to be you can set a font weight and 400 is the default but you can set set a bunch of other font weights as well okay and we look at a few examples of font weight then we have the text align property so the text align of course is used to do a center alignment left alignment right alignment so you could say for example text align we've already done this here we've done H1 text align Center we could have changed this to text align right and then the text would be right aligned we could set it to Center again and that would be centered again so alignment is just left right center there's also an alignment called justify which is often used in text so we we say text align justify what that does is you see this empty space at the end of the line it makes sure that all line there are no empty spaces at the end of a line and all the SPAC is distributed between the words so you can see now I set text line justify for the body and all the space is now added between the words this is not very readable so it's generally avoided unless you have to ensure that there is no space at the end of the text so I wouldn't do it but it's it's an option for you so you have left align Center align right align Justified all of that okay then you have the font style so the font style is used to maybe make things italic so I can say font style italic and you can now see that everything is a little italic everything on the page you can of course also apply it to just a specific section so I could just go into the description here and I could just apply the font style italic so that everything else on the page is normal but this is italic which is just slanted to the side and there are a bunch of other font Styles as well that you can apply okay so I'll encourage you to check it out there are a bunch of different font Styles you can use what else well we have a text transform so text transform can be used to automatically make the make all the text uppercase for example let's say we wanted all our headings to be all caps so we could of course type it in caps in HTML or we could just set text transform uppercase and now all our headings would automatically be uppercase of course this is just for H1 but I could go in here and apply it to all the headings and now everything is uppercase all right so that is text transform and finally we have this text decoration so text decoration is used to add a line whether you can have a underline overline or strike through so I could go into the headings and let's say I want my heading to be underlined so now the headings are underlined or maybe I want to line over my headings not sure why I might want that but it's possible sometimes for certain designs that might be useful and you could also have a line through it this can be useful if you have specific things within the text that you want to strike out so you could put a span around some text and then just put text decoration line through let me show you a quick example let's come in here into the description and let's say we we want to change this to we want to strike out most highly so I could just put a span here and I could say style equals text decoration line through and I could close the span all right so now we've put this span and now you can see that the word highly is struck out as we might expect so that's how you can use this text decoration ation line through okay so that's just one of or these are just some of the properties there are many many more one other that you might use from time to time is a line height so you can see this text over here um if we want to make sure that maybe there is more space between the lines we could set a line height so we could come in here and we could set a line height and the line height is normally expressed as a single number which is a fraction of the point size so let's say we want the fraction of the font size so let's say we want the line height to be 1.5 * the normal font size so if I just do that you can see that now everything is a little more spaced out if I set it to two so then there's going to be almost a double distance between each line or I can just set it to one and then everything is going to be very close together that's probably not what we want something around 1.2 is the actual line height that is set by default so that's what you might want to stick with okay again all of these things are properties that will be defined in the design system or in the design mockup that that will be shared with you by a designer at your company but it's good to know what each of these do and you can experiment just to visually see what what looks good uh you might have the question given so many properties so many values how do I decide what to pick well keep it simple just use as few properties as possible and then introduce properties one by one if if they make things better you don't have to add all these properties necessarily and of course most of the time you're going to be using some kind of a framework which will have all of these properties configured by default okay so as an exercise create a new web page with some text on it then look up available values for each of the above properties and then apply them to the text on your web page and understand the effect okay so the more you practice the more comfortable you'll get you don't have to remember this stuff but you have to know how it works so that when you need to you can look it up and there's also this reference that you can check out on styling text it contains everything that you'll need to know about text styling now one last thing I want to cover before we head into a Break um I mentioned to you that one way you can add sizes or lengths in CSS is by using pixels or another way you can do it is by using percentages so for example in index in our styles.css we have set the max width of the about section to8 800 pixels and and that set sets the max width of this section but along with that we can also SE select a width in percentage so here we have 50% which is the width and that ensures that it takes up 50% of its parents width okay so the there are two kinds of lengths one is the absolute length which is expressed in pixels and then we have the relative length which is expressed in percentages but there are also many other absolute measures that you can use so you can also Al use inches which corresponds to visual inches on the screen you can also use centimeters millimeters points or pasas all of these are not very common so most of the time you'll only see people using pixels but just know that these are all also present in case you want to specify so let's say we want to set the font size of the body 2.5 in we could do that and of course that's very big we may not actually want that but that scales the size of the body okay um the other thing is in relative font sizing as well most of the time you will use percentages but when it comes to text specifically people often use these font sizes called em and RM M and REM what do M and REM mean well M and REM are both units of measurement that are used to size elements BAS Bas on the font size of either the parent div or the font size of the root element which is the body body tag okay so first I'll tell you about REM so here's what happens let's say I sent a set a font size for the body font size of 16 PX okay so now I've set the font size of 16 pixels for the body and now let's say I set for H1 I set the font size as three RM okay when I set the font size of three RM for H1 what I'm saying is relative to the root tag which is the body tag I want the font size of the header H1 to be 3x and that is what is specified by three RM and you can actually verify this you can go you can right click you can say inspect and that is going to open up this yeah so that is going to open up this box model for you and you can insect this H1 and you can go into computed here and you can verify that its font size is 48 pixels so 16 3s is 48 right so just by specifying three Ram we have specified that the font size of the heading is supposed to be three times the font size of the body why would why would we want that well why not directly just set it to 48 PX well let's say we had a design overhaul and we wanted to change the body font size from 16 pixels to 20 pixels we want to make our text bigger so that people can read it more easily so if we changeed it to 20 pixels and reload the page you can see that the text became bigger but the heading did not become bigger so now we've lost that balance which we had earlier established on the other hand if we had three Ram here every time we change the basic or yeah every time we change the basic uh body size that is going to yeah yeah that is going to to automatically scale the font size of the uh H1 as well okay so if I remove this you will notice that the H1 where it should have become bigger okay there might be something else that is affecting the H1 so I'm just going to put in important here that doesn't do it either maybe we have to set it at the root level yeah so I believe the root the root font size has to be set using star or just using maybe HTML or something so you set the or you set the base font size over here using star and then everything else is expressed as REM of that so the body font size is going to be one REM and then the H1 font size is going to be 3 RM so if I reload that you can see that the body is 20 pixels and the H1 is 60 pixels but if I change the body font size to 16 PX now you can see that this is set this is now scrolled down to about 48 P pixels okay so that is how you use Rams uh to specify the font size in relation to the root tag of the entire page but of course you can also set it to 3 m in which case if the H1 is outside another div and that div has a particular font size then we are simply going to use the font size which is three times that let me show you an example here so let's say I have this H1 inside a div and in the div we have set the font size to five pixels so now this H1 has the size 3 * 5 15 pixels because it is set to 3 m em okay so m is relative to the parents font size RAM is relative to the default font size of the entire page okay so that's that let us revert that change so now you might wonder that since we have all these different kinds of font sizes how exactly do we decide what font sizes you should be using how do you decide the font sizes for the different headers how do you decide the font sizes for paragraphs so I just want to share a few guidelines for you and this is from this Library called bootstrap which we look at in the future so while designing your website it's important to consider appropriate text sizes for optimal readability and usability and here are a couple of guidelines for the body text 16 pixels is a commonly used font size and this is the default in most browsers so you can just use that so in the body you can just come in and you if you just say font size 16 PX that is going to be the default font size you see nothing changes then for the headings you can use these font sizes so for the H1 you can use 2.5 Ram which is 2.5 times the font size of the body or 40 pixels for H2 you can use two RAM for H3 1.75 H4 1.5 H5 1.25 and H6 1 Ram okay and of course all these will also be bold so you'll have different font weights and then if you have maybe slightly smaller text on the page somewhere which is smaller than the body text then you can use 875 RM or 14 pixels and any larger text you can make it 25% bigger so you can set that to about 1.25 Ram right so this is a good rule of thumb that you can have nobody tells you this when you're learning HTML but it's very difficult to determine what font sizes you should have so just use this keep the screenshot with you and most of the time you'll be using a library so this won't be a problem but if you're working at a company you'll probably have a design guide which will specify something similar for you as well okay so let's apply these font sizes so for the body we have the font size of 16 pixels for H1 to H6 I'm going to use the inter font and I'm going to use the font weight of 500 as well so font weight 500 so I just want to make it a little thinner I don't want it to be so thick or maybe 600 let's see yeah I think I like 600 so I'll keep 600 and then I also want to set the font sizes for H1 to H6 so let us set the font sizes for H1 to H6 again I am just selecting the H1 tag opening this bracket putting in the putting in the property font size and then using R so that if we change the base font size of the page all of this scales automatically so 2.5 to 1 RAM for H1 to H6 and that's good and one other thing I want to do is this particular section over here I want to make it a little bigger so that it's bigger than the rest of the text on the page so I'm going to come in here into the description section and I'm going to say font size 1.25 R and now this is a little bigger a little nicer all right compared to this table for instance or compared to the footer and of course I could go in here and I could make this smaller so I could come in here into the copyright and I could say font size 0.875 RM okay now it is slightly smaller than the rest of the text all right so our page is already starting to look aesthetically a little nicer we have these font sizes the next thing we should probably fix is the colors we have too many colors on the page but that is how you set sizes for text that is how you style text in various using various properties and as an exercise you can try changing the base text size I believe you can just go in here and you can select the HTML tag and say font size 20 PX and I think we should make everything bigger you can just put body as one REM as well so yeah and if you come back make the smaller everything becomes smaller so that's how you can scale for font sizes up and down for the entire Page by just setting it up on the HTML tag and then using Rems everywhere or even m in some cases now let's talk about colors in CSS because this is where a lot of people face a difficulty what color should I put why is my web page not looking good the single reason the number one reason why web pages often look ugly is because of poor choices of colors and contrast that's why we have a dedicated section and again this is not something that we that people go into in an introductory HTML and CSS lesson but we want to make sure that you build good visually appealing web pages that's why we are talking about color and colors colors play a crucial role in web design and colors also convey brand colors also convey balance colors also convey emotion in a lot of cases and there are many ways to incorporate colors into your web pages using CSS and the simplest is of course using the inbuilt color names so CSS provides 140 predefined color names that you can use directly for example you can set the color of a paragraph of text to Red so I could come in here and I could say color red and that would make all the text on the page red which is obviously not very nice but when you're starting out you tend to pick some of these basic colors don't use them they look your they make your Page look bad instead if you have to use named colors if you're not sure what colors to use pick some slightly muted colors slightly pastel or softer colors so you could use black or you could use gray most of the text on your page should be some version of black or maybe some shade of gray sometimes you may have a slight tinge of blue or a slight tinge of some other color but definitely not a very strong color of any kind for example this one caded blue is an interesting color so could probably use this this could be a nice color to use okay still two different probably not that great so I should probably just use one of these grayish colors like dim gray so let me just come in and use dim gray and dim gray definitely looks somewhat nicer but it's still not better than the default anytime your color choice is not better than default it's probably a poor choice but you do have 140 plus choices of colors that you can pick and these are all named colors within CSS okay next you have colors that you can Define using the RGB system so RGB stands for the red green blue which are the primary colors of light so all the colors that you see around you all the colors that you see on the screen specifically are built using combinations of red green and blue so what you can do is there is this RGB Color Picker here I'm just going to search RGB Color Picker it's a build inbuilt Color Picker in Google and into this Color Picker you can a Color Picker you can select a value for red green and blue let me put 0 0 0 and press enter so when you have all of them set to zero red green and blue all set to zero then you get the color black which means you have no red no green no blue everything is black on the other hand let's say I start increasing red I increase red to 10 it starts to get slightly redder I increase red to maybe 40 it's getting more red I increase red to 50 okay more red I increase red to 100 now it's like a dark red I increase red to 200 now it's a very bright red 150 red of 150 would be something in between now it's a medium red and maybe somewhere right at 255 is the brightest red now you cannot have values higher than 255 so because of how colors are represented internally in the computer memory you have to choose values from 0 to 255 0 is the darkest and 255 is the highest or brightest of course that is the color for red you could do a similar thing with green so let me set red to zero let me set green to 50 and now you're getting a dark green let me set green to 100 and now you're getting a darker green uh slightly brighter green let me set green to 150 it's starting to look light let me set green to 255 and now this is the brightest possible green that your computer screen can display similarly we have blue so this is the 50 blue this is the 100 blue this is the one 150 blue and this is the 255 Blue okay 255 is the brightest zero is the darkest now of course you can combine so you know that red and green when combined become yellow so you can say 100 and 100 and that gives you a yellowish color but it's still not completely yellow you have to go all the way to 255 and 2 55 to get a proper yellow color right and if you combine all three colors in equal quantity you get Shades of Gray so 255 255 255 is white and 0 0 0 is black of course somewhere in between let's say 100 100 100 is going to be gray and you can make this gray lighter by going 150 150 150 and you can get all different shades of colors by combining various amounts of red various amounts of red green and blue for example I believe green and blue together give you the Sean color and then red and blue together give you I don't know what it is let's see red and blue together give you the magenta color right so you have all these other colors that come together as well um of course you don't have to type out all these colors directly sometimes you have you can work the other way you can go and select a color here that seems nice okay maybe this color seems nice I'm going to use it I want to use it for some of the text not a great color for text but let me just try using it anyway then I can just select that using a Color Picker and you can just search Color Picker on Google and get this widget and now I can copy these red green and blue values now I can come back into my web page and let me just change the font font color for now so color RGB so we use the RGB function and then paste the red green and blue value and that will just apply the color to that particular element whatever is selected right now I've selected the entire page that's why it's applying to the entire page and now I can modify this uh vs code actually gives you a Color Picker directly over here you can actually go in and select a value directly from here and that's going to modify it and you can then use that color on your page oh sorry you have to yeah you'll have to copy it and I believe then you can use that color on the page so there are ways to do this within us vs code itself but whatever red green blue color combination you have you can use that and for now let's just set the default size to some or the default color to a gray not exactly black let's set it to maybe 210 210 and 210 maybe a slight tting of blue maybe set that to 230 okay that's actually very light so maybe let's make it very light so maybe 30 30 and maybe 40 over here yeah and that is looking actually not bad right so zero is dark 255 is bright and combine red green and blue okay so that is the RGB system you can use the RGB function you can use it for background colors let's say I want to use it not for the color of the page but for the background color background color of 30 40 40 that's very dark maybe let's add it to 230 230 240 yeah that's a pair background but generally speaking even backgrounds it's okay to just keep them completely white or a very very light playay or very very light gray okay um so that is the color then there is another way to represent colors which is using the heximal color codes okay so the hexadecimal is a textual representation of RGB but instead of numbers you use numbers and characters now this is represented using the hexadecimal number system I will not get into it here but the idea here is an hexadecimal color is represented using three represented using six characters and each character could have a to F or 0 to 9 so 0 to 9 or a to F and the first two characters represent red this is in fact the hexadecimal notation for the red value and then the next two characters represent green and the next two characters represent blue okay so often what you can do is you you can if you have a RGB color in mind let's say the color I want to use in RGB is 230 230 240 I can put that into a Color Picker and I can get that hexad diml code from the Color Picker and I can just copy that and instead of typing out the entire RGB I can just say color is Hash Hash includes hexad decimal and then type out the color here okay and that will just change the color of on the page it's a very bad color but you get the idea okay so RGB and hex are equivalent it's just that hexad decimal is more commonly used because it's easier to copy paste and U use across different platforms so often you will find colors in HEX so when somebody says get the hex code or get the color code this is what they're referring to and you can always get hex codes online in fact a lot of color Pickers also give you hex codes instead of RGB let's say I go in here and I go select a dark color and I click this yeah I just click that and that is going to get the RGB color for me oh sorry that's going to get get the hex code of the page for me okay so now I have applied the hex color to it as such now of course as you might expect 00000000 0 is white oh sorry is black all zeros is zero uh very dark red very dark blue very dark green is black and because each value goes from 0 to 9 and then a to F so f f f f FF that is white okay now everything has gone white and of course if you if I put 0 0 0 here that would be red and so on so first two characters are red from 0 0 to FF and next two characters are green next two characters are blue okay let's get rid of that so that is the hexad deiml color code and you can use that to set background colors you can use that to select text color all of that and you can use the Google Color Picker to convert RGB colors into hexadecimal or vice versa you can for example copy this hexadecimal color code and come into the Google Color Picker and paste it here and that will give you the RGB code in case you need it all right so that's the hex another color scheme is something called the rgba color scheme which is similar to RGB you have red green blue but then you also have transparency so you can for example make the background of a div or you can make the text um on on a particular page slightly transparent so that the color behind it shows through okay let me show you an example let us set the background color of the page to let's say red going to look very ugly but let's set it here no problem then let us set the color of the text to 0 0 Zer or maybe just 20 20 20 which is a very dark gray okay it looks very similar it's still looking very black almost close to black but now let us come in and change this to rgba and let us set the opacity or transparency to 0. five so one is I Believe full opacity and zero is completely transparent in fact let's put 0. five first and you can see that you can see some of the red behind you can see some of the red behind the text If This Were green you would be able to see some of the green behind the text so if I set the transparency to zero or the opacity to zero now you can't see the text at all if I set the opacity to one you can't see any of the background color at all through the text but some around. 4 for instance you will see that we are able to see some of the background coming through okay so you can also use this rgba and similar to rgba there is also the hex code where you have red green blue and then two more characters to represent the opacity level as well okay not very commonly used but this is also something that you can do so that is about colors in HTML and as you might have seen all the color choices that that we making by default look pretty ugly so we'll talk about how to come up with good colors but now that you know how to create a color these are all the different ways in which you can use colors so you can use color to set the color of the text which is what we've been doing right now you can use background color to set the background color of an element we've done that as well you can set the Border color and then you can use box Shadow and text Shadow so box Shadow is used to create a shadow around a box or a div and text Shadow is used to add Shadow for text okay so you can look up the properties specifically and see how these are set but I'll just show you an example of Border color let's say we can come here and we can set for the team image we can set the