Create a Website using HTML & CSS - Coding for Kids & Beginners | Sandeep Kumar | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create a Website using HTML & CSS - Coding for Kids & Beginners

teacher avatar Sandeep Kumar, CEO - Trainool, IT Consultant/Coach

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

51 Lessons (4h 14m)
    • 1. About the Course

      2:06
    • 2. Introduction of HTML

      3:58
    • 3. Getting Started

      1:49
    • 4. Structure of HTML

      5:55
    • 5. Heading Tags

      3:45
    • 6. Paragraph tag

      2:28
    • 7. Line Break and Horizontal rule

      1:36
    • 8. Formatting Tags

      2:53
    • 9. Lists

      4:29
    • 10. Navigation bar

      8:05
    • 11. HTML Tables

      10:46
    • 12. How to download files from Resource?

      0:59
    • 13. HTML Images

      12:29
    • 14. Adding some paragraphs

      4:11
    • 15. Forms - Part 1

      6:20
    • 16. Forms - Part 2

      9:39
    • 17. div tag

      7:02
    • 18. Section tag

      3:50
    • 19. footer tag

      2:33
    • 20. HTML Comments

      3:48
    • 21. What is CSS

      1:29
    • 22. CSS Syntax

      3:25
    • 23. Class Selector

      7:18
    • 24. Id Selector

      8:12
    • 25. Types of CSS

      4:50
    • 26. External CSS

      3:34
    • 27. Background-color and background-image

      7:26
    • 28. CSS Text Colors

      3:33
    • 29. CSS width and height

      6:40
    • 30. CSS Padding

      6:16
    • 31. CSS Borders

      5:19
    • 32. CSS margin

      3:52
    • 33. CSS Font size

      3:16
    • 34. CSS Font Weight

      1:56
    • 35. CSS Font Style

      2:28
    • 36. CSS Font Family

      5:02
    • 37. CSS Text Align

      2:34
    • 38. CSS Text Decoration

      3:36
    • 39. Styling Classes - Part 1

      7:49
    • 40. Styling Classes - Part 2

      8:14
    • 41. Styling ids

      8:33
    • 42. Inline CSS

      5:47
    • 43. Note about Inline CSS

      2:41
    • 44. CSS Opacity

      5:52
    • 45. Fixing small things in the website

      4:41
    • 46. Fixing a minor issue

      4:20
    • 47. Internal CSS

      4:10
    • 48. Learning HTML and CSS in a Text Editor

      11:16
    • 49. Adding Image directly from the computer

      8:13
    • 50. Final touch - Adding a pipe symbol in navigation

      2:13
    • 51. Thank You

      0:56
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

22

Students

--

Projects

About This Class

Welcome to "Coding for Kids - Create a website using HTML and CSS".This Course covers HTML and CSS from Scratch and is for Absolute Beginners' who want to code their first website.

In this class, you'll learn how to design and create a Website using HTML and CSS. I’ll cover how I use the jsbin to code HTML and CSS, and how I create a website with Lists, Images, Navigation bar, Links, Anchors, Forms, etc.

By the end of this course, the students will learn how to create their own website on a computer.

The course teaches -

  • Create the structure of HTML.
  • Add proper layout to the website.
  • Create Headings, Paragraphs, Table, Forms, and much more.
  • How to format the data of the website.
  • Create a colorful and beautiful Navigation Bar.
  • Add Images to your Website.
  • Create Header, Sections, Footer, etc.
  • Teaches you in detail about many ways to style HTML
  • Change the colors of the text.
  • Code your own width and height of the element.
  • Add Background color and Images.
  • Add Fonts of various sizes and colors.
  • Create a website on the computer which can be shown to your friends and family

Want to create your own website from scratch with no previous coding experience? If Yes, then you must learn HTML and CSS.

You have come to the right place. Please have a look at the Course content carefully and ask a few questions yourself?

Is the Course taught by a real-time expert? 

I have more than 15  years of experience as an Instructor and more than 10 years of experience in Web Technology. I firmly believe that if an Instructor does not have a good experience, he/she will flood the course with poor content.

Is the Course content clear and Precise? The content is short, crisp, and clear.

The course assumes no prior knowledge of HTML and CSS and teaches you from scratch.

Do you want to start coding a website without any prior knowledge? The course is aimed at absolute beginners who want to start their journey of coding.

I am sure that this is the best website coding for absolute Beginners and it is the perfect starting point to learn coding websites so you have nothing to lose but everything to gain.

If you are stuck, post your question in the Discussion section and we will try our best to answer it. I personally answer all the questions which are asked here.

Are you getting updated content?

Yes, I keep updating the content always to make sure, I provide all the information to my students.

Do you need any prior knowledge of HTML and CSS?

No, you do not need any HTML and CSS knowledge. I have started everything from absolute basics. This course is fit for parents, teachers, students, absolute beginners, or Kids. If a student knows how to create file and folder in the computer, it will be an advantage although I have explained this

Note:
This course is for anyone, be in absolute beginners, Parent who wants to teach coding to kids. If you are a teacher who wants to teach coding to your students, you can take this course.

Even the course is perfect for kids who want to start learning HTML and CSS to create their first website so this course will be useful for Teachers, Kids, Students, Trainers, and Grandparents, or any absolute beginner.

Meet Your Teacher

Teacher Profile Image

Sandeep Kumar

CEO - Trainool, IT Consultant/Coach

Teacher

My name is Sandeep Kumar. I am the founder of a Trainool. I have more than 10 years of Experience in Mainframe & more than 5 years of Experience in Website Design and Development.

I have worked as an Employee for some big Fortune 500 companies. I even worked for a Fortune number 1 company for more than 3 years.

I am a believer in Scrum and created some of the projects from Scratch.

I own my own website www.trainool.com

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. About the Course: Welcome to this new course on coding for kids. Build your first website using HTML and CSS. This is one of the best course on coding for kids and absolute beginners. If you want to learn coding and building a website, using HTML and CSS as the best option. Every website must contain HTML and CSS code. So you must know HTML and CSS. Html and CSS are the two most demanding skills for any web designer. If you are a or if you are a parent who wants their kid to learn coding. Or if you are someone who does not know anything about HTML and CSS, but wants to create a new website from scratch. Then this course is right for you. In this course, I've started HTML and CSS from scratch. And the course is targeted for those who are completely beginners, like kids between seven to 18 years of age, or parents who wants to learn HTML and CSS for their kids. Anyone who are complete beginners, if you know how to use a mouse on a computer to create files, save files, copy, paste, etc. Then you can easily learn from this course. The course is very easy to follow. And if you have any doubt, simply asked the question in the course. And I'm there to answer each and every doubt. By the end of the course, you will create your first website. You'll learn a lot from this course. And the value which you will get from the scores might change the carrier. 2. Introduction of HTML: Hello everyone. Let us understand the term HTML. Html stands for Hypertext Markup Language. And hyper means it does quick. Already are active. Text means that it is easy to write in simple English letters. Markup means it has symbols or characters to insert at a particular position. And language is a way to communicate in simple English. So what exactly is HTML? Html is not a programming language, but it is a markup language. And it is used to create the layout and structure of the website. Using HTML. You can also link one HTML document to another HTML document in form of cities. Any HTML document will always end with an extension dot HTML or dot STM. For what is the history of HTML. It was created by Tim Berners-Lee in 1991, and now it has maintained by W3C, that is Worldwide Web Consortium, which consists of a group of people who decides the standard of worldwide web. That's TM, consists of a number of different tags, elements, and attributes, which we are going to master in this course. So what exactly is a DAG? There are many tags in HTML, and most of the tag consists of the starting tag and an ending tag. For example, you have HTML. So you see here we have a starting HTML tag and then we have ending HTML tag. So for ending HTML tag, we have a forward slash inside the angular brackets. Similarly you see we have head, so we have starting off head tag and then ending off header tag. Or we can have body starting of body tag and then ending of body tag. So in this way, we have lot of tags in HTML. Now, what is an element? Element consists of starting tag and ending tag. And between these tags, we have text inside that. For example, we have starting tag, then we have some text, and then we have ending tag. So this is called as element. For example, we have p tag, which we are going to cover in this course later on. And inside this p tag, you see we have text. So between the starting and ending of p tag, we have some texts. Now, let us talk about attributes. Attribute provides extra information about the tags, and it always comes in a pair. For example, you have attribute name equal to value. For example, if we just say p tag and inside the p tag, we say color equals blue. So color is an attribute name, and blue is value. And within the p tag, we have given the text, right? So that's it. In this video lesson. In this lesson, we have learned about the introduction of HTML. Thanks for joining. Take care. Bye. 3. Getting Started: He people will come back to begin with open your web browser. And in this case, I'm using Google Chrome. Go to the URL and type JS Bin.com. Press Enter. And you'll see this is the first screen you get. Now what you have to do is we just close this. So just click on this and you'll get this particular code by default. So at this moment, just select this and press Delete so that everything is deleted. So you'll see here it says STM ALL. And here it is output for whatever HTML code you will be writing here. It will output in this particular area. And at top you'll see we have HTML, then we have CSS. So if you just click on CSS, you'll see that we're getting a particular section for CSS as well. So our this moment to begin with, we don't require CSS. And as we move further in this course, we will be using CSS as well. So at this moment, let me just close the CSS. So for that, I'll just click on this particular button. And that particular section is now closed. Oh, here. Let's say I start, if I just write my name, is Sandeep. Now you'll see in the output, it gives you the same name. That is some deep. So this is a very good website where you can code HTML and CSS easily. So all of you please go to JS Bin.com and then be ready for the next video lesson. Take care. Bye. 4. Structure of HTML: In this video lesson, we're going to understand about basic skeleton or basic structure of HTML tag. Let me just delete this first and peas more debt. In HTML. We will be having an opening tag and closing tag. For example. For opening tag, you have to give less than symbol and then greater than symbol. And inside that, you have to give the tag name. For example, you can just give a tag name, let's say tag 1. So this can be your one tag. And just to close this tag, you have to give less than symbol, followed by a forward slash, and then they have to give tag one and then greater than symbol. So this is opening tag and then This is closing of tag. So in the same be, keeping this in mind, we will write the structure of STL. So let me just delete this. And to begin with all the HTML document, start with the word, it's DML. And you see here this is a HTML tag and this is the starting tag. And then we have the ending tag as a steel mill, right? So this is starting tag and this is ending tag. Now before this line, you have to tell that which particular version of HTML you are using. So let's start. See here, at start, you have to give less than symbol exclamation mark. And then we have to give doc type in capital letters, and we have to give HTML. So if you give this particular syntax as first-line, this means that you're trying to code HTML5 document type. Alright? So in this particular course, we will be learning HTML5, which is the latest version of a steel mill. And that is the reason. First statement should be DOCTYPE HTML with exclamation mark at first. Now, if I just come here and press Enter, so you see here, this is my closing tag, and this is my opening tag. Now inside this, first you have to give head tag. So this is my hit DAG. And again, after close this. So I'll just give your head. And please note here I have to give forward slash. Then just come down and here I have to give the title. So I'll just give you title. And this is the opening of title tag. And then after give title. And this is the closing of title. And here I have to give the title of this particular document. So whatever title you will give, it will display here. Okay? So if I just give here, for example, Welcome to my blog. This particular title should be coming here. And actually what happens is this particular title, The sometime take some time to display in this particular tab here because of certain slowness of this website. So please mode whatever you write here. Actually this will be displayed here. And if I just come down. Now you'll see here, here after give body tag and I have to close this. So for clothing after give body. And just come here and give enter at this particular location. That means inside this body tag, you will write all the HTML codes which will be displayed in the website. And here inside this head tag, you're just trying to give the description of this particular pH, for example, this is the title of the page. And in this particular body tag, you can write tags, for example, header tag. So you see here this is the opening of header tag and I'll just give header, and I'll just give closing header tag. And here you see this is the header tag. And you have to code this header tag inside the body. And then you will be having some more tags here. For example, I'll show you later on, we will be having p tag. So for p, I'll just give p tag and I'll just close this p tag. This is fourth paragraph. Similarly, we will be having lot of other tags. And at end, I should have a footer tag. And I'll just close this footer tag as well. Okay, so in this particular footer tag, we will be coding all the photon related information which will come at the bottom of the website. And this is paragraph tag. I will explain all these in detail. So at this moment, please note, this is the basic skeleton of HTML. So this is the basic structure of HTML. And please be ready with this particular code for next video lesson. Take care. Bye. 5. Heading Tags: Welcome everyone. In this video lesson, I'm going to talk about heading tags. In HTML. There are six levels of heading tags. The first one is H1 tag, and this is the first level. And in terms of size, this is the biggest one. After that, we have S2 tag, and this is smaller than level 1. We have X3, which is smaller than level 2. We have at four, which is smaller than level three. Then we have level 5, which is h5 tag, which is smaller than x four. And then we have F6, which is a smallest heading tag. So let's take some examples of these heading tags. So I have come into this JSON.com and let me just remove the extra spaces here. And I'm going to just daunting. That mean just delete everything that is extra spaces. And now here, I'm not going to do anything inside this header tag. We will keep this for later use. And first, let us add a heading tag, for example, for X1 up to give less than symbol and then X1 tag. Let's close it. X1. So you'll see this is the closing tag, and this is the opening tag. Let's say if I just write something like this, for example, if I just say image gallery, you'll see it is H1 tag and this is the size you're getting at this moment. If I just give X2 DAG, You see if I just called S2. And let's say if I just write here tools and fun, and let me just close the tag. You'll see this particular font is smaller in size compared to H1 tag. Similarly, you can write X3, X4, and so on. So let's say if I just write h3 tag, so if I just give it a guess, right, France tool. And let me just close this edge D. You see again the smaller than H2. And let's give at four or x five also. So let's give X4 as, let's say level four. And let me just close this X4. So you'll see it has a smaller than S3. And let me also give us five. So if I just give F5 there to say I can just give her bad is and I'll just give August 5, let's say 2020. And it can just close this as five DAG. Now you'll see the stones in sight. This is the big one. This is smaller than the previous one. This is smaller than this particular edge 2. Then we have at four, which is smaller than S3, and then we have H5 is smaller than x four. Similarly, let's give at six and just say like I'm Level 6. And you see here, this is the smallest one, right? So this is how you can code heading tags. 6. Paragraph tag: Hey friends, welcome back. In this video lesson, I'm going to talk about paragraph tag, which is denoted by p tag. Paragraph tag, you have to give the opening tag, which is a DAG. And then at end, you have to give the closing tag. And in between you have to give your paragraph. So a better graph is a writing that combines sentences which focuses on a particular topic. So here, first, let me delete from S2 to F6. It does not require no. And you see here, we had already coded the speed Jack and I did not explain in detail about at that time. Now, you see here, this is the opening p tag and the closing p tag. Now, inside this p tag, you can write a better graph. For example, you can write some sentences. Let's say, I can just say, welcome to my website. It is built on. I can just say HTML and CSS. And I can also say it contains navigation. Let me just give a coma, give Enter on your keyboard. And you can say it contains galleries and much more. And you can also say something like this that is just reach out to me in case you need help. So pick me just give Enter at the end by giving a dot and let me just give enter. So press Enter on your keyboard. And you see here, let me just format it properly. And this is the paragraph which I have written from here to here. And you'll see in the output, it has disappeared. This, right? So this is all about p tag. Thanks for joining. Take care. Bye. 7. Line Break and Horizontal rule: Welcome back students. You'll see we have this particular length that is welcome to my website. And after that, for example, if you want to add a line break, then you can use BR tag. So if I just give BR tag, you'll notice here that there is a line break here. Similarly, if I want another line break, I can just give another BR tag. And you see here we have two line break here. In the same way. We can also use a char tag to give a horizontal rule. So HER stands for horizontal rule, and this is a V to add a horizontal line. For example, if I just add HR tag here, you'll notice if I just give HER tag, it adds a horizontal line. And please note for BR tag as well as a chat tag. There is no closing tag. So you see here, this is the opening of deck. Similarly, this is again opening of tag for HR tech also, you see there is opening tag, but there is no closing tag. So please remember this. And here also if I just give now you'll see here we have added another horizontal line after this particular paragraph. That is, we have this line and then we have another dazzling. So this is a way to use BR tag and a char tag. 8. Formatting Tags: Hello everyone. Let's talk about some formatting tags in HTML. The first formatting tags, which I wanted to discuss is beat egg. Suppose you want to make this particular text that does website as board, then you can just give B deck. And this is the opening of beat egg. And then if I just give closing off beat egg. Now you'll notice here that in the output, this particular text is in bold. Similarly, let's say that if you want to make HTML and CSS as board, then what you can do is you can just give her b and you have to give the closing of p tag. Similarly for CSS, you can give B and attend, you can give closing off p tag. So you see here this particular HTML and CSS isn't bolded letters. Similarly, if you want to mark a particular text, then in that case, you can use mark keyword. For example, let's say if I just give Mark and if you notice, if I just give her closing off mark. So this particular text notice, for example, let me just format this properly. Now you see this navigation is marked, right? Similarly, if you want to make a particular text in italics, then you can just give I, for example, that say for galleries. If I just give i and let me just close this. So if I just give her closing off. Now you'll see this particular text that is galleries is an italic. So you see it is not straight. And the font looks like a curvy font. And this is called as Italica. So in this video lesson, we have learned about tag, which is used to make a particular text bold. Similarly, we can use mark tab, and you'll see if you give this mark tag, you can mark a particular text. In this case, we have marked navigation. And if you use the I tag, you can just make a particular text as italic. And in this case, we have made this text that is galleries as italic. So this is what I wanted to discuss in this video. Listen. Take care. Bye. 9. Lists: Welcome back everyone. I'm going to talk about lists. In this we do a lesson. Lists are used to group important point, and it can also break the information into chunks and pieces. And there are two types of important list. The first one is ordered list. So here you see we have numbering that has 1234 and we have given father, mother, sister, and myself. The next one we have is unordered list, where we have just given some bullet points, which sees chocolate cake, pie, NAPL cake, vanilla cake, and caramel cake. So let us see how we can create ordered lists and unordered lists in HTML. All right, First, for ordered list, you have to give the tag OL, so they can just give closing tag. So this is ordered lists and unordered list. You have to give you well, dad, and let's close this with UL tag and let me just format it. So inside this oil deck, we have to give the list. And for lists, we have to give ally DAG. And just close this slide deck. So here, let's say if I just add father, you'll see in the output you are getting Father. Similarly, let me just give here again a lie deck. And we just give mother and let me just close this. Let me just give a light deck and let's say sister. Let me close this LI tag. And I will also say LI tag. And I will just write myself. And I'll just close this LI tag. So you see here in the output we have father, mother, sister, and myself. And this is OrderedList. And here, let me also do one thing. I can just add a heading. So let's say if I just give a tag and I just say here, my family consists off. And let me just close this at Fort Bragg. And you see we have this particular tag now in UL tag. In the same way. Here I'll just say at four and let me just give clothing at four. And I can just see, I love these cakes. And let me just list the Kx here. And for list, we know that we have to give ally and let me just give closing LA and inside this let me just give her so our Colette Keq. And then we will just give her LA. And let's give closing off LA. And I will just say here, for example, buying apple cake. Let me just give another ally. And let me just close this. And here I can just give, for example, let's say vanilla cake. And let me just come to the right side. And you see here it displaying chocolate cake by nipple cake when he lucky. And if you want, you can also add another one. For example, if I just give your LA and let us say, if I just say Gadamer cake, and let me just close the allele. So in the right side. Now you'll see here, it gives me that I loved these gigs. That is chocolate cake, pineapple cake when he lucky, and caramel cake. So this is an ordered list. And this is ordered list. All right, so that's it in this video lesson, Take care. Bye. 10. Navigation bar: Hello everyone. Let's talk about navigation bar. So towards your top left, you can see that you have a navigation bar. And this type of navigation bar is present in most of the website, where you will see that you have some buttons type of links. For example, home, gallery, tours, timetable and contact. And if the user clicks on reality, he will go to gallery below, or he will go different part of the same website. Similarly, if you click on tools, you can go to a different page or you can go to Tools section of that same webpage. So for that, what you can do is first, you can give nasdaq. So now tag is used to show a block of navigation links using which a particular user can navigate through the website. Links, gifts, the connection between two web pages or from one place of webpage to another page. And go set links. You can use the anchor tag, which is denoted by a tag. And this is used to set links. Inside this ETag. You have to use the edge ref attribute, which is used to define a particular hyperlink. So accurate F stands for hypertext reference, where you can give the website you are a limb because called as hyperlink. In short, a hyperlink defines the destination of the link. And when you click on this link, it will either redirect you to another page or it will redirect to another part of the same webpage. Most of the time, navigation link is present at the top of the webpage. So let's try to create the navigation link. So we will go to header tag. And you see here we have header tag inside this. First let me just give enter by coming to this particular place. And here first, I'll just give nav tag. So I'll just give nav and I'll just give closing off nav tag. And let me just come here and click Enter. And inside this, I'll just give a tag and a DAG is used to set links. So let me just give closing of a DAG. And here I just give home. Now you see here whatever we have given here, that is home and output, we have home. Similarly, you see here if I just give, let's say ETag, and here if I just give gallery and let me just close this a DAG. You see here we have Gallery, right? But at this moment, you'll see that this is not clickable link. So if you just click here, nothing happens. So for that, you have to set a hyperlink. For that, I will just give href attribute. And if I just give equal to double-quotes, you see here, this is double-quotes. So in your keyboard, you just press double-quotes. And here you have to give link. So for example, let's say if I just give a HTTPS colon forward slash, and if I just give Google.com, and here, let me just set the target attribute. For target means that where you want to open this link. So if I just give target equal to, Let's say if I just give underscore blank. That means I'm trying to say that once the user click on this particular link, it should open this link in a different URL, I mean, in a different tab itself. And now you see here, for home, now it becomes a clickable link. And if we just click here, it goes to Google.com, right? So let me just close this google.com. Similarly for gallery, if I just say, let's say a tariff, and if I just give here, let's say STEPPS. And you can give any URL and protest. I normally give google.com. So if I just give her google.com and here I'll just give target equal to underscore. Blank. If I just see here. Now you'll see if I just click on gallery, again, it goes to Google.com. So this way we can create links. Now, what we will do is at this moment I do not want to go to Google.com. So for that, I'll just give a dummy link which is used by hash symbol. So in your keyboard, just type hash. And now you see here this is a dummy link. And let me just remove this target as well. It is not required. For this one. I'll just delete here and I'll just say hash. And I will remove this target as well. All in the same way. Let me add another ETag, and I'll just say e. Let me just close this ETag. And here I'll just say those. Similarly here I'll just say ETag and I'll just say time table. You can also give study timetable. It has up to you. And again, I'll create another ETag. So just give a and let's say I can just say contact me. Contact me or I can just say contact. And let me just close this. And here I'll just say etcetera equal to double quote. And inside that, I'll just give hash. Here. I'll just give a space that's href equal to hash. And here I'll just say a turf equal to hash. Now you'll see these becomes clickable links. So if I just click on home, it is a just dummy link. It will not lead you to anywhere because we have just given hash in our href attribute. Just click here, see it is just a dummy link. You can click here, but nothing happens. Right? Later on in this particular course, I will just show you how to set the actual link so that if we just click on this reality, it will lead to gallery section of that particular webpage. Similarly, if you click on Contact, it will lead you to the contact section of the page. In the same way, if you click on timetable, it will lead you to the timetable of that particular pH. So at this moment, we are not going to do that. We will do that for sure once we move further in this course. So in this way, you can create the navigation bar at the top. And at this moment please know that we have not added any colors here. You see it as looking like a plane navigation bar. As we move further, we will add colors to this web page using CSS, which is called as cascading style sheet. So at this moment, you will not talking about CSS, and let's focus only on STL. So in the next video lesson, we will proceed further from this point. Thanks for joining. Take care. Bye. 11. HTML Tables: Hello everyone. I'm going to talk about HTML tables in this video lesson. Not the stable. I'm just saying about this table. So you'll see here we have this particular table which says time. Then we have Monday to Friday, and then base on each time we have different topics. This table is a collection of cells, rules, and columns. These are all columns. And these are all. So how do create a table in HTML? For that, we have to use the tag, which is called as table tag. And this tag is used to define a particular table. Inside the table. First, you need to create a row. And to create a rule. First, you have to use TR tag, which denotes table row. Then we have to give a particular heading content. For that, we have to give th tag, which is used to create the header of a particular table. And in this case, you can see that the header is denoted in orange color. So this will be created using th tag. And we will be giving the content or the data or record inside the table using td tag. So you see here, whatever we have in pink color area, those are all part of the data which has been created using td tag for without wasting any time. Let's try to create a table similar to this. But at this moment, we will not be creating a colorful table. Rather, we will be creating a simple table. Now, you see here, I'm present here that is just before photo. And let me just give Enter. And here I'll just create a table. So for that, I will just give a DAG. So this is the opening of table tag and then I'll just give clothes off table tag. And let me just format this. So you see here I have this particular table tag which looks more formatted. Now first, please note that you have to create all the rows of the table. For that, I'll just give TR tag. For TR tag is used to create table rows. And you see here first, I'll just give opening and then closing off TR tag. So here I can add one data. Similarly inside this particular DR. tag, first, I need to add the table header for which I will use p h. And here, first, I'll just give time and I'll just give closing off th tag. So you see here force it has given this particular time. Again, let me add th tag and I'll just add Monday. Let me just close this th tag. In the next lane, I'll just add again another th tag. I'll just see do you stay there? Let me just close this DH DAG liquid. Just give another PhD. In the next line. I would just say Wednesday. Let me just close this th tag. And let me just come here. And let me add another th tag, which says toasty. And I'll just close this th tag and attend. I'll just give another th tag which says Friday. Let me just close this th tag. And I can see that I have given some extra spaces. No need for that. So I'll just remove these extra spaces. And in the output, you see here, we have time. We have Monday, Tuesday, Wednesday, Thursday, and Friday. So this is one row. And also this is my heading. That is the reason I have put this inside this heading tag. So this will be my heading. Now, I will create data in this particular table. So for that, I will again add another div tag. And we'll just close this div tag. And here what I can say is let say time first, I'll just give you P D. So D, D denotes table data or table description. And this is used to add content or record our data off the table. Here, let me just say something like this. For example, I'll just say six to 07:00 AM. And let me just close this td tag. So if I just show you the output, you see this is my output. Again. Let me add another td tag. So here I'll just give TD. Let me just say Topic 1. Let me close this td tag. Similarly, let's add another td tag, and I'll just say topic2. Let's close this td tag. I'm going to remove the extra spaces which I've given. And again, in the next td tag, I'll just say Topic 3. Let's close this td tag. All right? And again, I will add another td tag. I'll just say Topic 4. Let me close this td tag. And again, I'll just say TD Topic 5. And let's close this td tag. So you see here, I have created this particular simple table. Now here, this is my heading, right? So the first row is my heading. And the second rule is the content of this particular table for timing is no six to seven AM. And if it does Monday, I will study topic one. On Tuesday, I'll study topic 2. On Wednesday, I'll study topic three, topic 4 and Friday Topic 5. In the same way. Let me just copy from here to here. So I'll just select using my mouse and just give right-click. So just press right-click on your mouse. And then just click on this Copy that is Control C. And press Enter and come towards the left side and press Control V on your keyboard. Or you can just give, right-click here and give based. Now you see you have copied the same data. Now I'll just change the data for this particular row, third row. So here I can just say, for example, let's say 430 EM, or rather make it as PM. So 430 PM to 06:30 PM. What I'll do is I'll just study topic 6. On Monday or Tuesday. I will study topic 7. So here I'll just say Topic 7. Then again, on Wednesday, I'll study topic it on Thursday. Topic 9, and on Friday, the study topic 10. Now you see the output here. So if I just show you, this is my output. So in this particular time, that is 430 PM, you see here, this is my output, right? So let me just show you properly. Now. You can see it has six to seven M. We will study these topics on these days. And 430 PM to 630 PM on Monday, I'll show the topic 6 on Tuesday, Topic 7, 8, then Topic 9, and then Topic 10. In the same way. And what I can do it, I can just copy this. And just for that, I'll just give copy or Control C on my keyboard. And I'll just give entered here, go to extreme left and give a Control V for paste, or I guess give based. And let's change here. That is 06:30 PM to 08:00 PM. Pm. I'll just say Topic 11, topic 12, topic 13, topic 14, and Topic 15. Now in my output, I'll show you that we have created this table. Right? At this moment you see that this looks like a very simple table, which is like a very plain table. And once we understand about CSS. So going forward and just explain about CSS in detail. And I'll show you how to make this table as California table as we have in our project, right? So at this moment, please note using HTML, we have created this plane table. And going forward, then we will understand about CSS. We will apply some color styles on this particular table to make this table as California. All right, so that's it in this video lesson. Take care. Bye. 12. How to download files from Resource?: This is a small video where I'm going to show you how you can download the resources like files or images in this course. So during the course, if anytime, if I asked you to download the resources like files or images from the course. And what you have to do is you have to just come down and you have Projects and Resources section. And in this tab, you see you have all the images. And if you just click on see more, you'll come down and you see I've given all the details and notes about how to download the immediate. And towards the right, you see you have IMG dot zip. So this is the zip file which contains 12 images. So just extract the images from this zip file using any extraction software and be ready whenever I say you use images from this folder. So that's it. And thus video. It was a quick video on how to use resources from this course. 13. HTML Images: He people will come back to add image like this or this, or any kind of image like this. We have to use the IMG tag. So IMG tag is used to add an image. And along with IMG tag, we have to use SRC attribute. I'll just show you how to use SRC attribute. And this SRC attribute is used to give the source or part, or you can say URL of that particular image. All right, now you'll see here we have this particular navigation bar, which is included inside header tag. And if I just want to add an image after this, I can just come here and give enter in my keyboard. And I'll just give IMG. So IMG tag is used to add images. And you'll see here, I have not added any closing of IMG tag. So please note this is only having opening of IMG. And inside this, you have to give SRC, which is used to give the source of the image. I mean, I just want to give the part of the image. So let me just come here and just give a space and give sRC tag. And I'll just give double-quotes. And inside this after give the path of the image. So what I've done is you'll see pixabay.com. So actually, there are lots of websites which provide free images. And I have taken images from this website. Now, you don't have to search for images. I have already done that work for you. So you see here, I have a lot of URLs. So what you can do is you can just go to the resource section, or what I'll do is I'll just attach this particular document, resource area. And there you see, we have all these images, right? So overall we have 12 images. So we can just go and copy each images one-by-one and keep it in browser. For example, just copy this like this, and go here and paste that particular image like this. So if you just base it, you'll get this image, right. So what I'm going to do is I'll just copy this image. And let's say that I want to add this particular image here. So I'll just give that particular image in this particular force location. Now you'll see here, we have added this particular image, right? In the same way, we can add all the images. I mean, 12 images in different, different location. So let's say that after this image tag, I mean IMG tag, I'll just give a char tag to add a horizontal rule. So you see here we have added a horizontal line here. And let me just delete these charter x-naught required here. And I'll also delete from here as well. And what I'm going to do is I'll add another HR tag just after made cavity. So here I'll just add another HR tag. And now you'll see here, what I'm doing is I'm just trying to say that we have image gallery and after that, I'll just add some images. So this is a char, and again, this is a chart. Let's try to add some more images. So I'll just come here and I'll just say IMG SRC equal to and I'll just close this. Let me just copy this. So what I'm going to do is I'm just going to add nine images here, one by one. So I'll just copy it and paste it. Again. I'm going to paste it. So, so I'll follow this nine times c here. I'm just giving control V on my keyboard to best all the images. Just based it, give enter, just based damage. And overall you see here this has 1, 2, 3, 4, 5, 6, 7, 8, and 9. So we have nine IMD decks. And I have already used this image. Now I'm going to use this particular image for just copy this. Just give right-click Copy. Come here and give this image. And in the output you see we have added this image. So let me just show you also properly. You see here we have added the first image here, and this is the second image. All right, let me just bring to this particular location so that I can just code it properly. Now, let's use decimate Also. So I'll just copy this by selecting this URL. Copy. And here, let me just paste it. Again. I'll go to this particular URL. Let me just copy this and paste it. Let's come here. Copy this URL and paste it here. Again, come here, copy this URL and paste here. Now come to this particular location, copy this URL, and base it here. Similarly, let's copy this Control C or copy, paste it here. And again, let me just copy this image copied here. And attend. You see here, I think we have overall 90 meters. So this is 12345678. So this is 1, 2, 3, 4, 5, 6, 7, 8. So I think this image we then copy. So I'll just copy this image also. And you see here, now, let me just bring the side. And you see here we have added all these images. Now. You'll see at this moment, all these images are staggered one below the other. And going forward, I'll show you how you can keep the images. Just beside each other also. I will show that. So you'll see at this moment we have added a total of 10 images. Let's try to add two more image. So please hold on for some time. I know that this video is going to be little longer, but please be patient. We will add two more images. And let me just come down. And what I'm going to do is, let's say if I just come down here to this paragraph tag. So you see here we have this paragraph tag that is ending of p tag just above this table tag. Now you just come here, can enter. And again, I'll just add an HR tag. And here I'll just add H1 tag. And I'll just say, for example, tools and fun. Let me just close this one tag. Right? And again, I'll just add, let's say at five tag. So here I'm just starting at 50. And I'm just trying to give the location that particular tool and data. So I can just say something like this that is bad. And I'll just say August 5, let's say 2020. Let me just close this at five tag. Right? And just shift towards right. And this looks better. Now here, I'll just add another image. So I'll just give here IMG SRC equal to the location. So I'll just add this image now. All right, so just copy this. Paste it here. So this is another image. And if I just come towards the right side, let me just bring this side. And if I just come down, you'll see here we have added this horizontal line and we have said tooth and fund. And then we have added Paris, August 5, 2020. And this particular image. All right. So let me just drag this towards right. And let me just drag it even further. And let's try to add another HR tag here. For example, what I can say is here I'll just say HR tag. Now you'll see here, if I just bring this side, let me just come down. Now you'll see here we have two ajar dx. That is, this is the first one, this is the second one. And I'll also give a speech so that it looks a little better. Just come down. And here you have one space also. Alright, so let's try to add another image. And now I'll just copy this. And let me just give here. And here. Let me just give here, for example, Taj Mahal, that is India. So India, or I can just say Taj Mahal, which is present in India. And I can just add a date. For example, let's say August 15, 2020. And again here I'll just come and I'll just give an H2 tag. And I'll just say France to let me just close this as two tag. And let me just copy this. So just copy this. Let's align it properly. And here let me just come and I'll just say here that India tour. And I'll just give an HR tag as I have given here. In the same way, I just add an HR tag here. So I'll just say a chart. And you see, I'll just change the location of this particular image now with this image. So let me just copy this. And you see here if I just paste it, just delete this image, and I'll just paste my image here. Right. Now, you'll see here, if I just dragged towards left side, this is how my website is looking at this moment. You'll see we have added 12 images overall. And this is tooth and fun. This is France tour on this particular date. This is India tour on this particular did. And we have added this image. So, so I think you got the idea how to add lots of images and that chip in this video lesson, we will continue further from this. So please make sure that you don't do any mistake in this particular video lesson. So just go and see the core, what I have written and do it multiple times. And if you're finding any issue, you can just drop a question in the Q&A section. Alright. So take care. Bye. 14. Adding some paragraphs: Hello everyone. Before we proceed folder, make sure that whatever you have set up, it is working properly. So you see here if I just come this side and you have this option of atom, if I just click on this live preview. Now your website, so look something like this. So this is my navigation. This is the image which I have just added below this navigation. Then we have image gallery where I should be having a total of nine images. You'll see we have images till here. And after that, We have added some paragraph, and then we have some lists. And then we have doors and fun. Then we have France tour, and we have in debt door and so on. So before I proceed further, make sure like all these things are working properly. And here, what I'll do is first, let me add some content as well, so that this website looks a little better. So here you'll see after this images, we have a paragraph. So there's no problem here. What I'm going to do now is you'll see in this flange tool after image, let's try to add some content also. For, I'll just give feedback for that. You already know that to add paragraph, we use p tag. And let's give closing of p tag. And what I'm going to do is I'll just add something here. So I'll just see about this particular France Tour de France was fun and engaging. I enjoyed a lot and badness. Similarly, for indirect tool, what I'll do is I'll just come here and I'll just add a paragraph. So I'll just give p tag. And let's add a p tag as well. And I'll just add something like, let's say India tour was a very different experience. There are a lot of mixed culture in India, which I enjoyed. Right? So you see, this is what I've written and now just click on this output button and just come towards right side. And just below the gallery, you'll see we have paragraph tag which we have already written. And whatever we have written about this France to just after the image, you see we have this particular paragraph. Similarly for India, I've just added another paragraph. And if you want, you can add an ajar tag just after this as well so that it looks more proper. So here what I lose just after India tool. You'll see if I just come to side. Let me just drag birthright site. And here I'll just say a child. For that, I will add a horizontal line just before the stable. So you'll see I've added this horizontal length. Now. My image I'm in my website, looks better. And there are a lot of work we need to do on this particular website. So please stay tuned. Do lots of practice. Reach out to me in case you're having any issues. Thanks for joining. Take care. Bye. 15. Forms - Part 1: Hey, people will come back. In this video lesson. We are going to understand about forms. Forms are used to collect user input details and to create a form via to use the form tag. And this is how a simple form will look like. So this is one example of a form. In the same way, you can have multiple examples of a form. So here you see we have name, e-mail ID, and then we have some checkboxes, not as HTML, CSS, or JavaScript. And then user can type some details in the text box area where it is written text. So let's try to create a form like this. So just to begin writing forms, first, I will create a horizontal line just after the table. So you see here we have this table and just after that, I want to create a horizontal lane. For that. I'll just give enter and give a char. And after that, I will just give us two tag. And I will just say contact form. For this contact form. Let me just close the tag. And again, let me just add another HR tech. And let me format this properly so that the cord looks aligned. And in the output, to just show you, you see here we have horizontal line here and at end also. And to create a form, we will be using the tag called form. And let me just give the ending of form. So let me just align this. And inside this, we will be creating the form. So first what we're going to do is we will just give labor tag. So label tag is used to add a particular name or label just before an input area. For example, if I just come here, give enter. So if I just give her label, and if I just say for example, it's a name. And let me just close the label, tag and output. I'll just show you. You see here it is showing as name. Similarly, I can add e-mail also for let me just copy this. So I'll just give right-click Copy. Come here, give enter, and let me just come here and give based. And now I'll just add e-mail and output. You can see that we have name as the e-mail. Now both these are in same length. So what I'll do is I'll just give BR tag. So you see here. Now, it will be in separate line. Let me add another heading tag. For example. Here I'll just give at three. And I'll just say select the topic which you want to learn. And let me just close this heading tag. And at the end, I'll just add a text area. So you'll see for text area, I'll just give the tag called text area. And this textarea tag is like a multi-line editing control panel. So here you can type some text. So this is normally provided to the user so that user can write something in this particular area. So for that, I'm just using text area and I can just give maxlength. So if I just give her maxlength, so this is one of the attribute here. And this means that we want to tell the maximum number of characters that can be allowed in this particular text area. So for example, let's say if I just give a 100, so that means maximum of a 100 characters are allowed in this text area. And it before just make this text area properly and just close this text area. And towards the right. You can see here that this is the particular text area I'm just trying to write. And let me also add number of rows and columns. So if I just add littles attribute, that means we want to tell the maximum number or visible number of lines in the text area. Similarly, I can add called, so called specifies that this is the visible rid off this particular text area. So for that, I just come here and I'll just write rules. And let's say I just want to add seven rows. That means total number of visible lines will be seven. And what our loop, I just give calls. And let's say calls as 50. So I can just add 50 year. That means the visible width of the text area is 50. So let me just show you the output at this moment. So this is my contact form. You see here we have name, email, and then we have this text area. In the next video lesson, we will work towards improving this form. 16. Forms - Part 2: All right, Let's proceed further. Now here you see that when we have given name, just in front of that, there is no input box where user can enter the details. For that. We have to give input tag. So let me just show you how we can give and put DAG. So if I just give input and let me just close this input tag. And please note that there is no ending tag for input tag. So at this moment, let me just show you the output. So you'll see here, this is how the output looks like. And if I just want to add some more details in this input tag, then here what I can do is I can just give a speech and I can just define the type of this particular box. So I can just say type equal to. In this case, I can just give text because I want that user can enter the text in this particular input box. Then I can just give the name of this particular box. So I can just give something like, let's say fullname. And what I want is I want a place holder. So placeholder is an attribute using which you can just add a particular starting string. So if I just give here place holder, I guess show you how it will affect the styling. So if I just give her full name, now let me just show you the output. And you see here, this is my input text. And start showing this particular name that is fullName. Right? And here you can give any detail. So you see here I can type anything. For example, I can type my name. So let me just show you also. So I can just say, for example, some deep, right? And in the same way for email, what I'll do is I just give input tag. And here I'll just give type equal to email. So I don't want that users should just type a text here. I want that user to type a particular e-mail here. And I can just give name, for example, I can just give, let's say e-mail ID. And I can just add a placeholder equal to enter your e-mail. So if I just show you the output, how it looks like, you see here, this is the name and we have this email. So a name I can just give, for example, Sandeep. And let's give email for example. Let's say I'll just give a dummy e-mail. For example, list. That it dust 123.com. So this is just a dummy e-mail ID. I don't have any e-mail ID like this. But just to show you, I've given this particular e-mail ID. Right? Now. Here. When the user will see that select the topic which you want to learn. Just below that, I want to add three check boxes with she's at HTML, CSS, and JavaScript. For that, I'll just give your input. And what I'll just say type equal to check box. And I'll also say name equal to HTML. And I want to display here as HTML. So I'll just say HTML, or let me just say capital H, DML. So if I just show you the output, now you'll see here we have this particular text box which is coming here. This is because we don't have the proper alignment. For what I can do is first, let me just add a BR tag here. So if I just give a particular BR tag, that is line break, I just show you. Now you'll see we have this particular checkbox we take and just select. So you see here. In the same way, I can add another checkbox and I'll just copy this and paste it here. And I'll name this as CSS. And here, I will also give CSS in the same V. I'll just give control V, or just do right-click and paste. And I'll just give here, for example, JavaScript. This is another important topic today, JavaScript. And I would suggest to you that once you grew up, you should also learn JavaScript, which is also an important topic. But in this course, we are only understanding about HTML and CSS. So at this moment I'll just give your Java Script and I guess show you the output. This is how your firm is currently looking. So you can select all the tick boxes also, or you can select few tick boxes based on your requirement, right? And you see this is my textbook. And I can enter anything, for example, I can just say, hello. How are you? So this is my textbox area. And if you want to display something here, what you can do, you can just come here and you can write something like right in this text. All right, so let me just come to this side and let me just show you the output. So you see here whatever you have written here, they're showing here that this particular text. And let's try to create a submit button also. So here I'll just give another BR tag. And then I'll just say something like this. That is input. And for Submit button, I'll just say input type equal to submit. And I'll just say value equal to submit. And let me just close this. So this is how your form will look like. So you see here, this is our contact form. Here you can fill the details and you can add any emulated, for example, test, test.com. And you can select any topic and attend. And you see here we have this particular text stayed here. And here you can write anything that hello. Welcome to this website. And at end I should be having submit button. So let's see why did not showing. So I see here that by mistake, I have given here IN PU only. It should be important. So I missed to give D here. Now you'll see I've given input type equal to submit and value as submit. Let me just come down and you'll see we have this submit button. Now please note that if you write anything and if you think that if I just give something, let's say Sandeep. And here, if I just say desk at the ABC.com, and if I just select HTML and CSS. And here if I just say welcome, and if we feel that if I just press on this submit button, it will submit this form, then it will not be the case because we are just trying to create this structure of home. To submit this form, we need to understand a dynamic programming language, for example, PHP or Python or Java. And this course is only limited to HTML and CSS. So we will be understanding only about designing this form. We will not understand how to submit this form. For that, we have to learn other languages. That is other programming languages, which is beyond the scope of this particular course. So let's limit ourself to HTML and CSS. And we have created this form. And at this moment, it looks like a simple form without any colors. So once you learn CSS, you will be able to add colors to this particular form. And let me just try to show you also. If you just click on the submit button, you'll see that nothing happens. You are not able to see anything here. Because what is happening is you are not actually submitting this form in this particular server. So this is just a template of a form or you can just say like it is just a structure of a firm. So that checked and this we do listen, Take care, Bye. 17. div tag: He people will come back. In this video lesson. I'm going to talk about div tag. Div tag helps to divide an area into divisions or sections. This acts as a container for other tags. So normally this contains r dot tags inside it. And if you use div tag, it is easier to apply CSS to style the elements. And this is not only used for the board declares specific purpose, rather, it is a gender tag which is used to divide areas. For example, you see we have this particular area, that is area 1. Similarly we have area two, area three, area four, and so on. So each of these areas can be covered or not a particular div tag. So let's take example of div tag. Coming back to our HTML code, you can see here that at top we have this header. So you can consider this header as a separate section or area. And after that we have this header image. Or you can just say that this is the mirror image of the site which is bigger insights. Or you can also say that this is the central image of this website. So this is also one. Similarly, we have image gallery, you'll see here. And in this image galleries, you see we have lots of images. And at this moment, all these images are coming one below the other. But what I wanted, I want those stack images beside each other, which I'll show you later part in this course. And if you've just come down further, you'll see that all these images are part of image gallery or right pill here. This is another area. And from here you see, from here to here, you have another area where you're just telling me about yourself, your family, and what is your likings about it tables. For example, you like these type of kicks and so on. And then you see here, from here to here, you see, we are only talking about tools to till here, right? And then we have another area that is timetable. And this is also an area that is contact form. So what happens is if you use a div tag, then it is easier to manage areas. And you can easily apply CSS to style these areas later on. So if I just come to this side, now, you'll see here after this header, let's say I want to give an area so I can just give your duties. So I'll just give opening off div tag. And let's say I want to. Keep this image tag that is IMG tag inside this div tag. So what I can do, I can just come here and I can just give closing off div tag. So let me just format this. So I'll just give space here. It may stack is coming inside this div tag. Now we'll see here this div tag contains this image stack. In terms of output. You see there is no change in the output at this moment. It will look similar to what we had previously, but later on, it will be easier to manage these areas. So this is my 18 year. Similarly, if I want to add a div tag here, what I can do is I can just come here and give DIV. And what I'll do it if I just come down. You'll see here we have all these topics. And you'll see after this, I can give the closing div tag. So if I just give her closing off, do you see everything inside? This is another div tag. So in short, from here to here, that is from this HR tag, you see here, if I just come down till here, everything is inside this particular div tag. So this is one area for what I'm trying to do is from here to this particular place. Let me just come down. You'll see till here. What I've done is I've just given one area. Similarly, I can add ADS for images as well. For example, for this particular image, what I'll do is I'll just add a div tag. And again here, I'll just give the closing of div tag, right? And let me just make this little right side. So now this particular area is separate. Similarly, I can give div tag here and I'll just give her do. And let me just post this towards right side so that it is contained inside it and it looks clear. And I'll just give closing off div tag. So this particular image is now part of this div tag. So if I just come down, what I mean is this image I have put inside div tag. And this may also have put inside a div tag. And the reason for me to put these images inside div tags is because I want to make these images separate. And you'll see here we have lot of images here. But I'm not putting div tag here because I want all these images. I mean this image, this image and all these image gallery images to come one beside the other. And that is the reason I'm not giving any div tag for these images. And it's not a rule that you have to give div tag at this particular position, or this is not a rule that for this particular purpose you have to use div tag. So it all develops based on your experience later on. But div tag, you can consider as important because you can keep the content or another tags inside delta x so that you can make it different area. And using div tags, you can style your HTML document in a better way. All right, so that's it in this video lesson. Take care. Bye. 18. Section tag: Hello. Let's talk about section tag. Section means that the content inside that particular tag is grouped to make it like a single team. While div tag is a generic tag to create areas. And both these tags are similar. And both these tags are used to create areas. And at this moment, I do not want to confuse you. So in short, div tag is a denote egg. White section tag is used to group related content. And you can use any of these tags. So just to show you in this particular video, I'll just use section tag. So consider this example. Now here you see from this particular place to this particular piece, you see it is all about my family and my likings. So if you just see the output, let me just show you the output. What I mean is from here to here. This is all related content. You see, it talks about my family and this talks about my love for kicks. So I can just make this inside area. So I can use either div or I can also use section tag. So for example, if I just give here, let's say section tag for which I'll just give section. And let me just close this here. So I'll just give closing off section tag. So everything from here to here as part of this section tag. Similarly, for tools and travels, I can also make this as one separate section. For that, I can just give her section. And let's see, I want to make this a particular section till here, from here to here. That means this area, this tag to the stack. If I just give ending off my section tag. Now, this is another area, right? And in the same way, I can also make this table as separate area. So for example, if I just give her section and let me just come down just after this table tag that is closing off table tag. I can just give my section. Now. This will be a separate section you see here, from here to this particular tag that is table tag. This is complete separate area and I have given it inside section tag. In the same way. I can give section tag here also. Notice if I just give her section and let me just come down could form. So ending of foam. I can just pour this section tag. So I can just give closing off section tag. Now in this case, what happens is from here to here, we have one section, right? And if you just see the output at this moment, there won't be any changes in the output because we have not applied CSS. Once we apply CSS, you'll see how important these sections or div tags are there. So that's it. In this, we do listen. Take care. Bye. 19. footer tag: Hey, people will come back. In this video lesson, we are going to understand about footer tag. Footer tag in HTML defines the footer for the peach or section. And footer is normally present at the bottom of the page. And in this particular footer tag, normally you show the information, for example, copyright. So you'll see here we have copyright. Or you can give privacy policy or author information or contact details and so on. So let's try to give some meaningful thing and this footer tag in our example. Alright, so you'll see here we have this particular footer tag. And inside this, Let's say I want to add a particular content. So for that, I can just give p tag. So if I just give p tag and it would just give closing off p tag. And inside this, I can just give something like this that is coffee, right? 2020. So this is year 2020, right? And I can just give the author information or website name. So at this moment, let me just give alter information. And in this case it is Sandeep Kumar. Let me just show you the output. And you see it says copyright 2020. And Sandeep Kumar. And to create a copyright symbol, what do we have to do is you have to come here and you have to give. And so you have to press and symbol in your keyboard and give COP by, that is copy and attend. You have to give semicolon. So if we just add this, that is and or, you can also call this as ampersand and copy followed by semicolon. And then if you just give this particular text, then I'll just show you the output. So you see here it gives a copyright symbol and then it says copyright 2020, Sandeep kumar. All right. So that's all about Folder. Keep practicing and free told to me in case if you have any doubt. Thanks for joining. Take care. Bye. 20. HTML Comments: All right, Let's talk about comments. In HTML. You can also give commands. Suppose you want to make a particular node in HTML, then you can use comments and please more debt. Comments are not visible in the output and it will not be shown to a person who is just going to visit your site. And let's say that this is your central image, right? And if you want to add a note that this is my central image so that you should remember it. Or if you want that anyone who is reading your HTML code should be aware of this important information, then you can just give comment. So you see here for this image, I have used this chord that is the image, and this is present inside this particular div tag. So what I can do is I can just come here and I can just give a command for comment. You have to give less than symbol, exclamation mark and then two hyphens. And then you have to just give a sort note. Where do you want to tell an important information? And then at end, you have to give two hyphens and then you have to give the greater than symbol. So here let me just say like this is the main image of this website. So this is one of the comment and just come down. You'll see here that this is image gallery. And let's say if I just come down even further, you see that in the output, I can add a lot of comments actually. And let's say that I want to tell a note or I want to give a note that I need to style this particular footer. Then I can just come here just before footer, and I can just add a comment. And I can just see exclamation mark two dashes or hyphens. And I can just say like to do. So. Normally I used to give to-do. That means any pending tasks which I have. So for that, I give to do. And I'll just C-like style this footer. And I'll just give two hyphens at end and give greater than symbol. Now, if I just show you the output, you'll see that there is no changes in the output. But if I just want to refer this code later on, I can just see this code and I can just remember that, okay, I have to style this particular folder which is painting. And once my styling is done, I can remove this comment as well. So let's say I can just copy this first. And at this moment, you see here this contact form also needs to be styled. So I'll just come here after this HR tech, I mean, just before the section. And I can add comment, something like this. That is todo style, this form. And if I want to style this in a particular color, I can tell that also, I mean, some important information. So if I just see like style, this form and when it color in wallet color. So this is just an information or important note which I have given here. This will not be in the output, and this can only be read by either you or someone who has the access to your core. Alright? So this is how you should use comments. 21. What is CSS: I hope you have learned a lot in HTML, and let's start learning CSS. So what is Sss? Sss, The stands for Cascading Style Sheets. Cascading means that one or more style seat can be applied on the HTML document, one after the other, using some rules. So the same tag can use one or more styles. This is used to style HTML document. So in short, you have to use HTML to create the structure of the website. Why? You have to use CSS to make the website more colorful, better, and clear. So until now, using HTML, we have created this website. So this is the website which we have created by just using HTML. You can see that. And once you apply CSS, it will look something like this. So you'll see this is the website that you get when you apply certain stylings based on your requirement and likings. All right, but this, I'll just close this video lesson. Thanks for joining. Take care. Bye. 22. CSS Syntax: Hey, people will come back. Let's talk about CSS syntax. Css syntax can be divided into two parts. The first one is selected, and the other part is declaration. For what exactly a selector. In CSS selector selects an element and applies style on that particular element. The list of selectors can be tags. For example, at one tag or edge to DAG or H3 tag and so on. And we have some other tags also, for example, p tag, David tag, second tag, and so on. So all these tags we have already seen. And a selector can also be class or IDs. At this moment, you do not know about classes and IDs. I'll show you what exactly is class and ID. In the coming one or two, we do lesson. Let's talk about Declaration. Declaration includes property and a value. For example, let's say if we just write color colon green, then color is a property and green is a value. Similarly, if I say background color colon blue, then background-color is a property. Blue is the value. Similarly, if I say text align, center, that means text align is a property and center is value. And we are going to discuss about all these declaration in this particular course as well. So please do not worry at this moment about color, background, color, text-align, and so on. So these are just few declared raters. We have lot of other declarative which we are going to cover in this particular course. Now, if you just combine selectors and declaration, then it becomes CSS syntax. For example, if I just say S1, so S1 is my selector and it has a tag. And I'll just give a curly bracket. And I'll just give declaration. That is property along with the value, so color colon green. So this is one example. And if I just close the curly bracket, then it is one of the syntax. Similarly, I can kill multiple properties for a particular selector. For example, let's say if I have a div tag, then I can just add multiple properties. For example, color colon green. So this is one declaration. And then for continuation, you have to give semicolon and you have to give another property. For example, background color, colon blue. And you'll see in this particular example, I've used two declarations. So that's it. We are going to cover everything about Declaration and syntax as we proceed further in this course. Take care, Bye. 23. Class Selector: Hey everyone, welcome back. If you want, you can create your own selectors using classes and IDs. Using bees. You can style the elements in a better way. And in this video lesson, we will learn about class selector. The class attribute or class selector is a way to group elements or tags and apply some styles to it. It also sets a particular name for a particular tag or element. You can use the same class name on multiple tags or elements. And if you want to apply the same style on multiple tags or element objects on a particular page, then it is better to use a class selector. So let's take some examples of class selector. All right, So when we come to our website which we have created, you'll see here, for example, at this moment we have this navbar. And if you want to add a particular name for this particular navbar so that you can refer it later using that particular name and style it. Then you can use class selector. For that. I can just give her space and give class equal to and then double-quotes. And here I have to give a particular name. For example, if I just give here, let's say a nav bar. So I have just added class equals nav bar. So this is my name of the class. And please note that the same name, that is same class name can be used on multiple objects or tags. Okay, so please keep that in mind. And in the same way, let's say if I have this image tag, right? And for this particular image tag, if I want to add a class attribute or Class selector, then I can just give your class equal to and just give double quote and give the name of the class. For example, since this is the mean image, right? So what I'll do is I'll just give you mean IMG. So I have just given this name. If you want, you can give another name, for example a or, let's say XYZ and so on. But I always recommend to give a meaningful name. So I just give you your mean IMG. So IMG is for image. And I'm just trying to say that in this particular tag, that is image tag, I'm just adding main image in the same way you see here we have this div tag. So from here to here, you see here we have this div tag. And if I want to name this particular div tag using class, I can just give your class equal to and I can just give a name. So since this is the main deal of this particular page, where I'm just adding all the images or image galleries, right? So I can just name this something like, let's say mean. So this is, I have added class equal to mean. And the reason for this is because I want to style using this particular name, that is mean. And let's see. I'm into this particular image tag. And here also I can just add like class equal to, let's say I can just give as Gallery. Alright, just give a space after that. So let me just copy this. Just give right-click, click on copy and just come here and paste it. Now, please note the reason for me why you have used this className as Gallery multiple times, because there are multiple images here. So you see these are all part of my image gallery and I wish to apply the same styles on all these images. So that is the reason I'm using the same class name. So I can just copy this again. And what I'll do is I'll just paste it here. Right? So for that I've just given control V, or you can just give right-click and select Paste. So let me just come here. Just right-click select Paste in the same way. Here, I'll just give paste for this particular image. I'm just giving based. So basically I'm trying to create the same class name for all these images so that I can apply the same site on all these images. So again, let me just come here, give base. And here also I can just give based, right? So I have created these classes for all these images in the same V. Let us come down. And here let's say I want to add a class for this particular image. Then I can just give her class equal to and let's give another name because this is not the same image. So you see here, these images are bought off image gallery, and this image is a different image at all. So here let's add a class name, for example, stack IMG. Because what I'll do it later on, if we just come to your output, you'll see I want this image. And after that, see I have some paragraph, right? And then I'll just add this image. So it will be lake image staggered one below the other. And in between that we will be having some paragraph. So that is the reason I've just given the name add stack image. And let me just copy this. So I will just select this copy. And here I can use same class name because I want to apply the same style for these two images. So I'll just give your beast. And you'll see here, I have added this particular class here. So in this way, you can add a class. And I will show you later how to use this className to style this particular tag that is image tag, right? So in a way, you have created your own selector. So if you just add this that is class equal to a particular class name, what you are saying is I want to add a particular selector, good this particular element. And using this particular selector name, that is a stack image, I will try to style this particular element that is image tag. All right, so thanks for joining. Take care. Bye. 24. Id Selector: All right, Let's talk about ID selector. Id selector is similar to class selector. The only difference is that using id selector, you can add a unique name or unique ID for a HTML tag or element. So please note, you cannot use the same ID name for multiple tags in HTML document. Whereas you can use the same class name for multiple tags using ID, you can also create a bookmark. So what exactly is bookmark? Suppose you want that a person who is in your website or web page clicks on a particular link. And when he or she clicks on that link, it should go to a particular part of that webpage. Then you can set I bookmark. I will show you how you can create a bookmark and how to link it also in this video lesson. All right, let's add some ID name. For example, you see here we have this particular div. And for this particular div tag, we have already added a class name using class selector. In the same way. We can also add an ID. Also. For example, I can just give here ID equal to and I can just give, let's say ID1. Alright, so this is the name of this particular ID. So in this case, first I've added the class, that is main class. And I've also added an ID that is ID1. And please note that this ID1 will be unique in this particular HTML document. So I cannot use the same ID one anywhere in this particular HTML document. In the same way. If I just come down, you see here we have section tag. And if you want, you can add an ID here as well. So it is up to you. And at this moment, I'm not adding any ID name here. But if you want, you can add an id name in the same way. So let's say if you want to add an id name here, it has better to give ID equal to a particular ID name. So let's give id2 in this case. And in the same way, if I just come down, I can also add an ID name for this particular section. So I can just give her ID equal to ID3. And using these ideas, I will stay this particular section. Similarly, I want to style this particular table using an ID. I can just give your ID equal to, let's say id 4. Or you can give any meaningful name also, for example, I can also give something like this. That is id equals timetable. So it is up to you what particular name you want to give. But it is always better to give a meaningful name. In the same way. There's come down even further. And I can also add an ID here. So I can just give your ID equals, let's say ID photo. Or you can just give something like id equals form ID or I deform something like that so that it will be meaningful. At this moment. I'll just leave it to ID for. Now. You'll see here if I just come up. And now you see here we have these navbars. Right? Now. At this moment, if you see, if I just click here, you see nothing happens, right? And let's say if I just want to click on gallery, then I want to create a bookmark. That means if I just click on gallery, I should be able to come at this particular location. Similarly, if I just click on tours, I should come to location where tools is defined. So you see here it should come to this particular location that is 2s and fun. And if the user clicks on timetable, he should come to study timetabled. You see here, we have this location that is study timetable. In the same way, if the user clicks on this contact, he or she should be able to come on this particular section that is contact form. So this is called bookmarking. So for that, I will just use ID for gallery. You see, to go to gallery, I'll just give your hash and then what is the ID for gallery? So you see here, here, the main div is this particular location that is ID1. So I can just give here ID1. And now you see here if I just click on gallery, now you'll see I'm coming into this particular location that is Image Gallery. Similarly, let's say for tools, you see here, if I just come down, you see four tools. We have id2, right? So if I just copy this, and if I just give here id2, you see here in link, what I've done is I have just given hash and then ID name, that is id2. So if I just click on Tools, you'll see it comes to tooth and fun. Because for this particular place, the ID which we have defined is id2. Similarly for timetable, I can use that ID which is defined for that particular div or section. I think it is ID3. So let me just confirm it. So if I just come down, you'll see for timetable. So this is the main section for timetable. And here it is defined under this particular section, which has the ID name as ID3. Similarly, if you see here for contact form it as i d4, right? So let me just come up. And here I'll just add has ID for, for contact. Now, when the user will click on timetable, he will go to ID3 location. So if I just click on timetable, you'll see it comes to this particular location. And if I just go up, you see for contact, he goes to this particular contact form. Now for timetable, I will just add a heading also so that it will look more clear. So let me just come to this timetable. And here, let me just give a char tag. For that. I'll just create a horizontal rule. And again, I'll just give a char tag. So I want to add two horizontal lines. And in-between that, I'll just add at one tag. For example, I can just give her one or let say at two tag. So I can just say x2 and I'll just say study time table. And let me just close my H2 tag. Now if I just show you or let me do one thing, I'll just click on this timetable and you'll see now it goes to this particular location that is steady timetable. So you see that using id selector, it becomes very easy to navigate to a particular location in a webpage. And there are other uses of ID. For example, you can style a particular element or tag in a better way. And we will do that as well in this particular course. So thanks for joining. Take care. Bye. 25. Types of CSS: Hey everyone, welcome back. In this video lesson, we are going to understand about types of CSS. Until now. We know the syntax of CSS and we know that we use a selector. And along with that, we use declaration. And declaration contains property with value. Keeping this in mind, let's understand different types of CSS. We have three types of CSS. The first one is inline CSS, where we apply the style to a single tag or single element, which is present in the body section. I mean in the body tag. And in this case, the style attribute is applied along with the single element. So if you're using the inline CSS, then we use a style attribute. So you see here, for example, let's say we have h3 tag, and I want to apply the text color of that particular tag to green. Then in that tag itself, I can just use a style attribute. And I can just say at three, style equals color colon green. So color colon green is declaration, and X3 is Selector. And we are using the keyword or attribute called a style for this inline CSS. And please note here that it is used for single HTML element. Only. Next one we have is internal CSS. And internal CSS applies the CSS on a single page. Hence, it is also known as embedded CSS. It is included in the top of an HTML document, and the internal CSS is included within the style tag. Please note it is not a style attribute. Style tag. And this style tag will be defined under the head section, which means under the head tag. So you see here we have header tag. And inside this head tag, first, we have to define a style tag. And inside that, we have to give the syntax of the CSS. For example, if I want to style as h3 tag to green color, I can just say S3, curly braces, color colon green. So here, color colon green is declaration, where color is the property name, and green is the value. In the same way, we have external css. External CSS is the best way to apply styles. And you should link the external file or external CSS file in the head section, which means that in the head tag. So here you have to create an external style sheet, I mean external CSS file. And then you have to include this file in your HTML document. The advantage here is that if you need to change any CSS properties, we can make changes directly in the CSS file. Instead of making any changes to the HTML file. For example, you see here, let's say we create another file, that is another external file with the name heading dot css. And then we will write all our CSS courts in this file. And then we will link this file to the HTML document under header tag using the link tag. So you see here, we have used link REL equal to a style sheet at it if equal 2 heading dot css. And this can be used for many pages. So this is the advantage of using external file. And external file is the best way to use CSS. So in the next video lesson, we will start coding CSS using external file itself. And then going forward, I will show you some examples of internal CSS as well as inline CSS also. So thanks for joining. Take care. Bye. 26. External CSS: Hello everyone. Let us start coding css. And in this video lesson, I will cool CSS in external CSS file. So suppose I have this CSS file, and let's say that the name of this particular CSS file is style dot css. Now, please note that whatever HTML5 we have a short end with the name dot HTML. And whatever CSS file we have should end with the name dot CSS. Alright, let's say that the name of this CSS file is style dot css. Then what you have to do is first, you have to go do head section. And under this, you have to link this file using link tag. So if I just give link inside this, you have to give audio that is relation equals stylesheet. And then you have to give a positive attribute. So x is 4 hyperlink. And here you have to give the name of the file. For example, it is style dot CSS. So what I'm going to do is I have created a CSS file with the name style dot css. And I'll record all my CSS properties inside this CSS file. And I'll link this file with HTML. You think link tag. And this particular link tag will be present inside this header section. That means inside this head tag. And I have just given link audience equal to study sheet. That's it. F equals CSS file limb, that is style dot css. Now, please note we are using GSB and what a JS Bin does is it creates a CSS file limb and it directly links with HTML5. So no need to give link rel equals stylesheet. And then at 35 attribute in case if you are using Jasmine. So I'll just comment it out. So before that, what I'll do is I'll just give exclamation mark and then two dashes. And I'll just give you two dashes, and then I'll just give greater than symbol, right? So this is commented out, right? Or it is better if you wanted to conduct a gate and move it also. And you can remove it only when you're using JSON.com. But another way to create a HTML document is to create a HTML file in the Notepad document or any other text editor, which I will show you in this course also. And when you do that, then you have to link the CSS file which you have created. But in this case, this tool automatically links CSS file, so no need to link again. And here at this particular CSS area, you have to write all your CSS. So that's it in this we do listen. Please be ready to code css and next week you listen. Take care. Bye. 27. Background-color and background-image: Hello everyone. In this video lesson, I will explain about background color and background image. So you see here at top we have header. And let's say I want to style this header in such a way that I want to give a particular background color. For this particular header. Then I can just give header. So this is my selector, and then I'll just give combinations. So for that, I'll just give curly brackets. And I'll just give background color. So it is background color. And you see here we have given background color. And this is the property, and let us give a particular value for this. So let's say I want to make this background color as medium violet red. So I can just give medium violet red. And now you'll see here this particular header has turned out in medium violet, red color. So you'll see here, this was my HTML tag, that is header tag. Inside this, I was having navigation bar. And navigation contains some anchor tags, that is home Gallery, tools, timetable, and contact. And you'll see now it isn't different background color. In the same way. Let's say if I just come down, you see we have this form. Now, if I want to change the background color of this form to any other color, let's say it's the same medium Oil, it red color. Then what I can do is I can just give form. And you see here, if I just show you the HTML tag, you see, I just want to make this particular form in different color. So for that, I'll just give form. And let's give background-color, colon, medium, boiler dread. And now you see here the background color is having medium or related. In the same way. You can also use background image. So for example, I have taken this image. Now, I want to keep this image the background of any particular tag. So for example, if you consider this form, let's say if I just wanted to commend this. So in CSS to comment, you have to give forward slash. So I'll just give forward slash and then star. And let me just bring this there and attend. I will just give star and again forward slash. Now you'll see this is commented out. So this is the way to comment in CSS. All right? And let's say instead of background color, if I just want to make background image. For that, I will just use the property background hyphen image. So for background color, I'm using background hyphen color. And for background image, I'm using background hyphen image. And for that, I have to give the URL. So I'll just give URL. And inside this, I'll just give double-quotes. And here I have to give the part of the image. So this is the part of my image. And what I'll do is I'll just attach this spot in the resource section. So you can just go through that. And if I just paste it here. Now if I just show you, so this is background image, let me just show you. So this is background-image colon URL. And I have just given the URL limb. Or even if you don't want to give inverted commas, I mean, double-quotes. You can skip that as well. But normally I used to give double-quotes, so it is optional if you want, you can give IL-2, can skip that. But most important thing is you have to pass the URL of that particular image. So you ought to live the location or path where the image is kept, right? So you see here this is a JPEG image and it is ending with dot JPG. And if I just give the location, now you'll see this form looks like this. So you see here, this is how this particular form is looking like. And in the background, you see in the background of this particular form, we have an image. And for that, we have given background image. Right? So at this moment, I don't want to give this background image. I just wanted to show you how to use background image. So I'll just give forward slash and a star and attend. Let me just give a star and a forward slash. And let me just uncomment this previous link because I just wanted to give background color. So I'll just give you a background color. Now you see here, this is the background color of this particular form. In the same way you see here. This is my footer. So I'll just expand to the site and you see this is my footer. And this footer is now in white background. So if I want to change this to some other color, Let's do the same color. For that. I will just give Porter and I'll just give background color. And let's give medium violet, red. And now you can see that this is the color of this footer. If you want to expand this website and see in a bigger screen, what you can do is, you'll see here at top right, you have this arrow mark, right? And if we just click on this, it says live preview. If I just click on this, it opens the output like this. So this is the output at this moment, you can see that I have just added background color too few places. For example, in this particular form, I've added the background color and I think this is not reflecting here. Maybe it will take some time. So this particular background image should not be there because I have changed to background color. Let me do one thing. Let me just refresh this. So here I'll just reload the speech because this might take some time. And now you'll see here that the form has background-color, background-image, and even the footer has been changed to medium boiler trade. For That's it. In this video lesson, we understood about background color and background image. In this, we do listen. Take care. Bye. 28. CSS Text Colors: Hey everyone, welcome back. In this we do lesson, we are going to understand about text colors in CSS. If you want to change the color of the text, then you have to use the color property. For example, if I just see my output, you see here that for contact form, we have medium while it red color as backbone. And you see all the text scholars are in black color, right? So these are all in black colors. And if I want to change this, any other color, for example, let's say I want to change this to white, then I can just give color colon white. In the same way. If I want to change the footer color, I mean, not the footer color, the text which is appearing in footer and white color or any other color, then I can just give color colon and then that particular color. So I'll just show you. So let me just come to this form. And if I just give enter, first of all, I'll just give you color colon. If I just give white. And I'll just show you the output. You'll see at this moment, it is not changing. And if I refresh the speed, you see if I just click on this reload button. Now, if I just come down, ideally it should change. So let me just do one thing. Let me just close this first and let me just bring my output here. So I'll just click the output. And if I just come down, Now you see it has changed to white color. And again, if I just click on this live preview button, now I think it should update because normally it takes some time to update. And now you see here it isn't white text. So let me just close this. And in the same way, let me just bring my output here itself. And if I want my footer to have the text in white color, I can just give color colon white. And it is very important to give semicolon at the end, which means that this is end of this particular declaration. And then if I just give the next declaration, you see, since this is the last declaration, it is optional to give semicolon. But I would recommend that it is better to give semicolon even if this is the last declaration also. So I'll just give semicolon. And if I just show you the output, now you'll see my footer is also having text in white color. And if I just click on this live preview, let me come down. And you see here we have this white color for That's it about colors. In the next video lesson, we will proceed further with some other CSS properties. So keep revising. And in case if you have any doubt, do reach out to me. Thanks for joining. Take care. Bye. 29. CSS width and height: Hello and welcome back. In this way, do listen. I'm going to explain about grit and height property of theaters. Simple. You want to set the width of a particular tag or element. Then in that case, you can use width property. In the same way. If you want to set the height of a particular tag or element, then you can use the height property of CSS. And you can use different units for setting width or height. For example, you can set width or height in pixels, that is Bx, or you can set in EU, or 30-meter or percent, etc. So there are a lot of values which you can use. And just to keep it simple, we will be using bx and posing for, let's say that I wanted to set width of the form to let's say 400 pixel. Then I can just come here and I can just give fallen 400 pixel. And please note that there is low speeds important and pixel. And if I just show you the output, pickling, just come down to the form area. And you see here now this 400 pixel for just change it to 200 pixels. Now you see it isn't very small. So I'll just change back to 400 pixel. And you see, this is how it looks like. In the same way. Let's say I want to set forth order. So what I can do is mostly for header and footer are used to set a 100 percent or convert folded and predict the full area. So I can just say here, that is word fallen 100 percent for that predict fluid. And I'll just copy this. And header. I will do the same thing. Because for header also, normally I use susceptible to a 100 percent. And in the same way you see here for this text area, I can see that it is looking very big. So let us try to set a particular text area limit for what I can do. Let me just come here and I can just give text area curly bracket. And I'll just set the width of this particular text area to a particular value. Or what I can do it this time I'll just set the maximum width. So if I just give lacks word and I'll just give 90% for the difference between validity and maximum verdict is that word is the evil is of that particular tag or element. While the maximum is the maximum. It can take in any circumstances. Alright? So if I just change it to say 80%, I think that would be ideal. You see you introduce it in the same big for form also, I just set the maximum width. So I'll just give max hyphen varied. And let me say, for example, 70 percent for I do not want at any point that we should go beyond 70% of the total weight of that particular device. So you see now introduced, right. In the same way. I can also set height. So let's say that for our footer, if I want to set the height to, for example, 40 pixel, I can just give her height. That is ADHD colon or pixel. And if I just show you now, this is the height you see here. It has increased a little bit. And just to show you, what I have done is I've just added the lift of header as a 100 percent. Given the maximum rate of text area as 80 percent. I've given the maximum bid and weird or form as 70 percent and 400 pixel respectively. And for scooter, I've added as a 100 percent height. I have just added as 40 pixel. So you see if I just remove the height, this is the normal height. And if I just give the height, now you see here it has increased a bit. And I'll just show you the output in a completely new data. So for that, I'll just come here and click on Live Preview. And sometimes it takes time to get refreshed. We just come down. So if I just go to the formula you see here, this is the total. This is the area which it is considering now. And for height, you see I've increased the height. So it is showing this particular height. So if you want, what I'll do is I'll just remove this max width of foam at this moment. So let just remove this. And now if I just show you the output, now it looks like this. So you see here it has increased and it will just close this. And this is my output. So this is how you can use the width and height property of CSS. And you can also use max-width and max height. And in the assembly if you want, you can set the minimum width as well as bending of light. So in place of max-width, you can also give min-width. And then you can just give a particular value. For this moment, I do not want to set any minimum value, but that is the reason I'm not going to quote it. But if you want, you can try coding when lid and see the output for that. Check this. We do listen. Take care. Bye. 30. CSS Padding: All right, Let's talk about padding. Padding is the space around the element or tag. In fact, it is space between the outer edge of the content and the inner edge of the border. For example, you see here we have this content words. And then around that we have padding. And then after that we have border, right? So padding is the space between the outer edge of the content and inner edge of the border. And around the content, you can have padding top, padding right, padding bottom, and padding left. So these are all the spaces at the top of the content or right of the content, or bottom the content or left of the content. And instead of defining padding property, you can also define individually like padding top, padding right, padding bottom, and padding left. So let's understand what exactly is padding with the help of example. So you see here for header, we have this particular area. And if I just want to give some extra space around this particular element, then I can just use padding. For example, let's say if I want to give 20 pixel on top, I can just give padding top colon 20 pixel. And in output the sea, there is extra space of 20 pixel. Similarly, if I want to add a padding of let say padding, and if I want to give a particular padding towards right side, for that, I can just give padding, right? Let's say I want to give a padding of, for example, 10 pixel. I can give that as well. And you can see that now we have extra spaces here. Similarly, if I want to give padding at the bottom, I can just give by adding hyphen bottom. And if I want to give a value of, for example, 30 pixel, I can give like this. And you see we have some extra spaces here as well. And in the same way I can just give padding at the left side. So for that, I have to give padding left. And let's say if I just give five pixel or let me just give a 10 pixel, I can give like this. And you see here we have some extra spaces. And if I just remove this, now you see that space is gone, right? And you can just visualize the difference in the same way. If I want to give, let's say padding top equal to 0, padding top column 0. Now you see a top, there is no padding. Similarly for padding, right? I can give something like this. That is padding, right? Is 0. For padding bottom. I can also give padding 0. And you see there is no space. And in the same way, I can just give padding left as 0. And if all the four values are same and owned the batting. For example, if padding top, padding right, padding bottom and padding left are having the same value. Then what I can do is I can just remove everything and I can just qx simply, that is padding colon that particular value, let's say 0. So this means that padding top is 0. Padding right as 0, padding bottom and padding left is also 0. In the same way, if I just give padding colon 50 pixel, or let's say eight pixel, then it will add eight pixel padding around all the sites. In the same way if I just give padding, let's say 20 pixel space, let's say 30 pixel. That means at the bottom and top we have contain pixels of padding. At top and bottom we have 20 pixel, and then we have 30 pixel towards the right and left side. All right, So at this moment, what I'll do is I'll just remove everything and I'll just give padding colon eight pixel. We'd pixel looks good here. And in the same way, I can just give a padding for form. So if I just come down, you'll see here there is no padding for this particular form. So if I just give here padding and let's say I can just give a padding of, for example, frontier pixel. And now you see that we have some exciting spaces and owned each site. And this looks more beautiful. And in the same way we can give padding for footer also. So at this moment you see we have not given proper padding here. And if I just give, for example, padding colon, and let me just give a padding of just five pixel. And now you see here we have some extra padding. And if I just remove this, you can see the difference. So let me just do one thing. I'll just give padding from left side. So for that I can just give padding, left colon. Let's give five pixel. And you can see that there are some extra spaces that owned the left side of the element. So that's it in this video lesson. Take care. Bye. 31. CSS Borders: Welcome back everyone. Let us learn about CSS border property. Using CSS border property, you can set borders and HTML tags or elements. And in the same way, you can specify the borders at on top, bottom, left, as well as right. And using CSS border, you can specify types of borders for your element using border style property, border color property, border width property, et cetera. So in the same way you can see here, after the content, we have padding. And then after padding we can have borders and own that particular element. That is border, top, border bottom mater left, and bottom right. So let's take a few examples of borders. Alright, and first let me just come down in my output. And you can see that in my input. If I just click here, the borders are in black color. You see here this border is in black color. Similarly here also we have black color. And if you want to change the style of this border or any other Bartle as well. So we can do that as well. For example, in header also we can add some borders, but it is not required in this particular case. Similarly in for that also you can add. And what I'll do is I'll just try to see my input tag fullest in the form. So you see here, this is my form. And you see this is my input form. And here we have used input tag. Let us try to style this input tag. And what I'll do is for that, I'll just give input tag. And let me just give input tag here. I can add input tag here as well. But what I normally do is see input tag is associated with form. So that is the reason I'll just give input tag near this particular form so that it will be easier for me for this later. So I'll just give your input. Let me just give curly bracket. And for input, I'll just add a border. For example, if I just give border, and let's say if I just give 10 pixel. Now you'll see here for the input, now, we have given some borders. If I just remove this, you can just visualize the output. You see here. It changes, right? In the same way I can just give, for example, border color also. So let's say I can just give here, for example, border width, 10 pixel. And you see here we have given the border width as 10 pixel. Similarly, if I just give her marble color, let me just give border color as for example, orange or blue. Let's say if I just give blue, you see, we have the color of the border getting changed. In the same way. I can just give something like this that is bordered top, border top. And I can just say bordered top as for example, a 10 pixel. And you see for top we have given ten pixel. Similarly, I can just give border left. And now you see we have given the left border of one pixel and so on. And there is short property for border. That means you can just give the width of the border. You can also give the color of the border as well. So for example, if I just give it a border colon, Let's say I wanted to give a border of two pixels. So if I just give two pixel and I can just give a particular border type. So let's say I want to make sure that the border is solid. So I can just give solid. So you see here I have TO pixel of solid border. And let's say at this moment, if I don't give anything, it isn't black color. Let me just try to give an orange color for that. I'll just give orange. And you can see that we have orange color for the borders. All right, so once the user clicks on this input, it will be black. But if you just click outside, by default, it will be orange color. And I can still see that there is no padding around. So let me just add some padding also. So I can just give padding of, for example, 10 pixel. And now you see we have a lot of space and I want this element and this looks proper. Alright, so that's it about border property. Take care. Bye. 32. CSS margin: Hey people, let's discuss about margin. The margin is they're transparent area between the outer edge of the border to the inner edge of the margin itself. Basically, margin is the space outside the ETO of the container. And you can define it similar to padding. Margin, top margin, bottom margin right, and margin left to add margin at top, right, bottom, and left side around the element respectively. So let's take some examples of margin. So normally what happens is we do not want an outside space for the body tag. So you see here, if I can just show you the body tag. And you see here we have this body tag and everything. I mean, all the tags or elements which are visible in the browser are present under this body tag. So you see here from here to this particular location, I mean till the stack that is end of footer tag, everything should be under this body tag. So normally what we do is we set the margin for body tag as 0 so that there is no space outside to the container of body tag. So for that, we will just keep your body. And inside this curly braces or curly brackets, we will just say Martin colon 0. And you see here now there is no space outside to the container. Let me just remove this and I'll just show you the difference. You can just see in the output. And you see we have little bit spaces here outside of the container. And if I just give margin 0, you'll see there are no spaces outside of this particular container. That is the body container. Similarly, let's say if I just come down and if I want to add some margin for this input tag, what I can do is I can just go to input. And this is the declaration, which I have to give. So here I'll just give margin. And let's say I want to add a margin of 10 pixels. I can just give 10 pixel and you can see the difference. Let me just remove it. So you see here, this is how it looks. And if I just give the margin, you'll see it has sufficient space outside. And I can see that for this form, there is no margin. So I have set the margin for input tag. But for form also, we do not have margin. And if you automatically wanted to set a margin so that based on the size of the browser, the margin should automatically be added. Then in that case, I can just give margin colon auto. And you see here automatically it will give the margin based on the size of the browser. So you see, you know, it increases. And as you reduce the size of the device, you see here, it decreases the margin. So that is what we have. Margin colon auto, if I just remove this. Now you see here, there is no margin in this side. And if I just give margin auto, you see that there is uniform margin. And the left and right side you see here. So that is the use of margin. 33. CSS Font size: Hello everyone. In this video lesson, we will understand about font-size property. By using the CSS font-size property, you can set the size of the font and it is a way to adjust the text size. For example, if I just show you the output and you see here we have this image gallery, which is H1 tag. And if I just come down, you'll see we have pools and fun. This is also a twin. So you'll see here, this is a 20 tag. Similarly, this plant store is at two deck, right? And let's say that I want to change or I want to adjust the size of this particular text, then what I can do is since it is a torn tag, then I can just write here. For example, I can just say X1 and inside curly brackets, I can just give font size. And here I can give a value. So for example, if I want to change the font size to a smaller value, I can just give form size, colon, small. And now you'll notice the font has become smaller. In the same way if I just give font-size medium. Now you see it has given the medium font. If I want to change the font to a larger value, I can just give font size is large. And in the same way I can just give a particular value as well. For example, let's say I want to give a particular value for this font. For example, if I just give 30 pixel, now you see looks a little bigger. If I just change it to 40, you see it is even more bigger, right? So it all depends on your requirement and what exactly you want. So 40 pixel is very large. For me. I think 30 is good. In the same way, if you want to change the font size of another tag, let's say of H2 tag. What I can do is I can just give that element as selector. So I'll just give at T2. And in declaration, I'll just give font size colon. And let me just give, for example, Grundy five pixel, because two has to be lesser than that one. That is the reason I've given a lesser size compared to font-size off at one. And now you see here, you see this is the x2 tag that is fans too. And this looks smaller than font-size of X1. If you want further less, you can just make this as 20, Right? So it all depends on what you want. And I'll just keep it to 25 itself. And let's make this font size of X1 little bigger. That is 32, so that it looks more beautiful. 34. CSS Font Weight: Hello everyone. Let's discuss about font-weight property. Font-weight defines the font boldness or font density of the text. For the font-weight controls the thickness or compactness. Or you can just say that it controls the heaviness of the text. For this, we use font hyphen weight property. So for this, let's say if I just show you this example, we have booths and fun. And this is X1 tag. And if I just apply font-weight property, so I'll just give font hyphen. Wait. And if I just show you that, if I just change it to font-weight as board, let me just show you. If I just give font bold. Now you see how it looks like. Similarly, if I just change it to font, normal, you see this is how it looks like. So you can just compare this normal with bold. So this is world and this is normal. Similarly, if I just give font lighter, you'll notice that this is lighter font weight, right? So in this way, you can apply font-weight. And for our case, what I'll do is I'll just give font-weight, bold for x1 and x2. What I'll do is I'll just give formed hyphen weight and I'll just give lighter. So this is my font weight for H2, and this is the font-weight for X1. For that tip in this video lesson, Take care, Bye. 35. CSS Font Style: Let's continue further and discuss her boat font-style property. Font-style is used for styling the font text. And it can take few values. For example, by default, it will take font style as normal. And let's do one thing. Let's just call it font-style for h5 tag. So you see here we have at 50 tag for this. I'll just give a triumph. So I'll just select this particular tag. And inside this, I will just give font hyphen style. So for font-style, we use font hyphen style. And if I just give normal, you see by default it is normal. And you see it is not changing anything here. So for example, this particular target is an edge five. Similarly, you see here for France to, that is under this we have Paris and then we have this date. And this is also at five tag. And if I write font-style colon normal, it is by default the same thing. So it is not going to change anything. But if you notice, if I just change it to font-style italic, now you'll see it is it italic integer? So metallic means that it will appear in italic text. That is, it will be little cursive in nature. So you see here it has little cursive. Similarly, in place of Italica, we can also give oblique. And you see here it is also like a metallic, but it is more like a sloping text or it is like a slanted or mentor text, right? And if you compare the Italica with oblique, please know that font-style italic is used more compared to font-style oblique. So I will just, it does italic. And now you see here it isn't italic, right? Similarly, if I just come down, you'll see here also it is at 50 tag and it is italic, right? So this is how you can use font-style property of CSS. Thanks for joining. Take care. Bye. 36. CSS Font Family: Hello everyone. In this video lesson, we're going to learn about font family. So browsers do not support all the fonts. So in this case, you see that I'm using Google Chrome. And this is one type of browser similar to Google Chrome. You have multiple browsers. For example, Internet Explorer. You have Mozilla, Firefox, then you have Safari and so on. So all these browsers do not support all the fonts. And you need to use multiple faults to be on safer side. And for this, you can use font-family property, using which you can choose from a list of fonts for your website. The CSS font family property defines the priority for the browser to default from multiple phones. And for this, we use a font hyphen family. So let's say for this particular website, what I want is I want that the main font for this website should be Arial. And if Arial font is not available, or if that particular browser does not support Arial font. Then next font it can take is the Homer. And if the hormone is also not supported, then it can dig sense hyphen Serif. So for that, what I can do is I can just go to the body tag. And here I can define the font family. The reason for me to come to body tag is because all the other tags are defined inside this body tag. So you'll see here inside this body tag, all the other tags are defined which are visible in the browser. All right, So I'll just come to body tag. And here I will just say font hyphen family. And first, I will just define that it should have a real font. So if I just give Ariel, now automatically, you see here default got right, and this looks more beautiful and it is supporting a real, That is the reason it I changed to Arial font. If Israel is not available, then I want Tahoma. So that is the reason I'm going to just give here comma, and I'll just give the Homer. So for example, if this font is not available, then only it is going to take the homophone to. So for example, let's say if I just misspelled it or if I just give it a wrong name, let's say a Rayleigh. You see here. Now just taking this the homophone. And if I just change it to Arial, now you see it takes a real phone. And if these two fonts are not available, I want the browser to consider sans serif. So I can just give you a sense hyphen safe. And you see if I just give a wrong name, for example, areola. Here. I'll just give the whole mom. So I'll just give to a, now you see this has taken this sans serif font. So if I just remove this, you see how it looks like. This is the normal font. And you see this is sans serif font. Similarly, if I can just remove this, now you see it has taken the arial font. And suppose I want that. At first, we're done iFont, then I can just give her a start. That is where Donna. And now you see the word on a pointer. Right? So at this moment, first it will consider the word on afford if this font will not be available, or if this font is not supported by this browser, then it will check it real font. If this is also not supported by the browser, it will check the HMO point. If the Homer is also not supported by this browser, it does going to check for Sans Serif font. And if all these forms are not supported, to see if I just delete everything. This is the normal font which is going to be supported by this particular Bowser, right? For this moment, let me just keep the font family. And I don't want, we're done. I just wanted to show you an example. For this moment, I'll just keep Arial font. This looks beautiful. You see here how this looks in the navigation bar also you see it looks beautiful. So this is how you can use font family, and it is better to give a semicolon at the end. So that checked in this video lesson. Take care. Bye. 37. CSS Text Align: Hello everyone. Let us discuss about text align property. So text align property is used to set the alignment of the text to either left side, right side, or at the Center. For example, you can see that we have this image gallery, and this is at one tag. And if I want to align this text to any different position, I can do that as well. For that, I have to use text hyphen aligned. So if I just give you text hyphen align. So this is my property. And if I want to align this to the right side, I can just give you right. And you see it has aligned towards right, right, right. You can see here it has aligned towards this right trait. Similarly, if I just give text align left, you see it will be aligned to left. And if I just give text align center, you see it will be aligned to the center. Right? So this will happen for all the actual intact because I have given text align center for all the tags. So if you just come down, you see this is also a 20 tag and this one is also aligned to center. In the same way. Let's say if I just come to my footer. So you'll see I have this footer tag. And if I want to align everything in this footer to Lecture Center, I can just go to the footer tag. I mean, I'll just go to the photo selector in my CSS. And here I will just give text hyphen align, Colon center. So I can just show you the output. So you see here now what is aligned on the center. So let me just remove this text align center. Now you see it is towards the left side. And if I just change it to center, you see now this particular text is our datacenter of this particular folder, DAG. So that is how you can use text align property of CSS. 38. CSS Text Decoration: Hey everyone. If you want to decorate a text, then you can use text decoration property. So what exactly you can decorate using text-decoration property. So for example, you see you have this at one DAG. And if you want to underline this particular text, you can use text-decoration property. For that. I will just give text hyphen decoration, colon. And to underline, you have to give the value as underlying. So I'll just give you underline. And now you see here that this particular exon tag is underlined. So I can show you that all the tags in this website is underlined. Similarly, if I just come down, you see here, now this is LaTex one. I think this is as to tag. That is the reason it is not underlined. But all the tags which are H1 tag are underlined. So you see here this is Towson and fun, and this is also underlying. Now at this moment, I do not want go underlying this because this does not look good. So I'll just remove it. But I just wanted to show you that you can underline your text using text hyphen decoration, colon underlying. In the same way. If you want to remove an existing decoration, then you can do that as well. For example, you see here this is part of a tag. So you see here using ETag, we have defined home, gallery, tools, timetable and contact. And if I want to remove existing declaration of this particular text, then I can do that as well. So by default, at this moment, you'll see that home, gallery, tours, timetable, and contact are underlined. And if I want to remove that, what I can do is I can just select the ETag first. So let me just select the a tag. I can just give a tag. So this is my selector and I'll just give brackets. That is curly bracket. And inside this, I will just give here text, hyphen decoration, colon. And here I want to remove this underlined, right? So what I'll do is I'll just give texture degradation column none. That means there won't be any decoration for this particular text. Now you'll see here the underlying is gone. In the same way, you can also use text. Decoration is overline. So if I just give her text decoration as online, you'll see here that we will draw a line over the text. In the same way if I just give text decoration column line through it, we'll draw a line through the text. So let me just show you that as well. So if I just give texture degradation colon line through. Now you'll see via having a line through these texts, right? But at this moment, we will keep it as text decoration as null so that I can remove the underline from all these anchor tabs. So that's it in this video. Listen, Take care. Bye. 39. Styling Classes - Part 1: Hello and welcome back. If you remember, we had coded some classes, that is class equal to nav bar. Similarly, we have class equals two main image, that is mean IMG. We have class equals mean. We have class gallery. Similarly, fill, just come down. We have class equal to stack IMD. Alright, let us see how we can style all these classes. So you have to follow the similar approach. That is, you have to give the selector and then you have to give declaration. So for example, if I want to style, let's say class mean. So if I just come up with CVI, have a class called me. And if I want to style this, then first, I will just give the name of the class. That is mean. And then if it is a class, please note carefully. If it is a class, then you have to give dot and then class name. So I've given dot and then class name. In this case it is mean. And I have to give curly braces or curly brackets, right? And let's say that I want to give a padding of 10 pixels. So if I just give padding, and if I just give 10 pixel, now, if I just show you, now, if you just see the output, let me just remove the padding. You see here the difference that now the texts are very closer to the 1D. So I'll just give a padding. And now you'll see there are some spaces between the content and the boundary. In the same way, if I want to style this particular class, that is mean IMG, then what I have to do is I have to just give dot and then name of the class. That is mean IMG. And I have to give curly brackets. And inside that, whatever you want, you have to give that particular state. So for example, let's say that for this particular image, I want to make sure that this is the image name, right? So this is my image name. And you'll see here, this is the JPEG image. And if I just show you the output, this is my image, right? And if I won't drag, this image, should take a 100 percent width, then I can just give your width colon 100 percent. And now you'll see here that this particular image has taken a 100 percent of the width, right? In the same way, you'll see we have another class called gallery. If I want to style this gallery, what I have to do is I will just give here dot and then className, that is Gallery, and then give the opening and closing of curly brackets. And inside that I have to give the properties which I want to set. So for example, you see these are all the immediate for galleries. So this is first image, this is the second image. This is 30 meters, and so on. So let's say I want to add three images in one particular rule. One beside the other. Then what I can do is I can just give her width as 32 percent. And you see if I just give it as 32 percent, let me just show you the images. Now you see overall from here to here, the width is always a 100 percent. And if you'll see, and if I want, I should have three images in one row. So you see, ideally I should give 33, 33, 33, 33 percent, because 33.33 multiplied by 3 is approximately a 100 percent, right? But there will be some exciting spaces which by default browser creates or there might be some words related to padding or margin and so on. That is the reason to be on safer side. I've given width as 32 percent. Similarly, let's say I can also add a height. So I can just say height. And let's add a height, for example, 240 pixel. And you'll see now this height is increased and the images are not very clear. But I can reduce that also. So I can just make it as 200 pixel, right? Similarly, let's say I want that, I should add a padding of one pixel. Then what I can do is I can just keep your batting has one pixel. And you'll see now I have a little more spaces between two images and attend also I will be having extra spaces as batting. Now, if I just come down. You see here in my HTML document, I also have a class called stack image, that is stack IMG. And if I have to style this particular class, I see that this is an image. So this is the image I'm talking about. And assume that I want that this image should consider a 100 percent of the entire width. Then what I can do is I can just select this class. So I'll just give you dot stack, IMG and just give curly brackets, that is opening and closing of curly brackets. And I can just give here, for example, width as 100 percent. And you notice that this looks beautiful. This looks totally clear and it is taking a 100% of the total width. Similarly, if you want, you can add some margin. So let's say I want to add a margin towards the left and right side. So I can just give you, for example, margin lift. And let me add a margin. For example, I can just say auto. For that based on the browser. It will automatically take the margin. In the same way if I just give margin right as auto. Now it will take the automatic margin and left and right side. In the same way. I can also give something like this, that is height and also auto. All right, So in this way we can stay classes. And I see here that we have do a chart tags. So what I can do is I can just delete one HR tech. So let me just come down. You'll see here we have an anchor tag here. And just after that, we again have a chart deck. So I think we don't require to HR tags, right? So let me just do one thing. I'll just delete this HR tech and you'll see, you know, that now it looks proper, right? So now in this video lesson, we learned how to style classes. And we have styled four classes. That is mean, mean IMG, gallery and then stack IMG. So that's it. In this video lesson about classes, we will proceed further and see more examples of styling classes and next video lesson. Take care. Bye. 40. Styling Classes - Part 2: Welcome back everyone. So in the last video lesson, we have styled some classes. And you see that we have another class that is navbar, for which we did not stay in the last video lesson. So let us do styling for this particular class in this video lesson. So you see here, if I want to style this nav bar, that is this particular class name, then I can just select this particular class name with the name dot. Now bar. And I can just give curly brackets. Inside that. I have to give list of properties. Now please note here we have some tags inside this nav bars and beats or anchor tags. And suppose I want to style these anchor tags which are present inside this nav tag, then I can just give you dot nav bar space E. That means what I'm trying to say is that just go to navbar class and just open the tag. That is a tag in this case, and then give all the declaration here. And please note, we have already styled the a tag. So this is a general styling for a tag. And this is going to style all the Etags which are present in this particular HTML document. But if you want to style the ETag, which are only present inside this nav tag, then you have to give dot nail bar. That is, you have to give the class name. And before that you have to give a dot followed by a space. And then you have to give the name of the tag which you want to style. And in this case it is a tag that is anchor tag. So first let me just remove this, or let me just do this. First, let me just copy this. Let me just copy this data is text decoration none. And if I just delete this, you can see that we have the underline here, right? So let me just delete this. And what I'm going to do is I will just put extra decoration, none here. So you see, it is also able to make sure that it is. It removes the existing declaration and it remove the underlying. Similarly, let's say that if I want, I can also add padding property. For example, if I just give you a padding and let's say at top and bottom, I want nine pixel. So I can just give you nine pixel. And you see here it has nine pixel from all the sides, right? At this moment. So what I want is I want nine pixels from top and bottom. And let's say I want 10 pixel from left and right. So I will just give a space followed by 10 pixel. And this means that in the top and bottom I have nine pixel, and in left and right I have 10 pixels of padding. Now, I can see that this particular text color is blue, so it is not so much visible. And what I want is I want to change the color to white. So I will just give here color and I will just say white. And now you'll see that it looks beautiful. It has some spacing between two anchor tags. And we also have sufficient padding and the color is white. And this looks beautiful. Now you see that when I just bring my mouse over home, nothing happens. Once I click it. You go to home. Similarly, if I just click on gallery, you can go to gallery. And if I just click on Tools, you'll see that I'm going to do and fun section. Now, what I want is if I just hover my mouse, I mean, if I just bring my mouse over any of these anchor tags on mouseover, I want to set some properties for that. What I can do is I can just give here dot navbar and I will just select a. And if I just want to do some properties, or if I just want to set some properties on mouse hover, then I have to use colon hover. All right? And I'll just give two curly brackets that is opening and closing. And let's say that what I want is I want that if the user or anyone just hovers mouse over a particular anchor tags, then it will change the background color. So let's say I want to change the background color, so I'll just give you a background color. And let's say I want that. It should be gray color. So I can just give background-color colon gray. Now you'll notice in the output, if I just go through these tags, I mean these anchor tags. If I just mouse hover over it, if I just put my mouse over it and just holds through it, you'll see background color changes. You don't have to click it. And you just hover your mouse over it and you will see that the color, I mean, the background color, will change it to gray color. Similarly, let's say I want to change the color to black. So you see here, when I hover and what I want is I want the color to change to some other color. For example, at this moment it is white. So when the user hovers over it, it took change the color to black. Then I can just give you color as black. Now you'll see did not change the color of these anchor tags. I mean, in the navigation bar, but one of the user goes through it. Just do your mouse over and you'll see the color will be changing to black. And you can also see that the background color will change to gray. All right? So in this way, you can set or you can just change the properties of navbar, right? So in this way you can use the nav bar, right? So just hover over this and you'll see that the color is changing. And this looks very good. All right, so let me do one thing. Let me just change this to light gray because dark gray is not looking very good. So if I just change to light gray, you see now it looks very good, right? So in this we do listen what we have seen it. If you want to select a tag which is present inside other tag, then you have to first select that main tag. So here you see we have nav tag, but the name navbar. So I have just given you the name nav bar. So I have just given dot now bar. And then a. And a is this particular tag. Similarly, if I wanted that, once the user hovers over these tags, some things would happen, then I will just give you dot navbar. A colon. Hover. Over is the phase. When the user moves the mouse over the link. Then that particular instant when the user hovers over the link is overstate. And in this case, if I want to change that particular state, then what I've done is I've just given a colon hover and I have just given some declaration, right? So that's it in this video. Listen. Take care. Bye. 41. Styling ids: Hello and welcome back. In Last, we do listen. We understood how to style classes. Now let us see how we can style IDs. So you'll see here we have IDs, for example, table ID equal to this timetable. And again we have section ID equal to ID3 and so on. So let us try to style this particular table ID that is timetable. To style and ID. You have to use hash symbol. So for example, what I have to do is I have to just give you hash and then followed by id name, that is time table, and just give curly brackets. And now you see this is the way to style a particular ID. And inside this, you have to give the properties. So for example, let's say that I want to give the width of this particular timetable. So I can just give something like this that is width. And let's say if I just give it as a 100 percent. Now you see it has spread to a 100 percent. In the same way. Let's say I want to style the th tag, which is present inside this ID. For that, what I can do is I can just give hash timetable and then space DH, and just give curly brackets. And here you have to give the list of properties. For example, let's say I want to give a border. So for that I can just give border. And suppose I want to give a solid border of one pixel, which isn't black color. I can just give you one pixel. Solid. And you see here the header, the table header tag, that is th tag is having a border of one pixel, which isn't black color. And here by default, if you don't give a color name, it will be black color. For example, if I just change it to, let's say orange, you'll see that I'm having orange color. And whatever color you will give here, it will reflect that particular color. So at this moment, if you want, you can keep it as orange, but I do not want to change it to orange. So I'll just give you one pixel, solid. Let's give particular padding. So I'll just give her padding. And at top I want to give six pixel. So I'll just give you six pixel space. And then in the right side, I just want to give one pixel. So I'll just give one pixel. And let's give six pixel again at bottom. So I'll just give six pixel. And in left side, I will just give two pixel. So you see here, this is the value of padding top. Padding, right? This is padding bottom. And then this is padding left. In the same way. If you want to add a background color. What you can do is you can just give her back ground color to a particular color. Let's say I want to add a tomato color so I can just give her to a macro. And you'll see here it changes the background color, total metal. Similarly, if I want to align the text to left side, I can just give your text hyphen align as left. And you'll see all the texts are aligned to left side. Similarly, I want to change the text color to white. For that, what I can do is I can just give your color colon white. So it has changed the text color to white. And I can see that the size of this text is quite big. Let's change it. For that. I can just give font hyphen size. And at this moment you see here we have this font size. And if I just give her form size colon, let's say 13 pixel. Now you see that the font size is reduced little bit, and now it is having 13 pixel. In the same way. You can give styling for td tag also. So for that what I'll do is I'll just copy this th tag. So first I will select this and just give right-click, click on Copy. Just come here. Enter, give again Enter, and just give right-click and click on Paste. And here I will just change this to TD. And border is fine. That is one pixel solid padding. I'll just give 10 pixel uniform. Or let's say I can just give a padding of five pixel uniform, right? And for example, background color. Let me just give as medium violet red. So I can just give your medium violet. Red. And text-align is left. So that is good. And color is also white. And let me just give the font size, for example, this time I will just give font-size as 12. So you see this form size, that is for th tag, it is 13. So you see here it is 30. And for td tag, what I've done is I've given the font size as 12 pixel. And also you see here it is looking as if all the cells are having their own bottles. And if you want to collapse all these borders, what you can do is you can just go to the mean timetable ID. And there you can just give your border hyphen collapse, colon collapse. Now you see if I just give border hyphen collapse, colon collapse, it will collapse all the borders. So you see, if I just remove this, this is how it was previously. And if I just give border call f colon collapse, now you see how beautiful it looks. And if you don't want to give this much big-name, what you can do it, you can just sort and this also, for example, for Monday, I can just give you a more IN. And if I just show you, you see here, it will show as I'm one that is M1 for Monday. For Tuesday. I can just see like this that is PUE for Wednesday. I can just see WVD for Thursday. I can just say df QRS. And for Friday I can just say f. And if I just come down, you'll see now it says Monday, Tuesday, Wednesday, Thursday, and Friday. And you'll see now it has lot of values like this. And if you want to align the text at center, what you can do is you can just come here and you can just see like text align as center. And you see no and heading, all the texts are aligned at center. If you want the text to be aligned at center in td tag also, you can just come here and you can just say center. And you'll see it will be aligned center. But if I just give text-align as left, you see it looks more better for td tag. So that is the reason I will keep it as it is. So that's it. In this video lesson. In this lesson, we learned how to style an ID. So keep practicing and do reach out to me in case if you are having any doubt. Thanks for joining. Take care. Bye. 42. Inline CSS: Hello everyone. By now, we know what is external CSS. For an external CSS, we create a CSS file. And then we link this CSS file to this HTML file using link tag. And the link tag is present in the head tag. But in this particular tool that is in JSON.com, we don't have to give link tags separately because this does that automatically. All right, so this is one form of CSS. Another form of CSS is called as inline CSS. So for example, I just come down. You'll see here for contact form, we have used the H2 tag. And this contact form is present towards the left side. That is, it is left aligned by default. And if you want to center this particular text in the center or in the middle, then what I can do is I can directly just give inline CSS. And for that, what I have to do, I will just give here, I'll just come here. And I have to use a style attribute. So if I just give her style equal to, and then here I have to give my declaration. So this is the attribute that style. And then inside this, we have to give declaration, and this is the selector. So in inline CSS, you'll see here we have selected this particular tag. And there itself in that line itself, we are just giving their styles. So I'm just giving a silo equal to and then a particular declaration. So let's say I can just give a property, for example, text hyphen align, Colon, center. And now if I just come down, now you see here for this contact form, now it is aligned at the center, right? So previously, I guess show you if I just remove this particular attribute that is style equal to and then particular declaration. Now, if I just come down, you'll see it was towards the left side. Right. And if I just give that particular declaration back, now you'll see we have contact form in the middle. So in this case, we have given style on the particular element itself. I mean, on the particular tag itself, on the same lane. So that is the reason it is called us in line because you are giving their style in line with the tag or element. And let us do one thing. What I'll do is I'll just copy this and let me just delete this and put inside this form tag. Right, so that this looks more beautiful. And you'll see here we have this contact form here. And what I can do it here, let me just remove this line. And here I will just give an H1 tag. And I will just say contact me. And let me just close the tag. And again, I will just give an HR tech. And let me just push at one tag to write so that this looks in aligned state. Let me come to the output. And now you'll see here we have contact me and let me just remove one extra edge, our tag here, it does not required. And if I just come down, now, you see here we have contact me. So this is one, It's one tag that is main heading tag. And here we have this H2 tag. Similarly, I can see that for this study timetable, I see that it is at T2. I feel right. Let me just come up. And you see here it is S2 tag. So it is better to make this as X1. And let me just change this to X1 at end also. And if I just come down, Now you see it is at one tag. And now it has come to the center. Because you see here in CSS for H1 tag, we have defined the property and value. So for this particular one, we have given that text-align should we center? So that is the reason, since this is an H1 tag. So it automatically aligned at the center, right? So in this we do listen via have learned what is inline CSS, right? So what we have done is we have just given a style. So in inline CSS, we have just used the style attribute equal to. And then we have to give the declaration, that is property colon value. So center is the value and property is excellent. So we're trying to align the text at the center due to which this contact form has come at the middle or at the center of this particular form, right? So that's it. And this we do listen. Take care. Bye. 43. Note about Inline CSS: Hello everyone, Welcome back. One important point, which I just want to tell you is that when you code inline CSS, then we know that we just have to change the HTML file. And if you notice, we have given inline CSS on this particular at two tag. And that is the reason this particular x2 tag is changed to align the text at center. But please note we have other x2 tags as well. And if I just go up, you'll see here we have this S2 tag. Similarly we have this edge SU tag, but these two as two tags will not get changed. And the reason is because for these two as two tag, we don't have any inline CSS. And it will only follow this particular rule of CSS, that is font-size as 25 pixel and font-weight is lighter, so it will be 25 pixel. Similarly, this particular attack will also be 25 pixel and font-weight will be lighter for both these as two tags. But inline CSS will not be applied on these two as two tags. Because we have not coded inline CSS in these two as two tags. Similarly, if I just come down, we have coded inline CSS on this ASU tag. And along with that, this ASU tag will also have font-size as 25 pixel and font-weight as lighter, right? So in this particular as to tag, we have this styling. Apart from this styling, we also have this inline styling as well. I mean, inline CSS as well. So please remember that do not get confused. That white DES AES two tags are not getting aligned to center because there is no inline CSS where it says that style is text-align to center. So you'll see here, if I just go up, you see for France to, it is not showing in the center. It is still left aligned. And for India to also, since it is as to tag and it is defined here. And you'll see here it is still left align, center align, right. So that's it in this video lesson. Take care. Bye. 44. CSS Opacity: Hello and welcome back. What is opacity? Opacity is the degree of transparency of an element. And it can take a value between 0 to 1. Suppose you have an image, and you'll see at this moment, this image looks like this without applying opacity. And once you apply opacity, for example, if you just give opacity colon 0.5, then you will notice that the contrast of the image will be decreased and it will look something like this. Similarly, if you're just give opacity equal to 0.3, the contrast of the image will be reduced even further. And it will look more lighter in shared. And if you just give a very small value of opacity, you will see that the contrast of the image will be reduced even further. And the image will look something like this. So the lower the value of opacity, very lighter the shade of the image will be. And higher the value of opacity. The image will look exactly like the main image. With this, let us take an example of opacity. Alright? Assume that what I want is that if I move my mouse over these images, then these images should become lighter in shared only when I move my mouse on it. If I move my mouse away from it, it should come back to its original color. Then for that, we can use the opacity. And you'll see that these images are set by using class as gallery. And we are using IMG tag for that. So we will just select this particular IMG tag. Under this, we will select this gallery class. For that. What I'll do is I'll just give IMG. So I EMG is the selector. And inside this, I have to give dot gallery. Because from this IMG tag, I want to select this class. And to select a class, you have to give dot class name. And I will just give her curly brackets. And inside this, I will give my property. I'll just set my opacity. So I'll just give her opacity. And let's give an opacity, for example, 0.5. And at this moment you see this particular image now is in lighter shade. But I do not want this. What I wanted once the user hovers over these images, at that time, only the shade of the image should change. So for that, I will just give her colon hover. Now. Colon hover means on mouseover. That means if you just bring my mouse over this particular gallery class from the image tag. Now you see here it will become lighter in shade. And if you just give a very low value of opacity, you'll see if I just give, for example point to. Then once you move your mouse over the image, it will be extremely light. You see here it is very light. And if you just give a high value of opacity, for example, 0.9, then on most hover, it will be almost like our original image. So you see here, the mouseover is happening and you see that a very light blink is also happening. That means the opacity of the image is changing, but it is not changing drastically. So normally, I used to give an opacity of around 0.5 to 0.7. So between 0.5 to 0.7. And at this moment, I will just give opacity as 0.7. And now you see here, if I just move my mouse over these images, these images will give a blinking feature. And this is due to opacity which offset. Another point I can see here is that these images are looking like it stretched the imaged because I think we have set a high value of height. So let me just check photo gallery. So this is my gallery class. And I can see that we have set a height of 200 pixels. Now, instead of 200 pixel, what I can do is I can just give height as auto. And you'll see if I just give height as auto automatically, the browser will set the height of these images based on the size of the browser, right? So it is better to give height as auto in this particular case. Now, another point to note is that I have set the opacity for only these images. I have not checked opacity for my main image. For that, we have mean IMG class, right? And here I have not changed anything. Similarly, you see if I just come down, we have other images as well. And I'm not going to set any opacity for these images also. So I'm just going to set opacity for my image gallery images. All right, so that's it in this video lesson. Take care. Bye. 45. Fixing small things in the website: Hello and welcome back. So most of the things we have already covered by creating the website, and there are few minor enhancement which can be done. For example, I always prefer to set maximum vert for form. So for example, I can just give something like this. That is max width. And let's say I can just give 90%. Now, I've set the maximum width of this form as 90 percent so that at any point of time, it can take a maximum width of 90% of the overall width, right? And if I just come down, see, this footer does not look very good because the content is present at the top and it should be at the center at this particular footer tag. So for this, what I'll do is I will just give line-height property for line-height property is used to change the height of the line. So let's say if I just hit here line height, and if I just hit, for example, let's say 40 pixel. You'll see here that this particular content looks in the center of this particular footer tag. In the same way, you can also give line-height in terms of percent. Also, for example, you can give something like this that is line-height as for example, let's say 250 percent. And now you see it is showing at the center of this particular footer tag. You can also give Lane in terms of numbers. For example, if I just give line as, let's say two, that means it is twice the height of the default line height. Similarly, if I just give, let's say three, now it is three times the default line height. But I normally use to prefer line-height in percentage. So I just give you a line height as 250%. So now if I just show you the output, everything looks fine. So let me just come up. And one important thing is, you see here we have the navigation bar at the top. And if I just scroll down, you'll see the navigation bar is not visible. If you want to make sure that this particular navigation bar is always fixed at the top. Even though if you just scroll down, it shouldn't be visible at the top. Then port achieving this, you can use position property. So if I just go to my header, the CV have header tag. And here we have defined this header. I mean, we have given the styling of this header tag here. And if I just go up in my HTML document, you see here this is the header tag in HTML. So below this header tag, we have this navbar, and inside this, we have this list of anchor tags. You'll see visible here. So what I'll do is I'll just fix this header tag. So let me just come here. And I will just say position as fixed. And if you just give position has fixed, this particular header will always be fixed. And I can also give top as 0 pixel, or you can remove this pixel also. So by default, if you just give top 0, that means it is 0 pixel. And if you just give top as 0, that means from the top of the page there is no space. And if I just give position as fixed and top as 0, you see here, if I just scroll down, now you see this particular header is always fixed. You can see here it is always fixed at the top, right. So if you just come down even further, you will always see that this particular header is always at the top. So if you want, you can do this using position property. And I have just given position as fixed because I want to fix this at particular position. And I have given top as 0, because I want that debt should not be any space from the top of the speech to this header of the page. All right, so that's it in this we do listen. Take care. Bye. 46. Fixing a minor issue: Hello everyone. Let us try to test this website and just see that whether everything is working properly or not. So if I click on Home, you see I'm at the top of this website. That is fine. If I click on gallery, you'll see I'm going to this image gallery. If I click on Tools, you see it is screwing France to. So actually it took true doors and fun. So it took, so from here, I could throw something like this. We can fix this as well. So for example, if I just come to my HTML tag, let me just see where tooth and fun is there. So I can see that it is present here. And let us do one thing. I will remove this HR DAG from here. So I've just deleted this HR tag and I will add that at our DAG here inside this particular section, right? And if you want, you can also add another line break. For example, Bier, so that you have an extra line. Now if I just click on this tooth, now you'll see tools, tools, and fun, right? Similarly, let's click on timetable. You see we are in a study timetable. If I click on Contact, now it goes to contact me. And this contact form also looks fine. So if I just add something, for example, some deep and let me just give email here. So I can just give my e-mail ID. For example, let's say test, test 1, 2, 3.com. And I can select any topic here, for example, HTML and CSS. And if I want to write something on this particular text area, I can do that as well. So for example, I can see these rate this course if you like it. And please note, this is just the structure of the form. If you just click on the Submit button, it is not going to submit this form anywhere. Because to submit the form, you have to do programming. And HTML is not a programming language, it is a markup language. So for programming, you have to learn and back-end language, for example, you have to learn either PHP or Python or Java and so on. And this course is only about HTML and CSS. So we have just created the template or structure of the form. It is not going to submit the data of this form in a particular database. So that is completely different thing, which is beyond the scope of this course. So let us be limited to HTML and CSS. And you see everything is working, right? So that's it. You have completed this particular website successfully. And if I just click on this live preview button, you'll see if I click here. So this is what the website we are getting. So if you see here, you get everything and once you browse over these images, the image fades also. And you'll see here, this is the paragraph which we had written. Then we have booth and fun section. Then we have this image of my plans too. So actually this is not my image. I've just used this image from pixabay.com, which I've shown in this particular course as well. And then I have given here in their door. And you see this is the image which we have used for India tour. And we have this steady timetable. So we have added Monday, Tuesday, Wednesday, Thursday, and Friday. If you want, you can also add Saturday and Sunday. You can consider that as your exercise. And then you can have contact me form where you have given full name, e-mail. Then you can select the topics which you want to learn. And then you can write something in this textbox area. And then you have this footer also, right? So that's it. Congratulations. You have successfully created your first website. 47. Internal CSS: Hello everyone. So we have already created our website. And if you remember, at the start of CSS, I explained you that we have three types of CSS. The first one we have is external CSS. The next one we have is inline CSS. And the last one we have is internal CSS. So let's say that you have this particular CSS file, which is an external file. And if I just select all the content of this CSS file, let me just select. So I'll just select all. And I'll just give right-click and give copy. And for internal CSS, what you have to do is you have to give all the CSS course in STM will repeat itself and the header tag. So you'll see here we have header tag or not this. You have to create a style tag. So for that, I will just give a style. So this is my opening of style tag. And I'll just give the clothing of style tag. And let me just bring this down. And I'll have to give all the CSS scores between these two tags that if opening style tag and the closing of style tag. So for this, I've already copied this code. So I'll just come here and I will just give beast. And it can just come here. Select everything again, and just press Delete button in your keyboard. So now you see that we have deleted everything from this particular CSS file. So I can just close this file. And now you see here we have given all the CSS statement. All my CSS statement are there in the style tag. This style tag is present within the header tag. So you see here, we have all these CSS scores under this style tag. And this style tag is present in header tag. So just you see here we have this header tag. And then if we just come down, you'll notice that we have this header deck. And between that, you'll see we have a style tag, which is coming here. Right? So this is another way. You can just use a single HTML file. And you can code all your CSS properties until the style tag. And this style tag should be under header tag. So doctorate, I just wanted to show you about internal CSS. But I always recommend you that you should keep your HTML and CSS file separately. So let me just come to this CSS Paulson. And here I will just give right-click and click on paste so that all my CSS property on here. And I will delete the style tag from my HTML document. So everything present inside the style tag, I should also delete. You'll see here, I'll just select and just give gut or I can just press, Delete on my keyboard. So I think I did not select it properly. So let me just select it again. And you see here we have selected this slide deck completely. And I will just press Delete button on my keyboard, right? So, so that now you see here we have this HTML5 and then we have this CSS file. So this is external CSS. And just before this, I have shown you how you can use internal CSS by removing the CSS file itself and keeping all the CSS schools under the style tag, which is present under the header tag off HTML file. 48. Learning HTML and CSS in a Text Editor: Hey, people will come back. First of all, a big congratulations to all of you to successfully complete this website. And we have used JS Bin.com to learn HTML and CSS. But if you do not want to use JS Bin.com, there is another way to learn HTML and CSS. And if you're working on Windows computer, then you have a basic text editor, which is called as notepad. So we can use Notepad to learn as HTML and CSS. Similarly, if you're using Mac, then you have a basic text editor, which is called as text editor. So you can just use text to code HTML and CSS if you're using Mac. But in my case, I'm having Windows computer. And I'll show you how you can code the same example using a basic text editor like more parent. So first, let me just close this. Go to your desktop and here, just give right-click and go to New and click one folder. So you create a new folder with the name. For example, it's DML, hyphen CSS, right? And if we just do double-click, you see at this moment, there is nothing in this folder because we have just created this folder. Now, what you have to do is you can just go to the bottom of your search and you can just type your note pad. And you see that you have this notepad app. So all the windows computer should be having notepad. So just click on this notepad. And now just go to File and click on Save. So if we just click on save, we just select the folder where you want to save. So for example, just go to desktop. Just go to HTML and CSS. So this is the folder which we have created. And here I will create the HTML file. Now, at this moment you see it says file name as star dot TXT. But all the HTML files we should save with the extension as dot HTML. So you see here it is dot TXT, which is wrong. It should be dot HTML. So for that, what you can do it, you can just go to Save As type. And here you see we have texture document. Just click here and select All files. Once you select All files. Now in the file name, you can just give the name of the HTML. For example. You can give any name, but it is better to give the name as index dot HTML. So you see if you have given the name as index. And since it is HTML5, that is the reason I have given dot HTML and I have just selected here All Files. Please make sure you do not select texture document. Please make sure. You have selected all files, then you just have to click on this Save button. And now this is your a steamer document. So you see here, if you're just come here, you see the type it is showing us, Chrome HTML document. Now I'm using Google Chrome as my default closer. That is the reason it showing grown as HTML document. If your browser is Internet Explorer, then by default it will so Explorer as HTML document and so on. So please note it should be HTML document, not text document. So this is my HTML file where I will put all my HTML codes. So let me just go to our website. And this is what we have quartered put HTML. So I'll just select everything. Just give right-click, just give copy. And you'll see here, if I just go to my index.html file and just paste it here, right? So this is my HTML file. And just go to File and click on Save so that everything is saved. Now, just close this. And now here again, go to my Search box and give Notepad. Again. Click on this notepad. And now just go to wild. Click on Save. And this time I'm going to create a CSS file. So for that, I'll just go to Save As Type, select All files. Go to File name and give style dot css. Now please note that I have given the name of the file as style. And if you want, you can give any name. But it does better. Go give you CSS file name as style dot css. And since it is a CSS file, that is the reason I will give dot css. And please make sure that you have selected here All Files. Click on Save. And now if I just close it, you see we have this index, which is STL file, and then we have this style, which is CSS file. You can see here in type, it is showing CSS file. Right? Now you just go to your JS Bin. And let's say you have this CSS file, right? So what you can do is you can just select everything. So I'll just come here and give select all. Just give right-click and just give copy. And go to our styles. And just give based. And just go to Files. Click on Save. Now you can just close this and an index you see here. Now this time what I have to do is we have to give link tag to link our CSS file with this HTML file. So you'll see here we have this CSS file with the name style dot css. And I have to link this file to our mean phi, that is index file. So just come here. And in the head, you know that the link to the CSS file, we have to use link tag. So here I will just give link. And inside this, I will just give REL that is relation equal to style sheet. Since we are trying to link a CSS file, that is the reason we are giving here style sheet. And then just give it a space and just use etc. If that is hyper reference equal to the name of the CSS file with the pot. Now you'll see here, you are using this folder that is HTML hyphen CSS, and your STL file is present here. And in the same folder you have CSS file. So relative to this at KML file, this is the CSS file which is present in the same folder. So you just have to give the name of that particular file. So I'll just give her style dot css. Now. Just go to File and click on Save. So now your CSS file is linked using this link tag. And this link tag must be present under this header tag. And this head tag is the tag which is present under the HTML tag. Right? Now. This is your HTML document. Now, just give double-click. So if you just double-click this file or what you can do is just go to right-click. And you can just come down. And here it says Open With, and you can open this file with any browser as per your wish. In my case, normally I open all the HTML file in Google Chrome. So I will just select this Google Chrome. So click here. And you see here, this is the website which you have built, right? So this is my website. You can see here. It is totally working through click on gallery. It goes to gallery. Click on tours. It comes to tools and fun. Click on timetable. It comes to this location that is a study timetable. Click on Contact. It comes to contact me, right? So basically what I have done is let me just close this. First. I've created this folder that is STL hyphen CSS, right? So this is my folder. Initially it was empty. So I just went here in the search bar at the bottom, and I typed notepad. And let me just give the correct name. So it is notepad. And here I found notepad. When I just click on this, you see, you will get a blank file name. And you just have to go to File and click on save. And there you will be having an option to save the fight. In the same way, I've created two files. That is, this is my HTML file, and this is my CSS file. In my HTML file after link does CSS file using the link tag. So that's it. In this video lesson. I just wanted to tell you that if you don't want to use JSON.com, what you can do is you can directly use a notepad. For example, you have this Notepad editor and there you create one file where you will be having the HTML codes and then you can have another file. So if I just show you this style.css, let me just open this. So I'll open with Notepad. And this is my style.css, you see here. And in this way, you can link this style.css to the index.html using this link tag. So that's it in this video lesson. Take care, Bye. 49. Adding Image directly from the computer: Hello and welcome. We know that we have used 12 images for this particular website. And let's say that I want to use images directly from my computer. Then I can do that as well. At this moment, you'll see that if I just go to index dot HTML. Here, you see that we are using images via this link. You'll see this is my first image. Then we have the second image, and so on. So all these images are from pixabay.com, right? And let's say I want to attach images directly from my computer than what I can do is here, I can create a folder with the name IMG for you. What you can do is you can just go to the resource and download the IMG folder. And here you see I have this IMG folder where I have the list of 12 images. You see, this is my first image. This is my second image. This is my 30-meter and so on. I have just given the name for that. It will be easy for you to code this example. So I've just given the name as a, B, C, D, E, and so on. So you see on total we have 12 images. Now, I do want to link these images from this website, that is from this particular website. Basically, what I'm going to do is I will just attach these images from my computer itself. So for that, what I'll do is let me just go to this index file. And here let me just delete everything from sRC. So for that, just select everything using your mouse. Just give right-click, click on delete. Similarly, select the next one. And once you select this right-click, just give delete. Similarly, select this, give, delete. Select this. Just give delete. Select this, give delete. Select this, give delete. In the same way. I'm going to select the remaining one and keep on pressing Delete button. So you see I have deleted these images. I mean, the path of the images is deleted now. And for the main image also, I'll just remove this particular path. Just come down and you'll see we have this particular link also. So I can delete this as well. Similarly, this link can also be deleted. Now, just go to File, click on Save. Now if you're just come here and just refresh this page. Now you'll see that there is no image in this website. Now, we will add the images. Directly from this particular folder, that is IMG folder. Now, if I just come to HTML hyphen CSS, you'll see that your HTML document is index.html. And if you want to attach the images from IMG folder, then first you have to go to IMG folder for that. Here. Let's come up. And here you'll see here first, I'm going to attach this bigger image, which is my main image. So first I will go to IMG folder for which I have written IMG, followed by a forward slash, and then the name of my image. So I'll just give this particular image name. That is a dot JPEG. So I'll just come here and I'll give a dot JPEG. So please note all these images are in JPEG format. Okay? So you have to give here a dot JPG. Similarly, if I just come here in file, click on Save. Now you go to our website and just click on this Refresh button or reload button. So if you just click here, now you see this is my image, which is directly coming from my computer. And what basically I've done is here, I've given IMG. So this is to make sure that I go to IMG folder and then forward slash. And I'll give the name of the image with image type. So this is JPEG image. That is the reason I have given E dot JPG is a name of image and GBD is a type. Similarly, you see here we have list of these images and one by one, we can give the path of these images. So for the next one here, I can just give here AMD, just to go to IMG folder forward slash b dot d b d. Similarly, let us come here and give IMD. Img holds less c dot JPEG. Again. Come to the next SRC, give ING forward slash d dot JPEG. Come here, give ING forward slash E dot JPEG. Then come here, give ING forward slash F dot JPEG. Let's come here. Give IMG forward slash g dot JPEG. Then come here, give IMG forward slashes dot JPEG. And I can see here, I have just given a coma by mistake. So it should be dot. Now come here, give I dot JPEG. And before that you have to give the folder name. So it is IMG forward slash. Now come here, give ING forward slash j dot JPEG. Just come to file. Click on Save, and go to your website. At this moment you see the images are not showing under Image Gallery. So just reload the speed and just wait for some time. And you'll see that now all the images are flowing. And these images are from your local computer. And you see remaining we have two images. So we will load them as well. So let's go to index dot HTML page. And you see here till j dot JPG, we have already added. Now let's come down even further. And here we will give IMG forward slash k dot JPEG. Similarly, here, I'll come and give ING forward slash S, L dot JPEG. Just go to File and click on Save. Just go to your website. Just reload this by clicking here. And now you see here that all the images are flowing. And in this case, we have used all the images from our local computer, that is from our IMG folder. 50. Final touch - Adding a pipe symbol in navigation: Hey, people will come back with this. You have successfully completed your website. And this is just the starting of a steel mill and CSS learning. And from here, you can slowly build upon your knowledge of HTML and CSS. And in between, I will try to update the content regularly. All right, so you see, we have this website and you can play with this website, for example, you can change the header color. You can add something in the navigation bar. You can change the images and you can just change the content and the swap side. You can do lot of stuffs and just plight and see how it works. For example, let's say in the header, if you want to change it, you can do that as well. For example, let's say in header, if I just add a vertical line, you see here, if I just add a vertical line here. Similarly, if I just add a vertical line here, this pipe symbol. So again, I just add vertical line, that is a pipe symbol. And here also if I just add a pipe symbol, let me just go to File, click on Save, and just go to your website. Go to this particular place that is reload the speech. So just click here. And now you see here we have a pipe symbol between each anchor tags. Write in this way you can just play with your website. Just try to change the content here. Just try to style in a different way. Just change the images. And you see here, This is us to tag. You can change this to S4 tag, then you can just underline it. And you can do a lot of stuffs based on what you have learned till now. So that's it. Keep on practicing and reach out to me in case if you have any doubt. Remember that practice makes perfect. So keep on practicing. Take care. Bye. 51. Thank You: A big, big, big congratulations to all of you for completing this course. If you have any doubt, please reach out to me any point of time. And if you love this course, please spread the scores to your friends and family members and please try to read the course if you loved it. If you find that there is some concepts which needs to be cleared again, I will try my best to clear all your doubts related to that topic. So once again, I would like to thank you for enrolling in this course. And this is just the starting of your HTML and CSS learning. Once you learn that, it will be like a pillar in your carrier. And later point of time, you can build, building blocks on top of your learning of HTML and CSS.