Build 30+ Web Projects with HTML, CSS, and JavaScript | Giorgi Lomidze | Skillshare
Drawer
Search

Playback Speed


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

Build 30+ Web Projects with HTML, CSS, and JavaScript

teacher avatar Giorgi Lomidze, UI / UX Designer

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

    • 1.

      Introduction

      1:52

    • 2.

      Welcome to the Class

      1:45

    • 3.

      Setup

      1:56

    • 4.

      Project 1 - 3D Forms

      25:24

    • 5.

      Project 2 - House

      32:02

    • 6.

      Project 3 - Search Bar

      20:42

    • 7.

      Project 4 - Clock

      21:40

    • 8.

      Project 5 - Navbar

      21:25

    • 9.

      Project 6 - Website Loaders

      19:20

    • 10.

      Project 7 - Ripple Button

      16:40

    • 11.

      Project 8 - Rounded Progress Bar

      22:25

    • 12.

      Project 9 - Slideshow of Social Media Icons

      17:09

    • 13.

      Project 10 - Forms with Validation

      63:47

    • 14.

      Project 11 - Calendar

      41:25

    • 15.

      Project 12 - Countdown

      32:32

    • 16.

      Project 13 - Profile Card

      40:01

    • 17.

      Project 14 - CSS Grid Menu

      54:49

    • 18.

      Project 15 - CSS Navigation

      16:46

    • 19.

      Project 16 - Dropdown Menu

    • 20.

      Project 17 - Navigation

      19:38

    • 21.

      Project 18 - Rounded Navbar

      16:36

    • 22.

      Project 19 - Sidebar Menu

      72:55

    • 23.

      Project 20 - Hamburger Menu

      21:05

    • 24.

      Project 21 - Creative Button

      8:54

    • 25.

      Project 22 - Slideshow

      38:55

    • 26.

      Project 23 - Custom CSS Radio Button

      11:13

    • 27.

      Project 24 - Business Card

      22:38

    • 28.

      Project 25 - 3D Card

      9:09

    • 29.

      Project 26 - Custom CSS Checkbox

      11:00

    • 30.

      Project 27 - Hamburger Menu

      21:05

    • 31.

      Project 28 - Pricing Cards

      21:45

    • 32.

      Project 29 - CSS Toggle Button

      10:52

    • 33.

      Project 30 - CSS Grid Gallery

      13:43

    • 34.

      Project 31 - Landing Page with Modal Forms

      43:04

    • 35.

      Project 32 - Animated Landing Page

      19:54

    • 36.

      Project 33 - 3D Button

      13:43

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

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

286

Students

--

Projects

About This Class

Resource Files

Welcome to the brand new class, where you can learn about how to create modern and beautiful web projects and templates, if you want to develop and customize your portfolio, become an experienced developer, and get hired, then this is the right course for you.

We will build together more than 30 different and creative web projects with three core technologies HTML CSS and JavaScript.

If you have some basic knowledge of these technologies and still you have some trouble creating your own web projects, or if you want to level up your developer and designer skills, then you come to the right place.

We will build more than 30 different web projects and they will be full of modern, nice, and beautiful effects and designs.

We will start with relatively simple projects and we will go through some advanced ones as well.

We can guarantee you that you will master the front-end web development after completing this course.

Using this course, you can get the inspirations that will help you to enhance your projects and customize your portfolio.

Mastering just these core technologies of Front-end web development, you can create awesome and modern themes and simply get hired.

Also, you will have enough knowledge to move on and learn other technologies like some front-end frameworks and libraries, which nowadays are really popular and highly demanded.

Meet Your Teacher

Teacher Profile Image

Giorgi Lomidze

UI / UX Designer

Teacher

Hi,

I'm George, an UI / UX Designer, Web Developer, Founder at 'Code And Create' , and an author of several best-selling online classes.

I'm excited that I have a chance to help people to learn one of the most interesting and hottest fields in the world.

I decided to share my knowledge and experience with you and that's the main reason for being here at Skillshare.

Looking forward to seeing you inside my classes and help you to become a professional UI / UX Designer

See full profile

Related Skills

Development Web Development
Level: All Levels

Class Ratings

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Introduction: Welcome to the brand new course, where you can learn about how to create modern and beautiful web projects and templates. If you want to develop and customize your portfolio, become an experienced developer and get hired, then this is the right course for you. We'll build together more than 30 different and creative web projects with three core technologies, HTML, CSS, and JavaScript. If you have some basic knowledge of these technologies. And still we have some trouble creating your own web projects. Or if you want to level up your developer and designers close, then you've come to the right place. We created this course in order to give students the best experience in three core technologies and allow them to create the best modern and creative projects. We will build more than 30 different web projects. And they will be full of modern, nice and beautiful effects and decides. We will start with relatively simple projects and we'll go through some advanced ones as well. We can guarantee you that you will master the front end web development. After completing this course. Using this course, you can get the inspirations that will help you to enhance your projects and customize your portfolio. Mastering just these core technologies of trunk and web development. You can create awesome and modern themes and simply get hired. Also, you will have enough knowledge to move on and learn other technologies like sub-problem frameworks and libraries, which nowadays are really popular and highly demanded. The course will be interesting and useful. So I would recommend you to try to get the most out of this course without just copying and pasting the code. If I were in your shoes, I would definitely dream of a course like this. So join us 2. Welcome to the Class: Hello and welcome to the course. I hope that this will be your right course and you will enjoy the projects that we will be building throughout this course. So as you already know, we're going to create more than 30 different, modern and creative where projects are those projects will be built based on three core technologies of front-end web development, HTML, CSS, and JavaScript. I would like to mention one thing. As I said, the projects will be created based on HTML, CSS, and JavaScript. So you should have a basic understanding of those technologies in order to follow the lectures and not to get confused. The projects will be full of different modern techniques and tricks. You will be able to learn about how to create nice and beautiful effects and animations, which then you can use as the inspiration to develop and customize your own portfolio. As I mentioned, we will be building more than 30 projects. They are independent templates, so you don't have to go through them in order. You can build any of the projects you want from the list. It's absolutely up to you. Some of the projects are simple ones, but also you will meet some advanced projects as well. So we included all the levels that the developer needs. Throughout the course, we will build projects like navigations, slideshows, custom checkboxes, 3D cards, and other interesting and creative projects. So I'm sure you will enjoy them. I think you will get a huge practice and experience in front-end web development in which HTML, CSS, and JavaScript are a must. Alright, so let's move on and get started. 3. Setup: Hello and welcome to the course. We're glad that you're here and we hope that you will enjoy the course before we dive deeper and start to create our projects. First of all, we have to prepare our working environment. I'm sure that most of you are already prepared to write the code. If so, then you can feel free to skip this video and jump into the projects right away. But if not, then that's not the problem. Let's go ahead and set up some tools. Throughout this course, we will need two main tools, which are modern web browser and a text editor. As the web browser, I'm going to use mostly Google Chrome. And also in some cases we'll need the help of Mozilla Firefox as well. I'm sure that you already know how to install this web browsers, and I think you all already have them. But anyway, let's see how to download them. In order to get the Google Chrome, we have to go to this URL here and download the web browser. The installation process is quite simple, so I'm not going to go through it. As for the Mozilla Firefox, you have to use this URL and download the web browser from here. Both links will be attached to this lecture. Alright, let's move on and talk about the text editor. We're going to use Visual Studio Code because right now it's one of the best texts editors in the world. Of course, you can feel free and use your favorite text editor. It's up to you, but I recommend to use the VS code. In order to download the VS code, you have to visit this website and get the text editor either for Windows or Mac or Linux. This link will be attached to this lecture as well. The installation process of the visual Studio Code is very simple too, so I'm sure that it won't have any trouble with it. Alright, so once you install both tools that you will be good to go. So let's jump right into the projects 4. Project 1 - 3D Forms: Alright, so it's time to create a new project. In this project we are going to be creating a 3D sign in and sign up forms. And the project is going to be created based on HTML, CSS, and JavaScript. In this video, I'm going to go through the project and describe it. So as you can see, we have here a sign-in form displayed by default with a full-screen background image. At the top left corner of the form, we have the Batson, which is displaying the text. Sign up. If I click it. And then the form will rotate in a 3D environment. And the sign-up form will be displayed. If I click the Sign In button, we will get back the sign-in form here. So you can switch forms with those buttons in 3D space. Okay, so that's it about this project. I hope it will be interesting and you will enjoy it. So let's get started. Alright, so we're ready to start to build the project. I have created a new folder on the desktop called 3D forms, in which I have another folder called images. It includes the background image. Let's go ahead and open this folder in VS Code and then create our working files for HTML, CSS, and JavaScript. I'm going to call the files index.html, then style.css and script.js. Then open the index.html file and create a basic HTML document. For that, I'm going to use amides. We have to place an exclamation mark and then press Tab or answer. So here we have the basic HTML tags. First of all, let's change the title. I'm going to call it 3D forms. And then I'm going to link the CSS and JavaScript files. Let's open the link tag and specify here in the atria first attribute the part of the file. As for the JavaScript file, I'm going to open script tag right above the closing body tag. And then we need to specify the name of the file in the source attribute. Alright, lastly, I'm going to run the project to the browser using one of the VS code package is called Live Server. It allows us to run the project life and make the updates and changes without refreshing the page. Each time. Before we start to write the code, I'm going to place the editor and the browser side-by-side. Alright, let's go ahead and start to create the HTML markup. I'm going to open a div tag, which is going to be the container. Next we need another div tag. It will wrap both forms. So I'm going to assign to the class forms wrapper. This element will consist of two different elements. I mean two different formed elements. The first one is going to be signing form. So let's open the form tag with the class sign-in form. So each form element will include a button, heading and the inputs. Let's open the link tag is going to be the button. Lets you assign to the class Signup, BTN. I used here, sign up because this person will help us navigate to the sign-up form. Alright, Next we need heading. Let's open H2 heading tag with the content sign in. After that, I'm going to insert your input elements. Let's open the div tag, which will be the wrapper, is designed to eat class input wrapper. So overall we will have three different input elements for email, password and submit button. Let's open input tag with a type text and with placeholder attributes, your email. Then I'm going to duplicate this line of code. These input fields will be for the password. So let's change the type attribute, make it password, and also change the value of the placeholder attribute. We need again password. The next input element will be for the submit button. So the type is going to be submitted. We don't need here placeholder attributes. Instead of that, we need value. Sign in. Again, That's it about the first form elements. Let's go ahead and duplicate the entire form and then make some changes. We need here the class name, sign-up form than the button is going to be signing. Also, let's change the content of the heading. We need to sign up. In the case of the sign-up form, we will have five different inputs. The first one is going to be for the name. So we need here your name. And also we will have one input for password confirmation. Let's change here the placeholder Institute confirm password. Then lastly, let's change the value of the Submit button. Use here, sign up. Alright, let's sit regarding HTML markup. Now it's time to customize the project Open the CSS file and first of all, create some defaults and reset styles. I'm going to select every albums using an asterisk. First of all, I'm going to get rid of default margin and padding. Let's go ahead and set both properties to zero. Then I'm going to make box-sizing border-box. Also, I'm going to get rid of default underlying form the link elements. Let's set text, decoration none. And then change the font family. I'm going to use your phone called Arial font group sensory. Throughout this project, we're going to use RAM as measurement unit. Right now, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I'm going to convert 1 g to ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's make it 62.5 per cent. Alright, So the elements became smaller. Next I'm going to take care of the container. Let's select it and define its width and height. I'm going to set width to 100%. As for the height, I'm going to make it 100% of the viewport. Therefore, we need here 100 pH. I'm going to set the image as the full-screen background. Before that, I'm going to use linear gradient function because I want to make the background image a little bit darker. Let's use here RGBA value 3177 and the opacity 0.7. As for the second RGBA value is going to be the black color with the opacity 0.7. Next, I'm going to specify the URL of the image. We have the folder called images in which we store image called p2 dot PNG. The position is going to be centered. And also we need to know repeat. Finally, I'm going to set the background size to cover. Alright, so here we have the full screen background image and actually that's it regarding the container. Now we have to start to customize the forms. I think would be better if we hide one of the forms for awhile and style just one form. So let's go ahead and hide the second sign-up form. Then select Forms wrapper. I'm going to send to the wrapper on the page. So let's set its position to absolute. Then we have to define top and left properties. Let's make both of them 50%. Then in order to center the elements perfectly on the page, we have to use transform translate. We have to move elements by -50% on both directions. I'm in x and y axis. So it's considered a form is placed in the center of the page. Next, I'm going to customize the form itself. So let's select Forms wrapper, followed by the tag name form. First of all, as defined within heights, I'm going to set width to 50 run. The height is going to be 35 RAM. And also change the background color. I'm going to use here RGBA value 4114108. And then the opacity 0.9 to five. Alright, next, I'm going to align the elements inside of the form using flexbox. We need to display flex. Then we have to change the direction because we need to place the elements vertically. So we need to flex direction to be column. Then in order to create some space around the elements we need, justify content space around. And also in order to center the elements horizontally, align items center. Lastly, let's create a little shadow effect. I'm going to create a shadow on all four sides. So I'm going to use the following values. We need to 0.1 RAM three times than the collar C, C, C. And also I'm going to use here value called inset. It allows us to create the shadow inside of the elements. Next, we need -0.1 gram twice. Then 0.1 run with the same color CCC and with the same value in set. Alright, Let's say regarding form elements for now, next, I'm going to start the individual elements. Let's start with the sign up button. I'm going to select it using tag names form and a. Let's define this position as absolute. And then set the top and left properties, both of them to ram. Can see the button is positioned correctly. Let's go ahead and style it. First of all, I'm going to change the background color. Let's make it white Also I'm going to make the text bold or using font weight with a value 600. Then let's transform text into uppercase. Also, I'm going to change the color. Let's use RGBA value 4114108. So create some space between the letters. Make it point to run. Right after that, I'm going to create some space inside of the button using padding. Let's set padding to 0.5 rem at the top than one rem on the right side, 0.5 rem at the bottom, and three rem on the left side. Then finally, we need to change the shape of the button using border-radius. It will take four different values. For the radius at the top left corner is going to be 100%. Then we will have 0.5 rem at the top right corner. Bottom right corner is going to be 0.5 RAM as probably bottom left corner, it's going to be 100%. Okay, That's it about the button. Let's move on and customize the heading. Select form H2. First of all, let's set the font size, make it 2.3 run. Make the text uppercase. Also create some space between the letters, make it point to RAM, and then change the color, make it white. So the heading is customized and now we have to take care of the inputs. Let's go ahead and select input wrapper. We need to place the inputs vertically on top of each other. So to use display flex and flex direction column. Next, I'm going to select the input itself. Let's define the width and height. I'm going to set with 225 RAM. As for the height, it's going to be three ramp. And after that, I'm going to create some space inside and also outside of the inputs. Let's use padding with the values 0.5 rem at the top and bottom and one rem on the left and right sides. As for the margin is going to be 0.5 rem at the top and bottom and zero on the left and right sides. Next, let's change the background color. I'm going to make it transparent. Also. Let's create border with values 0.1 round, solid, the color white. And also make the inputs rounded using border-radius with value five ran the inputs all or they look good, but we need to add a couple of more styles to them. Let's change the color. Make it white. Also create some space between the letters, make it a point to one RAM, and then get rid of default. Outline. Set it to none. Alright, so that's it about the inputs. Next, I'm going to change the color of the placeholder. We need to select first rapper, followed by the input and the pseudo elements placeholder. Let's set color to white and also change the font weight. Make it 300. Alright, lastly, I'm going to customize the submit button. Let's select input with a type attribute. At first, let's change the background color, make it white. Then the color is going to be RGBA value 4114108. Let's increase the font weight. Make detect bolder. Set font way to 900. Also transform text into uppercase. M Finally changed the type of the coarser making pointer. Alright, that's it. Regarding sign-in form, it is customized. Now we have to display the sign-up form and make both forms work. So let's go to the index.html file and display it back the second form. As for the first form, I'm going to hide it for a while. So the only thing that we have to do about the sign-up form is to customize the Sign In button. We have to move it to the top right corner of the form. And also we have to change the shape of the Bateson. The direction should be to the right side. Right now we have common styles for both buttons. So I'm going to select both buttons separately and define their individual styles. First of all, I'm going to select Sign Up UTM Then let's grab left property from the common styles. Also, I'm going to grab padding and border radius. Then I'm going to duplicate this code. Let's change the class name we need here, sign-in, btn. Also we need to change, lapsed into right. Then we need different padding. It's going to be 0.5 ran 3.5 rem, and one RAM. And also we need different border radius. The values are going to be the following. 0.5 rhyme. Then 100% twice. And again 0.5 ramp. Alright, so both forms are customized. Let's go ahead and display both of them. So it's can see we have here both forms. The position of the button is not correct right now. It's because it is positioned according to the forms wrapper and we need to position it according to the form element. In order to do that, we have to assign to the form element position absolute. So right now the forms are no longer centered on the page. Let's go ahead and fix that. First of all, I'm going to get rid of transform translate from here. And then we have to adjust the top and left positions. The top position is going to be 50% minus the half of the height of the form. As for the left position is going to be 50% minus the half of the width of the form. So we need the following calculations. Let's use calc function. The top position is going to be 50 per cent -17.5 ran, because the height is equal to 35 ran. As for the last position, it's going to be 50% -25 RAM because the width of the form is 50 ran. Alright, so as you can see, the form elements are centered. Now we have two position forms in the 3D space. I mean, I'm going to rotate this sign up for, as I said, we need to position elements in 3D space in order to create a 3D environment, we have to use one of these CSS properties called prospective. And I'm going to assign it to the container as the value. Let's assign 200 ramp. The form elements are grandchildren of the container. And in order to apply a 3D environment to deforms, we have to use another property called transform style with value preserve 3D, and we have to assign it to the parent elements of the forms, which is a forms wrapper. Alright, now it is time to rotate the sign-up form. I'm going to select it separately. And then use Transform with the rotate y function. And as the value I'm going to pass you 270 degrees. Okay, So right now, the sign-up form is not visible because the sign-up form is rotated. And in order to see better why it's not visible, I can change the value, set it to 250 degrees. So now we can see that form is rotated. You may think that we could use here just 90 degrees. But in that case the contents of the form would be rotated in the opposite direction. So that's why we use 270 degrees. Alright, next we have to move the sign-up form to the left side and also straight deeply in 3D space. In order to move the elements to the left side, I'm going to use Translate Z function with value 25 RAM. And now we have to move the elements according to the x-axis with the value -25 ramp. Okay, lastly, let's get back here 270 degrees. The only thing that had to do before we programmed the buttons is to rotate the entire forms rappers likely. So that's assigned to it. Transform rotate y with the value minus ten degrees. Alright, that's it. Now we have to start to write some JavaScript. We have to attach a click event listeners to do both buttons. But first of all, I'm going to select both buttons. Let's create a new variable. I'm going to call it sign up btn, and then select the element using querySelector method. Let's specify here the class name, sign up btn. Then I'm going to duplicate this line of code. Let's change the name of the variable. It's going to be signing btn. As for the class name, we need sign in between them. Right after that, let's attach event listeners to both of them. Let's start with the sign-up btn add event listener method with a click event. And the callback function, which will be executed once we click the Sign Up button Let's duplicate this code and change sign of butane into sign BTN. Alright, once we clicked it, but since we have to rotate the fonts wrapper, in order to do that, I'm going to add a new class deforms wrapper. Then we will select Forms wrapper with this newly created class in CSS. And we will define the rotation of the element. First of all, I'm going to prevent default actions of the sewing buttons. If we don't do that, then the page will scroll up if we have some additional content. So we need to pass your event objects in both cases. And then we need e dot prevent default. Alright, so as we said, we have to add a new class to deforms wrapper. First of all, let's go ahead and select these elements, create new variable, call it forms wrapper. Then select the elements using querySelector method. We need here className forms wrapper. Then let's add a new class to this elements. We need forms wrapper, followed by the property called class list, which includes all the classes that the element has. Then we need a method called add. And we have to specify here the name of the class. Let's say change. Alright, let's go to the CSS file and select foams wrapper with class change. So once we click the button, we had to rotate the forms wrapper. So I'm going to pass you transform rotate y with a value of 100 degrees. So if we click the button, then the form will rotate. But as you can see, it has changed its position. So we need to define the lag position. Let's use again called function. In this case we need 50 per cent plus the half of the width 25 ramp. Now everything looks fine. We have to make the effect smoother. For that, we have to use transition with the values transform 0.5 s, which is the duration. And then left again with 0.5 s. Now if I click, then the form will rotate smoothly. Right now just the Sign Up button is working. So let's go ahead and take care of the second button as well. In the case of the second button, we just need to remove the class change from the forms wrapper. So let's go ahead and grab this line of code. Paste it down here, and change, add in to remove. So now everything was perfectly and actually with this project we are done. If you think that the forms are smaller on extra large size, then you can simply increase the font size of the HTML elements. Let's change it and make it, let's say 72.5 per cent. So now I think it's better. And actually we are done. We have finished working on this project. Hopefully it was interesting and useful. So let's move on to the next project. 5. Project 2 - House: Alright, it's time to create our next projects. In this video, we're going to be building this house with HTML, CSS, and JavaScript. Let's go ahead and describe the projects. We have here a house with a couple of different windows. Also, there is a blue roof and a door. If I click the door, then it will open. And also if I hover over the window at the top of the door, it will open as well. So that's it regarding this project, Let's go ahead and start to build it. I have created a new folder on the desktop called a house. Let's go ahead and open it in VS Code and create our working files for HTML, CSS, and JavaScript. I'm going to call them index.html, style.css and scripts dot js. Then open the index.html file and create a basic HTML document. For that, Let's use an image. We need to place urine exclamation mark and then hit Tab or Enter. So here we go. First of all, I'm going to change the title. Let's insert your house. Then link CSS and JavaScript files. I'm going to open link tag. And then let's specify here the name of the file. As for the jobs that file, I'm going to open script tag right above the closing body tag. And then in source attribute, I'm going to specify the file name, script.js. Alright, so all files are linked. Let's go ahead and run the project to the browser. I'm going to use Live Server. And then let's place the editor and the browser. Like so. We are ready to start to build a project. At first, I'm going to create the HTML markup. Let's go ahead and open a div tag with a class container. Then I'm going to open another div tag which will wrap the content. Let's assign to it className house. So the house will consist of a couple of different parts. We'll have a roof, windows than the room and also the door. Let's go ahead and create those parts. I'm going to start with the roof. Let's open div tag with the class main roof. Then I'm going to create four different windows. Let's open div tag. It will have two different classes. The first one is going to be window. It's going to be the common class name. And then also we need top left window. Let's duplicate this line of code three times. So the second window is going to be top right. Then we will have bottom left window. And the last one is going to be bottom right window. Alright, that's it about the Windows. Next I'm going to create the room that's open VB tag with the classroom. So the room will consist of three different parts. We will have a roof of the room than the window and also the door. Let's open a div tag with a class room roof. Next, I'm going to create a window. Let's open another div tag with a class top window. This window will have two different parts, the left side and the right side. So let's open div tag with a class top window left. Then I'm going to duplicate this line of code and change the class name we need here, top window, right? Okay, Finally, let's create a door. I'm going to open div tag, which is going to be the wrapper, Let's call it door frame. Then inside that div element, I'm going to open another div tag with the class door. And finally, we need door handle. So it's open, div tag with the class door handle. Alright, that's it. Regarding the HTML markup, Let's go ahead and start to write the CSS. First of all, I'm going to define some common and reset styles. Let's select every elements using an asterisk. I'm going to get rid off default, margin and padding. So let's set both properties to zero. And also I'm going to set box-sizing border-box. So throughout this project, I'm going to use RAM as the measurement units. Right now one rem is equal to 16 pixels because the font size of the HTML element equals 16 pixels. I want to convert one RAM into ten pixels And for that, we have to decrease the font size of the HTML element. And we have to make it 62.5%. Alright, let's go ahead and take care of the container. I'm going to extend it to the entire page. So let's select it and define this width. I'm going to make it 100%. As for the height, it's going to be 100% of the viewport. So we need to set it to 100 vh and then change the background color. I'm going to use here RGB value 103150. And then one, all three again. Right? After that, Let's select the house. I'm going to make this element visible. So let's define its width and height. I'm going to set its width to 110 RAM. As for the height is going to be seven to RAM. And also change the background color. Let's use U, E F, E, F, E F. So here we have the house. I'm going to place it in the center of the page. And for that, Let's use a CSS grid. We have to set display to grid. And then in order to place the element in the center, we need to use place items with the value center. Alright, so as you can see, the element is placed in the center right now That's it about the house. Next, I'm going to take care of the main roof. So let's go ahead and select these elements. First of all, let's define its width and height. I'm going to set width to 110%. That's pretty high, is going to be thorough to RAM. And then change the background color. Let's use again RGB value. Once you pass your 867145. Okay? So the roof is feasible, but it's can see we have to take care of its position. For that, I'm going to assign to it a position absolute, that in order to position it according to the House, which is the parent element, I'm going to assign to the house, position relative. And after that, let's define the top and left properties. I'm going to set top two minus ten RAM. As for the left position is going to be minus five per cent. So it's considered, the roof is positioned, but right now it doesn't look quite good. We have to rotate it in a 3D environment. So we have to create a 3D space. And for that we have to use one of these CSS properties called prospective. Let's set it 200 RAM. And that's it. Let's rotate the roof according to the x-axis. Use Transform with the rotate x function. I'm going to rotate the element by 20 degrees. Okay? So now it's considered the roof looks much better. The only thing that I'm going to do is to make its corners slightly rounded. And also I'm going to add to it a little shadow effect. So let's use border radius. It will take four values. The top-left corner is going to be one RAM than the top right corner will be one rem as well. As for the bottom right and bottom left corners. I'm going to make them 0.5 ramp. And also use box shadow with the values 0.5 gram than one rem. Rem. And the color too. Alright, so the main roof is ready and now we have to take care of the windows. As you know, all four windows will have some common styles. So I'm going to select them using common className window. At first, let's define the width and height. I'm going to set width to 12 RAM. The height is going to be 15 RAM. As for the background color, I'm going to use a AAA. Next, I'm going to add to the Windows a border. Let's assign two values point for RAM than the border is going to be solid. The color. Let's use 333. After that, we need to take care of the positions of the windows. Let's set position to absolute. And after that, we have to define positions for each window separately. Let's go ahead and start with the top of that window. Let's select it. I'm going to set up position to 20 to ram. As for the left position is going to be ten RAM Next I'm going to take you off the top right window. So let's duplicate this code. Change the class name we need here, top right window, and also change the left position into right. Next comes a bottom left window. Let's duplicate again in the code. The class name is going to be bottom left window than the two position will be 43 RAM. We need here left position with the same value. And finally, we have bottom right window. Let's duplicate this code. Change the class name we need right here. And also change the lag position. Let's use right. Okay, So all four windows are positioned and the next thing that we have to do is to take care of the shape of the top left and top right windows. If we take a look at the finished project, you will see that the top sides of those two windows around it. So let's go ahead and do that using border-radius. We need the same border radius for both Windows. The top left corner is going to be 50 per cent. Then we need the same value for the top right corner as for the bottom left and bottom right corners, they will be zero. So we have the rounded windows. Next, I'm going to create those frames. And I will do that using the after and before pseudo elements. First of all, let's create the horizontal lines. Let's select the before pseudo elements. Define the content, make it empty. After that, let's define width and height. Width is going to be 100%. As for the height, I'm going to make it point for RAM. And also change the background color, make it a 333. So right now the lines are not visible because we have to define this position. So let's set position to absolute. And then I'm going to define top and left properties. The top position is going to be five RAM. As for the left position, Let's set it to zero. Okay, So as you can see, we have here the horizontal lines. Let's go ahead and create the vertical lines. I'm going to do that using the after pseudo elements. Let's copy this code and change before into, after. The width is going to be zero point for RAM. As for the height, I'm going to make it hundred percent, then the position is going to be zero. Let's change the left position. I'm going to make it 50 per cent. Actually, we need to place the vertical lines in the center of the window. So we need to use here transform, translate x with value -50%. Alright, so as you can see, all four windows are customized and now we have to move on and take care of the room. Let's go ahead and select these elements and define its width and height. I'm going to set width to four to ram. As for the height, it's going to be eight per cent. And then change the background color, make it white. The room is going to be placed in the center of the house. So let's take care of its position. Let's set position to absolute. Then we need left position to be 50%. Next, let's set the position to zero. And also in order to place the element in the center when you transform, translate X with the value -50 per cent. Okay, So that's it regarding the room for now. Next, I'm going to take care of a roof. Let's go ahead and select room roof. First of all, I'm going to define its width and height. Width is going to be 110%. Then the height will be 20 RAM. And also I'm going to change the background color. Let's use here RGB value 867145. So as you can see, the roof is visible, but we have to customize it because right now it's not looking good. First of all, let's take care of its position. I'm going to set position to absolute, and then I'm going to define top and left positions. The top property is going to be minus ten rhyme As for the left position, it should be minus five per cent. After that, we have to create the 3D environment for this roof as well. I mean, a 3D environment which we created for the main roof of the house. For them, we have to use property called perspective. Let's set it to 100 RAM. And then I'm going to rotate the roof. We should rotate it according to the x-axis by 40 degrees. Okay. So the roof is rotated but it's not quite visible. In order to fix that, I'm going to use box shadow. Let's assign 2D values points to ram 0.5 rem, 1.5 rem, and as the color I'm going to use black. Okay, Finally, let's make the corners of the roof rounded using border-radius. I'm going to set border radius at the top left corner as 0.5 RAM than the top right corner should be 0.5 prime as well. As for the bottom right and bottom left corners. Let's set them, both of them 2.3 ramp. Alright, so finally, we're done with the roof. Next, I'm going to take care of the top window of the room. Let's go ahead and select it. First of all, let's define the width, height, and background color. I'm going to set width to 16 RAM than the height is going to be 17. Run as part the background color. Let's set it to RGB 112, then 22.22. So we have here the window, it is not placed correctly right now. So let's take care of its position. Let's set position to absolute. And then define top and lapped properties. The top position is going to be 15 RAM. As for the lab position, I'm going to set it to 50 per cent. And then in order to place the window perfectly in the center, Let's use Transform, Translate X with the value -50%. Okay, next, we have to make the top side around it. And also I'm going to add to it a border. So let's set border-radius to 50%. Then again, if 50 per cent than zero, again zero. That's what the border. Let's make it 0.5 RAM solid. And as the color, Let's use 555. Alright, next to have to customize to parts of those windows. We have all already created two div elements for that. So let's select top window left. At first. Let's set width and height. The width is going to be 49.5%, then the height will be 100%. As for the background color, I'm going to use RGBA value. The color is going to be white. I mean, we need to 5053 times. And then let's decrease the opacity, make it 0.4. After that, Let's define position. Let's set position to absolute and make top and left properties, both of them zero. Alright, so as you can see, we have to change the shape of these elements. We have to make it rounded on the top left side. So let's use border, top-left radius and set it to 50 ran. Lastly, let's add a border to this elements. Let's set border 2.5 gram solid. And as the color, Let's use 555. All right, That's it about the left side. Next, I'm going to create the same on the right side. For that, let's just duplicate this code and change left into rights everywhere. Okay, so both parts are created like the other windows. We need the horizontal lines here as well. I'm going to create them again using the before pseudo elements. So let's go ahead and select top window left, followed by the before pseudo element. First of all, let's define the content. It's going to be empty. Then I'm going to define the width and height. Let's set width to 100% Then I'm going to set high 2.5 rem and also change the background color. Make it 555. That in order to make the element of visible, I'm going to define the position. Let's set position to absolute. And then define top property. It's going to be 35 per cent. As for the lag position, I'm going to set it to zero. Alright, so that's it about the left side. I'm going to create the same line on the right side as well. Let's copy this code. Paste it down here, change the class name we need to write. And then change the position we need, right? As well. So that's it. The entire window is customized and the only thing that we have to do is to create a hover effect. So once we hover over the elements than the window should open, we need to add a hover effect of the window and we have to rotate both sides. Let's go ahead and start with the left side. I'm going to select Top window with hover. And then let's select top window left. So we need to rotate the element according to the y-axis. So we need to transform rotate y. And as the value I'm going to use here -50 degrees. Also to make the effect smoother. Let's use transition with transform 1 s. Okay? So let's consider the element is rotating, but that's not what we want here. It should rotate from the left side. Right now it is rotating from the center because the origin of the transformation is centered by default, we need to change it and make it left. So I'm going to use the properties called transform origin. And I'm going to set it to left. Now as you can see, it's rotating correctly, but we need to add here one more thing. We need to rotate it in a 3D environment. And for that, Let's use again perspective. We need to assign it to the window itself. In this case, I'm going to set perspective to 150 ramp. It's can see now we have a better result. Let's go ahead and do the same for the right side. I'm going to copy this code. Then change left into right. Also, we need to get rid of the minus sign from here. Then we need to change the origin of the transformation. In this case, we need to transform origin to be right. And finally, let's use transition with transform 1 s. So as you can see, everything works perfectly and with the window we are done. The only thing that we have to do in this project is to create the door. First of all, we need to create the frame. So let's select it and define width and height. The width is going to be 14 brand. As for the height, let's set it to 18 RAM. And also change the background color. Make it for four. Next, we need to change its position. It should be placed in the center of the room. So let's set position to absolute. Then defined Watson property, it's going to be zero. Then we need lag position. It should be 50 per cent. And in order to center them perfectly, we have to use transform translate x with value -50%. After that, I'm going to add to the frame a border that's assigned to it values 0.6 round, solid, and the color two to two. And finally, let's get rid of the border at the bottom. Let's set border bottom to none. Alright, so that's it regarding the door frame. Next, I'm going to take care of the door itself. So let's select these elements. Define width and height. I'm going to set both of them to 100% and also change the background color. Let's use here RGB value 856824. Okay, so it's considered we have the door. The next thing that we have to do is to create a door handle. So let's go ahead and select these elements. Let's define width and height I'm going to set with 23 RAM than the height is going to be 0.7 ramp. And also change the background color. In this case, I'm going to use 999. So here we have the door handle and now we have to change its position. Let's set position to absolute. Then I'm going to move it down. So let's set top property to 45% than the left position is going to be one round. So it's considered a door handle is positioned correctly. And the only thing that had to do is to change its shape slightly. I'm going to make it rounded on the left side. So let's use border-radius with the values 100%, 0.5 around 0.5 brown, and then hundred per cent. So on, That's it. About the door. Everything is ready to create the effect. I meant to open this door. Once we click the door. For that, I'm going to use a little bit of JavaScript. Let's go to the script.js file. We need to add a click event to the door. But first of all, let's select these elements. I'm going to create new variable. Let's call it door, and then select the div elements using query selector method. Let's specify here the class name dot. After that, I'm going to add an event listener to these elements. So let's use add event listener method, which takes two parameters. The first one is the type of the event we need here clique. As for the second argument, is going to be a callback function, which will be executed once we click the door. So once we click, I'm going to add a new class to the door. Then using this new class, we will define new styles and CSS, which we want to be applied to the elements onclick. And then on the next click, we need to get rid of this newly edit class. For that, I'm going to use one of the methods called toggle. So we need dor dot class list. This property gives us all the classes that the element has. And then I'm going to use method called Toggle. Let's call the class name change. That's it about the JavaScript. Next we have to write some CSS. So we need to select a door with class change. I'm going to rotate the elements. So we need to transform, rotate according to the y-axis with the value 30 degree. So if we click the door, then it will be rotating. But we need to add a couple of things to this effect. The door should be rotated from the right side. Also, we need to create the 3D environment and we have to make the effects model. So we need to change the origin of the transformation. Let's set it to write that in order to create 3D space, I'm going to use perspective with value hundred Ren. Finally, let's use transition with transform. 1 s came. So if we click the door, then it will open nicely. Now we have to do the same for the door handle. I'm going to use the same technique. So let's select all with the class change, followed by the door handle. We need to rotate door handle according to the z axis. So we need to transform, rotate Z with a value 20 degrees. So like the door, we have to change the origin of the transformation. Let's make it left. And also we need to transition with value transform 0.5 s. So as you can see, everything works fine. I just want to add here one more thing. Let's add a little delay time to the transition of the door because first of all, I want to rotate the door handle and then open the door. So let's add here 0.5 s. Okay, so now everything goes perfectly. And actually with this project we are done. I hope you enjoyed it. So let's move on and start to work on the next one. 6. Project 3 - Search Bar: Okay, so let's go ahead and start to work on our next project. In this section, we're going to be creating a search bar with some nice animation effects. Let's go ahead and describe the projects. As you can see, we have here a search icon at the top right corner of the page. If I click it, then it will start to move and animate. It will move to the top of the page. So the input field will appear with the closing x, but if I click it, the input field will hide and the search icon, we'll go back to its default place. So that's it about this project. It's going to be a little project, but I hope it will be interesting. I've created a new folder on the desktop called search bar, which right now is empty. Let's go ahead and open it in VS code and create our working files for HTML, CSS, and JavaScript. I'm going to call them index.html style dot css and script.js. Alright, let's open the index.html file and create a basic HTML document. For that, I'm going to use an exclamation mark. So here we have a basic HTML tags. First of all, I'm going to change the title. Let's insert your search bar. And then I'm going to link CSS and JavaScript files. Let's open link tag and specify here the path of the file. As for the JavaScript file, I'm going to open script tag right above the closing body tag. And then we need script.js and the source attribute. Actually, besides that, I'm going to bring in one more link for Font, Awesome icons. Let's go ahead and search for Font Awesome, CDN, GIS. Then let's copy the first link. Then we need to open link tag and paste the link in the h reference attribute. So everything is ready. Lastly, I'm going to run the project to the browser using a live server. This VS code package allows us to run the project life to the browser. And you can make changes and updates without refreshing the page. Each time. Before we start to write the code, I'm going to organize our working environments. Let's place the editor and browser side-by-side. Alright, so finally, we can start to write the code. First of all, I'm going to create HTML markup. Let's open div tag Class Search input wrapper. It will include search input field. So let's open another div tag with the class search input. I'm going to pass two different elements. The first one is going to be the input with the type text and with the placeholder attribute with a value, such as for the second element, it's going to be closing X button. I'm going to use here Font, Awesome icon. Let's open I elements. And assigned to the classes have a S, f, k times. Right? After that, we need to create a search icon. So it's open div tag with the class search icon. Then let's insert your Font Awesome icon for the classes FAS, a search. Alright, that's it about the HTML markup. Now, it's time to customize those elements and start to write some CSS. First of all, I'm going to create some default and reset styles. I'm going to select every elements using an asterisk. First of all, I'm going to get rid of default margin and padding. Let's set both properties to zero. Then I'm going to set box-sizing border-box. Throughout this project. I'm going to use RAM as the measurement unit. Right now, 1 g is equal to 16 pixels because by default the font size of the HTML element is equal to 16 pixels. I want to convert 1 g into ten pixels. And for that, we have to decrease the font size of the HTML elements and set it to 62.5 per cent. Now, as you can see, all the elements became smaller. Alright, first of all, I'm going to customize the project like so. I mean, I will style and place the elements here at the top of the page. And then we will take here of the animations. So let's go ahead and select wrapper div elements and define its width and height. I'm going to set with 200 per cent. Then the height is going to be five rem. And also change the background color. I'm going to use here RGBA value to 55, 69 69.5. Next, I'm going to place the elements in the center of the wrapper for that. Let's use flexbox. We need display flex. Then for the horizontal centering, I'm going to use justify-content center. As for the vertical centering, we need to align items center. Alright, so the elements are placed in the center perfectly. Let's move on and start to customize the search input. At first, I'm going to select these wrapper and define width. Let's make it 30 ran. After that, I'm going to select the input element itself. First of all, let's define its width, make it 27 run. And also I'm going to make the background color transparent. Next, I'm going to get rid of the default border and leave it at the bottom only. So we need a border none. And then border bottom with the values 0.1 RAM solid. And as the color I'm going to use 999. Alright, after that, let's take care of the font size. I'm going to set it to 1.5 g. Also create some space between the letters. Let's set it to 0.15 round. Also am going to get rid of defaults. Outline. Let's set it to none. Then change the color. You see here, 555. And finally, I'm going to create some space on the right side. Let's set margin right to one ramp. Okay, so that's it regarding the input fields. Let's go ahead and start the X button. Let's select it. First of all, I'm going to set font size to 1.5 gram. Then I'm going to change the color. Let's make it 999. And make the cursor pointer. Alright, Before we move on and customize the search icon, I want to align both elements of vertically in the center. And for that, Let's use flexbox. We need display flex and then align items center. Okay, let's move on and customize the search icon. Let's select its wrapper developments. At first, I'm going to define the font size. Let's make it 1.5 RAM. And then I'm going to set position to absolute. We're going to place the search icon in front of the input fields. I'm going to define the tip position as 1.7 rem. As for the right position, I'm going to make a little calculation. As you know, the width of the search input is 30 ran. In order to place the search icon in front of the search inputs, we need to add half of the width of the search input to 50 per cent. So I'm going to use one of the functions called calc. And then we need 50 per cent plus 15 run. So now as you can see, the icon is placed in front of the search input. But I think we need some space between them. So instead of 15 RAM, let's use 16 rent. Alright, Finally, let's change the color of the icon. Let's select ions. Set its color to 999, and also change the cursor. Make a point. Alright, so everything is ready to create the animations. As you sold. By default, we have to hide the input field and the X button. And also we have to move the search icon to the top right corner of the page. So let's go ahead and do that. I'm going to hide this search input wrapper. For that, Let's use opacity with value zero. And also visibility hidden. Then changed the right position of this search icon. Let's set right, property to three Ran. Okay, now it's time to create animation. Let's take a look at the finished project. So once I click the icon, it will start to move and also increase the size. We will have a couple of different steps during the animation. Let's go ahead and create CSS keyframes. I'm going to call it search icon anime. So from 0% to 40%, the element will change its top position and also the font size. So at 0%, we will have Position 1.7 run. As for the 40 per cent, we will have two position with value 40%. And also the font size with a value 25 ramp. Then from 40% to 60%, the element will keep its top position. But we will change the right position. So at 60% we will have, again top with 40 per cent. That's probably right position. We will have the calculation 50 per cent plus 16 ramp. Finally, from 60% to 100%, the elements will change its position, but we will keep the right position. So at 100%, we will have top property with value 1.7 rem and the right position with the previous value. So the CSS keyframes are ready. Now we have t applied this animation to the element. For that, I'm going to use the animation property. We have to specify here the name of the keyframes, and then the duration of the animation. It's going to be 1 s. So as you can see that the icon is moving and the animation works fine. We have here a tiny issue. Once the animation ends than the icon goes back to its default position. We don't need that. We have to maintain the position that we have at the 100 per cent. So in order to do that, we have to use one of the values called forwards came. So now it's can see everything works fine. Actually, we need to run this animation once we click the icon. So now it's time to start to write some JavaScript. We need to attach a click event listener to the search icon. So first of all, I'm going to select this icon. Let's create a new variable and call it search icon. I'm going to select this element using query selector method. Let's specify here class name, search icon, followed by the tag name. After that, I'm going to add an event listener to the search icon. We have to specify here the click event. And also we have to pass you a callback function, which will be executed once we click the Search icon. So as you know, we have to apply animation property to this search icon. In order to do that, I'm going to add a new class to the search icon, I mean to the parent element. Then we will select that element using newly created class in CSS. And we will apply animation properties of the element. So we need you search icon, then we have to get access to its parent elements. So I'm going to use here property called parent elements. Next we need another property called class list. It includes all the classes that the element has. And then I'm going to use method called add. Specify. Here the class, let's say change. Alright, that's it regarding JavaScript right now, let's go back to the CSS file. So as I said, now we need to select Search icon with a class change. Then we need to move this line of code here. So now if I click the search icon than the animation will run. Okay, next we have to display the search input wrapper. Right now it is hidden. So in the same way, I'm going to use class change. First of all, let's select a rapper, create new variable and call it search input wrapper. I'm going to select this element using again querySelector method. Let's specify here the class name, search input wrapper. Then let's add class change to this elements. So we need search input, wrapper, dot, class list, dot, add with a class change. Then go back to the CSS file and select wrapper with the class change. So in order to display the search input wrapper, we need opacity one and visibility visible. So now if I click the search icon, then the search input will appear. Right now it appears without any effect. So we need to use transition with the values All than the duration is going to be 0.5 s Besides that, I'm going to use here little delay time 1 s. Okay, So now as you can see, we have here much nicer and cool effect. Before we move on and start to program the closing button, I want to add one more thing here. Once the search input is displayed, I want it to be focused automatically. For that, I'm going to use one of the methods called focus. But in this case we need to wait 1 s in order to appear the elements. So at first, let's select the input elements, create a new variable. And colleagues search inputs. I'm going to select element again with querySelector method. Let's specify here the class name search inputs, followed by the tag name input. So I'm going to use a method called set time out. It takes two parameters. The first one is a callback function. Let's insert your search input dot focus. As for the second argument is going to be the amount of time. In this case. As we said, we need one seconds, so I'm going to pass here 1,000 milliseconds. So now if we display the search input, then it will be focused automatically. Now we have to move on and make the X button work. Once we click it, we have to hide the search input wrapper. And also we have to move the search icon back to its default position. First of all, let's select X button. I'm going to create new variable. Let's call it close icon. And then select the elements using querySelector method. I want to specify here the class name, search inputs, followed by the tag name I. After that, we have to attach click event listener to the icon. Let's specify here the event type click. And also we need a callback function. So once we click the button that we have to remove class change from the search input wrapper and the search icon as well. So I'm going to grab those two lines, paste them here, and then change at in to remove. So now if I click the X button, then the elements will hide and also the search icon, we'll go back to its initial place. Actually, everything works fine, but we need to add some effects here. First, I'm going to hide elements with some transition. So let's use transition with search input wrapper. Let's assign truth values all and 0.5 s. Now as you can see, the elements are hiding smoothly. Next, I'm going to take care of this search icon. We're going to create a separate animation in which we will define the movement of the icon to the right side. Let's create new CSS keyframes. I'm going to call them search, icon and M2. We will have two different steps, 0% and 100%. At 0%, we need to define right position. And we have to institute the calculation, 50 per cent plus 16 RAM. That's for the 100%. We need to define right position as three round. Finally, let's apply this animation to the search icon. Use animation property with the value is search icon and m2. Then 0.5 s. And also we need forwards. Alright, so as you can see, everything works perfectly. And actually with this project we are done. I hope you enjoyed this video and learn some new stuff. Let's move on and take care of the next project. 7. Project 4 - Clock: Alright, so it's time to move on and start to build our next project. In this video, we're going to create a clock with HTML, CSS, and JavaScript. It's going to be a standard clock, which you probably have at home on the wall. We have here numbers for hours and also three different arrows which indicate the hours, minutes, and seconds. Alright, let's go ahead and start to create a project. I have a new folder on the desktop called clock, which right now is empty. Let's open it in VS code and create our working files for HTML, CSS, and JavaScript. I'm going to call them index.html, style.css and scripts dot js. Then open the index.html file and create a basic HTML document. For that, we need to place here an exclamation mark and then hit Tab or Enter. So here we have the basic HTML tags. The first thing that I'm going to do is to change the title. Let's insert your clock. And then I'm going to link CSS and JavaScript files. Let's open link tag in the head element and specify here the part of the CSS file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And then we need to specify the path of the file in the source attributes. Okay, so we're ready to start. The last thing that I'm going to do is to run the project to the browser. For that, I'm going to use one of the VS code packages called a live server. It allows us to run the project live in the browser and make changes and updates without refreshing the page each time. Okay, Finally, let's place browser and the editor side by side, like so. And get started. I'm going to create the HTML markup. Then we will style it. I mean, we'll make the elements look like the clock. And then we will make it work using JavaScript. So let's go ahead and start to create the HTML markup. Let's open the deep tag, which is going to be the container. It will include the entire content. Then I'm going to open another div tag inside of the container that's assigned to class clock. The clock will consist of two different parts, but we'll have the numbers and the arrows. It's open div tag with the class numbers. We will have four different numbers. Let's open div tag with the class 12. And as the content, Let's Institute your 12th. Then I'm going to duplicate this line of code three times and then change the class names and also the content. We need three. Then 6.9. That's it about the numbers. Let's open div tag, which is going to be the wrapper of the arrows. We will have three different arrows. Let's open div tag with the class hour. Then I'm going to duplicate it twice and change the class names. We need here, minutes and seconds. Alright, that's it regarding the HTML markup. Right now we have here just the numbers. So let's go ahead and start to customize the clock. First of all, I'm going to bring in the link for the Google fonts. I'm going to use one of the Google fonts throughout this project. So let's go ahead and visit the Google Fonts website. Then search for one of the fonts called concert one. So right now we have here a text as the example, but we are interested in numbers. So we can simply change the sentence into numerals and see how the font looks like. Let's select the style. In order to link the pons, we have two different options. You can either grab this link and paste it in the head element, or you can click Import, grab this URL and paste it in the CSS file. Alright, so once the font is selected, next, I'm going to reset some default styles. Let's select all the elements using an asterisk and get rid of default, margin and padding. I'm going to set both of them to zero and also change the font family for every elements Let's use here are Cuckoo font concept one course. Alright, so as you can see, now the numbers look in a different way. So I'll this project, I'm going to use the RAM as the measurement unit. Right now, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I want to convert one RAM into ten pixels. Therefore, we have to decrease the font size of the HTML elements And make it 62.5 per cent. So as you can see, the numbers became smaller. Next, I'm going to take care of the container. Let's select it. And first of all, let's define its width and height. I'm going to set width to 100 per cent. As for the height, I'm going to make it 100% of the viewport. So we need 100 vh. Next, I'm going to place the content of the container in the center. And for that, Let's use flexbox. We need to set display to flex. And then for horizontal and vertical centering, we need to justify contents center and also align items center. Alright, so now the content is placed in the center and we can customize the clock itself. Let's go ahead and select Clock and define its width and height. I'm going to set both of them to 45. Run. Also change the background color. I'm going to make it gray using color ACA, CAC. Next, I'm going to make the clock rounded. For that, we have to use border-radius with value 50%. Then let's create a little border. Let's set its width to 0.5 RAM, then make it solid. As for the color, Let's use 777. And lastly, let's create a little shadow effect. On all four sides. Use box-shadow with the values 0.5 gram twice than one RAM. And as the color, Let's use 555. And then I'm going to place here -0.5 rem twice one room. And the same color. Alright, let's see it regarding the clock. Next, I'm going to take care of the numbers. Let's select the wrapper div element and defined within height. In this case, we need to inherit the same width and height from the parent element, which is a clock. So we need to set width and height, both of them to inherit. Alright? After that, I'm going to select all div elements inside of the numbers. So at first we're going to position the numbers. Let's set the position to absolute. Then in order to position the numbers according to the parent element, we need to set the position of the numbers to a relative. And after that, let's increase the font size of the numbers. Make it 2.5 rem. Alright, so now I'm going to position each separately. Let's go ahead and start with the 12th. It's going to be placed at the top of the clock. So let's select it and set is to position 21 run. Then we need to center it horizontally. For that, I'm going to set left position to 50 per cent. And then for perfect centering, have to use Transform with the translate x function. And we have to translate the elements by -50%. Alright? Next we have three. Let's select it. In case of three, we need right position to be one RAM. And then we have to censor elements vertically. So we need to set the position to 50 per cent. And in this case we need to transform, translate y -50%. Let's go ahead and take care of the rest of the numbers. The next one is six. In this case, we need to put some position to be one run. Then let's grab those two lines from here. As for the last number, which is nine, we need left position to be one RAM. And then we need those two lines here as well. Alright, so all four numbers are positioned. Next, I'm going to change the color. Let's make it white. And also create a little shadow effect. Use text shadow with the values point to RAM three times. And the color too. That's it regarding numbers. Let's move on and take care of the arrows. First of all, let's define this width and height like numbers. I'm going to inherit width and height from the clock. Let's set both of them to inherit. Next, I'm going to define the position. Let's make it absolute. In this case, the element will jump out of the normal flow of the page. And in order to position it according to the parent element, we need to position relative for the clock. Next, let's define the top and lag properties I'm going to set both of them to zero. The arrows should we place in the center of the clock? And in order to achieve that, I'm going to use again flexbox. We need display flex and then justify content center and align items center. Alright, that's it about the wrapper. Next, I'm going to create this little circle. It's going to be created using the before pseudo element. So let's select arrows followed by the before pseudo element. Let's make the content empty. Then defined width and height and also the background color. I'm going to set width and height to 2.5 RAM. As for the background color, it's going to be white. So here we have the elements, right now it has the shape of the square. So let's make it a circle. And also let's make a little shadow effect. Let's set border radius to 50 per cent as well, the shadow. Let's use box shadow with the values point to RAM twice. Then 0.5 RAM. And as the color, Let's use 777. Alright, let's say about a circle. Let's go ahead and take care of the arrows. Right now they are not visible because we have just the empty div elements. Let's go ahead and select all div elements inside of the arrows. First of all, as defined width and height, and also the background color. I'm going to set with 2.7 rem. Then the height is going to be 12. Run as part the background color, I'm going to use color f, f, f 0, f phi. So now the elements are visible. Next, I'm going to take care of their positions. I'm going to place them in the center of this circle. So let's set position to absolute. And then define bottom position, making 50%. After that, I'm going to add a little shadow effect to the arrows. Let's use box-shadow. Value is point to ran twice, then 0.5 RAM, and the color 777. Okay, Lastly, let's change the shape of the elements in order to make them look like the arrows. I'm going to do that using border-radius. So the border-radius takes four different values. The top-left, top-right corners will be 100%. S4, the bottom right and bottom left corners, I'm going to make them zeros. So as you can see, now, the elements look like the arrows. Right now we see here just one arrow, but all three arrows are displayed. They are placed on top of each other. The next thing that I'm going to do is to place the arrows behind this circle. And for that we can use the z-index property with some higher value than zero, let's say ten. Right? After that, I'm going to customize the arrows separately. Let's start with the seconds, because it is placed on top of the rest of the arrows. I'm going to change the background color. Let's set it to for C, F, E six. Right now, nothing is changed. And it happens because we have already changed the background color of the arrows when we selected them using the div tag. And it has a higher precedence. In order to overwrite this style, we need to select the element using the parent's elements. I mean arrows. So now the background color is changed. Besides that, I'm going to rotate the arrow. Let's use Transform with the rotate function. And I'm going to rotate the arrow. Bye, Let's say 270 degrees. Right now, the arrow is rotated from the center because by default the origin of the transformation is set to center. In this case, we need to make the origin of the transformation bottom center. Now as you can see, the problem is fixed. Next, let's take care of the hour likely. Second, we need to select it using the parent element because we are going to decrease its height. Let's set its height to ten RAM. And also I'm going to rotate the arrow. Let's rotate it by 90 degrees. Alright, so finally, the clock is customized and everything is ready to make the work. As we said, we're going to do that using JavaScript. So let's go ahead and open the script.js file. The first thing that I'm going to do is to select all three arrows. So let's go ahead and create a new variable. I'm going to call it Our. Then select the arrow using query selector method. Let's specify here the class name hour. Then I'm going to duplicate this line of code twice. Let's change the name of the variable we need minutes. And also we need here class minute And then we need here second and the class name. Let's see, institute a second as well. Alright, after that, I'm going to create a function. Let's call it set date. Inside that function, we will manage to work the arrows properly. And then we will call this function after every second using the set interval method. First of all, I'm going to create a variable which will give us the current state. I'm going to call it. Now. It should be equal to new date. Let's see in the console or this variable gives us, I'm going to run console.log. Now. Next I'm going to call this function. But with the set interval method. Actually, this method allows us to execute the function with some integrals. It takes two arguments. The first one is the name of the function. In our case, it's set date. As far as the second argument is the amount of the interval expressed in milliseconds. In our case, it's going to be thousand milliseconds. Let's inspect the page and switch to the Console tab. So as you can see, we are getting here the current date and time and also the time zone after each second. Alright, next we need to define the seconds, minutes, and hours separately. So let's create a new variable. I'm going to call it get second. In order to get the seconds from the current time, we have to use one of the built-in date methods called get seconds. So we need now dot get seconds. If we check this variable in the console, then we will get seconds. In the same way, we have to define minutes and hours. So let's duplicate this line of code twice and then change the names of the variables and also the names of the methods. We need. Get minutes and get hours. Alright, so all three variables are created. As you can see, our clock has the shape of the circle and the size of the circle is equal to 360 degrees. We need to convert seconds, minutes, and hours into degrees in order to define the portions of the moment of each arrow. Let's go ahead and start with this seconds. I'm going to create a new variable. Let's call it, let's say second degree. So in order to convert seconds into degrees, we need to use the following formula. We need to divide the current amount of seconds, Bye 60, because we have 60 s. And then we have to multiply it by 360. Alright, so now we all or they can make the second arrow move. For that we have to rotate it by second-degree. So we need a second dot style dot transform equal to rotate function. And as the value, we have to pass here. Second degree followed by the degrees. So as you can see, now, if the arrow is moving after each second and it shows us the current seconds. In the same way we have to convert minutes and hours. Let's duplicate this line of code twice. So we need minutes. Degree. Then gets minute. Next we need our degree. And get our in this case, we have to divide it by 12 because overall we have 12 h. All right, finally, we need to define the values of the rotate function for the minutes and the hours. Let's duplicate this line of code twice. We need here minute style. And also we have to pass your minute degree. That's for the hour. We have two paths here, our degree. Alright, so it's can see we have here a current time and the clock is working perfectly 8. Project 5 - Navbar: Alright, so it's time to move on and start to build our next project. In this video, we're going to be creating a navbar. At a glance, the project looks like a simple one, but it will be really interesting and hopefully you will learn some new stuff. Okay, Let's go ahead and describe the project. As you can see, we have here a couple of different navigation items. They are represented by the Font Awesome icons. By default, the first item has a different color with different background and also with different shape. Once I click other items than they will change those colors and shape with nice effects. Let's go ahead and start to build the project. I've created a new folder on the desktop called navbar, which right now is empty. Let's go ahead and open it in VS Code and then create our working files. The first one is going to be index.html. Then we need style.css and script.js. Then open the index.html file and create a basic HTML document. For that I'm going to use amides. Let's place here an exclamation mark and then press Tab or enter. Here we have the basic HTML tags. First of all, let's change the title. I'm going to pass your navbar. Then I'm going to link CSS and JavaScript files. Let's open link tag and specify here the name of this user's file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And then we have to specify the path of the file in the source attribute. Alright, besides that, I'm going to bring in one more link for Font Awesome icons. Let's go ahead and search for Font Awesome. Cdn JS. Then copy the first link from here. Open the link tag in the head element, and paste the CDN link in the h reference attribute. Alright, we're almost ready to start to write the code. Let's run the project to the browser. For that I'm going to use one of the VS code package is called Live Server. It allows us to run the project live to the browser and make changes and updates without refreshing the page each time. Finally, let's place the editor and the browser side-by-side. Like so. And get started. I'm going to start to create the HTML markup. Let's open the HTML5 nav tag with a class. Now for inside that element, we will have seven different navigation items. Let's open the link tag with the class now per link. So the each link element will include Font, Awesome icon. Let's open I element with the classes FAS at a home. Then duplicate this line of code six times and change the class names of the Font, Awesome icons. The second one is going to be camera. Then we will have calendar out. The next one is going to be campus. Then we will have book. The next icon is going to be camera retro. And finally we will have headphones. Alright, so that's it regarding the HTML markup for now, let's go to the CSS file and customize the elements principle. I'm going to create some default and reset styles. Let's go ahead and select every element using an asterisk. First of all, I'm going to get rid of default margin and padding. Let's set both properties too. Zero. Then we need box-sizing, border-box. Also, I'm going to get rid of default styles from the link elements using text decoration, none. So throughout this project, we're going to use RAM as the measurement unit. Right now, 1 g is equal to 16 pixels because the font size of the HTML element is equal to 16 pixels. By default, I'm going to convert 1 g into ten pixels. And for that, we need to decrease the font size of the HTML element. Let's set it to 62.5 per cent. Alright, after that, I'm going to select a body elements and define its width and height. I'm going to set width to 100%. The height is going to be 100% of the viewport, I mean 100 vh. And also change the background color. I'm going to use RGB value 19124826. Next, I'm going to place the nap or in the center of the page. We can do that in a couple of different ways. In this case, I'm going to use a CSS grid. We need display grid And then place items center. So as you can see, the items are centered both horizontally and vertically. So let's see about the body elements. Next, I'm going to customize the napa. First of all, it's defined its width and height. I'm going to set width to 70, ran. For the height, it's going to be ten RAM. Besides that, I'm going to assign to it a temporary background color in order to see how the navbar looks like. So at setback on color to light gray CCC. Right now the navigation items ended up at the top left corner of the navbar. We have to send to them. And for that, Let's use flexbox. We need display flex. Then for horizontal centering, we need justify-content center. Let's put the vertical direction. We need align items center. Alright, that's it about the navbar. Next I'm going to customizing now per link. At first, let's define the width and height. Width is going to be tan RAM as by the height, I'm going to set it to 100%. Also, let's change the background color. I'm going to use again RGB value 222-23-3181 and get rid of the temporary background color from the Napa. Okay, next we have to position navigation items. I'm going to place them horizontally in the center and down below at the bottom of the napa. For that, Let's use again flexbox. We need to display flex and then align items with a value flex and also justify content center. Besides that, I'm going to create some space at the bottom using padding. Let's set padding bottom to one ramp. Right? That's it about the napa link. Let's move on and customers, the Font, Awesome icons. Let's select elements. First of all, I'm going to increase the font size. Let's set it to 2.5 brand and then change the color, make it 333. Alright, so the number is almost customized and now we have to make it work. Let's take a look at the finished projects. The half circle, which you see with the actin navigation item created using before pseudo element. So now I'm going to create this element. Let's select now pulling with before pseudo elements. First of all, we need to define the content. It's going to be empty. Then define width and height. Width is going to be ten. Run. As for the height, I'm going to make it a Tran. And I also am going to assign to it some temporary background color. Let's say red. Alright, so here we have before pseudo elements. Next, I'm going to change its position. Let's set its position to absolute. Actually, we need to position this element according to the Navajo link. So let's assign to each position relative. Next, we need to define the top and left positions. The top position is going to be -100%. That's probably left position. I'm going to set it to zero. And finally, let's change the shape of the before pseudo element using border-radius. It will take four values. The first one is going to be the top left corner. Let's set it to zero. Then the top right corner is going to be zero. Bottom right corner will be five RAM, while the bottom-left corner, it's going to be five-prime as well. Alright, so now we are ready to make an app will work. For that. I'm going to use some JavaScript we have to attach now buildings click event. First of all, let's select all know Berlin's. I'm going to create a new variable. Let's call it blinks and select all links using query selector. All methods. We need to specify here the class name now per link. Next we have to look through the links, actually the query selector all method returns an array-like object called node list. We have to look through this list and attach an event listener to each link. In order to look through the list, I'm going to use one of the array helper methods called forEach. This method works fine with node list. We don't have to transform it to the array. Otherwise, if you use another array helper method or if you want to look through the HTMLCollection than at first, where you have to transform it into an array. Okay, Let's use forEach method. We have to pass a callback function which will take one parameter. It's going to be the current item in the loop Next, we need to attach an event listener to each link. Let's specify here the type of event click and also pass you a callback function which will be executed once we click the link. So once we click the item, we have to move before pseudo element down. I'm going to add a new class to the link. Then we will select before see the island with this class and define the movement of the element with CSS. So let's add a new class to the link. We need here class list property, which includes all the classes that the animal has. Then it should be followed by the add method. And we have to specify here the name of the class. Let's say change. Alright, let's go to the CSS file and select before pseudo element with the class change and define top position. And it's -30%. Okay, so now if I click the navigation item then before pseudo element will move down, actually we have here a tiny issue. If we click and other navigation item than the before, so the arms will move down, but the previous one will keep its position. So we have to fix that. We need to replace the class name of the link element with Napa link. Again onClick. For that we have to look through the links and define the class name as napa link. So we need, again for each method with a callback function with one parameter link. So we have to define className. And it should be equal to NOPAT link. Alright, so as you can see, now the problem is fixed. Next, I'm going to change the color of the icons and also the background color. So we need to select an Albert link with class change. Let's define the background color. I'm going to use here RGB value 185-19-7147. Next, I'm going to select ions again with class change. Let's define color. It's going to be white. And also increase the font size, make it 3.5 rem. So as you can see, the navigation items change their colors and size. Once we click them, Let's take a look at the finished project. So once we click the navigation item than their siblings, change the border radius. So now we have to take care of that. Like the class change. I'm going to add a new class to the sibling elements of the ring. And then we will define styles and CSS. So we need to link them the property called previous elements sibling. Then again, we have to use class lease property. Well, the method add, and I'm going to specify here the class name. Let's say prev, EL change. I mean previous element change. Let's duplicate this line of code. Instead of previous sibling, we need next element sibling. And also change the name of the class. We need next element change. Alright, let's go to the CSS file and select eNobe or link with those newly added classes. So we have to set here border, top right, radius to 1.3 rem. Let's duplicate this code. Change class name, we need next element change. And in this case we need to pour the top left radius with the same value. Okay? So in order to see better if the border-radius works fine, Let's get rid of this temporary red background color and use the color which is the same as the background color of the body element. Okay, So now the border radius is visible, but as you can see, we need to adjust the position of the before pseudo elements lightly because the corners of the item don't look quite good. In order to do that at first, I'm going to increase the width of the before pseudo elements lightly. Let's set it to ten point for RAM. And then we need to move the elements to the left side. So let's change the position I'm in the left property. We need minus point to run. Okay, So now as you can see, we have a much better result. Actually, there is a tiny issue here. If we click the first item, then the border-radius of the next element on work. Because we have an error here. If I inspect the page and then switch to the console tab, you will see the error saying that cannot read property class list of null. It happens because the first item doesn't have the previous sibling. And the same problem we have with the last item. It doesn't have the next element sibling. In order to fix that, I'm going to create new elements in HTML. I mean, those elements which we have in front of the first item and the end of the number. So let's open the div tag with a class now per link Then copy this line of code and paste it down below. So now we have to do a couple of things because the navigation items don't look good at first, increase the width of the Navbar. Let's set it to 90 RAM. And then we need to disable pointer events for those newly-created the elements. Because once we click them, then we have the same effects as navigation items. Let's select developments using first-child, last-child pseudo-classes, and then assign to them pointer events, none. Okay, so now everything works fine. We just need to add a couple of different effects to the nav bar. First of all, let's make the effects smoother within a couple of transitions. That first, let's add a transition to the Font Awesome icons. We need the following values. Color 0.4 s, and then font size with the same duration. Next, let's add the transition to before pseudo elements with the class change. In this case, we need top 0.2 s. Besides that, we need to transition for the before pseudo element by default. In this case, we need top with a duration 0.4 s, and then background color with a duration 0.4 s. And also we need here a little delay time, 0.4 s. Okay, next we need to transition for the previous and next element siblings. In this case, we need border-radius with a duration 0.45 s. Now, as you can see, we have much better results. Next, I'm going to use transition for nap or link. We need here border-radius, 0.2 s. Besides that, we need here overflow hidden because if we clicked it before pseudo element at the top of the navigation item, then it will move down. We don't need that. So let's use overflow hidden. Alright, so now the problem is fixed. Next, I'm going to add a little shadow effect to the navbar. Let's use box-shadow with values 0.3 RAM three times, and the color AAA. Next, we need a border radius for the developments. I mean, start and the end of the novel. Right now they are selected together. So I'm going to select them separately. Then add to them. The radius for the first one is going to be 0.5 rem 00.5 Rome. As for the second one is going to be 0.5 rem, 0.5 gram. And then again zero. The border-radius is applied. But now the corners of the Napa are visible because of the shadow effect. So we need a border-radius for the Navajo as well. Let's set it to 0.5 ramp. Alright, the last thing that I'm going to do is to make the first navigation item active by default. Because if I reload the page, then we won't have any active items. In order to do that, we have to assign to the first development class, previous element change. And besides that we have to assign to the first link element class, change to the second link element class. Next element change. Now it's considered if I reload the page than the first navigation item will be active by default. All right, so finally we are done, we have finished to work on that project. Let's move on and start to build the next one. 9. Project 6 - Website Loaders: Okay, it's time to move on and create our next project. In this section, we're going to be creating a couple of different css loaders. Such loaders are used before the web page is loaded. And nowadays you may come across them on every modern website. Alright, let's go ahead and dive deeper into our project. So overall we have three different loaders. Let's describe them quickly. The first loader consists of nine dots. They are placed on three different lines, and each dot has an animation. There are scales and the opacities are increasing with some intervals. I mean that the duration of the animation for each dot is different. Second loader, we have five different lines during the animation. Their sizes are increasing with different delay times. As for the third loader, it consists of five different circles. Each circle has a nice animation. Those lighter things are created using the pseudo elements. Alright, so that's what we're going to create in this video. We will use HTML and CSS. So let's get started. I've created a new folder on the desktop called css loaders. Right now it is empty. Let's go ahead and open it in VS code and create our working files for HTML and CSS. The first one is going to be index.html. As for the second one is going to be style.css. Next, I'm going to open the index.html file and create a basic HTML document. For that, we need to place here an exclamation mark and then hit Enter or tab. Alright, so here we have the basic HTML tags. At first, let's change the title. We need to use css loaders. Then I'm going to link the CSS file. For that. Let's open link tag and specify here the path of the file. Alright, so now we have to run the project to the browser and then start to write the code. In order to open the project in the browser, I'm going to use one of the VS code packages called a live server. It allows us to run the project live to the browser. Okay, Finally, let's place the editor and the browser side-by-side. Like so, and get started. So I'm going to start with the first loader, I mean, those brown dots. So let's go ahead and first of all, create the HTML markup. I'm going to open the div tag with a class container. It will include the entire contents. Then I'm going to open another div tag with the class loader one. So overall we will have nine dots. And I'm going to create them using div elements with the class dots. Alright, so that's it about the HTML markup. Right now, nothing is visible on the page because we have just the empty div tags. Now we can start to write the CSS. First of all, I'm going to create some reset styles. Let's select all the elements using an asterisk. I'm going to get rid of default margin and padding from every element. So let's set both of them to zero. Throughout this tutorial, I'm going to use the RAM as the measurement unit. Right? Now one RAM equals 16 pixels because by default, the font size of the HTML elements is equal to 16 pixels. I want to convert one RAM into ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's set it to 62.5 per cent. Alright, next I'm going to take here of the container. Let's select it and define its width and height. I'm going to set width to 100%. As for the height, it's going to be 100% of the viewport. And also let's set display to flex. Right now, I'm going to place the first loader in the center. But then once we create the rest of the loaders, I will change the flex layout slightly in order to center the elements we need to justify conference center and align items. Center. Okay, so that's it about the container. Next I'm going to select and customize the loader itself. So let's select it and set its width to 20 ran. Alright, next, let's go ahead and customize the adults. Set width and height, both of them 23 RAM. Then I'm going to make them rounded using border-radius with a value of 50 per cent. Also change the background color. Make it a five to a, to a. Next. I'm going to create some space around the dots using margin. Let's set it to 1.6 RAM on all four sides. And finally, change the opacity, make it 0.6. So now the dots are visible, but we have to align them in the right way. For that, Let's use the flexbox. I'm going to set display to flex Then in order to align elements are three lines. We have to wrap them. So we need to flex wrap with the value rap. And then I'm going to center them using justify-content center. So as you can see, the dots are aligned. So now it's time to create the animation. We will do that using CSS keyframes. Let's take a look at the finished project. As you can see during the animation, the adults are getting bigger and also the opacity in quizzes. Let's go ahead and create the CSS keyframes. I'm going to call it animate loader one. So during the animation, we need to increase the scale of the elements. So at 0%, I'm going to set transform scale to one. Then at 50 per cent, I'm going to increase the scale and also increase the opacity. So we need to transform scale with a value of 1.5. And the opacity is going to be 100%. I mean, at the end of the animation, we need to decrease the scale. And also we need to decrease the opacity. Alright, so the keyframes are created and now we have to apply these rules to the elements. For that, we have to use an animation property. As we said, we need different animation durations for the adults. So I'm going to select them using the nth child selector. Let's select the first one. Then use animation. We have to pass here a couple of different values. The first one is going to be the name of the keyframes animate load. The one that we need to duration is going to be 1.5 s. And also we need infinite because the animation should run infinitely. So as considered, the first dot is already animating. Let's duplicate this code eight times because overall we have nine dots. And then change the numbers of the nth child selectors and also the durations. For the second one we need 1.3 s. Then the next one is going to be 1.7 s. Next we have the fourth element. The duration is going to be 1.1 s. Then the next one is going to be 0.9, then 0.7. The next one should be 0.5 s. For the eighth item, I'm going to use 1.3 s. And for the last dot, the duration is going to be 1.5 s. Alright, so finally, we have here a nice animating load. Let's see about the first loader. Let's move on and take care of the next one. Like the previous loader. At first, I'm going to create the HTML markup. So overall we will have five lines. At first, Let's open div tag with the class loader to it's going to be the wrapper. And after that, create five lines using again div tags. So the markup is created. Let's go ahead and start to write the CSS. Let's select wrapper load or two and set its width to 25 ramp. Next I'm going to style the lines as first. Let's define width and height. The width is going to be 1.5 RAM. As for the height, it's going to be five rem. Next, let's change the background color. Make it 41, 69e1. And also make the lines slightly rounded using border-radius with value one RAM. So it's can see the lines are visible. Right now the loaders are placed too close to each other. I want to create some space between them. So let's go ahead and change the value of the justify content property for the container. Let's make it spaced evenly. So now it's better. Next, I'm going to place the lines side-by-side. For that. Let's use display flex. Also. I'm going to create space between them using justify content space evenly. And also I want to center them vertically. For that, we need to align items center. Alright, so the lines are aligned in the right way. And now we have to create the animation. So during the animation, I'm going to increase the height of the lines. And the animations for each line will have a different delay time. First of all, we need to create a CSS keyframes. I'm going to call it animate load or two So zero per cent, the height is going to be five RAM, which is the default one. Then at the 50 per cent, the height is going to be 18 RAM. And then at the end of the animation, I mean, at 100 per cent, the height is going to be again five. Alright, so the keyframes are created. Now we need to apply those rules to the lines. Let's select alliance with the nth child selectors. Select the first one. Then I'm going to duplicate it four times and change the numbers 1-5. So we need to run the animation for the middle line without delay time. I mean, for the third line. So we need animation with a name of the keyframes animate load or two than the duration is going to be 0.5 s. And again we need infinity. Then we need similar delay time for the second and fourth lines. So let's copy this line of code and assign it to the second and fourth lines. And also add delay time, which is going to be 0.3 s. As for the first and fifth lines, we need the delay time to be equal to 0.6 s. Alright, so it's considered a loader, works fine with a nice animation. In fact, with a second loader, we are done. Let's move on and create a third one. As usual, I'm going to start with the HTML markup. We need to open div tag with the class loader three. And then I'm going to pass here five div tags with the class circle. Okay, so that's it about the HTML markup. Let's move on and start to write CSS. I'm going to select your wrapper. Loads are three. Let's set its width to four to run. Then select and customize the circles. First of all, as defined within height, I'm going to set both of them to fall RAM than we need to make the element rounded. Let's use border-radius, 50 per cent. And also, I'm going to change the background color. It's going to be the temporary background color. Let's make it light gray. So here we have these circles. Let's align them using flexbox. We need display flex. And then we have to create some space between the circles using justify content space evenly. Alright, so the animation effects will be created using CSS keyframes, and before pseudo elements. So those animating elements will be before pseudo elements, before we create them, I'm going to add to each circle its own color. So let's select them using nth child selector. The first background color is going to be 9o6d. Let's duplicate this code four times and change the numbers and the colors. The second background color is going to be F9, C7 for f. Then we will have f8961 in. The fourth background color is going to be f37 22c. And the last one is going to be F9 for 346. Alright, now we have to create the before pseudo elements. So let's select circle, followed by before. First of all, we need to define the content. It's going to be empty. Then let's define width and height. I'm going to set both of them to 100%. And also we need to define position. Let's make it absolute. Position relative for the parent element, because the circle should align according to the parent element. After that, Let's make the elements rounding using border-radius with value 50 per cent And also set the opacity, make it 0.5. So right now the elements are not visible because they don't have the background colors. If we assign to them some temporary background color, let's say light gray, then you will see them clearly. Okay, So now I'm going to assign to each pseudo element the proper background color. Actually, we can grab this entire code from here. And then we need to add to them just the selector before. So now everything is ready and we can create the animation. First of all, let's define the CSS keyframes. The name is going to be animate loader three. So we have to increase the scale of the pseudo elements and then we need to hide them. The steps should be following. At zero per cent, we need scale to be one. Then add 50 per cent. The scale is going to be 2.5. The next step is going to be 75%. And again, we need scale to be 2.5. And after that, we need to hide the elements. So at eight per cent, I'm going to set opacity to zero. And also at the end of the animation, at 100%, opacity is going to be zero. Alright, so that's it about this CSS keyframes. Now we have to use the animation property. Let's assign it to the before pseudo elements. We need here the name animate loader three. The duration is going to be 2 s. Also, I'm going to use here one of the animation timing functions is out, and then again infinite. So it's considered the animation works. The only thing that we need to do is to add different delay times to the elements. So for the second before pseudo elements, we need animation delay to be 0.2 s. Let's copy this line of code. For the next element, we need 0.4 s, then 0.6 s. And for the last element we need 0.8 s. Alright, so that's it about the third loader. And actually we are done. All three loaders are created 10. Project 7 - Ripple Button: Alright, so let's go ahead and start to work on our next project. In this section, we're going to create a button with nice and cool hover effects. Once we hover over the button, then the yellow circle will expand to the entire bottom. It doesn't matter which side you hover over. The button from. This yellow element will appear from every side. Alright, so we're ready to start to create the button. I've created a new folder on the desktop called repo button, which right now is empty. Let's open it in VS Code and create our working files for HTML, CSS and JavaScript. Then open index.html file and create the basic HTML document. We need to place urine exclamation mark and then hit Tab or Enter. So here we have the basic HTML tags. At first, let's change the title. I'm going to place your report button and then link the CSS and JavaScript files. I'm going to open link tag in the head elements. And then we have to specify the path of the file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And we have to specify here the path of the JavaScript file. Alright, so we're ready to start to write the code. Before that, I'm going to run the project to the browser. For that, I'm going to use one of the VS code packages called a live server. It allows us to run the project live to the browser and make the changes and updates without refreshing the page. Each time. Let's place the editor and the browser side-by-side, like so, and get started. So I'm going to start with the HTML markup. Let's open div tag with a class container. This element will contain the entire content. I mean the button. The button will be created using the link elements. Let's open it with the class btn and then pass year span element with a content. Explore. Alright, so that's it about the HTML markup. Let's start to write the CSS. First of all, I'm going to define some common and reset styles. Let's select every element using an asterisk. First of all, I'm going to get rid of default margin and padding from all the elements. Let's set both of them to zero. Also, I'm going to make box-sizing, border-box. Then let's get rid off default underlined from the link element using text decoration none. And also, I'm going to change the font family. Let's set it to Courier New monospace. Alright, so these styles are applied to the elements throughout this project, I'm going to use RAM as the measurement unit. By default, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I want to convert 1 g to ten pixels. And for that, we have to decrease the font size of the HTML element. Let's set it to 62.5%. So as you can see, the font size of the link element became smaller. Let's go ahead and start to work on the container. First of all, I'm going to define its width and height. Let's set with 200 per cent. As for the height, I'm going to make it 100% of the viewport. So we need hundred vh and also change the background color. Make it dark gray using 262626. Alright, next, I'm going to place the button in the center. And for that, I'm going to use flexbox. We need display flex. Then for horizontal centering, I'm going to set justify content to center. That's for the vertical centering. We need to align items center. So it's considered button is placed in the center and now it's time to customize it. Let's select BTN. And first of all, let's define this position. I'm going to make it absolute. Then I'm going to define the width and height for the Bateson. Let's make both of them 18 RAM. Then I'm going to change the background color. Let's use 90 E 0 E. And also make the button rounded using border-radius, 50 per cent. Okay, So the next thing that I'm going to do regarding the button is to create a border. Let's set its width to point to RAM than the style is going to be dotted As for the color, I'm going to make it white. Alright, that's it. Regarding the button. Next, I'm going to take here of this span element. First of all, I'm going to place it in the center for that. Let's use again Flexbox. I'm going to grab those three lines and paste them here. So this panel is centered. Let's go ahead and style it. Select btn span. At first, I'm going to set its position to relative. Then change the color, make it white. Also am going to increase the font size, make it 1.8 round. Then I'm going to make the phone bolder. Let's set font weight to 600. Also transform text into uppercase. And lastly, create some space between the letters. Let's set the spacing to point to run. Alright. So this span element is customized and I will have to create a hover effect. Let's take a look at the finished project. So once we hover over the button, then the yellow circle will cover the content. It appears from the exact side where we enter the mouse will create this effect using JavaScript and CSS animations. Let's go to the script.js file and start to write the code. The first thing that we have to do is to get the coordinates of the cursor inside of the button. I mean, we need to get the top and left position of the cursor measured from the top and left edges of the button. Before we do that, we need to select a button itself. So let's create a new variable. I'm going to call it btn. And then select button using query selector method. We need to specify here the class name BTN. After that, we have to attach to it an event listener with a mouse enter events. Also, we have to pass here the callback function, which will be executed once we hover over the button. Actually the mouse enter metal, fires only once when we hover over the element. So as we said, we have to get the left-hand top positions of the cursor inside of the button. In order to get these positions, we need to use decline x and client. Why properties? They give us the top and left positions of the cursor measured from the top and left edges of the viewport. In order to get the position of the cursor inside the button, we need to find the difference between decline x and y properties and the left-hand top position of the cursor. So to make it more understandable, Let's go ahead and write the code. At first, I'm going to pass urine event object. Next, I'm going to show you how to get the information about the elements. For that, we can use one of the methods called get bounding client rect. Let's run through the console and see what this method gives us. I'm going to pass here e dot, target dot, get bounding client. Right. Then I'm going to inspect the page and switch to the console tab. So if I hover over the button, then we will get an object called dumb racked. If I dropped down it, you will find here a couple of different properties. We have the positions I'm in, bottom, left to right and top. Also we have here the width and height of the element. Besides that, you can see here x and y properties. And actually they are the same as the left and top properties. We can use those values to calculate the left into positions of the cursor. Inside the button. For that, I'm going to create a new variable. Let's call it left. So we need here e dot client X, and we have to subtract to it. You don't target dot, get bounding client rect dots left. Let's check in the console what the left variable gives us. When we hover over the button, we will get the left position of the cursor. But now inside of the button. I mean it is measured from the left edge of the box. Alright? In the same way, we need to define the two position. We can simply duplicate this code, then change the name of the variable we need top. And also we need here client y instead of x, and we need your top again. Alright? So both positions are defined and now we need to create a new elements on those positions. We will do that using one of the methods called create elements. I'm going to declare a new variable. Let's call it ripple Then down below, we need to create a new div elements. As I said, I'm going to use create elements method. We need to specify here the tag name div. After that, we need to define left-hand top positions of the ripple. And we will use the values that we define here. So we need here ripple dot, style dot, left. And it should be equal to the value of the left variable. The same way I'm going to define the top position. Let's duplicate this line of code and change lacked into top. Okay, so the element is created, but we need to append it to the button. For that, we have to use one of the methods called prepend. We need btn dot prepend. And we have to pass here the variable Ripple. Ok, so in order to prove the element is creating on hover, Let's switch to the Elements tab, and then hover over the button. So as you can see, Dede Allen is created inside the button. So we have here left and top positions. Alright, Next we need to customize this element in the CSS file. Let's create a new class and call it ripple. In order to make a left and two positions work when it's defined the position of the whirlpool. Let's make it absolute. Then defined width and height. I'm going to set both of them to 100%. And also change the background color. Make it E7 be E 08. Alright, let's see about the styles of the ripple right now. In order to apply them to the elements, we have to add this class to the elements class list. So we need re-put dot class list followed by the add method. And we have to specify here repo. Okay? So if I hover over the button, then the new element will appear. If I hover over the button multiple times, then the multiple elements will be created. But we will fix that soon. First of all, let's make this a rounded. Let's use border-radius 50 per cent. And also we have to move it to the left hand upwards by -50 per cent. Let's use transform. Translate with -50%. Twice. Okay, so now we have a better results and it's time to create an animation. So by default, width and height of this element will be zero. Once we hover over the button, then the size of the republic should increase with animation. So let's create CSS keyframes. I'm going to call it a ripple anime. Overall, we will have two different steps. At zero per cent, we need within height to be zero. For the 100%, we should increase width and height to 100%. Alright, so the keyframes already know how to apply these styles to the elements using an animation property. Let's pause here, ripple anime as well. The duration is going to be 0.5 s. So now if I hover over the button, then the elements will appear smoothly. But as you see we have here a couple of issues. Once the element appears and its size is increased, then in heights. So we need to maintain the styles which we have at 100%. For that we need to use a value called forwards. So now this problem is fixed element no longer height. The next issue is that the size of the element is not enough to cover the bottom, so we have to increase it. Let's make it 200 per cent. So now the size is twice bigger, but still it's not enough because if I enter the mouse and stop it at the edge of the button, then the ripple won't cover. So let's increase within height slightly. I'm going to make them 210%. Alright, so now the problem is fixed. The next thing that I'm going to take you off is to hide the outer parts of the repo. For that we have to use overflow hidden. Alright, so now we have a much better result. The next thing that I want to do is to get rid off the repo. Once the mouse leaves the button, we have to use one of the events called mouse leave. Let's attach to the button event listener. With mouse live event. Also, we need here a callback function. Next, we need to remove the repo. For that, I'm going to use removed child method. We have to specify here. Okay, so finally, we are done. The button works perfectly. It has nice effects and animations. I think it was interesting and different, and I hope you liked it. Now, it's time to move on and start to work on the next project. 11. Project 8 - Rounded Progress Bar: In this video, we're going to create a progress bar with the shape of a circle with a percentage value. So the progress bar works on a scroll event. By default, we have here zero per cent. And once we start to scroll down the page, then this white line around the circle will be filled with the red color smoothly. And also the person's value will increase accordingly. Then if we scroll up, the percentage value will decrease and we will get back the white border. This project is a part of our upcoming Udemy course, in which we will build an advanced complete website with HTML, CSS, and JavaScript from scratch. It will be released soon, so stay tuned. Alright, so that's it, what we're going to create in this video. Let's go ahead and get started. I've created a new folder on the desktop called circle progress bar, which right now is empty. Let's go ahead and open it in VS code. I'm going to create our working files. The first one is going to be index.html. Then we will have style.css and script.js. Then open the index.html file and create a basic HTML document. We need to use Ahmed, let's place here an exclamation mark and then hit Tab or Enter. Okay. First of all, I'm going to change the title. Let's make it circle progress bar. And then link CSS and JavaScript files. I'm going to open link tag in the head element. Let's specify here the path of the file. As for the JavaScript file, I'm going to open script tag right above the closing body tag. And then in the source attribute we have to specify the path of the file. Right? After that, I'm going to run the project to the browser using a live server. Then place the editor and browser side-by-side. Alright, so at first we are going to create a progress bar using HTML and CSS. I mean, we will style it like so. And then we will make it work using JavaScript. Let's start with the HTML markup. I'm going to open a div tag, which is going to be container. Next we need another div tag which will wrap the entire content that's assigned to the class progress bar. Inside the div tag will need four different elements. Right now let's just create them and then we will explain and show why do we need those elements. So let's open a div tag with a class half circle. Then duplicate it three times. Actually, we don't need to touch the second development. The third one is going to be a half circle top. That's probably the last development. It's going to be a progress bar circle. As the content. Let's insert here zero per cent by default. Alright, so that's it about the HTML markup. Let's go ahead and start to write some CSS. I'm going to create some common styles. Let's select every element for that. We need to use an asterisk. So first of all, I'm going to get rid of default margin and padding from every element. Let's set both of them to zero. So I'm going to make box-sizing, border-box, and then change the font family. Let's use here aerial Helvetica sans-serif. So the common styles are applied to the elements. Next, I'm going to change the font size of the HTML. Because throughout this project, I'm going to use the RAM as the measurement unit. Right now, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I want to convert 1 g into ten pixels. And for that, we have to decrease the font size of the HTML. Let's make it 62.5%. So I can see the text became smaller. Okay, Next, let's take care of the container. Let's select it. First of all, define its width and height. I'm going to set its width to 100%. As for the height, I'm going to make it 200 per cent of the viewports because we need to scroll down the page. I can also change the background color, make it gray using 555. All right. After that, I'm going to take care of the progress bar itself. I mean the wrapper, define its width and height. I'm going to make both of them 40 ran. Also change the background color. Make it white And then make the progress bar rounded using border-radius with the value 50 per cent. So the progress bar should be placed in the center and it has to be fixed because once we scroll down the page, it shouldn't move. So let's set its position to fix than we need top and left properties, both of them to be 50 per cent. Then in order to censor the element perfectly, we had to use Transform with the translate function. We have two paths here, -50 per cent twice. All right, That's it about the wrapper. Let's move on and take care of the progress bar circle. Let's select it. And first of all, let's define its width and height. I'm going to set both of them 239.4 RAM. Then change the background color, it's going to be black. Also make the elements around it using border-radius, 50 per cent. Then change the color, make it white, and increase the font size. Make it forum. Okay, so this element installed, but we have to take care of its position. It should be placed in the center of the wrapper. And also we have to send to the person at each value inside the circle. In both cases, I'm going to use flexbox and in order to avoid to write the same code over and over again, I'm going to create a new class. Let's call it center and assign to it a couple of different flexbox properties and values. First one is going to be display flex that we need. Justify contents center for horizontal centering and align items center for the vertical centering. After that, we have to assign this class to be progress bar and the progress bar circle. Okay, so now it's can see the problem is fixed. So the progress bar is prepared. It has the default look. And now we have to make your work. As you remember, we created a couple of different developments. The first two developments which have a class half circle, will manage to fill the progress bar with the red color. So the first thing that I'm going to do is to hide the black circle for a while in order to explain and demonstrate things better that's assigned to display none. So the black circle is hidden, and now we have to take care of the three div elements, which will help us to make the progress bar work. Let's select all three elements simultaneously. I mean, we need half circle and half circle top. First of all, let's take care of their positions. We need position to be absolute. Also, let's set top and left properties, both of them to zero. And after that as defined width and height, I'm going to set width to 40%. As for the height, let's make it 100%. So right now they are not feasible. And in order to fix that, I'm going to assign to each of them a different temporary background color. Let's select the first half circle using nth child selector and set its background color to green. Then I'm going to duplicate this code, change the number we need here to S4, the background color, it's going to be blue. And finally, let's select half circle top and set its background color to, let's say orange. Alright, so all three developments are placed on top of each other. At first, I'm going to make the progress bar work on the hover in order to make it simpler to understand. And then we'll change the hover and use scroll event using JavaScript. So we need to rotate the first half circle by 180 degrees. As for the second half circle, we have to rotate it by 360 degrees because we have to fill the entire circle. As for the half circle top, I mean this orange elements, we have to make it hidden. So let's go ahead and select progress bar with hover, followed by the first half circle. Let's use again nth child selector that we need to transform with the rotate function. And as we said, the value is going to be 180 degrees. Let's duplicate this code. Change the nth child number, make it too. As for the value of the rotate function, it's going to be 360 degrees. Besides that, we need to use the transition to make the rotation smoother. So let's use transition with the values transform. The duration for the first half circle is going to be 1 s And also we need to use here linear. Then let's grab this code, paste it down for the second half circle. The only thing that we need to change is duration. Let's make it 2 s. So now if we hover than the elements will rotate, right now we see here just blue element because the green one is unmarried. If I pause the blue background here, then you will see the green elements. So the elements are rotating, but in a wrong way. I mean the origin of the transformation is set to censor by default. But in our case, we need to make it right center. So let's use the transform origin and make it right center. So in this case, the origin of the transformation is going to be the center of the element. But on the right side, once we hover over the progress bar, we have to hide this orange elements. So let's select progress bar with hover, followed by the circle top, and set its opacity to zero. So now the element heights once we hover over the progress bar. But actually it hides too early. We need to hide it. Wants the green element finishes rotating. So we need to hide it after 1 s. Let's use transition. With opacity. Duration is going to be 0 s. As for the delay, It's going to be 1 s. Alright, so now everything works fine. Now we have to change the colors and also we need to make those elements around it. The first two development should have a red color. I mean, the color B6 with four zeros. As for the third element is going to be white because the progress bar itself has the white background came. So now we need to hide those outer parts of the elements. For that, Let's use overflow hidden. Now it's concealed. We have a much better result. Finally, we have to make the black circle visible. So let's remove display none. Right now. They part of the circle is visible because it ended up behind the div elements. In order to fix that, Let's use the index property. We have to assign to it some higher value than zero, let's say ten. Okay, now, if I hover over the progress bar, then it will be filled with the red color nicely. Alright, so now we have shown you how to create a progress bar using CSS. And now we're going to show you how to make your work on scroll using JavaScript. Let's take a look at the finished project. So if I scroll down than the progress bar will be filled. And also the person that you value will change accordingly, that it will decrease once we scroll up back to the top. First, let's comment those styles out. I mean, this towels on hover. Then go to the JavaScript file. First of all, I'm going to select the div elements. I mean, for div elements, which are placed inside the progress bar. Let's go ahead and start with the half circles. Create new variable and call it half circles. In this case, we are selecting two elements, so we need to use query selector all method. Let's specify here the class name, half circle. The next element is going to be half circle top. So let's duplicate this line of code. Change the name of the variable. We need half circle top. Also we need to query selector. Instead of query selector, all method for the class name is going to be half so-called top. Let's duplicate this line of code. Once again, change the name of the variable. It's going to be progress bar circle. And also change the class name. We need progress bar circle. Alright, so all developments are selected. Next I'm going to attach a scroll event to the document. Let's use add event listener method. We need to specify here the event is going to be Scroll. And also we need here a callback function which will be executed once we scroll the page. So as you know, the one complete rotation is equal to 360 degrees. We have to convert the scrolled portion of the height into degrees. Before we do that, we have to define a couple of different variables. The first one is going to be the viewport, height of the page. Let's create new variable and call it page viewport, height It's going to be window in your height. The next variable is going to be the entire height of the page. So let's create page height. It should be equal to documents dot document elements. And then we need scroll height. So again, we defined here the entire height of the page. And the last variable is going to be this crawled portion of the page. So let's create new variable. I'm going to call it scrawled portion. And it should be equal to Window dot page Y offset. Alright, so now everything is prepared to convert the height of this growth portion into the degrees. Let's create a new variable. I'm going to call it the scroll portion degree. And now we have to use the following formula. We need to divide scrolled portion to the difference of the page height and page viewport height. And we have to multiply the result by 360. So we need to you scrolled portion divided by the difference of page height and page viewport height. We have to multiply it by 360 degrees. Let's go ahead and see in the console what this variable gives us. Let's run through the console is called portion degree. So let's inspect the page and switch to the console tab. Once we scroll down the page and go to the end of it, we will get the proper values 0-360 degrees. Alright, so now using this variable, we will rotate half circles. So we need to loop through them and rotate each half circle. I'm in the first and the second developments inside the progress bar. So in order to loop through them, we have to use one of the array helper methods called for-each. It takes one parameter, which is going to be the callback function. It will be executed for each element. The callback function itself takes one parameter and it's the current item in the list. Let's call it E L elements. Now we have to transform each element. We need style transform. Then open back ticks. We need here rotate function. And as the value, we have to pass you scroll portion degree. So now if we scroll down, then this scroll bar will start to feel. Once we reach half of it, then we need to stop the first half circle. And also we need to hide the third div element. I'm in the half so-called top. So we need to use the if statement where we have to define if Scott portion degree is greater than or equal to 180. So let's insert you mentioned condition. If this condition is true, then we have to give the first half circle the fixed value equal to 180 degrees. In order to select the first half circle, we have to use the index number zero. And then we need style transform. It should be equal to rotate 180 degrees. So we need to hide the half circle top. Let's use style, build opacity, and make it equal to zero. So now, once we scroll down, the entire progress bar will be filled. What do we have here? A tiny issue once we scroll up and is called portion degree becomes less than 180 degrees. We have to display back half circle top. So we need to create else statement. Then let's grab this line of code, paste it here, and change this value, make it one. So now it's can see everything works perfectly. The only thing that have to do is to make the percentage value work. In this case, we have to convert degrees into a percentage value. Let's create a new variable. I'm going to call it scroll portion percent. So in this case we have to divide scrolled portion degree by 360 degrees, and then we have to multiply it by 100. Okay? Now we have to display this value as the contents of the progress bar a circle. So let's use progress bar a circle with text content. Then open backticks. Insert here, scrolled portion present, followed by the percentage sign. So right now the percentage value works, but we have here the decimals. In order to get rid of them, we have to use one of the methods called Math.floor. So now as you can see, everything works perfectly. And actually with the project, we are done 12. Project 9 - Slideshow of Social Media Icons: In this video, we're going to be building a slideshow of the social media icons. It's going to be a small one, but I think it will be interesting before we start to create the project, I'm going to describe it. So we have here a full-screen background image and a couple of pretty nice social media icons. They are moving with some integrals. And the icon in the center is becoming lighter. For the rest of the icons, they are darker by default. So as we said, we're going to build this project with HTML, CSS, and JavaScript. So I expect that you all already know the basics of those three technologies. I've created a new folder on the desktop called slideshow, in which I have another folder for the images. Let's go ahead and open this folder and VS code. I'm going to create our working files. The first one is going to be index.html. Then we will have style.css and script.js. Let's open the index.html file and create a basic HTML document. For that, I'm going to use Emmet. We need to place here an exclamation mark and then hit Tab or Enter. Alright, after that, Let's change the title. That seems a few social media icons. Then I'm going to link CSS and JavaScript files. Let's open the link tag in the head element and specify the path of the CSS file. As for the JavaScript, I'm going to open the script tag down below, right above the closing body tag. Specify here the path of the JavaScript file. After that, let's run the project to the browser. For that, I'm going to use a live server, which allows us to run the project live in the browser using a local server. And finally, let's place the text editor and the browser side-by-side. Like so, and get started. So we're ready to create an HTML markup. Let's open the div tag, which is going to be the wrapper of the content. Let's assign to the class slideshow. Overall, we will have five different social media icons. They will be represented by the images, and also they will be wrapped by the link elements. So it's open link tag with a class slideshow link that institute here and image. I'm going to select image called slideshow IMG one. Let's duplicate link element four times and then quickly change the numbers of the image names. Okay, so that's it about the HTML markup. Everything is prepared and now we can write some CSS. First of all, I'm going to customize and airline the icons. And after that, we will make the slideshow work using JavaScript. At first, let's create some common and reset styles. Let's select all the elements using an asterisk. First of all, I'm going to get rid of default margin and padding from every element. So let's set both of them to zero. Also, we need box-sizing, border-box. And I'm going to get rid of default styles from the links. Let's use text-decoration, none. So throughout this project, I'm going to use a ramp as the measurement unit. By default, 1 g equals to 16 pixels, because the font size of the HTML element is equal to 16 pixels. I'm going to convert one ran into ten pixels. And for that I'm going to decrease the font size of the HTML elements. Let's make it 62.5%. Okay, so that's it about the common styles. Let's select a wrapper div elements. First of all, I'm going to define, we can hide, let's make with 100%. As for the height, I'm going to set it to 100% of the viewport. Next, I'm going to set the image as the full-screen background. But before that, let's use function called radial gradient. Radial gradient function sets the color transition from the center. So I'm going to specify here two different colors. The first one is going to be 483 times and the opacity, 0.9 to five. That's for the second color. I'm going to insert here black color with the opacity 0.9 to five. After that, let's define the URL. I'm going to select image called bg dot PNG. Also we need here centered at the position and no repeat. Lastly, let's define the size of the background. Let's make it cover So as you can see, we have here a full-screen background image. Next, I'm going to place the icon side-by-side for that. Let's use flexbox. We need display flex. And after that, let's align icons and center vertically. Use align items. Center. Also, let's create some space on the left and right sides using padding. I'm going to set it to zero and then to run. Alright, let's see about the wrapper. Let's take care of the icons. I'm going to decrease their size. Let's select it first slideshow link and make its width 20%. After that, we have to define the width of the image itself. So let's select IMG elements and set width to 100 per cent. So in this case, the image will take up 100% of the width of the parent element. Right? That's it about the CSS. For now. We have to make the slideshow work using JavaScript. So it's open this script.js file. First of all, I'm going to select your wrapper div elements. I mean the slideshow, let's create a new variable and call it slideshow. Then select the element using query selector method. We have to specify here the class name. Slideshow. Alright, let me tell you how we're going to make this slideshow work. We will remove the first icon from the list, and we will add it back to the list as the last one. We will do that with some intervals and also with some smooth transitions. That's all about the process of the slideshow. As we said, we need some intervals. And for that I'm going to use one of the built-in methods called Set Interval. It takes two arguments. The first one is a callback function, which is executed after each interval. As for the second argument, it's going to be the amount of the interval itself. We're going to change the images after 3 s. So I'm going to pass here 3,000, 3,000 milliseconds, which is equal to 3 s. Okay, so as we said, we have to remove the first icon and then add it to the list as the last one. So first of all, let's select the first icon. I'm going to create new variable. Let's call it first icon. I'm going to select first icon using one of the properties called first element child. I mean, it's going to be the child of this slideshow. So now the first icon is selected, and in order to remove it from the wrapper div elements, I'm going to use one of the dome methods called remove child. So we need slideshow. Then remove child. And as the argument, we have to pass your first icon. As you can see after every 3 s, the icon. So removing, as we said, we have to add them back to the list. And for that, I'm going to use another dome method called append child. By default, it adds an element as the last child. So we need slideshow followed by the append child method. And as the argument, we have to pass here again for a second. Okay, So as you can see, the slide show all the works. But we need to add to it a couple of different effects. The first thing that I'm going to do is to remove the first icon smoothly with a fade effect. In order to do that, I'm going to create a new class in CSS. Let's call it faded out. So this class will include two styles. In order to fade the elements out, we need to make the opacity and the width, both of them zero. So let's set opacity and width to zero. And besides that, we have to use transition for the first icon. In order to select first icon, I'm going to use f child selector. We need to specify here one. And then let's insert your transition with with a duration of 0.5 s opacity with the same duration. That's it about the CSS. Let's go back to the JavaScript file. Now, we need to add class faded out to the first icon. So we need here first icon, followed by the property called class list, which gives us all the classes of the element. Then we need to use method called add. And we have to specify here class name faded out. Now the icon is removing but without any fade effect because transition effect needs some time. Actually half of the second We need to wait for half of this second before we remove the element from the list. In order to do that, I'm going to use one of the methods called setTimeout. It allows us to execute the function once with some delay time. So this method takes two arguments. The first one is a callback function. Let's interfere those two lines. As for the second argument, it's going to be a delay time. In this case, we need half of the second 500 milliseconds. So now the icon is removing with a nice fade effect. Now we have to add it back to the list again with a fade effect. In order to do that, we have to remove class fade out from the elements. We need first icon, followed by the class list property. And then we have to use method called remove. Let's specify here the class name fade out. Now the icon is added to the list, but without any fade effect. Because again, we have to wait for half of the second. So we need to use again set timeout function that insert this line of code inside of the function and also specify the delay time, 500 milliseconds. So now, still we don't have here the fade effect because we need to define the transition for the last icon. Let's go to the CSS file. Actually, we need the same transition that we used for the first icon. So I'm going to add here just the selector for the fifth icon. So right now, everything works fine and we can move on and take care of the second effect. I mean, we have to make the icons darker by default. And then we have to make them lighter once they take third place, in the least, like it is in the finished project. First of all, let's make all the icons darker. For that, I'm going to use one of the CSS properties called filter with a function called brightness. Let's insert your 0.1. So this value means that the element keeps only ten per cent of its default brightness. After that, I'm going to create a new class and CSS, which will include the higher brightness. And we'll add this class to the element using JavaScript. Let's call this class light than use again filter, where the function brightness as the value of interest to you, 1.5. Okay, let's go back to the JavaScript file. Now we need to select the third icon and we have to add to it a newly created class light. Let's create a variable and call it third icon. In order to get access to the third icon, I'm going to use property called children. And then in square brackets, we have to specify the number of the elements. In this case we need three. So now we have selected the element and we need to add to it class light. So we need here foot icon, dot, class list, dot add. And we have to specify here the class name light. Now as you can see, the icon is becoming lighter, but it keeps the brightness. So we don't need that. We have to remove back the class light. We need to remove it from the previous sibling of the third icon. Because once it moves, then it's no longer the third icon in the list, but the second one we need here through the icon dot, previous elements sibling, followed by the class list property. Then we need a method called remove. And again, class like Okay, so now everything works fine. We just need to add a transition to this effect. Let's go to the CSS file. Select the third icon. Use again nth child selector than Institute transition with filter 0.5 s. Okay, so now we have much better results. I can, it's becoming darker smoothly. But as you can see, we need transition once the icon becomes lighter as well. So let's add a transition to the class light filter as the duration. Let's specify here 1.5 s. Okay, so now everything was fine. And before we finish this tutorial, I'm going to do one more thing. If I reload the page than all five icons will be darker. We don't need that. We need to make your third icon lighter by default. And to do that, I'm going to add class lights to the third icon and the HTML file. Okay, that's it. Finally we are done. We have finished working on the projects. Again, it was a small one, but I hope it was interesting. And you enjoyed it. See you next time. 13. Project 10 - Forms with Validation: Alright, so it's time to start to work on our next project. In this video, we're going to be building a sign-in and sign-up forms. Nowadays, we made sign in and sign up forms on almost every website. So this kind of project is going to be interesting and helpful for you because when you work on your projects, you should know how to deal with these things. Before we start to write the code, let's go ahead and describe the project. So here we have two different buttons, sign in and sign up at the top left corner of the page. Then we have here the heading. By default it displays sign in but will program it using JavaScript. Then down below, we had a couple of input fields and a submit button. By default, there are displayed input fields for signing in. But if I click the Sign Up button, then we will get here the input fields for registration. Besides that, the project includes a form validation. For example, if I live the input fields empty and click the submit button, then we will get the error messages saying that email and password are required. If I feel, for example, one of the inputs, let's say the password and click the submit button. Then the input field will get a green border, which means that we have entered the valid data and the inputField. Okay, So the project is going to be responsive to different screen sizes. If I inspect the page and switch to the responsive mode, you will find that the project is responsive. We built this project for extra large screen size. I'm in the screen size with 1920 pieces of width and 1080 pixels of height. So if you're using a relatively smaller screen size than the project, might not look quite good during the tutorial, but do not worry at the end of the day, we will make it responsive. In the meantime, you can switch to the responsive mode, set the width and height for the extra large screen size. And follow me. As we said, the project is going to be built based on HTML, CSS, and JavaScript. So I hope that you already know some basics of those three technologies. I think we're ready to start. I have created a new folder on the desktop called sign-in, sign-up form, which right now is empty. Let's go ahead and open it in VS code and create the working files for HTML, CSS, and JavaScript. We need index.html, then style.css, and script.js. Then open index.html file and insert here the basic HTML document. For that, I'm going to use an animate. Let's place here an exclamation mark and hit Tab or answer. Okay. Let's go ahead and change the title. I'm going to insert you sign in, sign up form. And then after that, let's link the CSS and JavaScript files. I'm going to open link tag, specify the path of the CSS file. Then in order to link the JavaScript file, I'm going to open script tag right, about the body and the source attribute. Let's specify the path of the file. Lastly, I'm going to run the project to the browser. For that, let's use one of the VS code package is called Live Server. It allows us to run the project lied to the browser and make updates without refreshing the page each time. So you can install and use this package. Alright, let's place the editor and browsers side-by-side, like so. And get started. As usual, I'm going to start to create HTML markup. So let's open div tag, which is going to be the container. Then I'm going to insert your H1 heading element with a class heading. The heading will consist of two different span elements. Let's open it with the class heading, span one, institute the text sign, and then create a second span element with a class headings on to insert here. That's it about the heading. Next, I'm going to create buttons. So let's open div tag, which is going to be the wrapper of the buttons. I'm going to assign to it class buttons. Then insert ear buds and elements with the class sign in BTN. Let's insert you sign in. Then I'm going to duplicate this line of code and change the class name. We need to sign up and sign up. Next, I'm going to create a form, but before that, let's insert here a div tag which is going to be the background of the form. I mean the triangle as the scientific class for g. Then I'm going to open form tag. It will have two different classes. The first one is going to be formed. As for the second one, Let's insert your sign in Overall, we will have a single form element with four different input fields. And we will manage to display, sign in and sign up parts using JavaScript as open div tag, which will be the wrapper of the input field and paragraph. Let's assign to it class form input wrapper. We will use the paragraph to display an error message. Let's insert here input element with type texts. Besides that, I'm going to add to it a couple of attributes assigned to the cluster form inputs. Then we need the id, which is going to be username. Now lastly, let's use a placeholder attribute will devalue your name. Okay, That's it about the input element. Let's create the paragraph with the class message. By default, I'm going to insert here error message. But eventually we will define the error messages from JavaScript. So the first input field is created. Let's go ahead and duplicate the element three times and then make some changes. For the second input, we need ID email. Also change the placeholder attribute, enter your email address. Next, we will have input for the password. So let's change the type, make it a password, and also change ID and placeholder attributes. We need a password for both of them. Okay? The last input is going to be for password confirmation. So I'm going to make the type of the input again, password. As for the ID is going to be passport to. Finally change the placeholder attribute, I'm going to make it confirm password. Alright? The last element that we're going to create in the HTML document is going to be a submit button. So let's open input element with type submit. Also add here the value submit. And finally, use your class form btn. Alright, so that's it regarding the HTML markup. Now we have to start to write the CSS. First of all, let's create some reset and common styles. Let's select every element using an asterisk and gets rid of default margin and padding. I'm going to set both of them to zero. Besides that, Let's set box-sizing border-box, and also gets rid of default outline from every element. Let's set outline to none. Next, I'm going to change the font family. Throughout this tutorial, we're going to use one of the Google fonts. So let's go to the Google Fonts website and search for a font called in console ladder. Then select all different styles here. Grab the link and paste it in the head element. Let's change the font family. That's insecure in console ladder and monospace. That's silly about the common and reset styles. I'm going to use RAM as the measurement unit in this project. Right now, one rem equals 16 pixels because the font size of the HTML element is equal to 16 pixels. By default, I want to convert one RAM into ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's make it 62.5%. So as you can see, the elements became smaller. Let's go ahead and take care of the container. Let's select it. And at first defined width and height, I'm going to set with 200 per cent. As for the height, I'm going to set it to 100% of the viewport. Then I'm going to center the content. And for that, Let's use flexbox. We need to change the direction. Let's make it column. And then in order to place the content in the center, we need justify-content center and align items center. Okay? So the elements are placed in the center and with the container we are done. Let's move on and customize the heading. First of all, let's take care of its position. I'm going to move it up. So let's assign to a position absolute. And then define top position, make it five ramp is considered, the heading is positioned, and now I'm going to style it at first. Let's change the font size, make it seven RAM. Then I'm going to make the font lighter using font weight 300. Also change the color, make it Three-five, three-five. Next, I'm going to create some space between the letters using letter spacing one room. Also create some shadow effect. Using text shadow. Let's assign truth values 0.2, 0.2, 0.5 RAM, and the color AAA. Right now, That's it about the heading. Let's move on and customize the buttons. At first, I'm going to define their positions. So let's select wrapper div elements, which has the class name buttons, and set its position to absolute. And then define top and left properties. I'm going to set both of them to five ramp. So the boxes are placed at the top-left corner of the page. And next, I'm going to place them vertically in a column. For that, Let's use flexbox. We need display flex and flex direction column. Okay, let's move on and select buttons. I'm in the button element itself. First of all, I'm going to define the width and height. Let's make with ten RAM. As for the height, I'm going to set it to for RAM. And also change the background color, make it white. After that, Let's change the font size. I'm going to make it to Ram. Also change the color. Let's use again color F zero, three-five, three-five. Then I'm going to get rid of the default border. Let's set it to none. Also, I'm going to make the corners of the boxes around them using border-radius with a value of five rem. Next, let's create some space between the letters using letter spacing 0.1 R