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