Started all right this is our website looks and we have this navigation bar over here and we have this slider in the hero section and we can drag to the left and the right and we can also click on.
These buttons for the next and the previous slides and if you scroll down here we can see that we have this subtle animation for this nav bar and if you scroll down here we have.
The our services section and if you scroll down we have the animation for each of these items and if you scroll down even more we have the animation for the next.
Section which is the about section and if you scroll down even more we have the post section and uh if you scroll down we have the testimonial section and this is.
Footer where we have this logo on the left side and we have some quick links and we have these social icons with this hover effect and then lastly we have this copyright info and we can also.
Click on these uh menu items to go to those specific sections so if you want to go to Services section we can just click on services and we'll be taken to the services section and in the same way.
We can go to the blog section the testimonial section and all these different sections and this website is also responsive so if I decrease the width of the browser window.
This is how it will look on a smaller screen so we have this hamburger icon over here instead of the nav bar and if I click on that we have this screen displayed over here and we can click on.
Any of these menu items and we will be taken to that section and if you scroll down here we can see that we have a different layout for each of these sections all of these.
Posts Related:
- Automatically scale with hosted RPA bots in Power Automate
- How To Create BMR Calculator Using HTML, CSS & JavaScript Part 2 BlogSpot
- Python Part 14c - Working with dates and times Office
Uh services are displayed one below the - ID Card Make
Other and then we have the next section where we have a different layout and if scroll down we have the latest posts which are displayed one below the.Other and then we have the testimonial section and then we have the contact Section where we have all these fields one below the other and then we have the footer so this is how it will look on a.
Mobile screen so we're going to create this website from scratch using HTML CSS and JavaScript in this tutorial series now in this video we'll also set up our project now here I have created this.
Folder called modern website and I just opened it with vs code and I also have this folder called images where we have all these images which we're going to use in our design now let's goad and.
Create the necessary files so let's create a new file called index.html let's create a CSS file let's name it style. CSS and let's also create a Javascript.
File I'll just name it main.js now let's go ahead and add some basic code over here so in vs code you can just type exclamation and press Tab and you'll have this basic HTML file code and here.
The title just type welcome and let's link our CSS and JavaScript files over here so let's type link and press Tab and here in the SF let's type sty or css and the body let's.
Go ahead and type script colum SRC and press Tab and here let's type main.js and let's also go ahead and get the links of the fonts so here we're going to use two fonts the first one is called.
Popins and the next one is called enter so let's go ahead and get the links of these fonts from Google fonts all right so here I'm in fonts. goole.com and let's search for.
Popins and here we have the popins font
So let's select the font now we're going to need the Bold font so let's scroll down and uh let's select the bald version so let's select bald 700 so I'll.Just click on select Bal 700 and let's also search for enter and let's select this font and for inter font we need to to have the regular version and let's also get the.
Font for the Bold version so I just select regular 400 and let's also select Bal 700 all right so these are the fonts that we are using we are using inter.
Regular 400 and bald 700 and Poppins Bal 700 now if you want more we will add it later for now let's go ahead and copy the link so let's click on this copy button and and let's go back to our HTML.
File and let's paste the link over here in the head section all right now the last thing we will do is we will add some basic code to the CSS so first of all let's select the body and let's set.
The font family to enter by default and we'll also remove the default margin and let's go ahead and select the HTML and uh let's set the scroll.
Behavior here too smooth so if you go back to our website and if I click on any of these links we are smoothly taken to that place so for that we need to use this property and the next thing we will.
Do is we will select all the elements and also the after and the before selectors if you have any and let's set the Box sizing to border box now this will make sure that.
Even if we add padding to our elements the width and the height of the element will be what we set so this line of code will make it easier for us to design websites precisely and let's go ahead.
And create some variables for the colors so let's type colon root now this will be accessible throughout the website so let's create a variable called yellow color you can name these variables.
Anything you want so I just set the value to FF da60 and let's create one more variable called yellow color hover or yellow holor and let's set the value to F9.
D85 and that's basically it with the CSS of this video so in this video we have set up our project and from the next video we will start designing our website so that's basically it for this.
Video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a.
