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

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

ZYXverse Open Graph EIP or why standardization of gaming NFTs is needed.

Expense.AI All Invoices. One location.

How to hire Flutter developers in India?

Setting a static IP address to an Elastic Beanstalk instance

Android Billing with MVVM

Web team workflow using Trello

Flutter Enable/Disable Dark Mode with BLoC

All that serverless and containers thing is nice. If you are starting a new business and building

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

How we learned to build E-learning website.

Create Profile Card using HTML & CSS

HTML & CSS — How to Split a Background Into 2 Colors