Responsive Web Layout with HTML CSS and JavaScript

responsive web design template

Responsive web design is an effective technique used by web developers to render web pages well on different devices and window or screen sizes. Responsive web design aims to ensure the best user experience regardless of the screen size the user is using. Responsive web design templates are more popular these days because the use of small and medium devices has increased more than ever. Today we will design a responsive website layout using HTML, CSS, and JavaScript. The detailed coding process is shown in the video tutorial below. Watch the video before collecting the source code. It will help you to understand the source code. Subscribe to our channel if you like our channel content

Video Tutorial:

Hope you have watched the video tutorial. Responsive web design is a crucial part of the web development process. A website must be responsive to the increasing variety of devices used by users. Apart from device diversity, responsive web design templates are more effective due to user experience, SEO, maintenance efficiency, etc.

In today's blog post, we designed a website layout that has a navbar at the top. The navbar has the logo on the left and menu items on the right. The snippet was created targeting digital agency companies. So a background image related to it is set. Two calls to action are given under the heading and subheading. An animated hamburger menu is used when the snippet is responsive. That means the horizontal menu will be hidden in case of a small device. When the user clicks on the hamburger icon, the animation will pop up from the right side. CSS Media Queries are used to make our snippet responsive. This component allows developers to apply different styles to a web page based on different factors.

You May Also Like:

Responsive Web Layout with HTML CSS and JavaScript [ Source Code ]:

To create today's responsive web layout, first create HTML and CSS files. You can create a separate JS file and put the javascript code used in the snippet. But be sure to link to the HTML file. In our project, the JavaScript code is placed under the HTML file. Copy the code below from the box and paste it into your file, save it, and open it in the browser to see if it works. If there is any problem then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8"> 
    <title>How to Create a Responsive Website Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h5>Outranko</h5>
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="bar">
                <div class="bar-1"></div>
                <div class="bar-2"></div>
                <div class="bar-3"></div>
            </div>
        </nav>
    </header>
    <div class="banner">
        <div class="wrapper">
            <div class="content">
                <h2>Digital Agency</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta</p>
                <div class="btn">
                    <a href="#">Learn More</a>
                    <a href="#">Sign up</a>
                </div>                  
            </div>
        </div>
    </div>
    
    
    <script>
        const X = () => {
            const menu = document.querySelector('.bar');
            const nav = document.querySelector('.menu');
            
            menu.addEventListener('click', () => {
               menu.classList.toggle('bar-active');
                nav.classList.toggle('nav-active');
            });
        }
        X();
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
nav {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 10vh;
	background: #fff;
}
.logo {
	color: #141733;
	text-transform: capitalize;
	font-size: 24px;
	cursor: pointer;
	font-weight: 900;
	letter-spacing: 1px;
}
.menu {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	width: 30%;
}
.menu li {
	list-style: none;
}
.menu a {
	color: #141733;
	text-decoration: none;
	font-size: 15px;
	padding: 30px;
	font-weight: 600;
}
.menu a:hover {
	color: #ff6138;
	transition: .6s;
}
.bar {
	display: none;
	cursor: pointer;
}
.bar div {
	width: 25px;
	height: 3px;
	background-color: #ff6138;
	margin: 5px;
	transition: all .5s ease;
}
@media screen and (max-width:1024px) {
	.menu {
		width: 60%;
	}
	.menu a {
		color: #fff;
	}
}
@media screen and (max-width:768px) {
	body {
		overflow-x: hidden;
	}
	.menu {
		position: absolute;
		right: -100%;
		height: 90vh;
		top: 10vh;
		background-color: #000;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		transform: translateX(100%);
		transition: transform 0.5s ease-in-out;
		opacity: .9;
	}
	.bar {
		display: block;
	}
	.menu a {
		color: #fff;
	}
}
.nav-active {
	transform: translateX(-100%);
}
.bar-active .bar-1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}
.bar-active .bar-2 {
	opacity: 0;
}
.bar-active .bar-3 {
	transform: rotate(45deg) translate(-5px, -6px);
}
.banner {
	background-image: url(2.jpg);
	height: 100vh;
	background-size: cover;
	background-position: center;
}
.content h2 {
	color: #fff;
	font-size: 60px;
	font-weight: 900;
}
.content p {
	width: 50%;
	color: #fff;
	line-height: 2;
	margin: auto;
}
.btn a {
	text-decoration: none;
	background: #ff6138;
	padding: 15px 10px;
	display: inline-block;
	color: #fff;
	margin-top: 15px;
	border-radius: 50px;
	width: 130px;
	text-align: center;
}
.wrapper {
	width: 1060px;
	margin: auto;
	padding-top: 12%;
}
.content {
	text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.wrapper {
		width: 75%;
		padding-top: 26%;
	}
	.content {
		text-align: center;
	}
	.content h2 {
		font-size: 60px;
	}
	.content p {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.banner {
		background-position: 60%;
	}
	.wrapper {
		width: 75%;
		padding-top: 26%;
	}
	.content h2 {
		font-size: 25px;
	}
	.content p {
		width: 100%;
	}
	.btn a {
		padding: 9px 4px;
		width: 105px;
	}
}

Hope the code is working properly. Click the Load More button on the homepage for more snippets like this. If you like our website content, share it with others. Thanks for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box