How I Designed a Cool Landing Page Using HTML5, CSS3 and Bootstrap

Making project is a fun as well as a challenging task.

And when you are not an intermediate or an advanced programmer, it took time to built anything. I also don't fall in intermediate or advanced category and therefore every project I make takes time.

This project I created for a competition in which we had to choose a theme (given) and make a landing page using HTML5, CSS3 and BOOTSTRAP.

And for making this project, it took me 8 hours, as I am familiar with HTML5, CSS3 and know a little about BOOTSTRAP. But to make it responsive, I had to explore, implement and test. At the end, I am happy that I participated in this competition, and submitted my project.

In this article , I will discuss how I built it. But before I start discussing, You should definitely check its responsiveness. I am quite active on Twitter, so you should definitely check my account there too:

• 👉 Go live, and check it out : check🚀
• 👉 Want to see its code : check🚀

Let's we start our article!

🛠️ How I Built It

Before starting any project, the idea of how it should look at the end should be very clear. And you can also make a wireframe of it, or draw it somewhere so that you can match it with your last product (or can use it as reference). It also ease your work.

When I started this project, I spent some time in making its wireframe in notebook. And after its wireframe is completed. I started the coding part. In the coding part, I wrote code piece by piece. First I code for its header, then its main part, and in last I wrote code for its footer part.

Header:

In its header, I decided to put brand icon, brand name and a navigation bar. which the user can use to navigate the site.

The code looks like something this:

In its styling, I had given it a position property of sticky-top , so that it does not get scroll. Then it contains a BOOTSTRAP navbar , with an unordered option list which the user can use.

Main:

Then in its main, I divided it into two sections, section-1 and section-2. In section-1, I put a background image and some text on it. So that it looks nice.

The code for it is:

In section-2, I gave it a grid layout. And I further divided it in three sections, section-21, section-22, section-23.

Section-21, a row contains text with justify content center property. You may look at it:

In Section-22, I made three columns to add three cards. which is containing little information about item, with its image and a link to its details.

Have a look at its code:

Section-23, again a row , but this time it is containing a button. which gives the user an option to explore more on items inventory:

Footer:

In footer section, again I decide to give it a grid layout, with two columns. In one column, I decided to give two buttons, one for Contact Us and one for Know More. So that user can contact us in need and if they want to know more about us they can know.

And in next column, we have our brand logo and a nice ending line. Have a look at its code:

You may watch this video:

The End

Congrats 👏, you have reached at the end of the article.

In this article , we discussed how I built a landing page just using HTML5, CSS3 and BOOTSTRAP. If you love to read more about projects, you may have a look at my other articles. And you can also connect with me on Git-hub. Thank you for reading it till the end 🙂 !