Beautiful HTML CSS website Step by Step
In this post we will create a simple and a beautiful website with HTML and CSS.
So, open VSCode and create the basic structure of a HTML in an index.html file by ! and then pressing tab. We have also put an image and a logo in a images folder. You can take both of them from the github repo at the end.
Now, we will add the code for header, which will contain five li, within an ul tag.
We will also give the basic styling in the linked style.css file. We are using the awesome Poppins font from Google font in our project.
In the header placed the image as an background image with proper sizing.
Now, our website in localhost looks like below.
Now, we will fix our menu items. Here, we are first moving it to the right by float: right and then removing the text-decoration and giving a hover effect.
Now, our navbar is looking perfect in localhost.
Now, we will set the logo in our project. So, back in index.html file, we will add the code for logo. Also, added a class active to Home, which we are also going to style.
Back in style.css, we will add the style for the active class, the image and also the main class by giving it a max-width.
Now, our website looks almost perfect.
Now, we will add the title to our index.html file.
Now, we will add the styles for title and the h1 in style.css file. We are also adding a linear gradient of transparent black, so that our text are shown more prominent.
Now, our website is looking pretty good.
Now, we will create the buttons in our project. So, create a div with class of button and two anchor tags with btn class in index.html file.
Now, we will add styles for the same in our style.css file. We are using the same position trick here to centre the buttons.
Now, our website is complete and looks like below in localhost. You can find the code for the same in this github repo.
