Transcripts
1. Introduction: Hello and welcome to our
hands on course built mega responsive website with
HTML, CSS, and Javascript. I want to thank you for choosing to enroll in this course. If you are excited about
diving straight into the creation of a real
world multi page website, then you've come to
the right place. Throughout this
course, I will be your guide as we
build a complete, modern and adaptable
website from scratch using HTML,
CSS, and chavscript. Here you won't find lengthy
theoretical discussions. Instead you will receive practical step by
step instructions to equip you with the skills required to
develop impressive websites. In this introductory video, I will provide an overview of our project and detail what
we're going to accomplish. Our project is designed to be a multi page website and it will adapt to different
screen sizes and devices. We will start by creating a
website header followed by the navigation bar complete with user friendly drop down menus for each navigation item. Next, we will delve into
the Services section, which will be followed by the project section featuring a dynamic filter for
project categories. Clicking any of the links will display the
corresponding projects. Moving forward, we will develop a template section
consisting of two parts. The first part is visible here, and the second
part comes to life with the click of a Play button. The video player is
fully functional. It offers control
over volume playback. You can skip backward
and forward. Also, we can choose speed. Also, you can find
here picture in picture mode and full
screen playback. After the template section, we will build a contact section, which will be followed by a footer to wrap up the website. As I said, our website
is multi page and you can navigate to different pages by clicking the links
in the navigation bar, You will discover
a client's page with customer testimonials. Then we will have a project page featuring an engaging wat. Then the next page
is going to be a contact page which is equipped with forms
and chat options. Also, we have here an
account page for logging in, and finally, a pricing page. As I mentioned earlier, the website is responsive
to various screen sizes. If you inspect the page, switch to responsive
mode and preview it on different screen
sizes and devices, then you will find that it is adaptable and it
looks pretty nice. All right, I'd like to note that this project
is designed for extra large screens
with a resolution of 1920 pixels with and
1080 pixels height. If you're using a
smaller screen, I recommend switching to
responsive mode during lectures and specifying the
width and height accordingly. This will ensure that the
project looks its best on smaller screens until we
make it fully responsive. Okay, I hope you will enjoy working on this project
as much as I do. Without further ado,
let's get started.
2. Setup: Hello and welcome to the course. We're delighted
to have you here, and we're confident you'll
find this course enjoyable. Before we start diving
into our project, let's first prepare our
working environment. If you're already set up
and ready to write code, you can skip this video and jump straight into the project. However, if you are not prepared yet, that's perfectly fine. We'll guide you
through setting up some essential tools
throughout this course. There are two main
tools you will need, A modern web browser
and a text editor. For our web browser, I'll be using Google Chrome, but I also recommend
Mozilla, Firefox. You likely already
have these browsers, but let's quickly go over
how to download them, just in case to
get Google Chrome, simply visit this URL and
download the browser. The installation process
is straightforward, so we won't spend
much time on it. For Mozilla, Firefox, you
can obtain it from this URL. Both links will be included with this lecture for
your convenience. All right, now let's talk
about the text editor. We will be using
visual studio code which is one of the best text
editors available today. However, you're welcome to use your preferred text
editor if you have one. It's entirely up to you still. I recommend giving
Visual Studio code a. Try to download
Visual Studio code, Visit this website and select the version for
your operating system, Windows, Mac or Linux. The installation process for Visual studio code is
also straightforward. You should not
encounter any issues. Once you've installed
both of these tools, you'll be all set to get
started with the course. Let's dive right in.
3. Getting Started: Hi and welcome to
our new section in which we're going to start
to build our project. I have created a new
folder on the desktop. It's called responsive website. If I open it up, you'll find here two
different folders. The first one is
images in which I have all the different images which we're going to use
throughout the project. As for the second folder,
it's called videos. I have here one single video. Okay, let's go ahead and
open this folder in VS code. Besides those two folders, I'm going to create other
folders as well As you know, our project is a
multi page website, so we'll have a couple of different HTM and
CSS, and Jas files. I'm going to store them
in separate folders. The first folder is going to be, actually we need here
folder and the file. The first folder is
going to be HTML, in which I'm going to
create index dot HTML file. Then the next folder
is going to be, actually we need to create it
outside of the HTML folder. The second folder
is going to be CSS. I'm going to create
here style SS file. Next we need to create
folder for v script, which I'm going to
insert script file. All right, let's open e HTML file and create
the basic HTML document. For that, I'm going to use a built in package of the VS
code. It's called Amet. If I insert an exclamation
mark and hit Enter, then we'll get here
the basic HTML tax. The first thing that I'm
going to do here is to change the title instead of document. I'm going to insert
responsive website. Next thing that I'm
going to do is to link CSS and Jovscp files. For that, we have to open
link tag in the head element. Then in the H
reference attribute, we have to specify
the path of the file. First of all, we have to exit the current folder,
which is HTML. For that, I'm going to
institute two dots. Then forward now we can
choose the needed folder. It's going to be CSS and
then we need style SS. All right, in the same way I'm going to link the Jovsc file. First of all, we have to open script tag right above
the closing body tag. Then I'm going to insert your source attribute in which we have to specify
the part of the file. Again, we need to exit
the current folder. We need here two dots
followed by the forward. Then we have to choose JS folder and select
script or JS file. All right, all three
files are connected. Now I'm going to open the folder in browser
using live Server. As you can see, the project
is running in the browser. Actually, if you're not familiar with live server package, you can find it in VS code. Let's close those messages. You can search for live
server here in the packages. You can install this package and run the project in the browser. When you're using
live server package and you're making some changes and updates to the project, then you don't have to refresh page each time it automatically reloads the page and runs the changes and
updates of your project. All right, next thing that
I'm going to do is to place the editor and the browser
side by side, like so. In order to make
our working process more convenient and simple, you can switch browser
and the editor like. So next thing that I'm
going to do is to bring in some other CDN links as
well throughout the project. We're going to use
phone, some icons. In order to use them we
have to go ahead and search for phones CDN JS. Then we have to copy the
first link from here. Next, we need to open link tag in the head
element and paste the CDN link here in the
H reference attribute. Besides that, I'm going to use Google phones
throughout the project. Let's go ahead and visit
the Google Phones website. I'm going to search
for phones here. The first phone that I'm
going to use throughout the project is going
to be Croson One. Let's go ahead and
select this style. Next, I'm going to search
for phone called Uli. I don't know if I'm
pronouncing it correctly, that phon, Let's
select this style. The last phone that I'm
use is going to be Ta. Let's go ahead and select a
couple of different styles. Next, I'm going to
grab this link from here and paste it in
the head element. All right, so that's it. Our working environment is
prepared and now we have to go ahead and start to create
the HT mark up for that. Let's move on to
the next lecture.
4. Header HTML: Crafting the Markup Structure: All right, in the
previous lecture we have prepared our
working environment. We have created different
files and folders. Also, we have created the basic
Html document in which we have the links for
the phonosomics, also for the Google phones. Now it's time to
start to create the Html markup of our
first section. If we take a look at
the finished project, you will see here the header of the website with
the navigation. In this lecture, we're going
to create the HTML markup. Markup for the banner and
also for the backgrounds. As for the navigation, we will take care of
it a little bit later. Let's go ahead and start
to create the HTM mark up. Actually, I'm going to zoom
in little bit the code. The first thing that I'm
going to do is to create the comments for the
container we need here, end of container, I'm
going to separate all the sections and parts from each other
with the comments. Let's open tag with
the class container. Next we're going to
create the header. But before that I'm
going to insert here again the comments
for the header. Let's insert here
HTML five header tag. Next, we need to
create the banner. But again, let's insert
here the comment for the banner we need here. End of banner. Let's open p tag with
the class name banner. The banner will include
three different files. We will have two headings
and also the bottom, the first one is going to be H one heading elements
with the text Create. Next we need three
heading elements. The text is going to be
modern and beautiful themes. Now the bottom, I'm going to wrap button with
the link element because at the end of the day, once we click the button, we have to move to
the different page. We need a elements. Right now I'm going
to in pound sign. Then let's create the type of the button is
going to be button. Then I'm going to join today. Right, That's, it's
about the banner. Next we have to take
care of the backgrounds. I'm going to insert your
comments for the backgrounds. Then I'm going to open tag with the class
name backgrounds. Overall, we'll have three
different backgrounds. The first one is going
to be main background. I'm going to open
tag the BG main. Let's duplicate this
line of code twice. Change the class
names we need here, G one and then G two. All right, I think
that's it about the table markup of the
header. Let's take a look. We have here just three
elements which are visible, the headings and the button. Those backgrounds are
not visible because we have here just the
empty, deep elements. All right, now it's time
to style those elements. And for that, let's move
on to the next lecture.
5. Creating Default CSS Styles: Okay, in the last lecture, we have created the HTM mark
up for our first section, which is going to be the
header of the website, this part of the website. Now we have to start
to write some CSS. I'm going to open
the style CSS file. Actually, I'm going
to place the file on the right side of
the code editor. In this case, both files are visible and it's more
convenient for us. In this lecture,
we're going to create some default styles
which will be used for every element we need here. End of default styles, Then I'm going to
select every element, and for that we have
to use an asterisk. In this case, all the
elements are selected. The first thing that I'm
going to do is to get rid of default margin and padding
from the elements. If we check the browser, you can see here the space
between the elements. So it means that the elements
have some default margin. Let's set margin to zero. Also, I'm going to set
padding to zero as well. Now if we check the elements, you can see that the
space is removed. Okay, Next I'm going to set
box sizing to border box. Actually, border box is a way to tell the web
browser to make sizing the elements on a web page easier when you set the
within height of an element. Border box makes
the browser include the border and padding
in those measurements. If you say an element
should be 100 pixels wide, that 100 pixels includes
the border and padding, and the actual content inside the box adjusts to fit
within that space. This helps you control the size of an element more conveniently. Okay, next I'm going to
set decoration to N. In this case we remove
underline from the links. Next I'm going to use and
set it to non as well. With this code we remove
default outlines from the elements like
inputs or buttons. Finally, I'm going to set phone
family for every element. As you know, we grab a couple of different phones from
Google phones website. I'm going to use one of the
phones, Let's call it Ut. All right. So as you can see, the font is changed
for every element. After that, I'm going to set the font size of
the H mal element to 62.5% What this code
does is that it sets the font size for the
entire HTML document to 62.5% of the default size. By default, most browsers have a standard font size for text, which is typically
around 16 pixels. When you set the phone size
to 62.5% it means that all text on your
web page will be 62.5% of the default size. This is often used as
a tweak in web design. 62.5% of 16 pixels
is ten pixels, which is a nice round number. It makes it easier to work
with the relative units like M. We're going to use Ram as the measurement
unit throughout the project. That's why I set font size of the HTML to 62.5% For example, if you set something
to be two Ram wide, it will be 20 pixels wide
because each Ram is ten pixels. This makes it more convenient
and straightforward to work with the sizes
in your web design. If we check the results, you can see that the
elements became smaller. That's because of the font
size of the HTML element, which now is set to 62.5% That's it about
the default styles. Let's move on to
the next lecture.
6. Styling Backgrounds in the Header: All right, in the last lecture we started to write some CSS. We created some default styles, and now we have to move on
and take care of the header. First of all, I'm going to insecure comments
for the container, then I'm going to
select the container. Let's go ahead and
define within height. Width is going to be 100% As for the height is
going to be 100% as well. Also, I'm going to change
the background color. Let's set background
color to white. Right now, nothing
is changed here. Next, let's move on and
take care of the header. I'm going to institute
comments for the header. Then let's go ahead and select
Header with a tag name. I'm going to define with height. The width is going
to be 100% As for the height I'm going to study
to 100 viewport height. It means that the
header will take up 100% of the view
port as the height. All right, now I'm going to style the backgrounds and then we'll move on and
take care of the banner. Let's go ahead and insert here new comments
for the backgrounds. Then I'm going to select
developments inside the backgrounds I those three
developments we need here, backgrounds, followed by
the selector and I'm going to set the position for all three developments
to absolute. First of all, we need
to position elements, in this case I'm going to position elements according
to the parent elements, which in this case is header. In order to position element according to its parent element, we have to assign to the parent element position
but with a relative value. After that I'm going to select the first background
which in our case is background main I ground, which you see here, this one. Let's go ahead and
select background mean. First of all, as
defined within heights, I'm going to set with
150% for the heights, it's going to be 150% as well. In this case, the
element will take up 150% of with height of
its parent element. In this case, the parent
element is backgrounds. But as you can see, backgrounds doesn't have any within height. The background main will take up 150% of the w and height
of the header element. Right right now we have
here the same results. Nothing is visible, I
mean the background. Now I'm going to set the background with
linear gradient function. The direction is
going to be to right. Then we need three
different colors. The first one is actually we need here two left
and not two rights. The first color is going
to be transparent. Then we need second colors
going to be purple color. The dark one, we
need here 4400 pi. Also, we need here
the second color, it will be purple again. But the lighter one, I'm going to use here 4400b. Let me explain what
this code does here. As you can see, this code creates a background for header. It uses a gradient that starts on the left
side and goes from transparent to dark purple to
a slightly lighter purple. It gives the background a smooth color transition
from left to right, going from dark purple to lighter purple and
then transparent. All right, next I'm going to set the position
of the elements to position is going to be -95% Also I'm going to
define left position, it's going to be -10%
Let's check the browser. The element is positioned
and now we have to rotate this element using
transform property. I'm going to use
here two functions, rotate z and skew x. I will explain each
of them separately. The rotate Z function will
have the value -15 degrees. Also, we need here skew x
with the value 30 degrees. The first function, I mean
the rotate Z function, makes an element on
the web page rotate or tilt counter clockwise
by 15 degrees. It gives the element
a slight slant to the left as if you're turning a picture frame
slightly to the side. As for the second
function skew, x, it makes an element on
a web page slant or skew to the right by 30 degrees. It's like tilting the
element to one side, making it look like
a parallel ground. As you can see, we have
here such results. Now we have to make the corner
of the background rounded, and for that I'm going to use property called for the radius, it will have four
different values. The first three values
be zero as well. The last value which indicates the bottom left corner
of the element, it's going to be ten m. Now, as can see, the corner of
the element is rounded. Lastly, I'm going to
decrease slightly opacity. Let's say 2.9 All right. As you can see, we have
here a scroll bar. Actually we don't need it. In order to get rid
of the scroll bar, I'm going to assign to the container property
called overflow hidden, which allows us to
hide the scroll bar. Okay, so everything looks good. Next I'm going to take care
of the second background, I mean the background one. This one which is placed
under the main background. Let's go ahead and
select background one. Define within heights. In this case I'm going to set
with 50% then the height is going to be 100% Again, I'm going to use background with linear gradient function. In this case, we need
here default direction. I'm not going to insert here two left or two
right or anything. The first color is going
to be transparent. Then I'm going to add
here the percentage value which I'm going to
explain very soon. Let's insert here
the second color. It's going to be F 26 C. Then we need here
the third color. It's going to be F724b. Here, the percentage value, I mean 60% specifies
the position where the color transition occurs
within the linear gradient. Simple terms, it means that the background will
start as transparent, then change to the first color when 60% of the gradient is complete and continue
transitioning to the second color for the
remaining 40% of the gradient. In this code, 60%
of the gradient will be transparent and then it will smoothly change
to the first color, creating a smooth color
transition on the background. Okay, let's take care
of the position. I'm going to set to position to -40% Also we need
right position. It's going to be -10% the
element is positioned. Now as a guess, we need to rotate it like the first background
I'm going to use. Actually, we need here the
same properties and values. Let's copy this
code, paste here. Background is rotated
and it looks nice. Let's make the corner of the background rounded using a border radius in this case. We need here 000.5 ran. The background
looks pretty nice, but we have here a tiny problem. We need to place this background under the main background. For that, I'm going to
use Z index property. By default, each element has a Z index property
with the value zero. But if we add here
index with the value, let's say one which
is greater than zero, then the background will end up behind me under
the background in. All right, about the
second background, now we have to take care
of the third background, which in our case
is background two. Actually, I think will be better if we duplicate
this code here. Let's change the class name. The width and height
will be similar, 50% and 100% As for
the linear gradient, I'm going to change it slightly. We need here 70% Also, we need here different colors. The second color is
going to be a 5995. As for the third color, I'm going to institute E.
Then we need here 9458. As for the positions, I'm going to set two position to 60% The right position will be 10% We need the same
transform property here. Border radius will
be again same. Let's check the results now. As you can see, the
background ended up behind the main background. In order to fix that, we need, again, Z index property. But in this case, the value of the z index property should be greater than z index one. Let's set it to two. Now the background
should be visible, and yes, it's visible. The only thing that I'm going
to do is to add opacity. I mean to decrease
opacity 2.4 Also, I'm going to add to the background some shadow
effects we need here. Box shadow with the
values seven an four Ram. The six Ram, and the color
is going to be RGBA 000 and the opacity 0.9 This code adds a shadow to an
element on the web page. Let me explain what
those values do. The first number seven Ram, determines how far the shadow is horizontally
from the element. The second value, four Ram, determines how far the shadow is vertically from the element. The third number six Ram, controls the size or
bar of the shadow. As for the color, it specifies
the color of the shadow. In this case, it's a very dark, almost black shadow because
we have three zeros here, which indicates the black color. But we have here
opacity 0.9 which makes the dark black color
slightly lighter. Eventually, we have
here this nice and cool shadow effect. All right, actually that
sits about the backgrounds. I'm going to stop here and
move on to the next lecture, in which we will style
the banner of the header.
7. Designing Banner in the Header: All right, in the
last lecture we have styled the
backgrounds of the header. As you can see, we have here three different
backgrounds which are positioned and
look pretty nice. Now we have to take
care of the banner, which right now is placed at the top left
corner of the page. Actually, it is placed
behind the background. Maine. Let's go ahead and insert new commons
for the banner. Then I'm going to select Banner
and define its position, which is going to be absolute. As you know, when we
use position absolute, we need position relative
for the parent element. As you can see, header lady
has position relative. Next I'm going to set
the two position to 18% Then we'll have
here left position. It's going to be
20% As you can see, the banner changed its position. It's placed under
the background main. So we have to fix that
using the index property. I'm going to set the index 24. Now as can see, the
problem is fixed. All right, now it's time to customize each of the
elements separately. I'm going to start with
the first heading element, which is H one. So let's go ahead
and select Banner, followed by the H
one heading element. First of all, I'm going to
change the phone family. In this case, let's
use phone called mull. It's going to be cursive. Then I'm going to
increase the phone size, make it 13 Ram. Let's check the browser. The phone size is changed, and also we have here
different phone family. Next I'm going to
change the color, it's going to be white. I'm going to add here
some shadow effect. In this case, let's
use text shadow. It works in a similar way
as the box shadow does. I'm going to interfere
values 01 Ram, then we will have three Ram. As for the color I'm going to use are to be a black color, but in this case with
a lower opacity, or it's going to be
0.3 As you can see, the header looks pretty nice. Next, I'm going to take you of the second heading
element, which is three. Let's go ahead and
select Bender, followed by the H three
heading elements. I'm going to change
the font size, in this case it's
going to be three Ram. Then I'm going to
change the font weight. Let's make font weights
lighter and set it to 300. Then I'm going to transform
text into upper case. Now I'm going to change
the color of the heading. It's going to be white. Again, use tech shadow. Let's grab this line of code. The only thing that
I'm going to do here is to decrease the opacity. It's going to be 0.1 Finally, I'm going to create some
space using margin. The margin at the top
is going to be zero. Then we'll have zero
on the right side. Next we have bottom, it's going to be three Ram. As for the left side, I'm
going to set it to one Ram. All right, that's it, about the second heading. Now it's time to
customize the bottom. Let's go ahead and select
Banner followed by button. First of all, I'm going
to set with in height. Let's set with 215 Ram. Then the height is
going to be five fram. Also I'm going to
change the background. Let's use again
linear gradients. The direction of
color transition is going to be two, right? Then we need here the first
color which is going to be A three EC, it's a purple color. Then we need another
purple color, which is going to
be 84, then 30. It's again a purple color, but the darker one. Let's check the
button we have here. Nice and cool background
with gradient. Next I'm going to get
rid of default border. Let's set it to none, as I'm going to make the button rounded
using border radius. Let's send it to
the Ram and check the browser step
by step or button. Looks great. Next I'm going to set the
phone size to 1.6 Ram. Also, I'm going to make
the phone weight bolt. Then let's transform
text into upper case. The text looks pretty nice, but we need to add
some more style to it. We need to create
some space between the letters using
letter spacing. It's going to be a 0.1 Ram
and also change the color. We need lighter color. I'm going to set
the color to white. Now the button looks
pretty nice and cool. Next, I'm going to add
shadow effect to the element using pox shadow with the
value of 01 Ram, three Ram. And the color is going
to be RTB A with the lower opacity
0.1 As you can see, the button has the
shadow effect. Then I'm going to create some space on the left
side using margin left. It's going to be one ramp. And also change the type of
the cursor, make it pointer. Okay, Before we
finish this lecture, I want to add one more
thing to our button. I'm going to create
hover effect. Once we hover over the button, we need to move it up using
transform translate function. Let's go ahead and select
Banner, followed by button. And we need here
pseudoclass hover. Let's use transform
translate y function. It allows us to move the
elements according to y axis. I mean vertically. I'm going to add
here negative value. It's going to be -0.2 Ram. If I check the browser,
as you can see, once we hover over the button, then it will move up slightly. Let's make this effect
smoother using transition. I'm going to add here transform. And the duration of the effect is going
to be a 0.3 second. Now if I hover over the button, then we'll get this
nice and cool effect. All right, actually that
sits about the banner. Next we're going to take
care of the navigation, the logo and the of bar, those navigation items
with their dropdown menus. Let's move on and
take care of that.
8. Creating the HTML Markup of the Navigation: Hi and welcome to
your new section, in which we're going to be creating a navigation
bar for our project. In the last section, we have created the header
of the website, which consists of a banner. It is placed on the
left side of the page. And also we have here three different
backgrounds which I think look pretty nice. Let's take a look at
the finished project. The navigation bar will
consist of a logo. It is placed at the top
left corner of the page. And also, we will have
those navigation items which are placed
horizontally in a row. Each navigation item has a drop down menu,
except the button. In this lecture, we're
going to be creating HTML markup for the logo and
also the navigation items. As for the dropdowns, we will take care of
them a bit later. Okay, let's go ahead and open the VS code and start to
create the HTML markup. First of all, I'm
going to insert here comments for
the navigation. Then I'm going to open HTML Five Novelment with
the class name offer. Next, we need to
create the logo. At first, I'm going to insert
the comments for the logo. Then I'm going to
open link Elements. We use here Link element, because when we click the logo, we have to move to the
main page, the index HTML. If I go to any of the pages
here and then click the logo, we should go back
to the main page I, the index of HTM file. In the H reference attribute, I'm going to
indicate index HTML. Then we need here development
with the class logo. The logo will consist of a couple of different
span elements. Let's open span tag
and insert code. And then we need again, span elements with
the text Create. Next, I'm going to
open another span tag. I'm going to insert
your templates. Okay, that's it, about the logo. Next we need to create
the navigation items. I'm going to insert your
comments for items. And then I'm going
to open list I ll elements with the
class name, no items. The list will consist of
six different list items. We need here LI elements and it will have the class no item. Then inside the LI element, I'm going to open
link like the logo, we need to specify here
the names of the pages. At first I'm ins here class, it's going to be no link and then the first item
is going to be home. Once we click the first item, we should go back
to the main page. I mean the index of HTML file. Let's take a look at
the finished version. If I go any of the pages
and then click Home, then we'll go back
to the main page. I'm going to institute
again, index HTML overall. We'll have six
different list items. Therefore, I'm going to
duplicate LI element five times, then change the items. The second item is
going to be clients. We need to change the
name of the HTML file. Actually, those files
are not created yet. We will take care of them
in the coming sections. In this case, I'm
just specifying the names of the HTML files. We'll create them later. Okay, the third item is
going to be products. Change the HTML file, we need to hear products next. We'll have contact, then I'm going to
insite your accounts. Finally, we need
to hear pricing. As I said, it's going to be
button and not the link. I'm going to change the class
name we need here now, PTN. Also change the name
of the HL file. It's going to be
pricing the HTML. All right. I think that's
it about the HTML markup. Let's take a look
at the projects. As you can see, the
navigation items and also the logo are placed
behind the background. And also the layout of the backgrounds
are changed slightly. We need to take care of them
and fix those problems. Let's go ahead and move
on to the next lecture.
9. Designing the Logo of the Website: All right, in the last
lecture we have created the HDMl markup for the
navigation bar of our project. And now it's time to
style this element. In this lecture, we're going
to be styling the logo. Let's go back to the CSS file and start to write the CSS code. We need to add here new
comments for the navigation. I'm going to select
nav elements, which has class name. No, first of all, I'm going to define
its position. It's going to be fixed. Also, we need to define the
top and left properties. Both of them is going
to be zero right now, nothing is changed here. As you can see, the elements
of the navigation are placed behind the background
and we have to fix that. In order to fix that problem, we need to use z index
property and I'm going to assign to it a higher
value. Let's say ten. Now as you can see,
elements are no longer placed behind
the background. Next I'm going to set width and height of the navigation
that's defined with, it's going to be 100%
As for the height, I'm going to set it to 12 Ram. Also, I'm going to add here a temporary background
color in order to see better where the
navbar is position. Let's set color.
Let's say light gray. It's going to be CC
Here we have our nap. It's placed at the top
side of the web page. Next, I'm going to create
some space using padding. The padding on top and
bottom is going to be zero. As for the left
hand right sides, I'm going to set it to 15 rapid. As you can see, we have here some space on the left
hand right sides. Next, I'm going to use flex box in order to
align the elements. As you know now, part consists
of two different parts. We have logo and the
navigation items. We need to place both elements in a row horizontally on
the left and right sides. For that, we need to
use Display Flex. As you can see, the logo and the navigation items are
placed side by side. In order to place them on
the left and right sides, I'm going to use justify content with the value space between. Now, as you can see, the logo
is placed on the left side. As for the navigation items, they are placed on the
right side of the No. Okay. Next I'm going
to place items, I mean, the elements of the nav bar in the
center vertically. And for that I'm going to
use another property of CSS, Flexbox, and it's
called Align Items. And I'm going to
set it to center. Now the elements are placed
in the center vertically. All right, that's it about
the now bar right Now. Next I'm going to take
care of the logo. We need to insitu new
comments for the logo. Then I'm going to select Developments which has
the class name logo. Again, I'm going to use Flex
books to align the elements. Let's set display to flex. In this case, I'm going to place the items vertically
on top of each other. For that, we have to
change the direction of flex book and it's
going to be column. Now as you can see, the
elements are placed vertically. Next I'm going to select the first span
element in the logo. I mean this one. For
that we need here logo. Then span elements. Now we have to use one
of the pseudo classes called nth child selector. Here we have to
specify the number. As I said, we need to select
the first span element. Therefore, I'm going
to sit you one. First of all, I'm going to
change the phone family. Let's use here phone
called the moles. Also, let's increase
the phone size. I'm going to set
it to three Ram. Let's take a look here we
have the first span elements. Let's change the font weight. I'm going to make it bold. Let's transform text into upper case and change the color. I'm going to use white color. Here we have the first
span element of the logo. Actually, let's go ahead and get rid of this
temporary background. I think we no
longer need it now. The logo looks much better. Next, I'm going to select the span element which is placed inside the
first pane element, this one the text create. For that we need
logo followed by the span element with
chart selector first. And then again we
need span element. Let's change the phone size. It's going to be 1.8 Ram. The size of this part, this pan element, is changed now the text
becomes smaller. We have to move the element
up like the text here. For that, I'm going
to use transform. With translate y function, it moves the element
according to y axis. I mean it moves
element vertically. In order to move the
element upwards, we need to use negative value. In this case it's going
to be 0.8 As you can see, the element hasn't moved up. The problem is that Spanelon
is an inline element. And once you have
the inline element, then transform property
is not applied. So we need to transform elements from in line to inline block in order to
apply transform property. Now, the problem
should be fixed. All right, as you can see,
the element is placed up and the transform
property works fine. Next I'm going to select
the second span element. I mean this one templates actually let's copy this
selector from here. And change the ni selector. We need two. Let's change the font family. It's going to be
croson one Cosi. Then we need font size, it's going to be 1.5 Rams. I'm going to change the color. Let's add it to DDT, which is a light gray color. Here we have the
second spanlement. Next, I'm going to create
some space between the letters using
letter spacing, and it's going to be 0.1 Ram. Also, I'm going to place the
elements on the right side. And for that let's use line
property with the value, right, the text is placed
on the right side. But actually that's
not what we need here. If we take a look at
the finished version, you see that the
second spin element is placed nicely
on the right side. We have to move it slightly to the right side and
also upwards again, I'm going to use
transform property. We need here to translate function as the values I'm
going to pass here to. 0.2 Ram, also line
here, minus one Ram. The first value, 2.2 Ram, moves the element to the right
horizontally by 22 pixels. As for the second
value, minus one Ram, it moves the element up
vertically by ten pixels. The negative sign in the case
the direction, is upwards. As for the positive values, they would move it downwards. Now we have the
same problem here. Let's assign display
inline block to the second element as well. Now as you can see,
the problem is fixed. We have here nice
and cool results. Finally, I want to add a little shadow
effect to the logo. I mean the span elements. Let's go ahead and select
all the span elements in the logo text shadow property with the values
0.5 Ram, one Ram. Then the color is
going to be RGBA, black color with lower opacity, and it's going to
be 0.2 All right, so here we have the logo. It looks pretty
nice with the logo. We are done now,
it's time to move on and customize the
navigation items. Let's go ahead and do
that in the next lecture.
10. Styling Navigation Items: All right, in the
last lecture we have designed the logo
of the website. Now it's time to move on and continue styling
the navigation bar. In this lecture, I'm going to
style the navigation items. Let's go to the VS code. First of all, before we start to style the
navigation items, I want to move the
navigation up. I mean outside of the header. Let's cut the code from
here and paste it here. Okay, after the logo, I'm going to ser new comments
for navigation items. Then I'm going to select UL element which has the
class name Now items. First of all, I'm going
to define the width. It's going to be 50% Then I'm going to place the navigation
items side by side, horizontally in a row. Because right now they
are placed vertically. In order to do that, I'm
going to use Flex box. We need Display Flex. Now if we check the results, you will see that the items are placed
horizontally in a row. Next, I'm going to
create some space between the items and
for that I'm going to use one of the flex box properties
called justify content. And I'm going to assign to
it value called space even. It will create even
space between the items. All right, after that, let's go ahead and select the LI elements which
has class name of item. I'm going to get rid of the
default bullets for that. Let's use list style and
assigned to it value none. As you can see, the
bullets are gone. Next I'm going to select the link elements we
need here. No link. Let's increase the phone size. I'm going to make it to Ram, then I'm going to transform
text into upper case. Actually we need
here text transform and the value appl case. And also change the color. The color is going to be white. Let's check the result. As you can see, the navigation
items look pretty nice. Next, I'm going to create some
space between the letters. Let's make it 0.1 Ram. After that, I'm going to add
a little shadow effect to the link elements
using tech shadow. The values will be
0.5 gram one Ram. And the RGBA black color with
the opacity 0.2 All right, so I think the knob
items look pretty nice. Now we have to take care of the last item which is
going to be the button, I mean the pricing button. Let's go ahead and select this element using
class name now, PTN. Let's define within height. I'm going to set
width to 13 Ram. As for the height, I'm
going to make it five Ram. Also change the
background color. Let's set it to white. As you can see, the
with heights are not applied to the elements and we have here
the same problem. I mean the link
element by default is an inline element and therefore within heights are not
applied to the element, we have to change it. In this case I'm going to use Display Flex because we will need other flex
box properties as well. That's why I use here flax and
not inline block or block. Now if I check the result, you will see that the within
height are applied to the element going to place the content in the
center of the box. And for that I'm going to use justify content
with the value center. And also we need
line items center, justify content center. Align the element in the
center horizontally. As for the Line item center, it places the element in
the center vertically. Now we have here the perfect
centering. Actually. Going to place link elements and also the bottom in the
center vertically. For that, we can add here line items center and the
problem will be fixed. Now the link elements
and the button are placed nicely in the center. Let's move on and add here
a couple of more styles. Next, I'm going to make the button rounded
using for the radius, it's going to be form, now the button is rounded. Also, I'm going to add to the bottom little
shadow effect using box shadow with values 01 Ram. Then we'll have here three Ram. The color is going to be
RTP A with the opacity 0.1 We have here
nice shadow effect. After that I'm going
to take of the phone. Let's increase the phone size. It's going to be two rams. I'm going to use letter spacing. It's going to be a 0.1 Ram.
Let's change the color. I'm going to use color F88 344. It's going to be an orange
color like the knob items. I'm going to make
the text upper case. Let's use Texans
form upper case. All right, the knob items with the button
look pretty nice. I'm going to add a hover
effect to the button. Actually, I'm going to use
the similar hover effect. Let's select knob PTN. With hover, we
need to transform. Translate Y value
is going to be -0.2 n. If I hover over the
button, it will move up. But as you see, we need
smooth transition. Use transition property we
need here to transform. The duration of the effect
is going to be 0.3 second. Now we have here nice
and cool hover effect. All right, actually
that's about the n items. Now we have to add to each navigation item
the drop down menu, like it we have in
the finished project. For that, let's go ahead and
move on to the next lecture.
11. Creating the HTML Markup of the First Dropdown: All right, in the
last lecture we have customized the navigation
items and also the button. And now it's time to
move on and start to create the drop down menu. I mean the drop down menu for
the first navigation item. Let's take a look at
the finished project. If I hover over the
first navigation item, then the drop down
menu will appear. As you can see, the
first drop down menu consists of two main parts. We have the left side and
also we have the right side. On the left side, we have
the list of the features. As you can see,
once we hover over the list items,
little hover effect. The right side is more complex. We have here the phones
icons with hover effect. Also, we have some
textual elements with different colors. And down below you
can see the buttom. All right, that's
it. What we're going to create in this lecture. I'm going to create the
HTML markup and then we will design the
top town menu. All right, let's go
to the VS code and start to create the HTML markup. We have to insert the comments right
after the link element, inside the LI element. Let's insert your comments
for the drop down menu. It's going to be the first drop down we need here,
Drop down one. Then of drop down one, I'm going to open deep elements which will have two
different classes. The first one is going to be a common class name, drop down. Besides that, we need
here, drop down one. Next I'm going to insert here another
deep element which is going to be the left side of
the drop down we need here. Drop down one left. Also, let's create
the right side. Let's duplicate this line of code and change the class name. We need you drop
down one, right. All right, At first, let's
take care of the left side. I'm going to insert here H, three heading elements
with the text features. Then after heading, we need another development which
is going to be the least, I mean the wrapper
inside the development. I'm going to create another which is going to be
the features item. So I'm going to add here
class name, features item. Each list item will
consist of two elements. The first one is going
to be a phonosomicons. For the second one,
we'll have here sanelement if we take a look at the finished project and
check the left side. So as you can see we have the phonosomicons and also the
panelement with some text. Let's insecure I elements
with the classes FA solid A star and then instead
here span element, the text is going
to be all features. All right, overall we'll have
11 different list items. Therefore I'm going to duplicate feature
list item ten times. Then we have to change
the class names of the phons and also the
content of the span elements. The second elements
is going to be a solid, A boxes stacked. As for this fan element, it's going to be
100 plus elements. Then the third
phonosomicon is going to be a solid, A file. As for this fan element, I'm going to insert
1,000 plus layouts. The next phonosomicon will
be a solid, a pen nib. Also, we need to
change this panelment. I'm going to insert
your no code design. Then after that the phones micon is going to be a solid wrench. As for this panelment, I'm going to insert
your theme builder. Then the next icon
is going to be a solid, a car shopping. As we need to change this panelment which is
going to be E Commerce. Then we will have a network wired also change
this panelments. We'll have here workflow. Then the next one is going
to be a solid, a light bulb. As for this panelment, let's insert here marketing. Next we will have here a
phase solid Code developers. The next icon is going
to be a solid desktop. As for this panelmentI'm going
to insert side examples. Finally, we need
here last icon which solids the spanelment
will be integration. Okay, let's it about
the first part, I mean the left side
of the drop down menu. Here we have all the
phonomicons and the spanlments. Next we have to take
here of the right side. First of all, we need here the heading three which
going to be services. Then after heading I'm
going to open this going to be drop down services. Then inside the development, I'm going to open another
D which is going to be drop down service itself. It will include elements and also development which will include itself,
two span elements. Let's insert here I element, which is going to be
a Aa solida wrench. Then as I said, we need
here development with the class name
drop down service. I'm going to institute
two span elements. The first one is going
to be thin builder. Let's duplicate
this line of code. The second span
element will be the number one, thin builder. Now I'm going to duplicate
drop down service. Overall, we will have
seven drop down services. Let's duplicate this
code six times. Now we need to change the phonics and also the
content of the span elements. The second phonsomicon
is going to be a solid. Actually, we need here
to remove this T, otherwise the icon
won't display. Let's get rid of it. As I said, the phonoomicon is going to
be a solid, a light bulb. As for the panelmentse
market place. As for the second panelement, I'm going to insert here
modules, layouts and themes. Then the next phonosomicon
will be a solid, a cloud. As for these panelements,
let's inside cloud. And then the second
one is going to be cloud storage for designers. The next phosmicon will
be a solid, a brain. We'll change the panelmentse. Ai Spanel is going to be build websites with AI. Then the next icon is going
to be a solid people group. As for the panelements,
we need teams. Then the second one is going to be collaboration for agencies. Then we need a solid a globe. As for the
panelmentseed hosting, the second one is going to be fast hosting of the websites. Now we have to change the
last top down service. We need a solid a crown. As for the span elements, let's interfere IP and the
second one is going to be 2047 support and these counts. All right, all dropdown
services are prepared. The last thing that we
have to do is to create the button which
should be placed here. Let's open the button type
is going to be button. As for the content, I'm going to ins join today. All right. I hope
everything is correct. We will see that in
the next lectures. Let's check the
results we have here. Services, all the
icons are displayed. Now we have to move on and style the first
dropdown for that. Let's move on to
the next lecture.
12. Styling Features in the First Dropdown: All right, so in the last
lecture we have created the HTML markup for our
first drop down menu. I mean the drop down
menu of home link. Now it's time to start to
customize the drop down menu. Let's go to the CSS file
and right after navlink, insert new comments for
the drop down menu. It's going to be the first
drop down menu we need here. Drop down one, then
of drop down one. All right, let's go ahead
and select drop down one. First of all, I'm going to
set its position to absolute. We're going to position this element according
to the parent element, which is no item. I'm going to assign to no
item, position relative. We need i
Giorgi Lomidze, UI / UX Designer
