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, creating a deep impression among the visitors. If the homepage looks esthetic or attractive, 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. As we know, responsive web design is necessary in this modern web design era. The majority of people browse websites from mobile or other small devices. According to a recent survey, approximately 60% of the website traffic comes from mobile devices.
This snippet is for the absolute beginners who have already learned a bit of HTML and CSS. For those of you trying to make a website and wondering how to make a responsive homepage for it, then this snippet is for you. Watch the video tutorial below to see how we coded this snippet.
Video Tutorial:
For the HTML part of the snippet, we have taken a header tag, and inside that, we did the actual HTML markup of the design. First of all, we took a div named wrapper, which will act as the container for all the elements that we will need for making the navbar for the homepage. Then I took a div called logo inside, where we placed a PNG logo image. If you want, you can write simple text instead of the picture. After that, we took an unordered list named nav-area, and inside that, I took five nav-items. After the wrapper div, we 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 is for the HTML markup for this project.
You May Also Like:
In the CSS Part, we 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 a blackish overlay effect on it with a linear gradient CSS function. Then we provided a 100vh height to it and gave it a relative position value. I then did some basic styling like positioning the logo and nav area to left and right and made the navbar display inline.
We gave the welcome-text class a width of 600px and height of 300px and gave it an 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 provided some basic styling for all the elements in the welcome-text class.
For the responsive part, for 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 a CSS file. After that, you need to copy the HTML and CSS code and paste the code to the appropriate files, and save them. If you want to download the code, you can do that by clicking the download button below this blog post.
HTML:
CSS:
how to enter data in menu bar like home,service,aboutus and so on?
ReplyDeletePost a Comment
Please do not enter any spam link in the comment box.