Logo
LiveChat

Loading..

Create a Responsive Website by Using HTML and CSS

Desktop view

responsive and mobile friendly

Mobile view

responsive and mobile friendly

Step 1: Planning and Content Structure

Before you start coding, plan your website's layout and content structure. Determine the key sections and elements you want to include. Sketch a wireframe or create a design mockup if possible.

Step 2: Set Up Your Project

Create a folder for your project and set up the necessary files:

  • Create an HTML file (e.g., index.html) for your webpage's content.
  • Create a CSS file (e.g., styles.css) for your website's styles.
  • Create a folder (e.g., images) for storing images.

Step 3: HTML Structure

In your index.html file, set up the basic structure of your webpage using HTML. Include the following elements:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create a Responsive Website by Using HTML and CSS | Assignment Hippo</title>
    <!-- External stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- header -->
    <header class="header">
      <nav class="navbar">
        <h2 class="logo"><a href="#">Assignment Hippo</a></h2>
        <input type="checkbox" id="menu-toggle" />
        <label for="menu-toggle" id="hamburger">
          <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
            <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </label>
        <ul class="links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <div class="buttons">
          <a href="#" class="signin">Login</a>
          <a href="#" class="signup">Sign Up</a>
        </div>
      </nav>
    </header>
    <!-- header end -->

    <!-- main section -->
    <section class="main-cont-section">
      <div class="main-cont">
        <h2>Responsive & Mobile Friendly</h2>
        <p>
            Unlock Instant Answers, and
            New Knowledge Today!
            with the help of Assignmenthippo.

        </p>
        <div class="buttons">
          <a href="#" class="view">View More</a>
          <a href="#" class="learn">Learn More</a>
        </div>
      </div>
    </section>
    <!-- main section end -->
  </body>
</html>

Step 4: Add Content

Inside the <body> tag, add your website's content using HTML elements like <header>, <nav>, <section>, <article>, <footer>, etc. Structure your content logically.

Step 5: CSS Styling

Open your styles.css file and start adding styles. Here are some tips for creating responsive styles:

  • Use relative units like %, em, and rem instead of fixed units like px for sizing.
  • Use media queries to apply different styles based on screen size. For example:

        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Open Sans", sans-serif;
        }
        
        body {
          height: 100vh;
          width: 100%;
          background: linear-gradient(to bottom, #171c69 23%, #aa08db 95%);
        }
        
        .header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
        }
        
        .navbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px 15px;
        }
        
        .navbar .logo a {
          font-size: 1.8rem;
          text-decoration: none;
          color: #fff;
        }
        
        .navbar .links {
          display: flex;
          align-items: center;
          list-style: none;
          gap: 35px;
        }
        
        .navbar .links a {
          font-weight: 500;
          text-decoration: none;
          color: #fff;
          padding: 10px 0;
          transition: 0.2s ease;
        }
        
        .navbar .links a:hover {
          color: #a547e4;
        }
        
        .navbar .buttons a {
          text-decoration: none;
          color: #fff;
          font-size: 1rem;
          padding: 15px 0;
          transition: 0.2s ease;
        }
        
        .navbar .buttons a:not(:last-child) {
          margin-right: 30px;
        }
        
        .navbar .buttons .signin:hover {
          color: #a547e4;
        }
        
        .navbar .buttons .signup {
          border: 1px solid #fff;
          padding: 10px 20px;
          border-radius: 0.375rem;
          text-align: center;
          transition: 0.2s ease;
        }
        
        .navbar .buttons .signup:hover {
          background-color: #a547e4;
          color: #fff;
        }
        
        .main-cont-section {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 95vh;
          padding: 0 15px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .main-cont-section .main-cont {
          max-width: 50%;
          color: #fff;
        }
        
        .main-cont h2 {
          font-size: 2.5rem;
          margin-bottom: 20px;
        }
        
        .main-cont p {
          font-size: 1.2rem;
          margin-bottom: 20px;
          color: #c9c7c7;
        }
        
        
        .main-cont-section .buttons {
          margin-top: 40px;
        }
        
        .main-cont-section .buttons a {
          text-decoration: none;
          color: #fff;
          padding: 12px 24px;
          border-radius: 0.375rem;
          font-weight: 600;
          transition: 0.2s ease;
          display: inline-block;
        }
        
        .main-cont-section .buttons a:not(:last-child) {
          margin-right: 15px;
        }
        
        .buttons .view {
          background-color: #a547e4;
        }
        
        .main-cont-section .buttons .learn {
          border: 1px solid #fff;
          border-radius: 0.375rem;
        }
        
        .main-cont-section .buttons a:hover {
          background-color: #a547e4;
        }
        
        /* Hamburger menu styles */
        #menu-toggle {
          display: none;
        }
        
        #hamburger {
          font-size: 1.8rem;
          color: #fff;
          cursor: pointer;
          display: none;
          order: 1;
        }
        
        @media screen and (max-width: 1023px) {
          .navbar .logo a {
            font-size: 1.5rem;
          }
        
          .links {
            position: fixed;
            left: -100%;
            top: 75px;
            width: 100%;
            height: 100vh;
            padding-top: 50px;
            background: #171c69;
            flex-direction: column;
            transition: 0.3s ease;
          }
        
          .navbar #menu-toggle:checked ~ .links {
            left: 0;
          }
        
          .navbar #hamburger {
            display: block;
          }
        
          .header .buttons {
            display: none;
          }
        
          .main-cont-section .main-cont {
            max-width: 100%;
            text-align: center;
          }
        
        }
  • Use Flexbox or CSS Grid to create responsive layouts.
  • Ensure images are responsive by setting their max-width to 100%.
  • Test your styles on various devices and screen sizes to make adjustments as needed.

Step 6: Testing and Debugging

Test your website on different devices and browsers to ensure it looks and functions as expected. Use browser developer tools to inspect and debug any issues.

Step 7: Optimization

Optimize your website for performance:

  • Minimize the use of large images and compress them.
  • Use lazy loading for images.
  • Minify your CSS and JavaScript files.
  • Consider using a content delivery network (CDN) for assets.

Step 8: Launch and Maintenance

Once you're satisfied with your responsive website, it's time to launch it. You can host it on a web server or use hosting platforms like GitHub Pages or Netlify. Don't forget to keep your website updated and maintain it regularly.

Remember that creating a responsive website is an ongoing process. Keep learning and improving your skills to stay up-to-date with web development trends and best practices.

View Demo