In this article, we will create a professional and responsive website using HTML, CSS and JavaScript. This step-by-step tutorial will help you the best way to build responsive websites that suits your exact requirements, whether you’re a newbie or an experienced developer, make your website mobile friendly.
Understanding the Code:
The provided code exemplifies a standard website structure, consisting of a header, home section, about section, services section, and footer. Additionally, a JavaScript snippet is included to enable the functionality of a toggle able navigation menu. Let’s explore each section in detail.
Header: Enhancing Mobile-Friendliness and Responsiveness
The header plays a vital role in improving the mobile-friendliness and responsiveness of your website. By employing CSS techniques and best practices, such as fluid layouts and media queries, you can ensure that the header adapts seamlessly across different devices. Implementing responsive navigation, like a hamburger menu, enables smooth navigation on mobile screens. Additionally, optimizing the header for mobile devices will make your website more appealing to users.
Home Section: Building a Mobile-Friendly Website with HTML and CSS
The home section serves as the entry point for visitors, and it is crucial to optimize it for mobile devices. By leveraging HTML and CSS, you can develop a mobile-friendly home section that utilizes responsive design principles. Implement fluid layouts, scalable images, and appropriately sized fonts to create an engaging and visually appealing experience. Incorporate media queries to adjust the content and layout for various screen sizes, making your home section responsive.
About Section: Creating a Responsive Website with HTML and CSS
The about section provides an opportunity to showcase your website’s purpose and engage users. To make this section mobile-friendly and responsive, use HTML and CSS to structure the content and apply responsive design techniques. Craft concise yet compelling descriptions, and utilize media queries to ensure the section looks great on mobile devices. By creating a responsive about section, you can effectively communicate your website’s mission while delivering an optimized experience to users.
Video Tutorial
To get started, watch and practice along with the tutorial below. With a bit of effort and dedication, you’ll be able to create a mobile responsive website that can help take your business to the next level.
Services Section: Developing a Responsive Website with HTML, CSS
In the services section, it’s essential to highlight the benefits of a responsive website. By using HTML, CSS, and leveraging the power of Bootstrap, you can create fast and responsive service boxes. Apply responsive grid systems, optimize images for different screen sizes, and utilize Bootstrap’s responsive classes to enhance the responsiveness of the section. This approach will enable your website to provide an immersive and engaging experience to users across multiple devices.
Footer: Making Your Website Mobile-Friendly and Responsive
The footer, often overlooked, is an integral part of a mobile-friendly and responsive website. Design the footer with responsiveness in mind, using CSS techniques to ensure it adapts well to various screen sizes. Consider optimizing the placement and visibility of the footer’s elements to improve user experience on mobile devices. By making your website’s footer mobile-friendly, you create a cohesive and enjoyable browsing experience for visitors.
Source code
If you like this responsive web design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other is CSS after creating these files, paste the code provided below.
HTML CODE:
<!DOCTYPE html>
<head>
<title>Virtual Website | By Code Info</title>
<!-- Font Awesome Cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<!-- Header -->
<header>
<a href="http://www.codeinfoweb.com/index.html">
<i></i> VirTuaL </a>
<nav>
<a href="http://www.codeinfoweb.com/index.html">Home</a>
<a href="http://www.codeinfoweb.com/#about">about</a>
<a href="http://www.codeinfoweb.com/#services">services</a>
<a href="http://www.codeinfoweb.com/#contact">contact</a>
<a href="http://www.codeinfoweb.com/#">Blog</a>
<a href="http://www.codeinfoweb.com/#">FAQs</a>
</nav>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</header>
<!-- Home Section -->
<section>
<div>
<div>
<div>
<span>Virtual Reality (VR)</span>
<h3> be part <br /> of the new <br /> technologies </h3>
<a href="http://www.codeinfoweb.com/#">Learn More</a>
</div>
<div>
<img src="http://www.codeinfoweb.com/image/home.png" alt="" />
</div>
</div>
</div>
</section>
<!-- about Section -->
<section>
<div>
<img src="http://www.codeinfoweb.com/image/about.png" alt="" />
</div>
<div>
<h3>the future is today</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, amet provident! Nobis veritatis placeat quos! </p>
<a href="http://www.codeinfoweb.com/#">learn more</a>
</div>
</section>
<!-- Services Section -->
<section>
<h2>VR's Surprising Benefits</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, facere! </p>
<div>
<div>
<h3>Mental health</h3>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam rerum illum sit! Accusamus laborum possimus non ipsam, debitis cumque id? </p>
<a href="http://www.codeinfoweb.com/#">More</a>
</div>
<div>
<h3>Relax</h3>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam rerum illum sit! Accusamus laborum possimus non ipsam, debitis cumque id? </p>
<a href="http://www.codeinfoweb.com/#">More</a>
</div>
<div>
<h3>Realistic Experience</h3>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam rerum illum sit! Accusamus laborum possimus non ipsam, debitis cumque id? </p>
<a href="http://www.codeinfoweb.com/#">More</a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<div>
<div>
<div>
<i></i>
<span>VirTuaL</span>
</div>
</div>
<div>
<ul>
<li>Company</li>
<li>
<a href="http://www.codeinfoweb.com/#">Home</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">About</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">Blog</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">Contact</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">Services</a>
</li>
</ul>
<ul>
<li>Partners</li>
<li>
<a href="http://www.codeinfoweb.com/#">Virtual</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">VISA</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">Master</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">Paypal</a>
</li>
<li>
<a href="http://www.codeinfoweb.com/#">Wise wire</a>
</li>
</ul>
<ul>
<li>Subscribe</li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- Copyright -->
<div>
<div>
<span>Copyright ~ 2021 <a href="http://www.codeinfoweb.com/#">Code Info</a>All rights reserved </span>
<span>
<a href="http://www.codeinfoweb.com/#">Priavcy policy</a>
<a href="http://www.codeinfoweb.com/#">terms and conditions</a>
</span>
</div>
</div>
</footer>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.
CSS CODE:
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;1,200;1,300display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
section {
padding: 3rem 3rem 0 9%;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 2rem 9%;
display: flex;
background: #774ea7;
align-items: center;
justify-content: space-between;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.header .logo {
font-size: 2.5rem;
font-weight: bolder;
color: #fff;
}
.header .logo i {
color: #fff;
padding-right: 0.5rem;
}
.header .navbar a {
font-size: 1.7rem;
color: #fff;
margin: 0 1rem;
}
.header .navbar a:hover {
color: #baa6cf;
}
.header .icons i {
font-size: 2.5rem;
margin-left: 1.7rem;
cursor: pointer;
color: #fff;
}
.header .icons i:hover {
color: #baa6cf;
}
#menu-btn {
display: none;
}
@media (max-width: 991px) {
html {
font-size: 55%;
}
.header {
padding: 2rem;
}
section {
padding: 3rem 2rem 0 2rem;
}
}
@media (max-width: 768px) {
#menu-btn {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 99%;
left: 0;
right: 0;
background: #fff;
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header .navbar.active {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.header .navbar a {
margin: 1.5rem;
padding: 1.5rem;
background: #774ea7;
color: #fff;
font-size: 2rem;
display: block;
border-radius: 0.5rem;
text-align: center;
}
.landing .content {
margin-top: 30px;
}
.about .content .btn {
margin-bottom: 10px;
}
}
@media (max-width: 450px) {
html {
font-size: 50%;
}
.home .container .landing .content h3 {
font-size: 50%;
}
}
/* Home Section */
.home {
padding-top: 8rem;
background: #a586c9;
background-size: cover;
background-position: center;
position: relative;
}
.home .container .landing {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.5rem;
display: none;
}
.home .container .landing {
display: flex;
}
.home .container .landing .content span {
color: rgb(255, 255, 255);
font-size: 2.5rem;
}
.home .container .landing .content h3 {
font-size: 6rem;
color: #eee;
padding: 0.5rem 0;
text-transform: uppercase;
}
.btn {
margin-top: 1rem;
display: inline-block;
padding: 0.8rem 3rem;
background: #eee;
color: black;
font-size: 1.7rem;
cursor: pointer;
}
.btn:hover {
background: rgb(105, 105, 105);
}
.home .container .landing .image {
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
margin: 3rem 3rem 0 0;
}
.home .container .landing .image img {
width: 100%;
}
/* About */
.about {
background: #ccc1d8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2rem;
}
.about .image {
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
}
.about .image img {
width: 100%;
}
.about .content {
-webkit-box-flex: 1;
-ms-flex: 1 1 42rem;
flex: 1 1 42rem;
}
.about .content h3 {
color: #302851;
font-size: 4.5rem;
}
.about .content p {
font-size: 1.4rem;
padding: 1rem 0;
color: #666;
line-height: 2.5;
}
/* Services Section */
.services {
background: #774ea7;
text-align: center;
color: #fff;
}
.services-box {
padding: 20px;
display: flex;
}
.services h2 {
color: #eee;
font-size: 4rem;
text-transform: uppercase;
}
.services-box .box {
background: #fff;
color: #000;
width: 33%;
border-radius: 10px;
padding: 20px 30px;
margin-left: 10px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.services-box .box h3 {
color: #774ea7;
font-size: 2rem;
}
.services-box .box p {
margin-top: 10px;
font-size: 1.3rem;
}
.services-box .box .btn {
border: 2px solid #774ea7;
border-radius: 5px;
}
@media (max-width: 520px) {
.services .services-box {
display: block;
}
.services .services-box .box {
margin-top: 10px;
width: 100%;
}
}
/* Footer Bar */
footer {
position: relative;
background: #302851;
width: 100%;
}
footer::before {
content: "";
position: absolute;
left: 0;
top: 100px;
height: 1px;
width: 100%;
background: #afafb6;
}
footer .footer-content {
max-width: 1100px;
margin: auto;
padding: 30px 40px 40px 40px;
}
footer .footer-content .top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}
.footer-content .top .logo-details {
color: #fff;
font-size: 30px;
}
footer .footer-content .link-boxes {
width: 100%;
display: flex;
justify-content: space-between;
}
footer .footer-content .link-boxes .box {
width: calc(100% / 3 - 10px);
}
.footer-content .link-boxes .box .link_name {
color: #fff;
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
position: relative;
}
.link-boxes .box .link_name::before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 35px;
background: #fff;
}
.footer-content .link-boxes .box li {
margin: 6px 0;
list-style: none;
}
.footer-content .link-boxes .box li a {
color: #fff;
font-size: 14px;
font-weight: 400;
text-decoration: none;
opacity: 0.8;
transition: all 0.4s ease;
}
.footer-content .link-boxes .box li a:hover {
opacity: 1;
text-decoration: underline;
}
.footer-content .link-boxes .input-box {
margin-right: 55px;
}
.link-boxes .input-box input {
height: 40px;
width: calc(100% + 55px);
outline: none;
border: 2px solid #afafb6;
background: #774ea7;
border-radius: 4px;
padding: 0 15px;
font-size: 15px;
margin-top: 5px;
}
.input-box input::placeholder {
color: #afafb6;
font-size: 16px;
}
.input-box input[type="button"] {
background: #fff;
color: #140b5c;
font-size: 18px;
font-weight: 500;
margin: 4px 0;
opacity: 0.8;
cursor: pointer;
}
.input-box input[type="button"]:hover {
opacity: 1;
}
footer .bottom-details {
width: 100%;
background: #20132e;
}
footer .bottom-details .bottom_text {
max-width: 1250px;
margin: auto;
padding: 20px 40px;
display: flex;
justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
font-size: 14px;
font-weight: 300;
color: #fff;
opacity: 0.8;
text-decoration: none;
}
.bottom-details .bottom_text a:hover {
opacity: 1;
text-decoration: underline;
}
.bottom-details .bottom_text a {
margin-right: 10px;
}
@media (max-width: 900px) {
footer .link-boxes{
flex-wrap: wrap;
}
footer .footer-content .link-boxes .input-box{
width: 40%;
margin-top: 10px;
}
}
@media (max-width: 700px) {
footer{
position: relative;
}
.footer-content .top .logo-details{
font-size: 26px;
}
.footer-content .link-boxes .box{
width: calc(100%/2 - 10px);
}
.footer-content .link-boxes .input-box{
width: 60%;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
font-size: 12px;
}
}
@media (max-width : 520px) {
footer::before{
top: 100px;
}
.footer-content .top{
flex-direction: column;
}
.link-boxes .box{
width: calc(100%/2 - 10px);
}
.link-boxes .input-box{
width: 100%;
}
}