Beautiful HTML CSS website Step by Step

Photo by Colin Watts on Unsplash

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.

index.html

Now, we will add the code for header, which will contain five li, within an ul tag.

index.html

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.

style.css

Now, our website in localhost looks like below.

Beautiful pic

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.

style.css

Now, our navbar is looking perfect in localhost.

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.

index.html

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.

style.css

Now, our website looks almost perfect.

localhost

Now, we will add the title to our index.html file.

index.html

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.

style.css

Now, our website is looking pretty good.

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.

index.html

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.

style.css

Now, our website is complete and looks like below in localhost. You can find the code for the same in this github repo.

localhost