Building a Responsive Website with HTML and CSS

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>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>
  <body>
    <!-- Header -->
    <header class="header">
      <a href="index.html" class="logo">
        <i class="fas fa-swatchbook"></i> VirTuaL
      </a>
      <nav class="navbar">
        <a href="index.html" class="active">Home</a>
        <a href="#about">about</a>
        <a href="#services">services</a>
        <a href="#contact">contact</a>
        <a href="#">Blog</a>
        <a href="#">FAQs</a>
      </nav>
      <div class="icons">
        <i class="fas fa-bars" id="menu-btn"></i>
        <i class="fab fa-facebook"></i>
        <i class="fab fa-youtube"></i>
        <i class="fab fa-instagram"></i>
      </div>
    </header>

    <!-- Home Section -->
    <section class="home">
      <div class="container">
        <div class="landing">
          <div class="content">
            <span>Virtual Reality (VR)</span>
            <h3>
              be part <br />
              of the new <br />
              technologies
            </h3>
            <a href="#" class="btn">Learn More</a>
          </div>
          <div class="image">
            <img src="image/home.png" alt="" />
          </div>
        </div>
      </div>
    </section>
    <!-- about Section -->
    <section class="about" id="about">
      <div class="image">
        <img src="image/about.png" alt="" />
      </div>

      <div class="content">
        <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="#" class="btn">learn more</a>
      </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
      <h2>VR's Surprising Benefits</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, facere!
      </p>
      <div class="services-box">
        <div class="box">
          <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="#" class="btn">More</a>
        </div>
        <div class="box">
          <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="#" class="btn">More</a>
        </div>
        <div class="box">
          <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="#" class="btn">More</a>
        </div>
      </div>
    </section>
    <!-- Footer Section -->
    <footer id="contact">
      <div class="footer-content">
        <div class="top">
          <div class="logo-details">
            <i class="fas fa-swatchbook"></i>
            <span class="logo_name">VirTuaL</span>
          </div>
        </div>
        <div class="link-boxes">
          <ul class="box">
            <li class="link_name">Company</li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
          </ul>
          <ul class="box">
            <li class="link_name">Partners</li>
            <li><a href="#">Virtual</a></li>
            <li><a href="#">VISA</a></li>
            <li><a href="#">Master</a></li>
            <li><a href="#">Paypal</a></li>
            <li><a href="#">Wise wire</a></li>
          </ul>
          <ul class="box input-box">
            <li class="link_name">Subscribe</li>
            <li><input type="email" placeholder="Enter your Email" /></li>
            <li><input type="button" value="Subscribe" /></li>
          </ul>
        </div>
      </div>

      <!-- Copyright -->
      <div class="bottom-details">
        <div class="bottom_text">
          <span class="copyright_text"
            >Copyright ~ 2021 <a href="#">Code Info</a>All rights reserved</span
          >
          <span class="policy_terms">
            <a href="#">Priavcy policy</a>
            <a href="#">terms and conditions</a>
          </span>
        </div>
      </div>
    </footer>

    <script>
        let navbar = document.querySelector('.navbar');

        document.querySelector('#menu-btn').onclick = () =>{
            navbar.classList.toggle('active');
        }
    </script>
  </body>
</html>

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%; } }

Conclusion

By following the best practices discussed in this article, like making the website mobile-friendly, responsive with CSS, developing responsive websites, and building fast responsive sites with HTML, CSS and JS, you can build a website that ranks well in search engines by doing proper SEO. Whether you are looking to make your website mobile-friendly, build a responsive website from scratch, or use the best responsive website builders tool, applying these steps will help you to create a website that is user-friendly and optimized for mobile devices.

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.