CH
Coding Hub
Web DevelopmentBeginner8 min read read

HTML and CSS Fundamentals: Building Responsive Web Layouts

A modern guide to semantic HTML5 tags, the CSS Box Model, Flexbox alignment, and responsive design.

Coding Hub Technical Editorial Team(Software Engineering & Education)
•
Updated 2026-03-11

Overview & Context

Every website on the internet—from simple personal blogs to multi-billion-dollar web applications—relies on HTML and CSS. HTML (HyperText Markup Language) defines the semantic structure and content of the page, while CSS (Cascading Style Sheets) controls visual appearance, spacing, colors, and responsive layouts across screens.

What You Will Learn
Understand the division of labor between HTML (structure) and CSS (presentation)
Build accessible web documents using semantic HTML5 tags (<header>, <main>, <article>, <nav>)
Master the CSS Box Model: content, padding, border, and margin
Align UI elements effortlessly using CSS Flexbox
Write mobile-first media queries for responsive cross-device layouts
Table of Contents

1. Semantic HTML5: Meaning Over Decoration

Why <div> soup hurts accessibility and SEO

In the early days of web development, pages were constructed from endless generic `<div>` containers. HTML5 introduced semantic elements that carry meaning for screen readers, search engines, and browsers.

Use `<header>` for navigation and introductory banners, `<nav>` for site links, `<main>` for primary content, `<article>` for self-contained blog posts or widgets, and `<footer>` for copyright and legal links.

2. The CSS Box Model Explained

Content, Padding, Border, and Margin

Every element rendered in a web browser is a rectangular box composed of four concentric layers:

- **Content:** The actual text, image, or video.

- **Padding:** Space between the content and the element's border.

- **Border:** The outer line surrounding the padding.

- **Margin:** Transparent space separating this element from neighboring elements.

Best Practice Tip
  • Always include `*, *::before, *::after { box-sizing: border-box; }` at the top of your global CSS. This ensures that padding and borders are included within the element's specified width rather than expanding it.

3. Modern Flexbox Layouts

CSS Flexbox (Flexible Box Layout) simplifies horizontal and vertical alignment along a single axis.

Declare `display: flex;` on the parent container. Use `justify-content` to distribute children along the main axis, and `align-items` to align them along the cross axis.

4. Responsive Design & Media Queries

Responsive design ensures a website adapts seamlessly whether viewed on a 375px mobile screen or a 2560px 4K desktop monitor.

Mobile-first design means writing base styles for small mobile screens first, then using `@media (min-width: 768px)` to enhance layouts for tablet and desktop viewports.

5. Complete Responsive Card Example

Here is a clean, semantic HTML and CSS implementation of a responsive card component:

html
<!-- Semantic HTML Card -->
<article class="tool-card">
  <div class="card-icon">🎓</div>
  <h3 class="card-title">CGPA Calculator</h3>
  <p class="card-desc">Compute cumulative grade point average with simple or credit-weighted models.</p>
  <a href="/tools/cgpa-calculator" class="card-btn">Launch Tool →</a>
</article>

<style>
  .tool-card {
    background-color: #FFFFFF;
    border: 1px solid #E7E7E3;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .card-title {
    color: #202124;
    font-size: 1.125rem;
    margin: 8px 0;
  }
  .card-desc {
    color: #737373;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .card-btn {
    color: #176B50;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
  }
  .card-btn:hover {
    text-decoration: underline;
  }
</style>
Key note: This card matches Coding Hub's warm white editorial aesthetic with clean semantic markup and zero heavy dependencies.

Summary & Key Takeaways

  • 1Use semantic HTML5 elements (<header>, <nav>, <main>, <article>, <footer>) for accessibility and SEO.
  • 2The CSS Box Model consists of Content, Padding, Border, and Margin.
  • 3Set `box-sizing: border-box` globally for predictable width calculations.
  • 4Flexbox provides clean 1-dimensional alignment along rows or columns.
Frequently Asked Questions

What is the viewport meta tag?

The viewport meta tag `<meta name="viewport" content="width=device-width, initial-scale=1.0">` instructs mobile browsers to render the website at the screen's actual physical width rather than simulating a 980px desktop screen.

What is the difference between CSS Flexbox and CSS Grid?

Flexbox is designed for 1-dimensional layouts (arranging items in a single row or a single column). CSS Grid is designed for 2-dimensional layouts (arranging items across rows and columns simultaneously).