How to Create responsive Homepage using html css

The homepage is an essential part of any webpage, and it is the gateway to the website. It welcomes visitors and requests them to explore more webpages. This particular section tells the visitor what to do next and what to study on the webpage. For this reason, a website homepage needs to neat and attractive. Designers have to focus on factors like typography, functionality, simplicity, etc. while designing a website. In this program, I will create a simple looking homepage using only HTML and CSS. This snippet is for beginners trying to make a homepage independently and with no idea how to start. I have shared some HTML CSS related snippets before. Check out those snippets if you are want.


In this project, I will create an ordinary-looking responsive homepage with the help of HTML and CSS. In the end, I used CSS media queries to make the project looks responsive. If you have learned a bit of HTML and CSS, this snippet will be easier for you to understand. I used Poppins, and you can easily integrate other google fonts in your project and use that for this project.


Let's starts with the HTML section of this project. First, I have taken a header tag. Inside that header tag, I have taken a div named 'wrapper.' this 'wrapper' div element will be a container of the project's navbar. After that, I have taken another div called 'logo.' inside that div element, I have placed the logo's png image. Now it is not necessary to use an image as a logo. You can use any text instead of the png logo image. Later I took an unordered list with the name of 'nav-area.' inside the 'nav-area' div element, I took five nav elements. After the navbar markup, I took another div named 'welcome-text' where I placed a random text as a banner text and a call-to-action button. That's all for the HTML markup. For this snippet, I will suggest you follow the tutorial below. 



I hope you have watched the entire video and have some idea about the coding used here.

You may also like:


I am moving on to the CSS part of this project. Let us eliminate the unwanted margin and padding by providing the margin padding to zero to the universal selector. I took a width of 1170px for the 'wrapper class' and a margin of 'auto.' this will align the navbar perfectly at the center. After that, I gave a background image to the header with a black color overlay. Later I gave a height of 100vh and relative position to the header. after that, I applied some simple techniques to take the logo to the left and properly position the navbar to the project's top right side. for positioning the banner text, i gave the 'welcome-text' div a height of 600px and a width of 300px. I gave this div an absolute position value, and using the margin value; I took the banner text to the middle of the webpage. The rest of the styling is self-explanatory, and without explaining further, I am providing you the code to do some experiment for yourself.

For making the snippet responsive, I have changed some values in the CSS media-queries so that we can a nice responsive look for the small devices.

  
Responsive homepage using Html and CSS (Source Code)

For this snippet, you need to create two files. One of them is HTML, and the other one is CSS. after linking the CSS file to your HTML file, copy and paste the code below to the respective file. 

HTML




CSS:




I hope this simple snippet helped you. Please follow my social media profiles and subscribe to the divinector youtube channel so that you can stay connected with this blog. Thank you for stopping by, and keep coming.

3 Comments

Please Do not Enter any spam link in the comment box

Post a Comment

Please Do not Enter any spam link in the comment box