Design A Complete Responsive Website From Scratch Using HTML5 CSS & JS | Beginners Guide | Godson Thomas | Skillshare

Design A Complete Responsive Website From Scratch Using HTML5 CSS & JS | Beginners Guide

Godson Thomas, Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
54 Lessons (3h 32m)
    • 1. Course Introduction

      3:40
    • 2. How The Course Is Structured

      1:36
    • 3. Code Editor & Useful Extensions

      3:22
    • 4. Planning The Website: Wireframe, Colors & Fonts

      3:14
    • 5. Designing A Logo

      0:53
    • 6. Get Free Images & Videos For Websites

      0:45
    • 7. What Is HTML?

      1:12
    • 8. Creating An HTML File

      1:37
    • 9. Headings & Paragraphs

      3:09
    • 10. HTML5 Boilerplate

      3:48
    • 11. Nest Tags

      2:05
    • 12. Line Breaks & Horizontal Rules

      1:34
    • 13. Images

      2:11
    • 14. Anchor Tags

      2:47
    • 15. Divs & Spans

      4:22
    • 16. Lists

      3:01
    • 17. Tables

      2:23
    • 18. Forms

      3:19
    • 19. Radio Buttons & Dropdowns

      3:12
    • 20. HTML5 Semantic Tags

      2:01
    • 21. Audio & Video

      4:34
    • 22. CSS Introduction

      1:21
    • 23. Ways To Add CSS

      3:06
    • 24. CSS Selectors

      8:36
    • 25. CSS Properties

      5:56
    • 26. Pseudo Selectors

      6:07
    • 27. Display Properties

      5:56
    • 28. Box Model

      5:39
    • 29. CSS Specificity

      7:32
    • 30. Brief Introduction To JavaScript

      5:12
    • 31. Creating The Files For Our Website

      2:58
    • 32. Markup For Header

      3:16
    • 33. Styling The Header

      7:17
    • 34. Markup For Navbar

      1:38
    • 35. Styling The Navbar

      7:09
    • 36. Markup For The About Section

      2:27
    • 37. Styling The About Section

      1:56
    • 38. Markup For The Work Section

      3:40
    • 39. Styling The Work Section

      5:53
    • 40. Adding JavaScript To Work Section

      5:20
    • 41. Markup For The Testimonials Section

      2:41
    • 42. Styling The Testimonials Section

      1:54
    • 43. Coding The Functionality of The Slider

      4:17
    • 44. Designing Contact Section

      2:51
    • 45. Designing The Footer

      3:22
    • 46. Updating Navbar Links & Smooth Scrolling

      7:23
    • 47. Adding Responsiveness

      10:59
    • 48. Mobile Navigation

      6:52
    • 49. Testing & Bug Fixing

      3:43
    • 50. Hosting Our Website

      3:36
    • 51. Making The Contact Form Work

      3:46
    • 52. Web Design Exercise

      0:45
    • 53. Web Design Exercise Solution (Time-lapse)

      12:06
    • 54. What Next?

      2:09

About This Class

Welcome to this class.

In this class, I will show you how I design a complete website from scratch by using HTML5, CSS, and JavaScript. You will learn everything right from planning your website by drawing the wireframe, selecting the color scheme, fonts, etc. to actually hosting your website online so that everyone on the internet can visit your website.

We will design this website.

e47e47b8

Let me first tell what are the benefits of taking this class:

  • Learn HTML5 and CSS which are the building blocks of web designing.
  • Learn about the web design process.
  • Learn to create a responsive website.
  • Learn how to use 3rd party libraries.
  • Learn how to deploy your website for free.
  • Improve your knowledge by complete a web design exercise.

Who is this class for?

  • Absolute beginners in web designing
  • Anyone wanting to design their own responsive website from scratch.

I have divided this class into several sections.

First Section: consists of an introduction to the class. It also consists of how to plan your website before getting started with actually designing the website.

Second Section: is a crash course on HTML5

Third Section: is a crash course on CSS

Fourth Section: is where we will start designing the website.

I hope that this course will help you learn HTML5 and CSS so that you can design any type of static website.

Happy coding!

Transcripts

1. Course Introduction: Hi. Welcome to this course. In this course, you will learn estimate CSS and even some javascript by designing a complete business website. I strongly believe that the best way to learn Web development is by actually doing it. So we are gonna have a practical approach off learning. If you want to be a Web developer, the bare minimum we should nor is estimable and ceases and they're not hard to learn. In this course, you will learn estimate five and seizes by creating a complete responsive website. You'll also learn how to use phones and icons in your website. Also, how to use external libraries in your website Cheers that them off the website, every organ of design. So this is a distilled version. We have this logo over here and this navigation menu, and we also have this video going on in the background. And if it's scrawled on, we can see we have an about section and we have some text over here and we haven't image on the right end. And if you notice this neighbor over here when we scroll down, we can see that it has a different kind off style, and it changes the background to write and it has a different style. And then we can see that we have this works section over here where we can select any of these images and we get this image displayed over here. And we also have a separate text for each of these images. For if you go to this image will have a different text. This image has a different text. Now, if we go down, we can see we have a testimonial section. We have the slider over here, and when we click on the next button, we can see we have the next testimonial. And we can also go to different testimonies by clicking on these dots. And then if you go down, we have this contact for Onda this button over here and at last we have this social media icons. And when hover over these agency that we have different colors for the Facebook I can we have the color off Facebook and here we have a different color. So each icon has a different color when we're over, and that's basically with the desktop version. Now let's see a demo off the mobile version. This is the mobile version off our website and here we can see if you don't have the menu items over here we have this icon, and when we click on this icon, you can see these many items over here. And when you click on this close button, it goes back. And if you scroll down, you can see we have this about section and it has a differently out over here. Text is at the top and the images at the bottom. And then we have this work section. It was the same as it did with this diversion on. Duh. Here we have the testimonials and the contact form. Now, then we click on any off this many items. We can see that if I click on testimonials, this is how we goto the testimonial section. We have the same effect in the desktop version as well. Let me just show you that. Now, if we click on testimonials, we can see that it's scrolls smoothly toe testimonials. And if you click on this logo over here, it goes toe the header section. So this is basically what we want to design in this course. I hope that you will enjoy this course and learned the basics off development. I'm godson and I have been delivering websites for several years now. I'm glad to share my knowledge with you, so let's get started. 2. How The Course Is Structured: let me give you an idea of how our courses structured. The first section is the introduction section, which you are watching right now, and in the next section we will set everything up. So I'll show you how toe download and install the code editor And also how to install some useful extensions for our code editor and, uh, but also said everything else ready for designing the website. And in the next section, we will have a crash course on estimable five. And here I will show you how to use estimate tags. And in the next section, we will set up all project so he will create our estimable seasons and JavaScript files. We'll get started with the estimable file in this section. Next villa designed the header and the navigation section off our website. Then we'll have sections for designing the about section, the rock section, the testimonial section, the contacts section and the photo section. Then we'll have a section very well. See how toe make our navigation links work and also set up smooth scrolling. And in the next section we will see how to make our website responsive. Then we'll see what are the various options are forcing our website and I will also show you some of the free options that you can use to host your websites. And then in the last section, we will review everything that we have learned and also discuss where to go next from here . So this is basically how our calls is structured. 3. Code Editor & Useful Extensions: Now let's set up the development environment for our project. So first, let's download the code editor. Now. There are a lot of options when it comes to court editor for Web designing, like via scored brackets, Adam Sublime text and a lot more. The code editor that we're gonna use in this course is via scored. So just go to Google and search for via scored and then click on this download link over here. Now here we can CVS code is available for Windows, Lennox and Mac, so just download the version that you need and install it. Now just open the application and here we can see the view scored screen, and you may get a welcome message over here. So now what we'll do is look at some of the extensions that can be useful for Web development. So click on this icon for extensions and here against the all the extensions that we have installed and all the recommended ones, and you can search for extensions over here as well. Now I'll just show you some of the extensions that I use. So one of them is called guides, so just search for guides and this is by spy there and you can see it has a high rating. So what it does is that it shows these guides for the indentations off our code. So you can see we have this indentation and we have this guide or here, so it makes it easier for us toe understand the code. So this is one of the extensions that I used. The other one is called Life Server. So just search for lives our over here, and this is very quick day. And what this extension does is that it creates a local development server for our project so that when you re save our page, it gets reloaded on the browser so you don't have toe reload the browser manually, so this can also save you a lot of time, and the next extension that I use is called rainbow brackets. What this extension does is that it gives the same color for the same level off brackets resemble. We have an outer bracket, and then we have an inner bracket. It gives the same color for the ending off this bracket over here. So if you have a lot of brackets inside brackets then this extension can be really so for you. You can find out which bracket ends where, and the last extension that I want to show you is called color highlight. So this is by Sergey Naumov. What this extension does is that when or you have a color in your ceases and if you hover over this color, we can see we get this color picker over here and, uh, we can go ahead and choose a color, and you can see that the color has changed over here. If he changed his to something else, the color changes instantly. Onda. We can also adjust the opacity. And if you click over here, we can see that it changes to different color morts. So this can also be really useful for you. Now that's basically it with the extensions. Now you can use any modern browser for Web development, but the recommended ones are Google, Chrome and Firefox. So just go ahead and download the latest version off any of these browsers 4. Planning The Website: Wireframe, Colors & Fonts: before getting started with coding. If you spend some time planning and running the basic structure or the wire frame off your website, you can save a lot of time. Including so first of all, we will draw the basic structure off our website. So just grab a pen and paper and start drawing your design not in a detailed way, but just the structure. So here's the wire from that I designed for the website. Now that we have the wire frame off our website ready, let's go ahead and choose the colors that we're gonna use in our website. So let me show you some of the online services that you can use to choose color palettes. So this is one of the popular websites which is used for choosing colors. So what you can do is go toe coolers dot co and click on start generator, and here you can see different colors, and if you press space, we can change the color palette, so just keep present space until you get toe color palettes that you want. So now what you can do is click on lock on one of these colors. So if I click on this color and naive her press space. We can see that the color that we locked stays over here, and the other colors change. So in this way we can look multiple colors that we want, and you can also go ahead and drag these colors toe. See how it looks side by side. And if you go over here, you have different shapes off the color. You can choose the one you want, so this basically a great tool for us to choose our colors. Now the other website that is mostly used is called the flat Your colors dot com. So just go to this website and we can see there are a lot off color palettes over here. Just go ahead and choose one of these, and we can see all these colors over here. If I click on one of these, it gets copied and that the negan pasted in your project. So this is basically how you can choose colors for your website. Now, if you are a graphic designer, you already have a basic idea of colors, and you can create your own color palette. Now, the colors that we're going to use in this website are the following. Now that we have chosen the colors, let's go ahead and choose the phones that we want. So we'll be using Google phones in our website. It's free and you don't even need to download the forms to your system. You can just access it from the Google Phones website. So just goto phones dot google dot com and you'll get this list off all the phones over here. Now you can search for the phones in the search box. We're gonna use just one phone in our website. It's called Real way. This is the phone. So he's just how to click on this. I gone. And if I click over here, we can see we have this Raila phone selected and I will also select the bold version off this phone. So this is the phone that we're going to use in our website. Know what you can do is go to embed and copy this line off court from here, and you can taste it in your estimable file and in this way we can access the phone 5. Designing A Logo: designing a logo is kind of a difficult task. If you're not a good graphics designer, you can hire a designer to design a professional logo for you if you want. But if you're no, do it on your own, then there are so many websites which help you design logos. A lot of them are free once the stool is called canvas, so just go to Canada dot com. And here you can design various things. So just click on logo over here or else you concerts for logo over here and click on this. You can find many templates over here, which you can use to create our own logo. So if I click on this, we can see this template is displayed over here. We can go ahead and changes to something that we want. So in this way you can create your own logo, and after that, just click on Download and Donald the logo. So this is the logo that I designed use in Canada, and we're gonna be using this in our website 6. Get Free Images & Videos For Websites: If you search for something on Google images, you'll find a lot off images, but they may not be necessarily free to use. You mean it to get permission to use those images for commercial purposes. So if you want priority free images to use for free in commercial websites, what you can do is visit websites like pixel pixels or on slash. Here. You can find royal different images, and you can use them anywhere you want. If you want, you can give credit to the Web site, but it's not necessary, so you can use images from these websites. If you can spend some money, then you can also go for paid websites and you can use those images. So I have downloaded these images from the free websites. We'll be using these images in our website. 7. What Is HTML?: Hi. Welcome to this crash course on estimate. In this course, you will learn everything you need to know. Toe right. The market off website now estimate is called a markup language. It is not a programming language because we cannot write any logical statements in it. We cannot write if statements we cannot write loops. It just tells the browser to display what you have written. An estimate. Toe the screen so you want to display a heading in your weapons. You can use attack called It's one, or it's too through at six. And if you want to use an image, you can use attack called I M. G. So basically estimate contains tax. We still the browser to display the contents in a specific way. So if you're planning to become a Web developer, the first thing you need to know is estimate. Because everything you see on a website is basically estimate relentless off what framework or programming language used to generate it. So the first thing is to learn estimate and then you can start learning CS is and then jealous script and then continue the journey from there. So I hope that this course will give you a better understanding off estimates. So let's get started 8. Creating An HTML File: Now, let's see how to create an estimate file. So here in my e drive, I have a folder called Estimate Crash. Course you can name it anything you want. So I just rightly over here and click on open with code. Now, here, you can see our estimate. Crash scores folder is opened in RVs code, and, uh, we can go ahead and create our estimate files over here. So to create an estimate file, just go over here and click on new file. Or you can also go to file and click on new file. And then you can name it anything you want, but the final extension should be estimate. So we just named the file index dot html index. That estimate is a specific filing which is used by most Web servers. Toby displayed as the homepage off website. Now, let's type something over here. Time. Hello from index, start estimate and stay war file. Now, if you go toe the folder, we can see that we have an estimate file and it has this browser Eichel. And if you go ahead and open this, we see that it opens in a browser and we have this text over here. So this is how you create and display an estimate file. Now, if we make some changes over here like, for example, will change this to have the world. And when we stayed with, we cannot see the genius over here right way have to refresh our browser. So let's refresh your page. And here we can see the changes. 9. Headings & Paragraphs: Now, let's start exploring tags. Inestimable. So just delete this on. First of all, we'll take a look at attack called Heading. So we have headings from one through six. So to create a heading, you have to type less than each one and greater than And then you have this closing tax over here. So what are you type inside this edge? One tank will be treated as a heading so religious type heading one over here. And if it saved this, and if I refresh your page, we can see that we have this heading one displayed over here. Now we have two types off tags in estimate. The 1st 1 is a container attack like this. Each one over here. So when we have a container attack, we'll have the tag in and the brackets, and then we closed tag by typing less than forward slash and the name of the tank. And greater than So. This is how you write a container attack for a self closing tag. You don't have to have the second part over here. Just you can close it right here. So add a forward slash Over here. And this is how a self closing bag is written, So we have heading tags ranging from its 12 at six. So let's just copy this a few more times and we'll just change this to s to and we'll change it in the ending as well, and will also change the content and will changes to its too. And now, if we refresh our page, we can see we have the heading one, and then we have the heading to, which is a bit smaller. So let's change all these headings, All right? Now, if we refresh our page here, we can see all the headings ranging from its 12 at six. So it is how you ride heading tags in estimate. Now, the next time we look at is called the paragraph time. So when were you want to write a paragraph? You can use this paragraph tax to create a paragraph dagger type. Let's then be greater than and it is also a container attack. So you need to have this closing tag over here so we can type something over here like this is a paragraph. And if I refresh the speeds, we can see this is a paragraph printed over here. So let's create a couple of paragraphs and see how it looks. So envious. Gold. You have this option off printing some Laura maps and text. So if you want to print some place although text we can just type lore, um, and, uh and then type the number of characters you want. So let's say 100. And if I present damp way, see this huge paragraph displayed over here and we'll just copy this and we fished it a couple more times, and if I refreshed my page, we can see these three paragraphs are displayed over here. So this is how you write a paragraph tag, inestimable. 10. HTML5 Boilerplate: And now we create a basic estimate five structure for our rip it. So the first line in an estimate five document should be doc type estimate. So we have to type less than exclamation doc type and then type estimate lower here. So this test the browser that this is an estimate five document and everything right inside . An estimate should be inside. The estimate attack is also container tanks. Soldiers type. It's Tim Ill. And we have disclosing back over here. And then we have two sections inside. Estimable one is the health section, and the other is the body section. So head over here it is also a continent tag, and then we have a body section. So with that body over here and what were the type inside the body section will be displayed over here on our brother. And this head section is for the meta later. So, for example, if you type title, which is the tag used to display some text on this brother type. So here, if it time learning estimable. And if I save this and if I refresh my page, notice this ah, estimate out index text over here and If I refresh, we can see it changes toe learning estimate. So in this way you can change the title off your website. We have a lot of times which you can use inside the head section will just add one more tag which is called meta and in attacks, we can also have attributes. So we'll set an attribute toe this meta tag The activity is called car sit and they will set to utf eight and this is a self closing tax. We can just close it right here. Now what are you type inside? The body section will be displayed on your browser so just type heading over here. So it's one and we'll wrap introduction. So if you refresh our page, we can see this heading and what are right inside the head section will not be displayed over here. It is just the meta information And what will you type inside? The body section will be displayed on our page now in via school. We had the option off writing this whole estimate five structure quickly. So if you just delete this and, uh, if you press exclamation and press stab, we can see we have this whole esta mollify structure. So whenever you start with a new estimate file again, use the short, good explanation and tap. So let's just change this title back toe learning estimate. Now, there's one more thing you can do with your score. So if you dive something over here every time we make some changes to our estimate file, we have to refresh our browser. So if you refresh, we can see our changes are displayed on the brother. But if you can't automate this task, you have an extension in yes code. So just click on this extensions. I going over here, Onda such for live server, and you can find this extension from Trick day. Just go ahead and install this live server extension. And then what you can do is right. Click on your estimable document and click on open with Live server. And here we can see our file is opened over here. Now, whenever we go over here and make some changes, for example, well and a paragraph and when we say or changes in yes code, the browser will be automatically refreshed, so this can save you a lot of time 11. Nest Tags: Now, let's go ahead and delete this whole body content from here. So one thing you can do with estimate is you can list one tag inside another. So, for example, if you have a paragraph tag well, just type something over here. So we have this paragraph right here. Let me just zoom it a little. So we have this paragraph right here and let's say we want to make this critical word bold so we can use attack called strong. So just type strong and, uh, and will complete this ending part from here and place it after critical on. Now, if you save our file, we can see that the critical world is now bold. So this is how you next one tag inside another. Now we have a lot of tags for text. So if you just change this strong, tow em for emphasis. And if I save this, we can see it becomes italic Onda. If I just changed this to mark for marked, you can see we have this would marked over here in the same way. You also have underlined so for underlying the how to type Ines. So we have this underlined over here now for strike through. You have the time d e l We also have tags for superscript and subscript So if you time sub our here over here we can see it becomes subscript And if you type s u p, it becomes a superscript So these are all the different tags again use with text. 12. Line Breaks & Horizontal Rules: Now, let's see how to write text on a new line. Inestimable. So just delete this from here. And if you just type, this is the first line, and this is the second line. And if I save this, we can see everything is displayed on just one line. So estimate doesn't consider line breaks, and it doesn't even consider spaces more than one. So if we have a lot of stress is over here, and if I say this file, you can see that it just goes back over here. So even if you have a lot of space is it just reduces toe one space, and it doesn't recognize line breaks. So for that, we have a tag inestimable called BR, which is for line break. So this is a self closing time, so we can just type b r and close it right here Now in estimate fire. You don't have toe have, ah forward slash to close a self closing time. You can just type it like this. So now if I save this, we can see it is the first line, and this is the second line. So if you add a couple off more breaks, we can see we have these line breaks over here. So this is how you have line breaks in estimate. Now, if you want to have a horizontal line over here, then you can replace this with HR, which is horizontal rule. And if I save this, we can see this horizontal line over here. 13. Images: Now, let's look at how to insert images inside our external files. So let's just delete these two lines of code. And in my project folder, I have copied some images in the I M D folder over here. So this is the I am the folder that I created and have copied to images right here. These are the two images, so we're gonna insert these images inside our estimate. So here we will type I m. G. So this is a selfless intact in the i m. C tacular. To use an attribute called SRC Toe, tell the browser which image to load, so will top SRC equals, and here will give the parts of the image. So it is in the I. M. C folder and we will display the first image. So let's click over here. And if I saved these, we can see our images displayed on our browsers. So it has a very large size for now. So let's go ahead and at another attribute called it and we'll set it to 100%. And here we can see our image. It's 100% off the brother of it. Now you should set the height and the width of the image in your CSS file. But right now, since we're not using CSS with just, uh said the victor over here and instead of percentage, if you want toe, have pixel sizes, you can enter pixels over here. So if you have P X, it will have a week off 100 pictures. So that's basically how you display images. And we have one more attribute in the I M. G tag that's called out and a here again type some text visually displayed if the image is not loaded for some reason. So here we will type keyboard. Now just that this source toe some garbage value. And if I save this, we can see that the image is not displayed. But this alternate text is displayed over here. So let's change this back toe image one. Now that's all we need to know about images. So let's and they lived this line off good 14. Anchor Tags: Now we'll take a look at how toe go from one place to another in external. So for that, first of all, we need toe create one more page. So we'll go to our file Explorer and here will create one more new file and we'll name it about dot s TML. And here we will type the basic estimate fiber pret So envious scored just this exclamation and tab. And we said, the title toe about us and in the body hero type about us and they will also have, ah, place all the paragraph off 40 characters. All right, so we'll go to our indexed or estimate file, and here we will type home and ah, then here it was Diab, go toe the about page. Now, to make this text link to go to the about page, we have to use the ankle tag. So to create an ankle tag, you have to type A and we'll just end this tag after the about beach and then you need to have an attribute called S Ref. So it's and here where to set the name of the page so well said it about the estimable we can see that about page is a link now. So now if I click on about page, we can see it things and story about Paige and I will just go pay this line of court from here, and we'll baste it in the about page also, and here we will type Goto the homepage and a Herald App index start estimate. So now if you click on homepage, we go to the homepage. And if it were gone about pitch, we go to the about it. So that's basically how you create links. Inestimable. You can also create links for external websites. So if you type go to and we'll create an ankle tag envious court to write a tagger to just dive the name of the tank and the press tab and we'll get all the required attributes and all and in the African type, the name of the website that want to goto. So it will type https well dot com and inside the ankle back here we will type Google. So now if I click on this link, we can see that we are on the Google homepage 15. Divs & Spans: Now let's take a look at what our divisions inestimable. So let's delete these two lines of code. A division is basically a container for something. It is a commonly used tag inestimable. For example, if you have two testimonials which contain ah, heading and paragraphs each, then ah, you can type the full in court. We can wrap about those things inside a division. So here, if we have ah, heading and we'll just type a name or here and, uh, then we will have a paragraph. Now this whole thing here is a testimony in so we can wrap that inside a division. So just type div and we'll end it right here. And then we can create another testimonial by just having the same division and just changing the value right here. Divisions are block level tags, which means that it stretches toe the wit off the window. So if you have this division over here than, uh, we cannot have another division on the right off it, it will stretch to the whole bit off the brother window. That's the kids with heading and paragraphs elements as well. So if you have one more heading right here. And ah, if you type hello over here, then we can see that it is displayed on a new line. But there are also in line elements, images, an example off land elements. So if we have an image source off image one, would you set the whipped toe 100 pixels? Now, if you just copy this line off court and we'll select the second image, we can see that the second image is right next to the first images. So it doesn't take up the whole bit off the browser window. Decisions are mostly used by giving it a class name or an I D. So here, again type class testimonial. And we'll just copied this from here and will also paste it in the second division. Now, what we can do is you see asses and view some specific styling toe these divisions, so I just add some CS is right here. You don't have to do this. I'll just show you a demo off. What divisions can do? So here we will. Time style. And in here we can die up CSS. So to access this testimony leotard type dot testimonial. And here you can add your styles. So just said a background color off light blue and here again. See, we have this background color for both these divisions because we have said the class name before both these divisions. So now we know where we want to create a testimonial. We just have to set the division class name, toe testimonial so you can see the torque testimonial. Just change the name. And now, if you remove this class from here, we can see that our background color disappears. So divisions are mostly used with class names or ideas, which can give it a specific styling. So that's basically about divisions. Let's just delete these lines of court over here. Now let's talk about span Span is also used as a container, but the difference is that it is used for small areas off the content, like if you want to separate a specific word from a sentence soliciting an example off very can use span here instead of home, we will type GT, according now, I just want tohave GMT with red color and according will be in black color. So for that we can use pan, so we just create a span over here, and, uh, we will close the span after GT. Now, here we can add an inland style. So if you type, style equals color red, and if I save this, we can see that GMT are red and coding is black. So span is basically used for inland content, and Dave is used for block level content. 16. Lists: Now let's see how to create lists in estimate. So just delete this time from here we donated. Now, Now, there are three types off lists in estimable, another list which is most commonly used. And then we have ordered list and also description list. So first of all, you create an another list. So to create an another list your type you l which is for a non ordered list. And inside the you'll tank, we have to have list items. So for that, we have l i onda here we can type anything we want. So this create an another list off programming languages. So job script and we'll just call it this land of gold a couple more times and python C sharp and C plus plus. So if I say this, we can see we have this another list right here. Now, in the same way, we can also create ordered lists. So just copy this from here, and we'll just change this ul toe ol So here against every have the order list starts from one through four non create a description list. So for that year, type D l. And in that we have two things. One is the key and one is the value. So for the key about a type D D and we'll have something over here and then for the value had a type d d. So I will type something over here and I will have one more DT and we'll type jealous script and then we'll have a DD for the value. So here we can type something. We can have multiple values for a key. So I just create one more DD. So now if I save this, we can see we have this prescription list, have the estimate file, and we have this value over here JavaScript and these values over here. So this is how you create lists In estimated, you can also have nested lists, so just delete everything and will create an another nested list. So here will tap ul and Ally Front end and beckoned. Now, inside this l I we can create another UL. So here will die pew l and we'll have another ally and will type estimate five. See is this and Jonah slipped. So if I say this here, we can see how multilevel lists are nested lists with this. Copy this from here, and we'll just basted before the ally ends for the backend on Dhere. Gonna have something different. So that's basically everything you need to know about lists in estimate. 17. Tables: Now let's see how to create tables in estimates. So let's go ahead and relate these lines of code. Now. Tables should strictly be used for tabular data and estimate it should not be used for designing the layout off the website. Some designers used to use tables for designing the layout, but it is a bad practice, and you should do all the layout designing in CSS. So let's see how to greet this table. So, first of all, you need to use the tank called table inside the table. You have to container tags, so one is T head and the other tag is T body. To create a row in tables, you have to use the tag called D R and for the columns inside, heading the other type T yet and a hero type some headings, analyst copies and stereotype designation. So here are the headings off our table Now for the tea body, you have almost the same structure. So just copy this from here, and we based it over here now, instead, off t. Yet we have to type Tedy, which is table data, so we'll select all the ts and real time TV over here and here we can feel in the data that we want. So this is one roll off T body. Now, I can just copy this and create all our rose. So this is basically how we create tables in estimate. Now you can go ahead and add styling to the stable and make it look awesome. To add a comment inside, estimable for you to do is just type less than exclamation dash dash. And here again, type your comment so we'll type table heading ends. Now, if I save this, we can see that this comment doesn't get displayed on our page. It is there just for the designers. Just copy this comment, and here we will type table body ends. So if you have a lot of gold in your slippage, it's a good idea to add comments. 18. Forms: Now let's see how to add forms inside estimate, so I'll just delete this card. The form tag is used to create forms inestimable. You can create registration forms, log informs, contact forms and so own. So let's go ahead and type form. And here we can see we have an attribute called Action. So this is where our phone will be redirected toe. So if he add some file like Process Dart PSP, then when we submit this form, this page will be redirected to process the PSP. But for now, let's just leave it blank so instead of form will create some form elements. We will design a simple registration forms. Now let's go ahead and add a feel for user names all time input, which is a tag use to create input fields. So just press tab and we have this attribute called Type, so there are various types off inputs. So for this input will keep it as text and will also add a placeholder. And we'll set the placeholder toe, use the name and if I saved this, we can see we have this input field and we also have this place holder, user name and we can type anything you want over here. Now let's create another input field for email. So that input and for the Thai people said it as email, and we'll set the placeholder toe email. Now, if we just zoom out our page, we can see that out Text feels are side by side. This means that the input tag is not block level. It is in line, so here will add a line break. Let me just zoom this game. Now we will add one more land break and will create a field for password input. And the type will be password and the place holder will be password and then a line break and one more input for possible and well, said the placeholder as confirm password. Now you also need to have a submit button, so we'll tap input and the type will be a submit and we'll set a value off register. I will also add a line break over here. We can see we have these input fields, and we also have this register button. So for the using American type, anything we want and for the email if it type anything other than a valid email, and if I click on register, we can see that it says that the email is invalid and for the possible, we can see that we have these dots over here instead off displaying the actual text. So that's basically how you create a basic form. Now we do have a lot off input types like input type off file. Here we can choose a file from our system, and then we also have input tap off color. So here we can choose the colors and then we also have input type off date. 19. Radio Buttons & Dropdowns: Now let's see how to create radio buttons for our form. So let's go ahead and here will create an input with a type off radio and we'll add a line break over here. So here we can see our radio button. We can click it and we can check the radio button. Now we can also have a label for our really buttons. So for the 1st 1 will create a label, and in four we have to type the I D off our radio button. So create an idea over here. So I d equals back and and will tap back and over here and inside the label here we will type back. And now, even if you click on this label, our radio button will activate. Now let's create two more off these really evidence and we'll change this toe front end, and finally we will change this toe full stack changes to full stack and this label to full stack. So here we can see are really buttons, and if I click on back and we can see that it gets selective. But if idly confront and it also gets selected and we can select all three of these at one's own one that we want to select only one item at a time. So here we have to add one more attribute called name. And they had to set the same name for all these three radio buttons. So we'll name it developers, and we just copied this from here. Face it over here and here. So now if I click on this, we can see that back and gets selected. And if I click on front and back and gets de selected and we can select one at the time Now , if you want back in to be selected by default, when the Page lords, then you can add one after good called checked. And now, if I save this, we can see that back and gets selected by default when we load the page. All right. Now let's see how to create drop down list in estimate. So for that you have to use attack called Select, and we just delete the name and I d for now, because we're not going to send the any data toe the server. We just design our page. So in select, we have to have options so type option and I have to provide values for these. But for now, we'll just deleted because we are sending this to any database. So we just add some values over here. But also add a land break. Now, here again. See, we have our drop down list. If you click on this, you can see we get all these items. And if I click on any of them that gets selected so this all create drop down list in a form, so that's basically it for forms in estimate. 20. HTML5 Semantic Tags: Now there's some semantic tax that have been introduced in Estimable five, which helps the browser better understand the content off the pace. Let's take a look at some off the common once. The 1st 1 is the header attack. The handle tag is used to represent any header in your webpage. You can have multiple headers in your webpage if you want, and then the next one is the photo attack. The photo tag is used toe represent the footer in your webpage and just like the head of tax, you can have multiple photo tags, and the next tag is called Section. So this tag is used toe. Represent a specific section in your webpage and again you can. How multiple sections in your webpage. And then we had another attack called Main. The main tag is used to define the main or the most important part off your webpage. It can contain articles, sections and more. The next time is called. Now the knave tags use toe represent navigates menus on your webpage navigates minions are usually written in another lists, so you can create on another list and ah, an ankle tag and said that and you can type the part over here and you can have navigation links like this so the nanotech is used toe represent navigation menus in your webpage. Then we have the articles back, which is used for article contents in your rip it, and it usually has a large amount off text inside it. And then we have the aside tag, which is used for ah sidebars in your ribcage shares an image that describes how some of the semantic tax are used in a typical webpage. It's up to you to decide which tanks should be placed there, and there's a strict rule as to restock. Should be used where. But it's up to you as a designer toe. Use the tags appropriately. 21. Audio & Video: Now let's see how to add audio in our rep IDs. So let's delete this a sign from here. And to add an audio file inside your estimate, you have to use the audio attack. So let's go ahead and type audio. And inside the audio tag, you have to have attacked called source. And here we can add an attribute called SRC and here we can give the part off our audio file. So if I go to my file browser here, you can see I have a folder called Audio, and I have these two files is about the same files, just different file types. So let's go ahead and type audio guitar dot mp tree. So this is our audio file, and then we also have to set a type for our audio. So for the time we have to dive audio forward slash m pink. Now we have added our audio file toe this webpage and to see our file over here we have toe have an attribute called Controls Onda. If I save this, we can see our audio file over here. And if I click on play, So began also control the volume over here and we can play and pause the audio. So this is basically how you'll add audio in tow, your webpage. Now it is recommended that you add multiple source tags to your audio attack so that if one of these doesn't work, the other one will work. So let's add one more source and we will add our guitar dot very file and will change this type toe wave. And in a rip, it it will just show one file. So if one of these doesn't work, then the other one will be displayed over here. Now, in order attack, we can have a text ritual we displayed if the audio is not supported by the browser, so here we can type. Oh, the attack is not supported in this browser. So this text will only be displayed if the audio tag is not supported by the browser. Now we have different attributes for the audio tank. We can have an attribute called auto play. So when we save this file, the audio out of place when the page is loaded and then we also have another option called loop. So now if I refresh my page, the audio will start in the browser lords and it will loop. Once the order reaches the end, it will play again. So let's stay our page now Let's see how to add video in our webpage. So video is almost the same as the audio attack. So let's replace audio with video and will changes here as well. And you leave these controls and auto play right here and ah, in my file browser, I have a folder called Video, and in that I have and before file. So let's delete one of these. And for the source, we will say video slash lake dot and before and for the type we're setting toe video, forward slash and before. So let's go ahead and save this file and see what we get. We can see that the video is playing, but it has a huge hide and wit, so let's stated of it. So here we can type with equals 100%. And if I save this because er video is playing and the with is 100% and we have all the controls, we can post the video, we can play the video. We can decrease or increase the volume began played on full screen. Now there are a lot off attributes for video as well. Like Luke Muted, hide with controls and all this. You can go ahead and search for the active users on the Internet and you'll get a list of all the attributes. 22. CSS Introduction: seizes or cascading style sheets is a styling language that is used to make a website presentable. You can add styles to replace is to change the color of the background, change the phone, change the phone size and shadows, change the height and the width off the elements and do a lot of cool stuff. It is very easy to learn, and the syntax is pretty simple as well. Let me show you a demo off how repairs looks without ceases and this is how the weapons looks. After adding ceases. You can see that there's a huge difference after adding CS is, there are multiple ways of doing things. Using CS is you can use your peer to mind and design anything you want. A season's file has a file extension off Dart seizes. Let me show you the syntax off writing seizes. First, we have the selector that is the element in estimate, that we want to add the styles, too. Then you write the CSS rules inside a block off curly braces. It sees his role is in key value pairs, where property name is the key and it ceases rule needs to end with a semicolon. All right, so that's it. With the introduction to CSS in the next video, we'll see. What are the different ways Toe abscesses to your estimate file. 23. Ways To Add CSS: Now we will see how to add ceases to our estimate file. So here I have opened up a folder called CSS Crash Course. So here we have an H one and we can see the H one is displayed over here. Now there are three different ways in which you can add ceases to your estimable. The 1st 1 I'm going to show you is in line. CS is so we can write. CS is inside our element itself. So here we can add a new attributes called style, and we can set it equal toe a CSS rule. So we'll set the color to red. And here we can see the color off are heading, has changed to read. All right, now let me show you the second way in which you can add CSS. So just delete this from here and in the head section, we can add a new tag called Style and we can write seizes over here as well. So we'll time. It's one and in s one. We will type color read. And if I say this, we can see the color has changed to read. So this is called Internal ceases now the last and the recommended way to our seasons to your estimable is external seizes. So we'll go to a folder and will create a new file. And you can name this file anything. So I just name it style dot CS is Just remember, tohave dot seizes as the file extension. So what we'll do is we'll cut this style from here and well paced it here in our style or CSS file. Now we can see that the style has not been applied. That's because we also have to link our style or CSS file in our estimate file. So here we will dive link, and we'll just press stab. And yes, God gives us this auto completed code so he will type the part off our Seasons file. So it is in the same folder, so we just type the name off our files style. Dorsey's is. If it is in a folder, you can type the name of the folder and for what's last. The CS is filing. But since our Caesar's file is in the same folder with just write the name of Four Seasons file and here you can see the style has been applied over here. Now this is the preferred way off. Writing seizes. It is because using this approach, you can reuse the same series of styles in other estimate files as well. Just by linking toe, the CSS file now sees, this gets applied from top to bottom. So if we just got this style attack from here and if he based it after our link, and here, if you change the color off, are heading to blue, we can see that the color over heading is now blue. There's because we have the color red being applied over here, but after that we have this style tag, and we override the value off color in this one. But there's one more thing you need to remember that is, if you add some in line style. So if he said the color off the text toe, say green over here, then we see that the color changes to green. That is because in line styles override all the other styles in CS is so these are the different ways in which you can add CSS to your estimate. So that's it for this video. See you in the next one 24. CSS Selectors: Now let's take a look at water selectors in CSS sees. The selectors are used to target different estimates elements based on various factors. So let's take a look at some of the commonly used CSS selectors. So here we have an H one in our estimate file, and if you want to select this each one in Caesar's, we just go to our seasons and will type. It's one and dive the styles over here sometime. Color red and we can see the color has seems to read. So if you want to select a tag in estimate earlier to do is type attack over here and then right the styles inside curly braces. Let's create a paragraph over here and we'll type Lauren Ipsum text offs. 100 words. And now, if I want to target, this paragraph will have to do is go to styles, though ceases and the type p and write the style since that curly braces sold up color and will say toe green. So here we can see the color of paragraph has changed to green. Now, the problem with this element selector is that if you have multiple explosions and you want to have a different style for a specific edge. One you cannot do That, for example, will just duplicate this. And if I save this because he all these items have the same styling. So for that we have class electors in ceases. So to use a class solitary ETA and an attribute called Class in your estimate tag and we'll give a name for this last. So just type red over here and we will have red color for both these ones. So we'll copy this class and we'll base it over here as well. Now, about these twins have the class off red. So what we can do is use the class elector instead off an element selector. So we just remove this h one from here. And to use a class director, you have to type dot Andi, then the name of the class. So the name off the clouds that we have given for its one is red, so we'll type red over here. And if I save this, we can say both. These veterans have red color and the other each one without the class doesn't have the style applied to it. So if you want. We can have a different class for this h one. So just change this to you can type any random name over here, so I'll just give my class a name off my style. And we can target that here by just typing dot my style. And for this we will just text align it to the center. And here we can see this. Each one is textile into the center. Because we have this my style class applied toe. This is one over here, and you can also add multiple classes to an element. So here, if you type red and press space, we can see the styles off red as well as my style is being applied to this edge one. So this is how class electors in seizes work. Now the next type of sector is called idee selectors. Ideas are used for unique content in your webpage. So one idea can only be used once in a webpage, but in classes begin see that we can use the same class for multiple elements. So he will create a new X one and to set an idea for an element, you have to type I d and the name you want to give to the idea. So just type some name over here. I'll just type unique. It's one so he would just time. This is Joe Nick. It's one. Now to select this idea, all you to do is go. Docs is and type hash and the name of the idea. So the name off our ideas unique Dash, it's one. And here we just give it a background color off light gray and here against the we have a background color for our I. D. So in this way you can also use ideas in your webpage if you have some unique element in your webpage. Now the next selector is called Universal Selector, introduced to select everything on the page. And so it is basically used to reset Something's on the page, like received the margins batting and, ah, said the phone family and so on. So let's go ahead and use our universal selectors so we'll go ahead and to use the universal selector, you to type, asterisk and devote your styles you want in curly braces. So if you're evil, dive margin 20 And if I save this, we can see now all the margins are zero on this page because we have set margin zero toe universal selector. So the margin off everything has changed to zero. And we can also change the phone Family sold up, phoned batch family and I will just tap Roboto and we can see the front off. All the elements has changed. And with the phone family, you can also use a fullback phoned So type Sand Saref. So if the user doesn't have the robot affront on their system or if the phone has noted loaded, then a sensitive phoned in the wisdoms system will be used to display the content. Now, the next elected that we're gonna take a look at is called descendant selector. It is basically used to select elements inside another element. So let's go to our estimable and will create a division, and we'll give some class so well Taib box over here in this will create an H one and we will type something over here. All right, so here we can see the S one, and it is inside this division with a class of box. Now to select this one inside this division with the class of books. All you have to do is use descendant selector in CS is to use the descendant selector. You have to first off all right, the name off the parent element. So if you go to our indexed or estimate here, we can see that we have this division with a class of box. So this is our parent element. So let's go to our style of seasons and a Here we will time dot box now to select the child element. All you have to do is add a space and then have the child element. So we want to select the each one inside our deal with the class of box. So she have every type. It's one. Now what we're style we have over here will only be applied. Tow this one right here because this is the only edge one inside the box division. So if you'll just give it a killer off yellow, we can see the color off. This each one has seems to yellow will also change the background color of the box. So the start box background and would have died red. Now we'll take a look at how toe select elements with multiple classes. So, for example, if want to select an element with a class of both box and active, then what I can do is type the name off the class box and then tied the name of the other clubs without any space. So type don't active. Now what we're style right over here will only be applied if the element has the box and the active classes in them. So just give it a padding off 32 pixels. So right now, we don't have any element of it. A class of both box and active. We have an element with the class of box, but that element doesn't have the class off active. So let's go to our index. Dot Estimates and foods division will also add a class of active and here we can see we have this patting applied over here. There's because we have the box and active classes in our element, and we have selected both of them over here. So you should remove one of these classes than the padding will disappear so he can see the batting has gone. Now let's see how to add the same styling for multiple selectors. So here we were, just and a padding off 24 pixels to all the paragraphs. And you can see we have this padding over here. Now, if you want to add the same styling toe the H one as well that all you have to do is add a coma and it's one. And now if I save this, we can see the H one and the paragraph how a padding off 24 picks is so in this way we can add multiple selectors. Over here, we can even add classes or ah, I ds. So that is basically how you have the same styling for multiple elements. Now there are many other advanced selectors which you can use in CS is. And whenever you feel the need to use them again, search for it on the Internet and you'll get a list of all the selectors and how to use them. The selectors that we have loaned are sufficient for most of the websites. So that's it for this video. See, on the next one 25. CSS Properties: Now let's talk about CSS properties. There are hundreds Off Seasons Properties, and if I start explaining every single seizes property, I don't think that would be an efficient way to learn. Seizes. You should learn East property by actually writing. CS is. So whenever you feel the need for a specific property, you should Google for the property and you'll find plenty of resources that being said you should not the common ones that are used always in CS is. So let me show you some of the properties that are commonly used in CS is so to get shoveled, we have this estimate document, and I have a division with the clubs off box, and I have this paragraph inside here, and we have linked our styled or CSS file and let's go toe style of CSS file. And first of all, we'll take a look at some off the properties that are used with fonts. So let's stop, be over here, and we have selected the paragraph in RCs is now the first property that I want to show you is called for in size. Now, most of the seasons properties are self explanatory. So, for example, we can see phone size it clearly say, is that it is the size of the phone. So let's change our form size toe, 32 pixels. And if I save this, we can see our phone size has changed and it is not only two pixels and the other property used with phones is called phoned Family Front. Family is used to change the phone off your text. So if you just type latter over here so we can see that the phone has changed to latter. Now, with phone family, you usually use a secondary formed. So this called a fullback phone. So if a type sand saref over here, then if this latter phone is not found on the visitors device, then a sensitive front will be used instead. Now, the next property to be used with phones is called phone Wait. So here we can set the weight off the phone. So if you type bowled over here, we can see the phone has changed too bold. If it abnormal, then the phone changes to normal, so the next property is called color. So if you type color, this is the color of the text. So If he said it to say Green, then we can see the color off. Our text has changed to green. Now the next property is called background. So we'll target our division with this class off box. So we'll type dot box So if we'll dive background Now, we have different options over here. So first of all, you can set the color of the background. So if you just type 222 we can see the color has changed too dark gray. And instead of this color, you can also use images by just typing Ural over here and typing the path over here. But let's change this back toe the dark gray color. Now the next property is the whipped off the elements soldiers type, and we can type the pixel value over here. So we'll just type 200 pixels. And here you can see the way it has changed to 200 pixels. You can also add percentage values over here, so if you just type 50% we can see that the vit has changed to 50% of the parent element. So the parent element off this box is body for now. So this body over here is the parent element off this box and then the next property is called height, so we can sit pixel values as well as percentages over here. So here we can see the height has changed toe 300 pixels. Now the next property is called padding. Padding is basically the distance from the border off the parent element. So we'll give padding to our paragraph element. So we will type padding, and, uh, I will give you a padding off 32 pixels. And here you can see we have the started to pixels off distance from the border off our parent element. Now, with padding, you can set different bad things for the top bottom left or right. So here, full time padding dash top and we'll set it to zero pixels. We can see the talk. Padding is now zero, and all the other patterns are 32 pixels. Now, when we have a zero value in CS is, you can ignore the units and it will still work on the next property is called margin. So imagine is basically how much distance you have from other elements. So create one more box So just copy this and we pasted over here and here we can see we have two boxes. So now if it's a margin, bottom toe 100 pixels, we can see we have 100 pixels off margin on the bottom of this box. The same goals with this box as well. So that's how you add margin to your elements. If it is type margin instead of margin bottom, then you will have margin off all the sides off this element on the next property I want to show you is called Border so that border and hearing her to have three values. The 1st 1 is the thickness off the border. So just type five pixels and the next one is the type off border. So there are a lot of different types of borders, so just type solid over here, and the last one is the color of the border. So just type red over here. And if I say this, we can see we have five pixels off red border around our element. You can do the same thing. You read it padding and margin where you can add border top. So if it I bought a top over here. We can see only have this top border. So you can do this with left, right and bottom border. Now, the next property is called Border radius will type border radius. And I'll just show you what happens when we have border radius. So just said it toe 20 pixels. And here you can see we have this rounded corners and when we increase the size, we can see the border radius increases. All right, so that's basically it with the commonly used properties in CS is now when we actually start designing our website, we will use the more properties in CS is and I will explain them while we design our website. So that's it for this video and see you in the next one. 26. Pseudo Selectors: in this video, we'll take a look at what our pseudo selectors in CSS is. There are mainly two types off solo selectors, pseudo classes and pseudo elements, so these pseudo selectors don't select the element, but they select a part of the element, or sometimes there used to select specific elements based on certain context. So first, let's take a look at what our pseudo classes pseudo classes are used to select elements when they are in a particular state. There are a lot of social classes. Let's take a look at a couple off them. So here we have an ANC attack, and when we hover over this element, we want to change the color off this text. So for that we can use a pseudo class called our. So let's go to our style dot CSS and we have this universe of style over here. Let's select our ankle tank, and to use a pseudo class, all you have to do is type of Kahlan and in the name of the pseudo glass. So the name of far pseudo class is Hohler, and when we hover over this ANC attack, we want the color to change toe red. So let's type color red over here. And now, if I hover over this ankle tag, we can see that the color changes to read. So this is basically how you write a pseudo class. So first of all, you have to have the selector and then type colon and then the name of the pseudo class. Now let's take a look at one more pseudo class, and it is called First Child. So let's go ahead and create UL and we create some allies over here. So time my new and we just duplicate this. So here we have some list items, and now, if want to select the first list item, then we can use a pseudo class called First Child. So it slows or ceases and she'll dump you. L l I and we'll type colon first child. And here we will set the color toe say green and here again see that the first list item has a color off green and all the others have the default color in the same way, we can also select the last child. So for that we have the top. You will ally and last child and will said the Colotto red. And here we can see the last list item has a color or Fred. So in this way we can use pseudo classes in our seizes. So there are a lot more pseudo classes, which you can look up on the Internet. There's, ah whole list off pseudo classes, but these are the commonly used pseudo classes, and if you want to learn more about this, you can refer the Indian Web dogs. All right, so now let's take a look at what our pseudo elements. So let's go to our estimate. And, ah, we just delete these and hero create and it's one and, well, type something over here. So here is our X one. Now let's see how to use the after and before pseudo elements. So let's delete all this and hero time. It's one. And to use the pseudo elements toe have to Collins, and after that you have to time the name of the pseudo element. So we're gonna use after some time after over here and in calibrates is your toe. Have some content, so stop contend and we'll type end over here and we can see end is displayed after our each one. We can also style this well, said it to read and will change the phone size toe, say 12 pixels and you can add more styles and make it look the way you want. So this after pseudo element is inside this each one resist after the content of the H one , but it's basically inside the judgment. So let's go ahead and write. Look over here and click on inspect. And if he opened this, enter one you can see we have this Hi. Everyone content over here and then we have this after So this is basically inside our element. So this how after works Now let's and before So this is basically just like the after. So just copy this and will type before and here again type start So this is how you use pseudo elements in seizes. Now, of course, you won't type start and and for the eggs from using before and after But you can use the creativity and create awesome designs using the pseudo elements and just take a look at one more subtle element called first line. So we'll go ahead and create a paragraph and we'll types on Lauren lips and text. I think that's a lot of text, So just delete some of these. So here we have our paragraph. Now, if you want to select just the first line off this paragraph, then you can use a pseudo element called First Line. So he will die P colon, colon, first line. And here you can apply some styles. So I phoned Wade bold. And here you can see only the first line off this paragraph has the phone trade off bold. We'll also change the color off the first line. Now, if I just zoom out our VIP it, we can see that the styles are still applied to the first line. So this is how the first line pseudo element works. Well, we're here. We'll also look at the first letter so well, the first letter and I will give it a phone size off. Let's 24 pixels. So here we can see the first letter has the phone size of 24 pixels and the whole first line has these styles applied to it. So in this way, we can use pseudo selectors in seizes. There are a lot more pseudo elements, and you can find them on Indian Web dogs. So that's it for this video. See you in the next one. 27. Display Properties: Now let's take a look at what a display properties in CSS, so display probably tells the browser how the elements in the base behaves. Every element in a webpage is essentially a rectangular box, so the display probably helps us to tell the browser how to lay the elements on the screen . So let's take a look at some of the commonly used display properties. So first, let's take a look at water block elements, so block level elements take up as much horizontal space as they can, and this it on a separate line from all the other elements. So let's take an example here we have a paragraph, and we have also added some styles to the universal selector. Now what we'll do is and and it's one in the middle of this paragraph. So if you will type, it's one and will say block element. So here we see that each one takes of the complete horizontal space and it breaks the floor of the text. And now, even if we change this to Dave and we can see that the same thing happens, the block element takes of the complete horizontal space. This because these elements are block level elements and the main property off this block level element is that it takes up the complete horizontal space and we can also add height and width toe this division. So let's go to our style of CSS and a hero Time. Dave Onda fitful. Let's give it a background color sold at turquoise over here and now if you change the height, toe, say, 100 pixels and ripped toe 200 pics is we can see the height and the width are applied on this division. But even though the wit off this element is just 200 pixels, the complete horizontal space is blocked for the other elements. So this is how display off block works. Here is the list off some other block level elements. Now the next display value is in line. So when we have an in line element, it doesn't break the floor of the text. So let's take an example over here, so change this division toe span, so span is an inland element on. Let's also change this toe in line. So now if I save this, we can see that the inland element is right here it is inside the text and it doesn't break the floor of the text. Now let's go to our style of seasons and we'll add some styles over here to the span. So he will give it a background color off red on Dhere again. See, this is our in line element, Onda. Here we can see that it really takes up just the space it needs. So if it I've hide off the 100 pixels and of it off 200 pixels, we can see that it doesn't affect the in line element. We can even add padding and border tore in line element. So time padding off for pixels. And here we have a pattern or four picks is well just and a border off for pixels solid black. And here we have the border and the padding being applied. Now here we can clearly see that it doesn't affect any other lines off text. So even if he increases spending, so just changes to 24 pixels, we can see that the other lines of text are right there. So an inland element doesn't affect the other lines of text. So that's changes back toe for pixels Now we can even add margin toe an inland element, but only ah, horizontal margin is applied to the line element. So if you type margin top offs, 100 pixels, it doesn't work. But if it I margin left off 100 fixes, we can see that it works because it doesn't affect the other lines of text. So this is basically how in line elements work in a webpage. Here is the list off some in line elements in estimate. Now let's take a look at voter inland block elements. So it just changed to inland block. We just delete some words over here toe, make it sit on a single line and would also remove this margin for my Now here we have our element, but this is still an in line element. So let's stains this to an inland block element To change the display property often element, you have to just type display and then type the value over here so we'll stop in line block . And, uh, now, if I save this, we can see that height and width are applied to our element. So the main reason why you want to use an inland block element is toe have the properties off the line element and also need tohave height and width applied to it. So this is basically how inland block elements work in CS is now. Let's take a look at one more value for display. It is called none. So if he said they display to none, the element will disappear from the page. So now if I save this, we can see the element is no longer in the screen. So this left. None is used to hide an element from the page, so these are the commonly used display values. There are a lot more different values, which you can use for display using display flex you can use flex box in CS is which is a new way to lay out your webpage. You can also use CS is greed by typing display greed. Now flicks, books and seizes greed are a bit more advanced topics. I just want to keep this crash course simple, by the way, will be using flex box in our course when we start designing our website. All right, so that's basically with display property in ceases 28. Box Model: in this video, we'll see. What is CSS Box model? So box model in ceases is the foundation off Lay out on the web. Each element is represented as a rectangular box with its content padding, border and margin. So let me explain it to you better with an example. So here we have a division with a class off box and we have this text content over here. We'll use this division to study box model in CS is if you go to the style or CSS file. Way can see we have this basic styling over here. Now, each of the box properties are represented as different layers. So the 1st 1 is the content of the box. So this is the content off our box Now, when we give ah, height and of it to our division, it gets applied to the content off our box. So let's go ahead and give it a bit off 350 pixels and will get a height off 1 50 pixels. So this is our box, and the whole thing we see over here is the content off our box. Now the next layer is the padding. So padding is basically the area from the edge off the box to the content off the box. So let's apply some parting toe our box so will die padding off 32 pixels. Now, here you can see we have this area between the edge of the box and the content off our box . So this is called the padding. Now the next layer is the border off our box. The border is a bladder outside the box, so we'll have a border off 32 pixels solid red. And here you can see we have the study two pixels off border outside our box. Now the last layer in our box is the margin off our boats. Margin is basically used to separate itself from other elements. It pushes up against other seasons boxes. Now what we'll do is we'll go to our estimable file and will create one more division, and here we can see the second division on DNA. Now we'll go to our style docs is, and we'll test our margin so we'll add a margin off 32 pixels and we can see that 32 pixels off margin has been added to our box But if you're not, is down here, we can see that we have only 32 pixels off margin over here. But we have given the margin towboat the divisions because we are targeting the division over here and you meeting that we should have 32 plus started, which is 64 pixels off margin over here. But what happens with margin is that it collapses when we have a distant elements. So the largest margin will be added toe the edge isn't elements. So here we have 32 pixels off margin for both the elements, so 32 pixels of margin is added over here. If you have one of these divisions with a margin greater than too little pictures, then that will be added over here. So that's basically how the box model works in CS is. But working with this kind off set up can prove to be difficult at times. For instance, if you want to have a box with a lid off exactly 300 pixels and also want to add border and patting to it, then you had to calculate the rip off the content box. So let me show your demo so we'll go to our estimate file and we have this division with a class of box. So we just target the box division. So we'll type dot box over here and for the other division will give it a class off reference, and we'll target that over here. Onda reviewed a margin off the topic cells toe aligned with this box over here, and we'll give it a bit off 300 pixels and we want to give it a height off four pixels, and we'll also set a background color. So here's our reference division and the wit off this division is exactly 300 pictures because we don't have any padding or border for this division. Now. If he said the wit off our box toe 300 pixels, we can see that it has a bit off more than 300 pictures. That is because we have this border off 32 pixels and a padding off target of pixels. So this combines 2 64 pixels, and we also have border and padding on the right, so the border and patting on both the sides and toe 1 28 pixels. So the total weight off our box is Ah, 300 plus 1 28 pixels. That is 4 28 picks is We can see that in the Inspector, so we'll just right click over here and click on Inspect. Now, if I hover over this element, we can see that it says deal dot box and it has a bit off for 28 pixels. So now if you want to have a bit off 300 pixels for the element, then you have to set the width toe 300 minus 1 28 pixels, which is the border and the padding off both the sites. So we'll type 1 72 over here. Now we can see that we have exactly 300 pictures off it for the box, but this is a time consuming thing to do, so we haven't easy option over here, so what we can do is we can change the behavior off the box model we considered to border box so that the bit off our element will include the border and the padding. So let's change this with toe 300 pixels, and we'll just add a line of court box sizing to border box. And now if I save this, we can see that the total weight off our element is 300 pictures, including the border and the Patty. All right, so that's basically for this video. See you in the next one. 29. CSS Specificity: Now let's talk about CSS specificity. To understand specificity in CS is you need to first understand what cascading is in CS is if you search for the meaning off cascade. We see that it says a small, wonderful, typically one off several that fall in status down a steep, rocky slope. So in the same way, sees his rules cascade down, toe the selectors from top to bottom. So here we have a division, and we also have a paragraph inside that with some text inside it. So let's go to our ceases now. Here we will give some styles to the division, so we'll give it the color off red, and we'll also takes transform it to upper case. So these are the Two Seasons rules that were given for the division. And now if you go down here and they will create some style for the same division, and we said the color toe say green, Then we can see that the green color is being applied to this text. Now, when the browser reads the seizes, it reads from top to bottom. So first it reads this universal selector, and it applies thes styles toe the page, and then it comes to this division and it applies. The red color and the text transform. And then it comes down to this division, and it says that it has a color off green, so it changes the color back toe green. So this is how a CSS file is read by the browser. Here we can see an example off Cascade in CS is now sees. The specificity is the weight given toe the selectors, which tells the brother to decide which off the Cesar's rules to be applied to the element . If you have same sees a specificity for different selectors, then the one that is written the last will be applied to the element. But if you have different sees a specificity than the Seasons Declaration, which has the highest specificity will be applied to the element. So let's delete All this series is over here and let's see what all the seasons specificity values for different selectors. First of all, let's take a look at the universal selector, so the universal selector hands the least specificity value, so let's give it a color off red and here we can see all the text hands the color off red. Now, the type selector has are higher specificity value than the universal selector. So we can use an element, senator toe override the value off the universal selector. So just talk p over here, and that will set the color toe green. And here we can see that this is his delusion has overridden the declaration from the Universal selector. So if you just got this from here and, uh, if it basted about the universal selector, even then we can see that this declaration is being applied. So the element that is because the type selector has, ah higher specificity value than the universal selector. So right now we can say that this has a value off one because we have one type selector over here, we can add more specificity by actually writing Deve be, which means that the paragraph inside the division should have this style applied. So just type color orange. And now if it saved this, we can see that the color has changed to orange because here we have ah, higher specificity than this. Be over here. So you can think of this as a value off fun. And this as a value off to now. The next day little we're going to see is class electors. The class electors have, ah higher specificity than the type selectors. So let's go to our estimable and ah, we'll add a class to our paragraph. So top class my style. And now if you go ahead and target the class, my style and we'll set the color to say blue. And now if I save this, we can see that the color has changed to blue. There's because class electors how higher specificity value than type selectors. Now, just like the type selectors, we can add more classes and add more specificity. The next director is the ideas later, so it has a higher specificity than the class electors. So let's go to our indexed are estimable and we'll give an I d to this paragraph so he will top I d my I d. And in RCs is we will target the i d my i d. Now it will set the color off this idea to say turquoise. And if I say this, we can see that the color has changed. That is because we have, ah higher specificity for our I D than the classes. Now. One thing that has more specificity than the I D is in line ceases. So if you go to our estimates and if he writes in Line seizes over here, so we just type, style equals and with the color toe purple Onda. Now if I say this, we can see that the color has changed to purple. That's because in line styles override every other styles in the series is so in lunch tiles have, ah, higher specificity than all the other selectors in CSS. Now, if you want to all right, everything else and you want to have a specific style, then you can use the important cable. So let's say we want toe apply. This declares in tow the element. So here we can type exclamation important. And if I say this, we can see that the color has changed to Green. That's because adding important keyboard over here overrides all the other style declarations in the ceases. But now, if you add important over here, then we can see that the color changes toe orange, so this can now eventually become a war off importance. So it is always best to stay away from this important keyboard. The important keyboard can cause more problems and confusion in your code If you have a long ceases file and you have said some properly, too important and really want to change its somewhere else in your cord, you can get confused trying to debug the code. So try to stay away from the important keyword as well as the in nine styles and try to make your Caesar's called better with type class and I d selectors. Now, if you want to play more with the specificity value than you can search for C s a specificity calculator on Google and click on this link over here Specificity Don't Keegan Door Esty and you can Catholic the specificity off your selectors over here. So here you can see we have an element over here and we have one more element over here. And then we have this pseudo class, and then we also have this sort of element over here. So we have this calculated value over here. The ones that are on top are off the highest value, and then we have the lower value, and then we have the lowest value over here. And if you take a look at the second selector over here, we can see we have a u l. And we also have an I d on da. Then we have an ally, and then we have a class. So here you can see we have an idea. We have a class and we have two elements. So this clearly has a higher specificity than this one over here because it has an idea. So you can go ahead and write your own selectors over here and calculate the specificity, values or s So that's basically it for this video. See you in the next one. 30. Brief Introduction To JavaScript: in this video, I'll give you a brief introduction to JavaScript and how to work with John script. So javascript is a programming language which can be used for many tasks. One of the main things JavaScript is used is to make a website interactive. We're not going to use a lot of John slipped in our website. I'm just gonna interest you to writing javascript. If you wanna just test how to write John script, then you can use the console in the browser. Soto, open the console just right. Click anywhere on your webpage and click on inspect, and you'll get this developer tools. Just goto the console tab. And here you can test out your job script or else you can also use shortcuts like control shift I for Windows and it opens up the console for us. So let's go ahead and type some sour script. So first of all, we'll print something on the console. So will console don't log and will type Hello. And we can see hello is displayed over here. And if you want to display an alert on the browser, you can just type I loved. Hello. And if a presenter we can't even get an alert and it says Hello. You can also create variables using JavaScript. So to create variable, you can use the keyword. Let and then type the name of the variable, for example name, and we'll type John. And now, if you diaper console don't log name way Must have a semicolon over here so we can see John Doe is displayed over here in the same way. If you have a constant, you can type CONST and type of value over here. Good job 2.14 And if he consoled out log, we get the value over here. Now let's clear this console. You can also create functions in JavaScript. So if a dab function and the name of the function will type, say hello and heavily type console dot log hello from function and we have created this function. Now we can call the function by just typing. Say hello and we get hello from function over here. Now. The next thing you can do the job script is access the don't elements or the document object model elements, which are the different elements that we see on our website. So let's go ahead and access this, Uh, that's one over here to access an element you can type document dog, pretty selector and then the element name. So we have the excellent tax will have its one, and we can see the Each one is selected right now. So if a presenter, we get this each one over here now there are other ways as well to access the dome elements . So let's go ahead and change this text to something else. So well, type document dot curry selector. It's one and we'll type inner estimate and will change this toe. Hi, This is the updated text and now if I press enter, we can see the text has changed and it says this is the updated text. Now let me show you one lasting in jars slipped. That is how toe add even listeners. So just clear this. So even listeners are used. Whenever we want toe perform some task. When we click something or with scroll or any type off event occurs, we will add an event listener toe this each one. So first of all, you create a constant and we'll name it heading and we'll dive. Document dot very selector and we'll type It's one now our Each one is told in this heading constant now to add the even listener were to type the name off the element dot Add even listener and in parentis is here to type the name of the event and then a function which will be called when the click occurs. So when rudely going this each one we want to display an alert So time alert Hello and we'll close this calibrations And this parentis is now We have created the event listener off Click for this s one. Now, if you click on this one, you can see we get this alert and if you click somewhere else we don't get the alert perfectly on this It's one we get the L'Art. So this is how you create even listeners in javascript. So this is just the basics off JavaScript. There's a lot to learn in Jascha, but in this course, we're not gonna use a lot of jobs, so we can just follow along with the video. So that's basically for this video. See, in the next one 31. Creating The Files For Our Website: in this video, we will set up our project and also create all the necessary files. So first of all will create a folder and name it anything you want. And we'll create a folder called Images, and they will paged all our images that we want over here. And then we'll create one more folder called Videos and Will based or video over here. All right now, let's open our website folder with us. Good. Now let's create the necessary files over here, so first of all will create the index dot estimate file. Then we'll create a style. Dorsey's is fine. And then we'll create a job script file, and we'll create two more folders for the CSS and JavaScript. So we'll create a folder called CSS, and we'll move this CSS file into the CEASES folder, and we'll also create a JavaScript folder and we'll move this child script file. All right, now we have created our files. Now let's go to index dot estimates, and here we'll write our basic estimate. Five boilerplate so envious, called just type exclamation and the place stab, and you'll get this basic issue in five structure, and we'll link some things over here. So first of all, we link our CSS files overlap link CS is slash style or seizes, and we'll also link our John script file. So script SRC and the hero diaper edges slash main daughters. Now we'll import the actions that we're gonna use in our website, so we'll go to a browser and there's a popular service called Front Awesome. So you can go to front awesome dot com and you can use a lot of icons from here. So just click on start use and free and then copied this line off court or just click on this icon over here to copy the code and well, paced it in our Is tim a file. And then we also need to link our Google phones so we'll go toe forms dot google dot com and they will search for our phoned. The front that we're going to use is really so just type real way, and we'll just add this and we will also add The bold wasn't off the front. All right, so just click on embed and ah, copy this land of court from here, and we'll baste it in our industry estimate file. Or actually, we have everything set up in our project. Now we can start designing our website 32. Markup For Header: Now let's start designing our website. So first of all, we'll start with the header and we'll write the estimate or the market off or header. So first of all will change this title. All right. For the header, we will use the head attack. We need to have a video in the background, so we'll create a video element. So video and here will create a source and hill type SRC. And in our videos folder we have a video called binary dot before now create an X one and a hero type you imagine develop and at last will have an ANC attack. So for the answer, if you will just die hash for now and a human type contact and we need to have a Nikon over here. So we'll goto formed awesome website. And if you click on icons and here we can see all the icons we can start for the icons over here, So just type down. And if it's cold on, we can see we have a lot of icons were just gonna use this. I got over here, So just click on that now. This is the core that we can use toe. Use this icon, so just click on this and copy it and well paced it over here. Now we're also going to style this using CSS so we'll add some classes so we'll type. Class equals BT end. Now we can select this ankle tag using this class median in our ceases and from the video will give it a class off main video, and we also add some attributes. So top loop. What a play and muted. So it will auto play when the page lords and it will loop, and if there's any audio, it will be muted. So now let's open our estimable in our browser. Since we have lives there were installed envious gold will just right click over here and click on Open with Life Server. And here we can see our video, and we also have this heading and this contact button and I will add one more attribute to our video tag. So it is called poster a hero type images slash poster. So let me show you the poster image. This is the poster image just taken a screen short from the video and saved it as a PNG. So what this poster does is that if the video doesn't load, then this poster image will be displayed. So now let's go ahead and, ah, type something over here. So now we know that a video with this name doesn't exist. So not if I save this and go to my browser here. We can see we get the poster image displayed over here. And if you have the right path, then are really will be displayed over here. So that's basically what poster does. So that's basically for the market off our header. 33. Styling The Header: Now we'll style our header, so we have already linked our style. But CSS file in our index dot estimates. So let's go to style. Dorsey's is first of all, will apply some global styling, So we'll dive star over here and here. We'll type box sizing Taub order books. Now, let me explain to you what will happen if the box sizing is not said to bottle box. So if you have a division with off say 100 pixels and then you have a border off four picks is then the total with off that division will be 100 pixels, plus four pixels off border on the left side and four pictures of border on the right side , so the total which would be 108 pixels. But if you add box eyes into border books, and if you add border or padding to your division than the width of the division will not change. So in our case, the with off the division, including the border, will be 100 pixels, and the next thing we'll do is remove this margin over here so we'll type margin zero. And if I save this, we can see, we don't have any margin in Arpege, and I will also give some style toe the body. We'll give the body off one family off railway so you can see our phone pass changed now in style, The actual header element. So we just write a comment header. Now, to access a tag, all you do is type the name of the attack and write our style inside. This girl embraces. And if you have a class like we have over here in our video we have a class called mein video. So if you have a class, then you can access that by typing the name of the class over here. And if you have a division, then you can type hash and the name of the division and write your style inside here. So this is how you can access the elements inside estimate for styling. All right, now we'll style the header. So, first of all for the header, we will give Ah, height off. 100. Report tight report. Height is the height off the window, so it will be 100% off the height off our window. But if we scroll down, we can see that it has hight off more than 100 report Hide. This is because the video has a large height and so we have the heading and button pushed down. So what we'll do is we'll set the overflow toe hidden. So now we can see that we cannot scroll down but are heading is still below our video. So first of all will set the position off our video toe. Absolute. So for that, first of all, you had to say the position off header toe relative and we'll set the position off video toe absolute. And we'll also give it a minimum height and a minimum it so minimum height off 100 report height and a minimum picked off 100%. Now our text is right here, but we cannot see it because the video is on top of that. So we had to set the set index toe something lower than it is now. So right now, the value off that index is one. So I feel said toe, say negative 100. Then we can see our video is behind the text and you can see the header over here Now the next thing we'll do is, uh, place this header and button in the center off our header element. So for that, we can use flex books in CS Is Flat. Books is basically a way to arrange items on the screen to use flex books. About the first of all said that display off the parent element to flex. So our parent element is headers off type display flex and then to center it vertically. You can type a line items tow center and to center it presently you have to type justify content toe the center. Now, by default, the direction off like spokes is said to roll. So we have this heading over here and this button on the right. So to change that, you have to just type flex direction toe column. So here we can see the heading is at the top, and the button at the bottom will also say the color of the text to white. We can also put a hex value over here. So if I hover over this color, we have this extension which gives us the colors. And if I click on this, we get the hex value. All right, so Now we'll go ahead and style the it's one, so we'll type it. One that said the margin toe 16 pixels and said the letter spacing 24 pixels. Was it the phone size do 48 pixels and the front weight toe 400 novel style? The buttons. So for the button, we have given it a class off BT end so he will die. But don't be the end, because this is a class and first of all, well, said the background color, and we'll set it to do treat b five b five. And we said the color of the text to white, and we'll also set a padding off 12 pixels on a minimum wit off 1 60 pixels and text align to the center actually said the color of the text to black. And they said the front weight Tau 900 we'll get rid off this Underland. So for that we have to type text, decoration, toe none. No one said a top margin for our buttons so that we'll have a space in between these. So he will type margin talked and we'll cedatos 16 pixels, and we'll also give it a border. So that border and the sickness off our borders should be one pixel. And there are different types of borders. Will just said the border to solid. And we'll also set a color off the border toe white. Now, the last thing you do is set a margin for our icon so that we'll have a space between this world and this icon. So the icons are inside our I tag. So if I go over here, we can see this is the Eyetech. We will accident over here and here we will type margin and for the top and bottom will have a margin off zero. And for left and right will hand margin off eight pixels. So that's basically with the header. In the next video, we'll start designing the navigation bar. 34. Markup For Navbar: in this video, we'll right the market for our navigation menu now for the now bar will use an estimated five tag called Now, First of all, going to display the logo so we'll create a division and we'll give it a class name. Off, logo and inside or division will have a logo, but we want our logo to be clickable, so we'll create an ankle tag. I would just die pass full now and here we will include our image so that I am G and for the source of type images slash logo dot PNG on for the out will dive logo for navigation menus we usually use on another list. So we'll create an another list, and we'll also give it a class off this stop now, and it will create for list items and the list. Adams will create ankle tags, so here will type about and we'll copy this three more times. So if you're using V s code, you can just press shift and out and press the down arrow to copy so he will type work and hearing how testimonials and he will have contact. So that's basically with the market off our navigation menu. So let's go to our website here. We can see our navigation menu and we have this local image over here, which is pretty large, which we're gonna style using ceases. And we have this navigation millions. So that's it for this video in the next to the oval style out navigation bar. 35. Styling The Navbar: Now let's start styling our navigation bar. So first of all, we'll create a comment and we'll type now bar over here on the first of all, you style our logo. So if you go to index, start estimable, we can see that for the local division. We have given a class off logo, so let's go to our style or CSS and A Here we will type dot logo and we'll give it, Ah, height off 40 pixels. Now our local division has height off 40 pixels. So now we have to style the ninja attack inside the local division. So little type logo. I am G and he'll get, ah, height off 100%. So there we have our logo with, ah, height off 40 pixels now style the now element. So he will not now, and we'll give it the height off 60 pixels and well, said the display toe flex. I'll drive justify content toe space between. So here you can see we have the space between these two elements novel style, this vertical isobel type align items, tow center. We'll also give it a padding off 16 pixels, and we'll set a maximum of it off 1024 pixels. Now, when you scroll down, we don't want it to go up. We just want the navigation bar to stay over here so he will die a position toe fixed. Now the navigation bar will still be here even if we scroll down. But we can see that the whip off our now element has changed. So if you just give it a background color for testing here, we can see that the width has decreased. So he will also have to type some lines. Of course, on top, top zero, right to zero and left to zero. So this recep, our VIP. So just get rid off this background color. I will also give this is that index off 200 so that the whole number will be on top of everything. 90 Maximus, This window we can see that are never is on the left side. So we had to center this. So for that you have to type margin 04 top and bottom and auto for left and right. So if I save this, we can see that the now bar is at the center Now we want our now menus to be placed horizontally. So here we will style the desktop now. So if you go over here in our estimate file, we can see that for this. Another list we have given a class called They stop now, so he will style out the stop now. So you just said that displayed to flex. So here we can see all the menu items are placed horizontally. No style. The list items inside our list off now, so I'll type desktop now, Ally. And first of all, we'll remove these darts from our many items. So for that, there are two type list style. Do none, and we'll also give each off these list Adams a margin. So we'll dive margin zero for the top and bottom and 16 pixels for left and right. No style. The ANC attacks over the stop now Ally A and the first of all well said the color of the text to white will also remove These underlines so type text, decoration, toe none. We'll display the underlines when we hover over these items, so he will type the stop l I A. And then your time Colon hover. So what? We're style we provide over here will be applied when we hover over this. So we just said the text decoration toe underlined. So now if I hover over this, we have these underlines knowledge style. What should happen when we school down. So when it's cold on, we want to have a different styling for our navigation bar. So what we're gonna do is when we scroll down, we're gonna add a class toe this now bar. So let's go to our index that estimable. And now we're gonna pretend that we have scrolled down So we just add a class over here and you can name this anti want We just type scrolled over here. So when we have a now with a class of scrolled, then we have to have a specific style So we'll go to our style look seizes So we'll write this style just after all Now sociable type now dot scrolled So here you to keep in mind that you shouldn't have any space in between. You have to type now dot scrolled So this means that it should be an hour and it also has a class called scrolled, So he will give it a background color off white and the height off 50 pixels. So here we have a height of 60 pixels, and when we scroll down beyond toe, reduce the height and we'll also give it a box shadow. So that book sandal for the book said we had to provide the following values. The 1st 1 is the X offset. So we'll set it to zero. The next value is the Y offset. So we're gonna set it 04 pixels. The next value is the blow radius. So we're gonna set it toe 10 pixels. The next is the spread radius. So we just started to minus one pixels and the last value is the color off our books shadow . So type rgb a. So here we're having the red, green, blue and the Alfa, which is the transparency. So we'll give the clever off 000 which is the black color and will give the transparency off 0.75 So this is the box shadow. I will change the color off the text toe black sold up. Now don't scrolled and we have to change the color of the ANC attacks over time. That's stopped now space ally and the ankle tag inside that. So it's the color toe black. Now the last thing to do is add a smooth transition between this now state and this scroll now state. So if you go to the orginal website, we can see that we have a smooth transition between the now and the now dot strolled. So for that in your now you have to type transition and we can specify the styles that we want transition for. So, for example, we can type padding and give it a time. So 0.4 seconds now, it will have a small transition for the padding. But we want transition for all the styles, so we'll just type all over here. So if I save this, we can see we have this small transition. So that's basically it. With the number in the next video, we'll start designing the about page 36. Markup For The About Section: Now we'll start with the about section. So if you go to the original website and if you scroll down, we can see that we have this about section over here and we have this heading and we have three paragraphs on this image on the right. One thing to notice over here is that we have a set mags Bonwit So the width of this about section won't be greater than at this with over here this will make out designed, consistent throughout different screen sizes. So let's go to arrest Immel file Now here after the heading will just give a comment header end. So for the about section will first awful create division and we'll give it a class name off Rapper There's a shortcut to type divisions with class name, envious court. You just have to die. I don't if it's a class or hash if it is an i d. So in our case it is a class so type dot and the name of the class and then press tab and we get this division with the class name off rapper So you know, division will create a section and we'll give the class called about and in this section will create a division with the class off description. And here we will have and it's too, and he will type about us. Now. Here will create some paragraphs. So Type P and Tab and the envious Cody can this type Florham and that the number off words you want and plus stab and you get this Law Room ipsum text with the number off words, we'll create two more paragraphs. Thanks. Now, after this division will create one more division for the image so we'll get the class off thumbnail. And here you create and I am the attack and the Hill DYP images slash about dark PNG about us, and that's visited with our about section. So just give it a comment about section end and I will go to our website. So if it's cool down, we can see the about section and we have this image over here, or that's it. With the market off our about US section in the next video is time. The about section 37. Styling The About Section: or a novel style the about section. But before that, let's go ahead and give some global styling. So for the paragraph, will you line height off? Do now? Here you can see we have the space between these lines of text. Now it also gives some styling toe the rapper division, so he will type Max it off 1024 pixels and the real center it horizontally. So we'll time margin zero for the top and bottom and photo for left and right. So if you maximize this, we can see that it is centered. Now let's set some styling toe all the sections in general, so he will give a comment sections and Harold Section Onda We will give a padding off 16 pixels and a here we can see we have this patting patting is basically the space from the border off your division. So we have the space over here off 16 pixels and we'll also set the display to flex. So here we have the description on the left and the image on the right, and I will set the height for this image. So hero type section and then we have this class called Thumbnail Andan that we have the image, so he will give it, Ah, height off 3 20 pixels or address it with the image. Now we'll style heading soul time. It's too, and we'll give it a margin off eight pixels for top and bottom and zero for left and right , and they will give it a background color. So the color that we're gonna use is to three B five b five, and then we'll set the wit toe, 200 pixels and a fending off eight assists. So that's basically with the styling off the about section. 38. Markup For The Work Section: Let's start with the work section. Here we have the hitting and here are all the images off our work. So when you click on one of these, for example, if you click on this, I can see that the images displayed over here in this large division. So we're gonna call it that functionality using JavaScript. But first of all, let's right the markup and styling off this section. So let's go to V S code and after the section ends will create a new section and will give the clouds off work. And in that we will wrap everything inside a rapper class. So we have written the style for this rapper class inside the style. Dorsey's is so here it is. We have a Magnum off 1024 pixels, so we're gonna use the same styling over here. So we'll create a division with class off rapper and, first of all, who create. And it's too. And here we will write work, and then we're gonna have to divisions one for the current image that is being displayed and the other for the gallery of for Images. So we'll create a division with the class off active work and here we will insert our image . So I am G and for the source will type images slash wonder jpg. So I have all these images in my images folder. So have again. See, this is the first image and we just stopped work over here. Then we need tohave the description off this image. So if you go to the ordinary website, we can see that for the image we have this description so for that will create a division with the class off active dash. I am G Dash d SC and we just write some Laura MIPs, um, text off 10 words. And here we will also write a number to distinguish between the different descriptions. Now create one more division for the work gallery. So here we will create a division with the class off work gallery. Now, I just got the this whole division from here and based it down here, and we'll change this to I am G God. And we'll also remove this active from here. So to be just I'm your description, all right. Now will complete this five more times, and I will just go ahead and change these images. So for the 2nd 1 will type two dot jeopardy. The third image is, uh, treat or jeopardy and four door Jeopardy and five g PG and one more. I'm Jake card, and this will change to $6.1,000,000,000. All right, so that's basically the markup off our work section. So just write a comment. Over here, work section ends. Foreknowledge go to our website so he can see the heading. We have the styling for the heading because we had already written the styling in the about section. And, uh, here is the active image, and here are all the other images. Now, in the next year, we will have some ceases to make it look exactly like this. 39. Styling The Work Section: we start with the styling off rock sections off. First of all, the right to comment Look, section and the first will target the active work class. So little time active work. And we'll set the maximum uit toe 700 pixels. And we also have to set the mood of the I M. G inside the active work So type active work space I m g. And here we will set the wit toe 100% of the container and we'll also give it a border off two pixels. Solid white now will target the active image description. So little time active. I m g dash d c. Now we want to set the position off this description related toe the active work division. So here, first of failure to set the position off the container toe position relative. And then here you can go ahead and type position absolute, and we'll set the bottom toe 16 pixels. And was it the left and the right toe? 16 picks is not good. A background color. So little time RGB a 000 and 0.9, and we'll also set a padding off 16 pixels and the color of the text toe white. Now the style, the work gallery. So he will die. Work gallery. First of all, you will said the wit to 100% off the container and then we'll set the display toe flex. Now go ahead and style. The i m G card inside the work gallery I am Jeep God and well said the whipped toe 200 pixels and margin toe eight vixens. Now we also have to set the picked off these images toe master the container. So he will add one more thing so we can add more selectors over here by just adding a comma . So time work, gallery I am to card I m g. So here are all the images and I wouldn't want to display the description over here. So for that we will die Work gallery. I am Jeep God, I m g d c, and we'll set the display toe None. So we don't have any descriptions over here now, Since these images are going all the way to the right, we can go ahead toe the the work gallery and here we can add a flex property called flex rap and we'll set it to rap. So you again see, it has ramped toe the next line, and we'll also type justify content to the center. Now it is at the center of the screen and we'll also center the active work. So hero type margin zero auto. Now the last thing to do is, and a background image over here, so we'll target the work section. So if you go to the index, that estimate vacancy for the section we have you on a class off work, So here we will provide a background image. So we are to die background and you are ill and interior toe type. The path we had to provide the pants related to this style that seizes file. So if you go to our file browser here, you can see we are in the CSS folder. Now we have to go back one folder, and then we have to go into the images folder and then into the image. So for that, what you gonna do is ah, type dot dot forward slash. So this is Vegas one folder back, and then we can go into the images folder and select the image all right. So now if I save this, we can see the images displayed over here. But we can see that the image is not covering the entire container. So for that we have to add background size and we have to set it toe cover. And then we'll also said the background position, tow center. So now if it's cold on, we can see that the image is occurring the entire container. Now, we also want a parallax effect over here. So if you go to the orginal website, we can see that when we scroll down, the image stays there. So this is the effect that we want. So for that year to just add one line off Good, that is background attachment, toe fixed. So now if you scroll down, we can see the background stays there and we have the spell X effect. Now the last thing we'll do is set a fullback for this background image. So if the image doesn't load for some reason, for example, if he just change something over here, we can see that the background changes to white. So we don't want that we want to change it toe specific color So here we can go ahead and type of color. So just type one B one B, one B. So here again, see when the image is not displayed. We have this color over here. And if we have the image than the images displayed over here, so that's basically it. With the design off our work section in the next video, we will add some generous groups toe add the functionality. 40. Adding JavaScript To Work Section: Now let's go ahead and court the functionality off this gallery that we have over here so that when we click on one off these images, we want that image to be displayed over here and also the description off that image should be displayed over here. So for that, we're going to use JavaScript. So let's go toe R. V s code. First of all, let's change these numbers so that we can distinguish between the different descriptions. So here we will change this to to So Christians toe three for five and six. Now in our index dot estimate, we have already included the JavaScript file, which is Main Door Js file. So let's go to our main road Js file and let's called the functionality off our gallery. So let's create some constants over here, so type const active image and we'll access the image from the active image division. So this one right here, So here we will die document dot Grilli selector and he will diab dot active work space I m g. And then we'll also access the images so will store all our images in this image is variable and we'll type document not very selector. All because we have multiple images, so he'll type dot I am G card space. I am G. So this will get us all the images except the active image in our images. Variable. Now, the next thing we want is the active description. So type const active D E s c and, uh filled up document. Don't criticize selector dot Active I m g d E S c now here will add the even listeners for all the images. So he will create a comment by tapping to forward slashes and the real type even listeners for images. Now, since we have multiple images in this image is variable. We can use a fore each loop toe add event listeners to all of them. Instead of adding event, listeners toe its image separately. To use a four is loop in JavaScript. You have to type the name off the variable or the area and then type dot for each And here you can give a temporary name for each image, so it just name it emit, and we will create an arrow function. And in this function, we want to return what should happen with each off the images. So here we can type image dot add even listener and we want uneven listener for the click event. So we'll click, and we want to change the amazed when the button is clicked so well, Type, change image. And we haven't created this function well. This created now, so we'll dive, function change image on dysfunction. We get an argument by default, so we'll just call it E because it's an event argument. You can name it anything. And here, first of all, will change the active image. So active image dot SRC and we'll change the SRC toe e, which is the image that we get. And then you have to type target and you'll get the target element and then type SRC. So here you get the target image and then get the source of the image and change the active image source toe the Stargate image source and in the same way, we will also change the active description sometime. Active disk dot inner STM ill and we'll changes to e dot target dot and if you go to the index dot estimate, we can see that this is the image and after that we have the description of the image. So to access that you can dive next element sibling and you want to get the inner text from that sold up in a text. So what we're doing over here is getting the inner text off the description off this image . So that's basically it with the general script for our gallery. So let's go to our website. And now if it look on the second image, we get the second image and we also get the description. Our here the same goes with all the images. Now in the CSS, we'll just change one more thing. That is, when we hover over these, we want to display a different cursor. So let's go to style or ceases. And in the I M. D card, we write a new style that is coarser and we said it two pointer. So now if you go to our website, you can see that we get this hand course over here and we can click on these images and show these images over here. So that's basically it with the word gallery 41. Markup For The Testimonials Section: all right. Now let's start writing the market for or testimonial sections. So let's go to GS code and after the work section ends will go ahead and create a new division with a class off rapper. We have already defined the style for this rapper in our style or seizes. No. So here we have a maximum off 1024 pixels and margin zero toe, so that style will be applied over here. So let's go ahead and create a section and we'll get the class off testimonials and first of all, create the heading. So in time testimonials, you can see the heading our here. Now we're gonna use a library called Glad Urges to create our testimonial slider. So let's create a division with a class name off glider contain, and in here will create a division with a class off glider. And you can name these divisions anything you want. I'm just calling it glider contain and glider, and he will create a division with the clouds off testimonial on, you know, distance until we want tohave an image. So I am G and for the source will top images slash testimonial one and were baptised money lower here. And after that, we need to have an history. So that s three. And he was Dive the name off the person, and then we need to have a paragraph. So we just have a lot of myths. Um, Text off 30 words. No, this is one of the testimonials. So just copy this and page these three more times and will change the names and the images , so we'll changes to two. And, uh, which is the name over here and for the next one will change testimonial three. And we'll also change the name on for the next one will change toe Jim and the image toe testimony before. So that's basically with the markup off testimonials. So just create a comment. Testimonials section ends. Let's go to our website. And here we can see all the testimonials. Well, style this in the next video 42. Styling The Testimonials Section: All right now we're here in the style of CSS file. Let's go out in style this testimonial section. So create a comment. Yeah, testimonials section. Now the first thing you do is said the flex direction off this testimonial section toe colon. So we'll dive testimonials and now little type, flexed direction. TOE column. So now you can see we have the heading on the top and the divisions on the bottom. Neither style. The i N Z Inside testimonial sold up testimonial. I am G, and we'll give it a wig off 1 50 pixels, and we want to have a circle for this image. So for the African type border radius. And if you want a perfect circle, Egan type 50%. And there we have the image inside a circle. I will also give it a margin off 24 pixels. Now lifestyle the testimonial section. So we'll tap testimonial and we'll set the display toe flex and said the flex direction toe column and we'll align items to the center, and we'll also textile and the paragraph to the center. Now the last thing we'll do is set a margin for the history sold out margin, eight pixels. And we can also set the phone to wait toe normal. So that's basically it with the styling off our testimonial section. Now, in the next video, I will show you how toe use the glider jails library and create a slider using a little bit of chalice script. So that's it for this video. See you in the next one. 43. Coding The Functionality of The Slider: Now we're going to use a library called Glad urges, to create the slider. So just Google for glider jailers on DA. You'll find this. Get a blink. So just click on the link over here. Here we can see the Glad Urges Homepage, and it says it is blazingly fast, and it is also small. In size is mobile. Friendly is dependency free, which means it doesn't depend on any other libraries. And there are a lot of other features. So if you go down, we can see we have the introduction, the features, and there are also demos over here. And here's the getting started guide and you can go ahead and read all these if you want, so we're just gonna go ahead and click on Download. Now this is, does it find that we just downloaded? So just go ahead and extract it and going to the folder and here against the CSS Files and JavaScript file. Just go ahead and copy both of these files, and we'll baste it in our website folder, and we'll move this CSS file into the season's Fuller and this year's file into the Jays folder. Now let's go back to R V s good longer to link Both the Seasons file and the Jazz could file in our index dot estimate file. So just go ahead and type link and room type seizes slash glider Min jae's and we will link our job script file down here So he will damp script SRC, jse slash glider Minges and we just create a script tank over here where we can write some JavaScript now here were to create a new glider object. So built up new glider now in parent is assumed to have two arguments. One is the name of the class or the idea that you have given for the country, not division. So if you go up, we can see for a container division we have given the class off glider. So here we will type document dot query, selector dot glider, and the next argument is an object which describes the property off the slider. First of all, well said the slides toe show one, so one slide will be shown at a time. Then we'll said the dots so well, tab, thoughts and here you to type the I d. Order class off a division So we'll create a division here after the bladder division, and we'll give it an I D off dots. So that has darts our here and here. We can see the dots. We can click on those and we can go to different testimonials now said the Next and the previous Arrows. So he will type arrows and we'll have another object over here with a preview and next. So for both of these, we need to have a division with the class or an I D. So let's go ahead and create divisions for next and previous. So we'll actually create a button and we'll give it a class name off glider proof and she'll add front. Awesome icon with F s and F A Shiran Circle left. And we'll just copy this and based it down here. And riches is to next. And this to write, I will go down to the script and here for the previous little time glider priv and for the next a little time glider next or And I will say this And here again, CR slider. If we click on the next button, we can go to the next testimonial. Previous button to the previous testimonial, and we can also go to the testimonials using these dots. So that's basically for this video. See when the next one. 44. Designing Contact Section: Now let's design our contact form. So let's go ahead and create a division with the class off rapper and in here will create a section with the class off contact and will create. And it's too, and we'll type contact us on well type form and will not have any action over here. We just designed this form right now, so he will create an input with the type off text, and we'll also give it a placeholder. And we'll type name over here and will duplicate this and for the placeholder here with top email. And then we need to have a text area so that text area and we'll just delete this name from here. And we also don't want the I. D. So he will create a placeholder and rules dive message. And then we also need to have submit button so that input off type submit and will type value and he will die absent. So that's basically our form. Let's go to our website and here again see our contact form. We have all the input fields and the button now hero create a comment and will say contact section ends now. Let's style this so we'll go toe style of CS is and hero type contact form. Now for the contact class, we will set the Flex Direction Toe column and for the actual form inside the contact class , we will lose display to flex and, uh, flex direction. TOE column. Now the style, the input fields. So we'll type contact for input and will also style the text area Contact form text area and here will give a padding off 12 pixels margin off eight pixels and zero and the front family off railway number style. The submit button. So he will type contact, form input and want to select only the submit button. So here we can type in square brackets. Type equals submit so only the submit button will be selected. Will set a background color off black and the color of the text to write and border Do none . All right, so that's it for this video. See when the next one 45. Designing The Footer: not. The last thing we need to do is designed the footer. So we'll type footer which is an estimate file back. So he will create a division with the class of social and he will create an s tree and real type, follow us own. And then we'll create a division with the class off social icons and hey will type all the icons so create an ankle tag. And here we can type the Ural off your social media accounts for now and just typing hash over here and in here we will use a front Awesome. I consul type I and we'll have a class called F A B and also class F A Facebook. So here again, see our Facebook. I come I'll just copy this line two more times and will change this toe effort Fitter square and this to Instagram. So you can see our Facebook, Twitter and instagram. My guns are displayed over here Now at last here will create a paragraph and Harold type. This website is developed by and here you can type your name and as usual, tribe a comment and with time, foot or ends. Now let's go to our style or ceases and let's style the footer. So create a comment on the first thing we'll do is, uh, said the background color off the footer toe black on the color of the text to white and will text the line everything to the center. And we said a batting off 16 pixels now for the social icons class will give a margin off 16 pixels and also phone size off 32 pixels. No start all the ankle tags inside social icons, soil types, social icons, A and will said the color to light. Now, when we hover over these icons, we want to change their colors. So let's select footer Onda. Let's select the Facebook Icahn and have a type call on Hohler. So now what? We're style we provide over here will be applied when we hover over the icon. So, he said, the color do three c 589 line. So not many horror over this. We can see the color is changing. Now we want to have a smooth transition. So let's style all the icons inside footer so he will die, transition and visit the transition for all the properties and will say the time as 0.4 seconds. So now if you hover over this, you can see that the color changes smoothly. Now let's copy this two more times for Twitter and Instagram For the Instagram, we will use a color even 306 c. And for Twitter we will change the color toe one day a one f two so anomaly. However, over these we can see we have different colors. So that's it with the footer off our website. 46. Updating Navbar Links & Smooth Scrolling: Now let's make these navigation menus work. But before that, let's text a land is heading to the center so we'll go toe style docs is And for the one we will say next a line. So the center. Now what we want in our website is that when you click on this about menu item over here, we wanted to goto this section off our website. So right now, when we click on about it doesn't go anywhere. So let's go to our index. Start estimable If you have different files for these different sections and you can directly type the name of the file over here, for example, if you have a file called about DOT estimates, you can directly type about dot STM ill over here and it will go to the about page. But since our website is single page, we have to use ideas over here. So if you type hash about and, ah, if you give an I d do this about so we have I d equals about. And now if you click on about we can see it goes to the about section. But there's a problem here. If you go back toe about. We can see that the heading is not visible because off this now, bark. So we have to add some more styling our here. So what we'll do is we'll remove this idea from here and here will create a division with an I d off about. I'll goto our style that ceases. And here we will add some styles. So first of all the time comment, scrolling and a heavily type about and we'll give it a padding bottom off 48 pixels or right now, if it, like on about, we can see it goes to the right place because we have this batting over here. So in the same way, we have to add padding for all the older sections, so you will type contact testimonials and work. Now we'll create these divisions in our index dot estimates. So we just stroll down and for the work section will create a division with an I D off work and ah, for the testimonials will create a division with and I d off testimonials and for the contact will create a division with an I D off contact. All right, so that's it. With all the divisions. Now let's go to our now menu, and here we will update all the links. So for the work, we will type hash work and testimonials over here and here. We have contact. Now let's go ahead and check whether this works. So if you click on about, we go to the about section. If I click on work, we go to the work section and testimonials. Onda testimonials is not working. If I click on contact, we go to the Contact US section. Let's see why testimonials is not working here. We have a type of we have top testimonials. All right, now let's click on testimonials and it goes to testimonials. Work about contact and everything is working. And now, if you click on this logo, we go to the top of the page. That is because we have hash over here, so when we find hash, it goes to the top of the page. So that's it for all the links off our menu items. Now the last thing we need to do is add smooth strolling. So when we click on about we should not directly goto about us, it should go smoothly. So let's go to our style dot CS is And, uh, here we will add a property for STM ill and we will type scroll behavior. And we said it was mood. All right, now, if you click on about begins, say it smoothly goes toe about work testimonials, contact. And if it was on logo, we go to the top off the website. Now, if you go to our indexed on external here we have a class called Scrolled for the now. So what we'll do is we'll remove this class from here and we will add this class on leaving the pages gold. And if the pages all the way up, then we don't want to have this class. So let's delete this class from here. And the knowledge goto our John script file. We will add and remove the classes over here. So first off a little store the now inside a now constant and was said document don't clearly selector and they will stop now. Now create a comment and will say scroll menu and class. Now, everything you see over here is a window object in javascript. So what want to do is add an event listener toe the window, several top window dot Add even listener and we will add a Nimet listener for scroll. So when are the pages scrawled? This even will be triggered. Now we can create a function over here so we can type function and we can type it like this . But in the latest version off javascript, that is six. We also have a different style off writing a function which is called arrow functions. So let's write an arrow function over here for the Arab functions. You have to write the arguments inside this parentis is and if you don't have any arguments , you can leave. The parentis is blank and then you can type equals greater than and then have curly braces . So this is how you write an arrow function. You'll find out of functions in Ah, a lot off modern JavaScript code. So here we go top if window dot and we have to check the page by offset, which is how many picks is. The page has scrolled so that page why offset and if it has crawled more than 30 picks is they don't add the scrolled class toe the now so he revealed type now dot class list dot ad and the hero to type the name of the class, so the name of the classes scrolled and else. If this is not the case, that is, if the scroll amount is less than 30 pixels from top will remove the class. So now dot classless dot remove scrolled. All right now let's stick whether this works. So if you scroll down, you can see we get this class off strolled, and if it's cool up, the class is removed. So that's basically how you add classes when you scroll down. So that's basically for this video, see when the next one. 47. Adding Responsiveness: Now let's design the mobile version off our website. So whenever a user visits this website on a mobile device, we don't want to show these many items. Tow them. Will you show a menu icon over here? And whenever the user clicks on the icon, these many items will be displayed over here. So let's go ahead and write the market for a mobile navigation menu. First of all will create the menu button, so we'll create a division with the class off menu button and in this division will use a front. Awesome icons will type I and Type A class off F A S and F Aybar's. So here is our icon. I hope that you can see this icon, and then we'll create the close button. So when or the menu button is clicked, we want to display the close button instead of the many button, and when the close button is clicked, the menu button will come back. So let's create the close button so created division with the class off clothes button, and here we will have an icon with the class off F s and F eight times. We cannot see the close button because it is on the right side off this icon. So let's just right the market for now. And now we'll copy this another lease from here and well paced it right here and will change this toe mobile now. And one thing that will make over here is we will have a Nikon before the the menu items. So he will type I with the class off F S F A dash info bash circle and for the work, we will have an icon with the class off FS and F A briefcase. And for the testimonials, we'll have an icon with a class off F S and F A comments. And for the contact, we will have an icon with the class off F S and F A envelope. So that's all for the markup off our mobile Now. Now let's go to our ceases and apply some styling. Now the first thing we'll do is whenever we are on a desktop version, we don't want to display the mobile now. So here will type mobile now and many button and close button Onda will said the display toe none. So this is before the desktop version now will write the style for the mobile version. Now for a plank styling for different screen sizes. We use this thing called media Queries, So let's type a comment and will type media queries. So let me show you how to use media queries to use media queries Your to first off all the time at media and in parentis is year to type the max with or the men with. So in our case will type Max wit and you have to type the width in pixels so little type 800 pixels and then didn't have curly braces. Now what this does the brother is that whenever the it is less than 800 pixels, we want to apply these times over here now to know the bit off your browser window in Google chrome, you have to first of all, open the developer tools. So it just rightly over here and click on, inspect and then just minimize this. Not when we resize the window. We can see the size on the top right corner off the screen. So right now we can see the wit is 606 pixels, and we just said it will say 7 70 pixels. Now we know that the whipped is less than 800 pixels, so we just add a style over here and see whether it works. So we will type, star and will say color equals red and you can see the color has seems to read now if he increased of it. And not is that venera we? How the with greater than 800 picks is the color changes the white. And when we go less than 800 pixels, the color changes to read. So we know that the media queries are working now. The first thing that will do over here is target the desktop now and well said that displayed toe none. So now we cannot see the desktop navigation over here. Now let's apply some styles to the many wooden and the close button that we just created, so we'll type menu Bt and and close between so well, said the displayed toe block. And here we can see the icons and well said the former size 24 pixels and the cursor two pointer so that January hover over this We have this hand icon now, Initially, you don't want to display the close button, so I will just start close button and we'll set the display. Do none. Now let's style the mobile now class. So he'll type mobile now and well, said the displayed toe Flex and said the position No fixed and the height to 100% and the wit to 100% but also said the top 20 and left to zero now will align items to the center. And, Lohse said, justify content to the center. No, said a background color toe black. And we said The Flex Direction toe column now said the padding to zero my will style the list items inside Mobile now. So for the list, items will give a margin off 16 pixels and eight pixels. Andan I will style the ANC attacks so mobile now Ally A. And we'll set the color too right and a text decoration toe none to remove the underlines. And then we'll set the phone size toe 20 pixels, and we're gonna see the about icon over here. So let's go to our index dot estimate Onda here for the class. We should have a space in between so These are two different classes. All right, so now here we can see the icon. So let's go back to our style or ceases. Now, let me show you how to add a line over all these many items. So first off always said the position off this ANC attack two relative and we will use a pseudo selector called before. So we'll dive mobile now a lie A and well before Over here. Now what we can do with this before selector is that you can type a content over here. So, for example, if I type hey again, see before all our menu items is displayed So in this way you can add some creative styles to your seizes. So let's remove this A from here and well said the wit toe 100%. Who said the position toe absolute. And you said the top two managed well. Pixels and the border talk to one pixel solid. Right. So here we can see we have these lines before all the menu items. Now, we don't want the mobile now to be displayed by default when we click on the menu button over here. This mobile now should be visible. So let's go over here and in mobile. Navid will add some more styles. So first of all, you said, the pointer events toe none. Now what this land of court does is that it prevents the user from interacting with these elements. And then what we'll do is set the top toe 500 fixes. So a navigation menu will appear from down here, and we'll also set the capacity so 20 or it. Now let's create an active class just like we did with the scrolled class. So Dive Mobile now don't active and we don't want to have a space in between because whenever we have both these classes, then these styles will be applied. So let's set the capacity toe one top 20 and pointer events toe Auto. Now here we can see if we have this black color for this icon. So let's go toe very have styled the now. So here we have the non element. So here we will die color, right, and we can see we have this white color for our menu icon. Now, when we scroll down the background, color changes to white. So we want to change the color off the menu toe black. So let's go over here and a hero time now dot scrolled. And when we have now scrolled, we want to change the color off the many buttons with a menu button and the hilltop color toe black. So when we go up the collection just to white and when we go down, the color changes to black. Now we'll also make some minor changes to our other sections. So let's go over here to the media queries and, ah, several times about And when we are less than 800 pixels will set the Flex Direction two column and we'll align items So the center bulging the height off the thumbnail inside about about dot com nail and we'll set the height toe 200 pixels, and we'll also change the height off the I. M. G. Inside Thumbnail So said the height to 100%. Now the last thing we'll do is set the width off these these I M G cards over here, so he will dive dot work gallery dot I am G card and well, said the wit 2140 pixels. So that's basically with the design off the mobile version off our website and the next we do, we will add some JavaScript toe, make this menu button work. So that's it for this video. See you in the next one. 48. Mobile Navigation: Now let's write some JavaScript to make this many button work. So let's go to our main door Js file. And here at the beginning we will access some elements, so he will type CONST Menu button and a human type document dot very selector and dot menu dash button. So just don't get this. And here we will time close button and here of that mobile now, and we'll also change these names over here. So mobile math and close Bt in and I will write the code for displaying the navigation menu so he will type mobile Now now, lad, an event listener toe the many button so we'll have many BT and and even listener. And we won't even listener for Click and he will create a function first of all level. Add the class active to mobile now so mobile now dot class list dot ad and hilltop active, and I want to display the close button and hide this many wooden so damp clothes beat the n dot style dot display equals block. So in this way we can apply styles to our elements using JavaScript. So first you have to type the name of the element and then type style and then the style and the value over here, and we'll set the style of the menu items to display none. So is that many button dot style dot display equals none. So now let's click on this many button and we can see the mobile now is displayed over here . But we have some problems. We have these bullets over here, which you want to remove, and our close button is also not showing up. So let's go to our style. Dorsey's is and ah, here for the ally. We will type list style, do none, so we don't have the bullets anymore. Now to display our close button, we have to go to the close button over here, and we have to set as that index visit a high number. So say 1000 and now we can see the close button. So let's go back toe main door chairs and, uh, we will add an event listener for the close button as well. So just copy this and well paced it over here, and we'll change this many button toe close button and we want to remove the active class when we click on the close button, so we'll type removed and we want, Toe said. That displayed toe none for the close button and for the many button we will send it to block. All right, so now let's test our many button and the close button. So when weekly contest, many button, we can see this nominee over here. And when we click on disclose button, the now manual disappears. Now we also want to add a transition toe our nominee so that it appears smoothly. So let's go to our style or ceases. And here we will add a transition off all with a value of 0.4 seconds. So now, if you click on this many button we can see we have the smooth transition and rhythmically gone close button. It goes back now. One more thing we need to do. Our here is when we click on this menu button, we get this nominee you, and when we click on one off the menu items, it goes to that place. But this mobile now doesn't disappear, so let's go to a job script and the here will access all the ankle tax, so we will type Const mumble now links and with political toe document. I don't really selector and will die dot mobile now a. So all the ankle tax inside or mobile man will be stored in our mobile. Now links. Now let's and even listeners for all the anchor tax. So he will type a comment more Boone out may new links and we'll type mobile now links. And we will use the for each loop to look through all these knave wings and apply even listeners. So he will die dot for each and in panties is we have to give a name for single now links so that link and will create an arrow function and here with type link dot and even listener for Blick and we'll create a function. And we'll just copy these three lines off court from here, which we had for the close button and based it over here. So that's basically with the now menu. So let's check this out, and we seem to have some error in our code because, uh, when we scroll down, the scrolled class is not being applied, so let's go toe, inspect and see whether we have any errors. So let's go to console. And here we can see we have an error and it stays. That adamant listener should have two arguments, but only one is present. So let's go over here and for the ad event listener and we had closed or panties is over here. So let's remove this from here. Onda, Uh, and we have to add one more. Parentis is over here for our for each so we can see that our Rainbow Brackets extension is helping us here. So here we can see the green is for this. Parentis is over here, and the red one is for this function and this yellow for this for Islam. So let's say this and we can see everything is working. Let's click on our menu button on. Definitely gone, said testimonials. We can see the nominee disappears and we get to the testimonials. So that's basically with the mobile version off our website 49. Testing & Bug Fixing: all right. Now that we have designed our website, let's go ahead and test whether our website works well on desktop and mobile. So here is our header section. And first of all, let's take whether all these non items work. So we'll click on about and it goes to the about section. We'll click on work. It goes to the work section testimonials, and it goes to the testimonial section contact, and it goes to the contact. 16 Onda. When we click on this logo over here, it goes back to the top off the website. All right, so our video is also working. We have this heading over here and let's click on this contact button. I don't think we have added the link for contact over here. If I click on that, we don't go anywhere. So let's go toe RVs code and will goto the header section. And here, instead of hands, will dive has contact. All right, now let's see whether it works. So we're gonna contact and it goes to the contact 16. Right? Our header is working. All right, we'll go to the about section. There's no problems there and in the works section. We will just click on each of these images and we get those images over here and even the text is changing, so we have no problems over here. So let's go down to the testimonial section on Darrelle. Click on this next button on we go to the next testimonial, the previous easels of working, and let's check whether these dots are working and everything is working perfectly in the testimonial section. Let's go to the contact six in and here we can type name, email and messages, and we also have this color changing when we hover over these social media icons. So everything is working all right in our desktop version. So now let's take our mobile version. So to check the mobile version, you can resize the with off your window or else again, open the developer tools. So just right. Click here and click on Inspect and just pick on this icon over here, which says Total device toolbar. So I just click on this icon, and here it shows how our website will look on a mobile device. We have this icon over here, and when we click on that, we get this non menu and we can go to different areas off our website. So let's going on about and it goes to the about section. Let's quickly check all the other now links. So work also works fine testimonials. And the slider is also working all right. And everything in our testimonials is working. I will goto the contact section and here we can see the contacts section. We just checked whether everything is working fine in our work section. Right now let's click on this logo and everything is working. All right, so that's basically you can also go ahead and change different devices over here. And you can also rotate your device. This is how our website will look when it is rotated. All right, so that's it. We have our website completely ready for deployment. So that's it for this video and see you in the next one 50. Hosting Our Website: Once you're developed your website, the next thing you want to do is let the world see your website. So you have to store the files in your website on some server that can be accessed by everyone on the Internet. Now there are Web hosting services, which you can poaches, which will allow you to host your websites on their server. Some of the popular ones are host Gator, GoDaddy, side ground and blue host. There are lot more all right now, after producing the hosting service, you have to put this a domain name that is the name off your website. So there are domain registrants which help you purchase the domain names that you like. Some popular websites where you can purchase domain names are GoDaddy domain dot com, named Cheap and Blue Host. Now, if you're producing or hosting service for the first time, you may get offers where you will get a domain name for free for a year. So just do a little bit off research before purchasing the hosting service and the domain name. Now you just need to configure the Deena's off your domain name to point to the hosting interests. You'll get all the instructions in your email when you purchase the hosting service. So that is basically how Website is hosted. Now there are freeways as well to host your website. If we're just getting started, one of them is called metal. If I using Netley, why you can host your static websites? So let me show you how to host your website for free using Netley for now, the first thing you need to do is go to nettle. If i dot com and create an account by clicking on, sign up. And if you go over here toe pricing, we can see if you have different pricing. Over here we have this free plan as well as the paid ones and you can find all the features over here. All right, so once you're signed up, just log into your account. Now, let me show you how easy it is to host your website on net Lif I first of all, just browse to the folder off your website. So this is our website folder. If you go inside, we can see all the files and folders, So you have to go to the main folder off your website. So this is our main folder and just drag and drop it in tow. Nettle. If I and that's it, our site is hosted on this crazy you're over here, so let's click on that. And here we can see our website and everything is working perfectly. So that's basically how easy it is to host your website on Netley five. And you can also change the name of our website over here. So let's go ahead and let's go to our dominant sittings and click on this options and edit side name and you can change this name over here. But this nettle if I dot com will stay over here, that's because it is a free domain name. So let's changes to something else and we can see it has changed to my new website dot net cliff i dot com. I want to add your custom domain toe nettle. If I just click on add custom domain and hear your to type the name off your domain and click on verify and then change the DNS settings off your dominant and you can find all the instructions over here. So just go through this and you can add your custom domain toe your nettle if I website so that's basically for this video behind hosted our website or Netley fire. And in the next video I'll show you how to get the contact leaders off a roadside using Netley fire. So that's it for this video. See you in the next one. 51. Making The Contact Form Work: right now that we have deployed our website and it's live on my new website dot net. If i dot com let's make this contact from work. So if you go to the contact form, we have our design ready. But whenever we type something over here and when we click on the send button, it doesn't send this data anywhere. So just Google for Netley five forms and you'll get this link. So here are the instructions off how we can make the contact phone work. So you just have to add the data nettle if I equals true attributes to your form, and you also have to add the name and tribute to the form and the input fields. So let's go to RVs code and they will go to the contact form and here to give a name for the contact forms with that name equals contact. And then we have to dive data dash nickel if I equals true, and we also have to give it a method off post, and we also have to have name attributes for our input fields. So here for the input field for name, we will give a name attribute and we said the value to name and for the email said the name and tribute toe email and for the message will set the name in tribute to message. Now using liquefy, you can also add capture to your form. So let's go toe the webpage. And if you scroll down, we can see that we have this option off setting a capture. So all you have to do is add this data passionately. Find ash recapture equals true to your form and also create a division where you want the capture and also said the attribute on the division. So let's go to the U. S. Code and for the form we will just copied the alternately fiery capture equals true. And after the text area, we want to have the capture. So here we will create a diversion and we will give this attribute over here. Now that's it for the contact form that save this. And we have to update our website on Netley five. So let's go toe nettle. If I home page Andre logging and they're just going to your website and click on the PLO's and a here can dragon drop your website folder. So let's go to our website folder. So we'll go back one step and this is our upset folder. So just dragon robe, this to notify and our website has been updated. So let's go ahead and open. This one's more and it's goto contact and here again see our contact form. And we also have the capture over here, and we'll test it by sending some data. So it was Type some name over here and some email lady and will type a message over here. All right, Now you click on I'm not a robot and then you consent and we get a thank you message over here. We'll go back to our side, and now we'll go to our admin area and will refresh our page. And if it's called down here, we can see recent form submissions will click on this, and here we have our submission. We have the name, email and the message. You can also let the user send files to you. So that's basically how you make your contact form work, using metal. If I and that's it for this video, see you in the next one 52. Web Design Exercise: Now that you're designed and even hosted your website, let me give you a Web design exercise, so I'll show you an image and you have to design it using esteem, Elsie asses and JavaScript. So here's the image. So that's the image. I hope designing this will help you revise everything that we have learned so far. So good luck on designing the website and see you in the next one. 53. Web Design Exercise Solution (Time-lapse): 54. What Next?: congratulations on completing the course. You have learned the basics off Web design that is a simple five and ceases. If you have followed all the lectures, I believe that you have a complete, responsive website ready. We also had a brief introduction to JavaScript, which we used to called the functionality off the neighbor. I'm sure that now you'll be able to design different types of websites. If you have any questions, you can ask them in the comments section, and I'll try to help you. To the best of my knowledge. Now that you have learned estimate, file and seizes, you should start designing different websites. Try to use the approach that we had in the scores to design your websites, try to experiment with different seasons properties and learn more about New Seasons. Features like Flex books and CS is great. We're getting used more and more in more than websites. Although we have used flex books in our course, there's more to flex books which you can search online. I would like to recommend to you a great resource for learning estimate and seizes. It is called Indian Web docks. Just go to the website and search for the tank or the property and seize is that you want to learn more about and it'll show you the syntax and details about them. We can also browse through and learn news. Here's his properties. After designing fight to 10 different types of websites, read more about JavaScript and start learning it. John Slipped is heavily used in websites today. Learning JavaScript can also be useful for writing server side code using Norges. If you want to become a full stack Web developer, then start learning some service side languages. Some of the popular server side languages are PHP, python and java. Norges is also used a lot nowadays for writing service side called using John Swift so you can take it up as well. So that's basically a road map that you can follow going forward. I hope this course was helpful for you. I'm eager to hear back from you. If you think this course was worth it, don't forget to submit your review. And if you think that for some reason this course isn't worth it, please let me know where I can improve. So that's all for this video. Thank you so much and have a nice day