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 or category and therefore every project I make takes time. intermediate advanced This project I created for a competition in which we had to choose a theme (given) and make a using , and . landing page HTML5 CSS3 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 , and . 
At the end, I am happy that I participated in this competition, and submitted my project. explore implement test In this article , I will discuss how I it. But before I start discussing, You should definitely check its responsiveness. I am quite on Twitter, so you should definitely there too: built active check my account 👉 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 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. wireframe When I started this project, I spent some time in making its wireframe in notebook. And after its wireframe is completed. I started the In the coding part, I code piece by piece. First I code for its header, then its main part, and in last I wrote code for its footer part. coding part. wrote Header: In its header, I decided to put icon, brand name and a navigation bar. which the user can use to navigate the . brand 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 , with an unordered option list which the user can use. BOOTSTRAP navbar Main: Then in its main, I divided it into two sections, section-1 and section-2. In section-1, I put a and some text on it. So that it looks nice. background image 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 and one for . So that user can contact us in need and if they want to know more about us they can know. Contact Us Know More 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 at the end of the article. reached In this article , we discussed how I built a landing page just using HTML5, CSS3 and BOOTSTRAP. If you love to read more about , you may have a look at my other articles. And you can also connect with me on . Thank you for reading it till the end 🙂 ! projects Git-hub

Twitter

My First React App, markView: An Interactive Markdown Previewer

How To Design a Tribute Page with Basic HTML5 & CSS3

Connect With Me

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Create CLI Apps

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

How To Create CLI Apps

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps