Platform under construction

HTML Styling

Intermediate

HTML Responsive

Learn HTML Responsive as the bridge between clean HTML and professional CSS: visual hierarchy, maintainable styling, responsive behavior and live practice.

<meta name="viewport" content="width=device-width, initial-scale=1">
@media (max-width: 720px) { ... }

HTML styling foundation

Responsive HTML and CSS make one page work on many screens.

Responsive design means the page adapts to different screen sizes, input types and reading situations. HTML provides the right viewport and flexible content. CSS handles fluid sizing, layout changes and media queries.

Beginners often think responsive design starts with many breakpoints. It starts earlier: readable HTML, flexible containers, images that can shrink and CSS that does not lock everything into fixed desktop widths.

A high-end page should not only look good at 1920px. It should still feel intentional on a laptop, tablet and phone.

viewport meta

Tells mobile browsers how to size the page.

fluid widths

Use max-width, min(), clamp() and percentages instead of fixed-only layouts.

media queries

Change layout at useful breakpoints.

responsive content

Images, text and buttons should fit without overlap.

Syntax and structure

Responsive pages need both HTML and CSS.

The viewport meta tag belongs in HTML. Fluid layout and media queries belong in CSS.

Responsive foundation

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

<section class="feature-grid">
  <article>HTML</article>
  <article>CSS</article>
  <article>JavaScript</article>
</section>

<style>
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  @media (max-width: 720px) {
    .feature-grid { grid-template-columns: 1fr; }
  }
</style>

Fixed desktop layout only

<div style="width: 1200px;">
  <img src="hero.jpg" width="1200">
  <p style="font-size: 48px;">This text will not fit on small screens.</p>
</div>

Rules that matter

CSS becomes powerful when it is written as a system.

Styling is not only making something look nice once. Good CSS stays readable, reusable and predictable while the project grows.

Set the viewport

Without viewport metadata, mobile browsers may render the page as a zoomed-out desktop layout.

Start fluid

Use max-width and flexible grids before adding many breakpoints.

Avoid fixed heights for text

Text can wrap, translate and grow. Let containers adapt.

Use clamp carefully

Fluid type is useful when it has sensible minimum and maximum sizes.

Test real sizes

Check common desktop, laptop, tablet and mobile widths.

Prevent overlap

Responsive design fails when text, buttons or images collide.

Production thinking

CSS affects trust, accessibility, performance and maintainability.

Why does this matter?

This matters because users do not visit from one perfect screen. Responsive CSS is the difference between a design that only looks good in your editor and a website that survives real life.

Accessibility

Responsive design helps zoom users and mobile users. Text should reflow without horizontal scrolling, and controls should remain usable by touch and keyboard.

Production note

Treat responsive checks as part of QA. A site is not finished because it looks good on the designer or developer screen.

SEO note

Mobile usability and performance matter for search quality. Responsive pages also reduce duplicate desktop/mobile URLs.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change the media query from 720px to 900px and run the preview.
Change the grid to two columns on wider screens.
Reduce the card padding on mobile without changing the HTML.

Practice assignment

Do this before moving to the next lesson.

Build one layout that works at desktop and mobile widths.
Use at least one fluid value such as min(), max-width or clamp().
Explain what changes in the media query and why that breakpoint exists.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.