How to Create a Responsive Homepage using Html and CSS

How to Create a Responsive Homepage using Html and CSS
Responsive Homepage using HTML CSS
Hello, and Welcome Back. Homepage design is the first step for any website layout designer to create a website project for their customer. It is the most crucial segment of any website layout because the homepage is the virtual front door of any webpage, and it creates a deep impression among the visitors. If the homepage looks are esthetic or attractive, then there is a high chance that the visitors will be interested in scrolling further on the website and exploring more from it.

Today We will design a simple-looking responsive homepage using HTML and CSS. We will give it a responsive look with the help of CSS media queries. Now, this snippet is for absolute beginners who have already learned a bit of HTML and CSS. Those of you trying to make a website and wondering how to make a responsive homepage for it, then this snippet is for you. For this project, I used Poppins font, and you can use this font from Google font by linking the font's URL in your HTML page.

For the HTML part of the snippet, I have taken a header tag, and inside that, I did the actual HTML mark up of the design. First of all, I took a div named wrapper, which will act as the container for all the elements that I will need for making the navbar for the homepage. Then I took a div called logo inside, which I placed a png logo image. If you want, you can write simple text instead of the picture. After that, I have taken an unordered list named nav-area, and inside that, I took five nav-items. After the wrapper div, I have used another div named welcome-text to create some banner text. Inside that, I used a simple random header text and a call to action button. That's is for the HTML markup for this project.

You May Also Like:
In the CSS Part, I discarded the document's default margin and padding by providing a margin and padding of 0 to the universal selector. I gave the wrapper class a custom width of 1170px and gave margin auto, so the navbar aligns perfectly at the center. I gave the header element a background image and blackish overlay effect on it with linear-gradient CSS function. Then I provided a 100vh height to it and gave it a relative position value. I then did some basic styling like positioned the logo and nav-area to left and right and made the navbar display inline.

I gave the welcome-text class width of 600px and height of 300px and gave it absolute position value for the banner text. I used the margin value to take the welcome-text content to the middle of the homepage. After that, I have provided some basic styling for all the elements in the welcome-text class.

For the responsive part, anything below 600px pixel width, we will get a nice responsive look of the design. I have changed some basic styling in the media queries, which you will get in the code below.

Responsive homepage using Html and CSS (Source Code)

To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. After that, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.

HTML:




CSS:



I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated.

1 Comments

Please do not enter any spam link in the comment box.

  1. how to enter data in menu bar like home,service,aboutus and so on?

    ReplyDelete

Post a Comment

Please do not enter any spam link in the comment box.

Post a Comment

Previous Post Next Post