Complete HTML & CSS Tutorial — Step-by-step

Introduction

Welcome to Programming World Prem — this step-by-step tutorial will take you from zero to a working responsive web page using HTML and CSS. No prior experience required. By the end you will understand semantic HTML, the CSS box model, layout with Flexbox and Grid, and how to make your site responsive.

This post is written so you can copy-paste the code directly into two files (index.html and styles.css) and publish to your site.

Prerequisites
Project structure
Create index.html (explain tags)
Create styles.css (base, typography, layout)
Key CSS concepts: box model, display, positioning
Layout: Flexbox and Grid examples
Responsive design (media queries + viewport)
Forms, images, and accessibility
Tips, debugging, and next steps
Full copy-ready example files

1) Prerequisites

A code editor (VS Code, Sublime, etc.)
A modern browser (Chrome, Firefox, Edge, Safari)
Basic familiarity with copying/pasting files

To preview locally: save files in one folder and open index.html in your browser (or use Live Server in VS Code for auto-refresh).

2) Project structure

my-site/

├─ index.html

└─ styles.css

That’s it for this tutorial — two files.

3) Create `index.html`

This is the skeleton of your page. Paste the following into index.html.

<!doctype html>

<htmllang="en">

<head>

<metacharset="utf-8" />

<metaname="viewport"content="width=device-width, initial-scale=1" />

<title>Programming World Prem — Learn HTML & CSS</title>

<metaname="description"content="A step-by-step HTML & CSS tutorial by Programming World Prem" />

<linkrel="stylesheet"href="styles.css">

<!-- Optional: Google Fonts -->

<linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin>

<linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"rel="stylesheet">

</head>

<body>

<headerclass="site-header">

<navclass="nav container">

<aclass="brand"href="#">Programming World Prem</a>

<ulclass="nav-links">

<li><ahref="#learn">Learn</a></li>

<li><ahref="#examples">Examples</a></li>

<li><ahref="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<sectionclass="hero container"id="learn">

<h1>Learn HTML & CSS — Step-by-step</h1>

<p>Build a responsive layout using semantic HTML and modern CSS (Flexbox & Grid).</p>

<aclass="btn"href="#examples">Start the demo</a>

</section>

<sectionid="examples"class="container cards">

<articleclass="card">

<h2>Responsive card</h2>

<p>Cards are perfect for content preview and summaries.</p>

</article>

<articleclass="card">

<h2>Another card</h2>

<p>Use semantic tags like &lt;article&gt; and &lt;section&gt; for clarity.</p>

</article>

</section>

<sectionclass="container"id="contact">

<h2>Contact</h2>

<formclass="contact-form">

<labelfor="name">Name</label>

<inputid="name"name="name"type="text"placeholder="Your name"required>

<labelfor="email">Email</label>

<inputid="email"name="email"type="email"placeholder="you@example.com"required>

<labelfor="message">Message</label>

<textareaid="message"name="message"rows="4"placeholder="Hi!"required></textarea>

<buttontype="submit"class="btn">Send</button>

</form>

</section>

</main>

<footerclass="site-footer container">

<p>© 2025 Programming World Prem — Built with HTML & CSS</p>

</footer>

</body>

</html>

Explanation (quick):

<!doctype html>: tells the browser to use modern HTML mode.
<meta charset>: defines character encoding.
<meta viewport>: essential for responsive sites on mobile.
<link rel="stylesheet">: attaches your CSS file.
Use semantic tags: <header>, <main>, <section>, <article>, <footer>.

4) Create `styles.css`

Paste the following into styles.css. This includes a small reset, variables, layout helpers, and styles for the demo components.

/* Reset & box-sizing */

* { box-sizing: border-box; }

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

vertical-align: baseline;

}

:root {

--bg: #f7f7fb;

--card: #ffffff;

--text: #22212b;

--muted: #66687a;

--accent: #6f8cff;

--radius: 12px;

--max-width: 1100px;

--gap: 1.25rem;

--container-pad: 1rem;

--ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;

}

html, body { height: 100%; }

body {

font-family: var(--ff);

background: var(--bg);

color: var(--text);

line-height: 1.6;

}

.container {

width: 100%;

max-width: var(--max-width);

margin: 0auto;

padding: 1remvar(--container-pad);

}

/* Header / Nav */

.site-header { background: transparent; padding: 1rem0; }

.nav { display: flex; align-items: center; justify-content: space-between; }

.brand { font-weight: 700; text-decoration: none; color: var(--text); }

.nav-links { list-style: none; display: flex; gap: 1rem; }

.nav-linksa { text-decoration: none; color: var(--muted); }

/* Hero */

.hero { padding: 3rem0; text-align: center; }

.heroh1 { font-size: 2.2rem; margin-bottom: .5rem; }

.herop { color: var(--muted); margin-bottom: 1rem; }

.btn { display: inline-block; padding: .6rem1rem; background: var(--accent); color: white; border-radius: 8px; text-decoration: none; }

/* Cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); margin: 2rem0; }

.card { background: var(--card); padding: 1rem; border-radius: var(--radius); box-shadow: 06px20pxrgba(31,34,42,0.06); }

.cardh2 { margin-bottom: .5rem; }

.cardp { color: var(--muted); }

Explanation (quick):

box-sizing: border-box makes width/padding easier to reason about.
CSS variables (--accent, --bg) keep the theme consistent and easy to change.
.container centers content and limits width.
.cards uses CSS Grid with auto-fit and minmax to create responsive columns.
Media queries adjust typography and layout on larger screens.

5) Key CSS concepts (short reference)

Box model: content + padding + border + margin. Use box-sizing: border-box to include padding in width calculations.
Display: block, inline, inline-block, flex, grid — controls how elements flow.
Positioning: static (default), relative, absolute, fixed, sticky.
Specificity & cascade: later rules override earlier ones when selectors have equal specificity. Use classes more than IDs for style reuse.

6) Layout — Flexbox & Grid examples

Flexbox (one-line nav)

.nav { display: flex; align-items: center; justify-content: space-between; }

.nav-links { display: flex; gap: 1rem; }

Flexbox is ideal for one-dimensional layouts (row or column).

CSS Grid (card layout)

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

Grid shines for two-dimensional layouts (rows + columns).

7) Responsive design

Always include <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>.
Use flexible units (%, rem, vh, vw, minmax) and auto-fit/auto-fill in Grid.
Use media queries for breakpoints:

@media (max-width: 600px) {

.hero { padding: 2rem1rem; }

.nav-links { display: none; }

}

Test on actual devices and browser dev tools (toggle device toolbar).

8) Forms, images, and accessibility

Use <label for="id"> with inputs for accessibility.
Add alt text to images: <img src="photo.jpg" alt="Descriptive text">.
Use semantic elements (<nav>, <main>, <header>, <footer>) for screen readers.
Ensure color contrast between text and background for readability.

9) Tips, debugging, and common mistakes

Inspect element: right-click → Inspect to see computed CSS and layout.
Common mistakes: forgetting viewport meta, not using box-sizing, overly-specific selectors.
Performance: keep CSS small, combine files for production, use preconnect/preload for fonts if needed.
Validation: use an HTML validator (e.g., W3C) to check markup.

10) Full copy-ready example files

Use these as the final files for quick posting.

index.html — (same as above)

styles.css — (same as above)

Complete HTML & CSS Tutorial — Step-by-step

Introduction

Table of contents

1) Prerequisites

2) Project structure

3) Create `index.html`

Explanation (quick):

4) Create `styles.css`

Explanation (quick):

5) Key CSS concepts (short reference)

6) Layout — Flexbox & Grid examples

Flexbox (one-line nav)

CSS Grid (card layout)

7) Responsive design

8) Forms, images, and accessibility

9) Tips, debugging, and common mistakes

10) Full copy-ready example files

Submit a Comment Cancel reply

Recent Posts

Recent Comments

Complete HTML & CSS Tutorial — Step-by-step

Introduction

Table of contents

1) Prerequisites

2) Project structure

3) Create index.html

Explanation (quick):

4) Create styles.css

Explanation (quick):

5) Key CSS concepts (short reference)

6) Layout — Flexbox & Grid examples

Flexbox (one-line nav)

CSS Grid (card layout)

7) Responsive design

8) Forms, images, and accessibility

9) Tips, debugging, and common mistakes

10) Full copy-ready example files

Submit a Comment Cancel reply

Recent Posts

Recent Comments

3) Create `index.html`

4) Create `styles.css`