Up next in 10
How To Create A Website Using HTML And CSS Step By Step _ Latest Website Design 2020
2K views
Feb 8, 2024
The video "How To Create A Website Using HTML And CSS Step By Step - Latest Website Design 2020" is a tutorial that guides viewers through the process of building a modern website using HTML and CSS. Throughout the tutorial, viewers are provided with step-by-step instructions on structuring the HTML code, styling elements with CSS, and incorporating contemporary design trends for a polished and visually appealing website. The tutorial covers essential aspects such as creating a responsive layout, adding multimedia elements, and optimizing the website for various screen sizes and devices. By following along with the demonstrations and explanations provided in the video, viewers can learn how to create a professional and up-to-date website using HTML and CSS, incorporating the latest design practices and techniques. Whether for personal projects, portfolios, or business websites, this tutorial offers practical insights into building websites that are both aesthetically pleasing and user-friendly.
View Video Transcript
0:00
Hi guys, welcome back to the new video of Easy Tutorials
0:03
Today in this video I will create this attractive web page using HTML and CSS
0:07
Before starting this video I will request you to please like this video and also subscribe
0:11
if you are new on my channel. Now let's start this video
0:16
Here I have one folder and in this folder I have so many images, one HTML file and one CSS file
0:21
You can find all these images link in the video description. This is my HTML file and this is the CSS file
0:29
You can see I have added this line of code to connect HTML file with CSS
0:34
And I have one more link for Google fonts, this one. And this is the font name in the CSS file
0:43
Here I am using Bracketts editor. You can use any text editor
0:48
Let's come to the HTML file and we'll come to the body tag
0:51
And here we will create one div. In this div we will create two other div
0:58
For the left column and right column. So for first one we are writing left call, class name and the second one right call
1:11
Now we will use this class name in the CSS file. For this one we will set display flex and width 100%
1:24
will be 100%. Let's copy the left column class name and for this one we'll write flex basis 30% and background
1:35
It will be this color. Let's duplicate it and we'll change it to right for the right column
1:44
Flex basis will be 70%. Now we will set height here 100% and for this one also 100%
1:53
we will remove the background. Now I will open my HTML file with Google Chrome
1:58
Now in the left column you can see red colored and in the right column there is a white
2:02
colored background. Now let's come back to the code again and we will add one image in the left column so I'm
2:11
using image, source and the file name. We'll add one class name also
2:17
So you can see this image here it is a menu icon. Let's use this class name in the CSS file
2:22
For this one we will add some space. So I'm using margin
2:26
Now you can see proper space around this menu icon. Now we will create one div and here we'll write one class name logo and here we will add logo
2:35
So I'm using IMG source and the file name. Let's use this class name in this CSS file
2:41
Right now you can see this logo over here. So for this one we'll add margin from the left side
2:50
Now you can see summer space from the left side. Next we will add margin from top
2:59
Next we will come to the right column. Here we will create one tip and one class name
3:08
Next we will add one image. So this is the image file name search.png
3:13
This is an icon and one class name also. You can see this icon right here
3:23
Next we have to create menu. So I am using UL and LI
3:27
This is the first menu. Let's duplicate it
3:37
So now we have 4 menu here. After that we will add one more image
3:41
So I am using image, source and the file name which is user. .pnj which is user icon
3:47
For this one also we will add one class now. Name. Reload the web page
3:53
Now you can see search icon, some menu and one user icon
3:57
I will remove it from here and I will add it at the bottom
4:01
So first we will write CSS code for the left column. After that we'll write for the right column
4:07
Let me add one comment here. Right column. For this one we'll add position relative
4:15
Now just copy this class name and here we will add position. Then we'll add right and top
4:26
So that you can see this content in the right side. Let's copy it again then write LI for the list
4:37
List style will be none and will add some margin from left and right, display, inline block and will add font size
4:46
size and font weight will be bold and cursor pointer. Now you can see all the menu in the horizontal line In this nav bar we will add display flex Reload the webpage Now you can see all these icons and menu in the same line
5:05
Let's copy this class name for the search icon. For this one we'll add some space from the right side so I'm using margin right
5:12
And then we'll add code for user icon. Margin left 35 pixel
5:22
come back to the HTML file and now we will add some content in the left column so
5:27
here I am creating one div and one class name which is white word just use this
5:35
class name right here in this CSS file for this one will set position absolute
5:42
and height then width and background estic and right in this left column we'll add position relative
6:00
reload the web page now you can see this white bar over here similarly
6:05
we'll add one bar in the right column so come here in the right column
6:09
we'll add one class name just use this class name in the CSS file
6:22
Here we will copy the same thing. Just change this color and this one will be left
6:37
Reload the web page now you can see red color of bar in the right side
6:42
Here we will add the span, then just copy this a span
6:46
Now just come to the CSS file duplicate this one then write the span
6:51
Here we will change the width and top and left. Now you can see a small line over here that makes this design very attractive
7:05
Now we will add one comment here. Right column. Let's come to the left column div and here we will create one more div and one class name
7:17
Then we'll add some text in p tag
7:27
Reload the web page. You can see this text right here on this webpage
7:36
Let's use this class name in this CSS file. For this one we will set width, then top and write
7:47
Position will be absolute and color white. Reload the webpage. Now you can see this text here
7:56
Just duplicate it. Then write P. We'll add some margin from top and this color
8:08
Then increased font size. Here we'll add one icon. We'll add one icon so I'm using image and after this text also
8:23
Reload the webpage now you can see this 2 icon. Here we'll add one class name and use this in the CSS file
8:36
We'll add margin from the left side. Now you can see this icon on proper position
8:46
Here we will add one div, then class name and we'll add one image
8:59
Refresh the webpage and you can see this image right here. Next we have to shift it
9:03
So just copy this class name, write it into this CSS file
9:08
Here I'm adding bottom, right and position absolute. So you can see this image at this position
9:23
Let me remove it from here. We'll add it here before this right column
9:29
Now we'll write this class name again and write after. Content it will be this icon code, height and width
9:44
Position will be absolute bottom and left. Color will be white and font size 28 pixel You can see this icon right here
10:06
Next we will add border to pixel solid and white color and border radius 50%
10:15
Text align it will be center and transform, rotate minus 90 degree
10:24
so that you can see this arrow on upward direction. Let me duplicate it
10:30
Here we will add before. Change this value for bottom and this one plus 90 degree
10:39
Reload the webpage. Now you can see this 2 icon. Let's come to the HTML file and here we will add one more dip and this class name
10:51
Let's use this class name in this CSS file. We'll write width 2 pixel
10:57
Then height 80 pixel and background black color Position absolute then right
11:09
and bottom You can see this line here Just copy this one and write
11:22
Copy this one and write after. Here we'll add content, then position and top and left, font size and letter spacing
11:41
Transform rotate by minus 90 degree. You can see this text here
11:48
It looks beautiful. Now we'll come to the right column
11:57
Here we'll create one div and one class name for this div
12:06
Here we'll add one image. This is the image file name. Reload the webpage you can see this image right here
12:15
Next we have to move it. So just copy this class name. Write it into the CSS file
12:22
For this one we'll set position absolute and top. Then write
12:31
We'll set width. Reload the web page. You can see this image on this position
12:38
Here we'll add one icon so I'm using IMG source and the icon file name
12:44
We'll add one class name also. Let's use this class name in the CSS file
12:48
For this icon we'll write float right and margin bottom 15 pixel
12:56
Reload the web page, you can see this icon just above this image
13:04
After this image we will create one div and one class name
13:09
Let's use this class name in the CSS file and for this one we'll set height and width
13:18
background, then position absolute, write 0 and bottom minus 100 pixels
13:35
You can see this horizontal line here. In this tip we will add a span
13:40
Just come to the CSS file, duplicate it and here we will write span
13:46
We'll change the width and write and instead of bottom we'll write top
13:53
Reload the webpage you can see a small dot here that makes this line beautiful
13:59
Next we will add one text so I'm using H1. Now just copy this class name here then write H1
14:15
We will write position absolute, top and right. Font size, it will be very large and font weight 300 and this color
14:31
Transform rotate by minus 90 degree. So you can see this text over here
14:43
Next we will create one dip here. And we'll write the class name Textbox
14:51
And here we'll add text in H2 tag. Then we add some text in P tag You can see this title and a small text here
15:05
Just copy this class name, write it into the CSS file and for this one we'll set position absolute
15:11
Top and left. We'll set the width. So you can see this text over here
15:22
Let's duplicate it, then write H2 and we'll set the font size and font weight and line height
15:35
Let's copy it again, here we'll write P and we will change the font size
15:41
We will add some margin from top and some padding from right side and different color
15:49
so that you can see increased font size for these texts. Let's copy it again
15:57
Here we'll add after. Content and this icon code. Then position absolute and bottom and right
16:10
Font size 25 pixel and transform, rotate 90 degree. You can see this down arrow here
16:27
Next we will add one div here and one class name. Just copy this class name
16:32
Write it here in this CSS file. For this one we'll set position absolute and right and bottom
16:42
We will set width and height. background. You can see this horizontal line here
16:52
In this dip we will add one span. Then come to CSS file, duplicate this one and here write span
17:02
Change this width and write. Remove bottom, reload the webpage. Let me decrease this one
17:12
Now you can see it looks good. come to the HTML file again and in the left column here we will add div and one class
17:21
name it is vertical menu so we will add menu so I am using UL and LI so there
17:35
four menu here you can see it right here on this web page just copy this class name
17:43
and add it into the CSS file. For this one we will set position absolute, bottom and left
17:56
Then transform, rotate minus 90 degree. Let's copy it again then write UL and LI
18:05
Lister style will be none. Display inline block. from left and right side and color and font size
18:20
Font weight it will be bold and later spacing. Now you can see this vertical menu in the left side
18:32
Let's come to the right column and here we will create div class and class name is icons box
18:38
We'll create another div here and this is the class name social. icons will add icons so I'm using IMG source and the file name so this is the
18:50
Instagram icon then Twitter icon this is the Facebook icon and this one is LinkedIn
18:55
icon next we will add one more icon for shopping cart and add one class name
19:04
it is load the webpage you can see these icons over here so just copy this
19:10
class name add it here in this is file. We will set width, position absolute, right 45 pixel and bottom
19:19
Text align will be center. Now you can see all these icons at the bottom in the right side
19:26
Let's copy this class name, write it here, and then write IMG
19:32
We'll add some margin from top and bottom so you can see proper space between these icons
19:37
Let's copy this class name. And here also we'll add margin from top
19:41
so that you can see some space around this cart icon. So finally our attractive webpage is completed
19:49
I hope this video will be helpful for you. If you have any question you can ask me in the comment section, please don't forget to like
19:55
and share this video with your friends. Thank you so much for watching this video
#Flash-Based Entertainment
#Skins
# Themes & Wallpapers
#Web Design & Development
#Web Services