Responsive Web Design with HTML5 and CSS: A Practical Guide to GitHub

Responsive web design helps a website adapt to different screen sizes, from compact phones to large desktop monitors. HTML5 provides meaningful page structure, while CSS controls layout and appearance. GitHub makes it easier to save, share, and publish the project.

This guide walks through the basics of building a responsive page with HTML5 and CSS, then explains how to keep the project on GitHub.

What Makes a Website Responsive?

A responsive website adjusts its content and layout to suit the device displaying it. Rather than creating a separate site for every screen size, you can use flexible layouts, scalable media, and CSS media queries to make one site work across many devices.

Three core techniques are:

• Flexible layouts: Use relative units and layout systems such as CSS Grid or Flexbox.
• Scalable images: Make images fit within their containers instead of forcing them to a fixed width.
• Media queries: Apply different CSS rules when the viewport reaches specific sizes.

Start with Semantic HTML5

HTML5 elements describe the purpose of different parts of a page. Elements such as <header>, <nav>, <main>, and <footer> make the structure easier to understand for browsers, assistive technologies, and developers.

The viewport meta tag is also essential. It tells mobile browsers to use the device’s actual viewport width rather than scaling the page down to a wider virtual canvas.

<!doctype html>


<html lang="en">


<head>


  <meta charset="utf-8">


  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>Responsive Starter Page</title>


  <link rel="stylesheet" href="styles.css">


</head>


<body>


  <header class="site-header">


    <a class="logo" href="/">Brightside</a>


    <nav aria-label="Main navigation">


      <a href="#services">Services</a>


      <a href="#about">About</a>


      <a href="#contact">Contact</a>


    </nav>


  </header>





  <main>


    <section class="hero">


      <div>


        <p class="eyebrow">Thoughtful design for growing teams</p>


        <h1>A better experience on every screen.</h1>


        <p>Build clear, useful pages that adapt to the way people browse.</p>


        <a class="button" href="#services">Explore our services</a>


      </div>


      <img src="workspace.jpg" alt="A bright workspace with a laptop and notebook">


    </section>





    <section class="cards" id="services" aria-label="Our services">


      <article class="card">


        <h2>Design</h2>


        <p>Create accessible layouts that make information easy to find.</p>


      </article>


      <article class="card">


        <h2>Development</h2>


        <p>Build with standards-based HTML and maintainable CSS.</p>


      </article>


      <article class="card">


        <h2>Support</h2>


        <p>Improve your site as your audience and needs change.</p>


      </article>


    </section>


  </main>





  <footer id="contact">


    <p>Contact: hello@example.com</p>


  </footer>


</body>


</html>

Build a Flexible CSS Layout

CSS Grid and Flexbox make it possible to create layouts that adjust naturally. The example below starts with a mobile-friendly, single-column layout and adds columns when more space is available.

* {


  box-sizing: border-box;


}





:root {


  color-scheme: light;


  font-family: system-ui, sans-serif;


  line-height: 1.6;


  color: #1e293b;


  background: #f8fafc;


}





body {


  margin: 0;


}





.site-header {


  display: flex;


  flex-wrap: wrap;


  align-items: center;


  justify-content: space-between;


  gap: 1rem;


  padding: 1rem 5%;


  background: #fff;


}





.logo {


  color: #172554;


  font-size: 1.25rem;


  font-weight: 700;


  text-decoration: none;


}





nav {


  display: flex;


  flex-wrap: wrap;


  gap: 1rem;


}





nav a {


  color: inherit;


  text-decoration: none;


}





main {


  width: min(1100px, 90%);


  margin: 0 auto;


}





.hero {


  display: grid;


  gap: 2rem;


  align-items: center;


  padding: 3rem 0;


}





.hero h1 {


  max-width: 12ch;


  margin: 0;


  font-size: clamp(2.25rem, 7vw, 4.5rem);


  line-height: 1.05;


}





.eyebrow {


  color: #475569;


  font-weight: 600;


}





.hero img {


  display: block;


  width: 100%;


  height: auto;


  border-radius: 1rem;


  object-fit: cover;


}





.button {


  display: inline-block;


  margin-top: 1rem;


  padding: 0.75rem 1rem;


  border-radius: 0.5rem;


  color: #fff;


  background: #1d4ed8;


  text-decoration: none;


}





.cards {


  display: grid;


  gap: 1rem;


  padding: 1rem 0 3rem;


}





.card {


  padding: 1.5rem;


  border: 1px solid #e2e8f0;


  border-radius: 0.75rem;


  background: #fff;


}





footer {


  padding: 1.5rem 5%;


  color: #475569;


  background: #eaf0f8;


}





@media (min-width: 700px) {


  .hero {


    grid-template-columns: 1fr 1fr;


    padding: 5rem 0;


  }





  .cards {


    grid-template-columns: repeat(3, minmax(0, 1fr));


  }


}

Why These CSS Techniques Work

• width: min(1100px, 90%) keeps the content from becoming too wide on large screens while leaving space around it on small screens.
• grid-template-columns changes the hero and card sections into multi-column layouts when the viewport is wide enough.
• clamp() lets the heading scale smoothly within a defined range.
• width: 100% and height: auto allow the image to shrink with its container without distorting its proportions.
• The media query adds layout changes at a breakpoint chosen for the content, rather than for a particular device model.

Use a Mobile-First Approach

Mobile-first CSS begins with the simplest layout, usually a single column, then adds enhancements for larger screens. This approach keeps the base experience usable on smaller devices and can make styles easier to organize.

Choose breakpoints by watching where the content needs more room. A breakpoint should solve a layout problem, such as navigation wrapping awkwardly or cards becoming too narrow. It does not need to match a specific phone or tablet.

Save and Share the Project on GitHub

GitHub stores Git repositories online, making it useful for version control, collaboration, and publishing static websites. A simple project could use this structure:

responsive-site/


├── index.html


├── styles.css


├── workspace.jpg


└── README.md

To create a local repository and save the first version, run these commands from the project folder:

git init


git add .


git commit -m "Create responsive starter page"

Next, create an empty repository on GitHub. Connect the local project to it and push the files. Replace the URL below with the address of your repository:

git branch -M main


git remote add origin https://github.com/USERNAME/responsive-site.git


git push -u origin main

After making changes, save them as another commit and push the update:

git add .


git commit -m "Improve responsive layout"


git push

Publish with GitHub Pages

GitHub Pages can publish a static website from a repository. In the repository settings, find the Pages section and choose the branch and folder that contain the site files. Once the site is published, GitHub provides a URL where it can be viewed.

For a basic static project, make sure the published folder contains an index.html file and that linked assets use paths that work from the published location. If the repository is published from a subfolder URL, test image and stylesheet links carefully.

Test Across Screen Sizes

Use your browser’s developer tools to inspect the page at different viewport widths. Also test on real devices when possible. Check that:

• Text is readable without zooming or horizontal scrolling.
• Navigation links remain visible and easy to use.
• Images scale properly and do not overflow their containers.
• Buttons and links have enough space to tap comfortably.
• The page still makes sense when text is enlarged or content changes.

Conclusion

Responsive web design with HTML5 and CSS starts with a clear semantic structure, flexible layouts, scalable media, and carefully chosen media queries. GitHub adds a reliable way to track changes, collaborate, and publish the finished project. With these foundations in place, a site can provide a consistent experience across phones, tablets, and desktop screens.