HTML & CSS Notes for Beginners

01

How a web page is built

Three languages, three jobs — do not mix them up

Every website you have used is built from the same three layers, each responsible for exactly one thing.

HTMLStructureheadings, paragraphs, images, links

CSSStylecolours, spacing, fonts, layout

JSBehaviourclicks, sliders, live search

What you need

1
A code editor — VS Code is free and is what professionals use.
2
A browser, which is also your preview window. Press F12 to open the developer tools.
3
Two files to start: index.html for structure and style.css for design.
4
Install the Live Server extension so the page refreshes by itself each time you save.

HTML index.html — the smallest real page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, Study Hub!</h1>
  <p>This is my first paragraph.</p>
</body>
</html>

02

Page structure & the tags you need

Head holds information, body holds what people see

Tag	What it means	Use it for
`<head>`	Page information	Title, styles, meta tags — not shown on the page
`<body>`	Visible content	Everything the visitor sees
`<header>`	Top area	Logo, navigation
`<nav>`	Navigation block	Your menu of links
`<main>`	The main content	One per page
`<section>`	A themed group	Hero, features, contact
`<article>`	Self-contained content	A blog post, a card
`<footer>`	Bottom area	Copyright, small links

HTML index.html

<body>
  <header>
    <h1>Study Hub</h1>
    <nav>
      <a href="#notes">Notes</a>
      <a href="#tests">Mock Tests</a>
    </nav>
  </header>

  <main>
    <section id="notes">
      <h2>Premium Materials</h2>
      <p>Hand-picked notes for every subject.</p>
    </section>

    <section id="tests">
      <h2>Practice Tests</h2>
      <p>Real exam questions, timed.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Study Hub</p>
  </footer>
</body>

03

Text, links & images

The three things on almost every page

HTML content.html

<!-- headings: one h1 per page, then h2 for sections -->
<h1>Main title</h1>
<h2>Section title</h2>
<h3>Sub-section</h3>

<!-- text -->
<p>A paragraph of normal text.</p>
<p>You can make text <strong>bold</strong> or <em>italic</em>.</p>
<br>                       <!-- line break -->
<hr>                       <!-- horizontal divider line -->

<!-- links -->
<a href="index.html">Go home</a>
<a href="https://google.com" target="_blank" rel="noopener">Open Google</a>
<a href="#notes">Jump to the notes section</a>
<a href="mailto:help@study.com">Email us</a>

<!-- images -->
<img src="PICS/study-bears.png"
     alt="A bear reading a book"
     width="300" height="200"
     loading="lazy">

<!-- an image that is also a link -->
<a href="index.html">
  <img src="logo.png" alt="Study Hub home">
</a>

<!-- special characters are written as entities -->
<p>&copy; 2026 &middot; 100&percnt; free</p>

1
alt is not optional. It is what a screen reader reads aloud, and what appears if the image fails to load.
2
<img> and <br> are void elements — they have no closing tag. Adding </img> is wrong.
3
Add width and height (or a CSS aspect-ratio) to every image so the page does not jump while loading.
4
Use loading="lazy" on images further down the page — the browser loads them only when needed.

04

Lists, tables & forms

Grouping information, and collecting it from visitors

HTML lists.html

<!-- bullet points -->
<ul>
  <li>Premium Notes</li>
  <li>Handwritten Sheets</li>
</ul>

<!-- numbered -->
<ol>
  <li>Pick a subject</li>
  <li>Practise daily</li>
</ol>

<!-- a simple table -->
<table>
  <thead>
    <tr><th>Subject</th><th>Marks</th></tr>
  </thead>
  <tbody>
    <tr><td>Maths</td><td>78</td></tr>
    <tr><td>Science</td><td>91</td></tr>
  </tbody>
</table>

HTML forms.html

<form action="/api/contact" method="post">

  <!-- labels are linked with for + id: tapping the text focuses the box -->
  <label for="name">Student name</label>
  <input id="name" name="name" type="text" placeholder="Ayush" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="marks">Marks (0-100)</label>
  <input id="marks" name="marks" type="number" min="0" max="100">

  <label for="cls">Class</label>
  <select id="cls" name="class">
    <option value="10">Class 10</option>
    <option value="12">Class 12</option>
  </select>

  <label>
    <input type="checkbox" name="agree"> I agree to the terms
  </label>

  <label for="msg">Message</label>
  <textarea id="msg" name="message" rows="4"></textarea>

  <button type="submit">Send</button>
</form>

05

CSS basics

Selectors, the box model, and why nothing lines up yet

CSS is a list of rules. Each rule picks elements with a selector and then sets properties on them.

Selector	Picks	Example
`p`	Every paragraph	element selector
`.card`	Every element with `class="card"`	reusable — use this most
`#hero`	The one element with `id="hero"`	unique per page
`a:hover`	A link while the mouse is over it	state selector
`nav a`	Links inside a `<nav>`	descendant
`*`	Everything	rarely needed

CSS style.css

/* a rule: selector { property: value; } */
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #f8fafc;
  line-height: 1.6;
}

/* classes are reusable - the workhorse of CSS */
.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* hover state for interactivity */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transition: all 0.2s ease;
}

/* colours, gradients and text */
.badge {
  display: inline-block;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

The box model — every element is a box

contentthe text or imagewidth & height

paddingspace insidebetween content and border

borderthe edge linewidth, style, colour

marginspace outsidepushes neighbours away

CSS box.css

* { box-sizing: border-box; }   /* always start with this */

.box {
  width: 300px;          /* content */
  padding: 20px;         /* space inside */
  border: 2px solid #2563eb;
  margin: 24px auto;     /* outer space - auto centres it */
  border-radius: 12px;
}

/* spacing shortcuts */
.a { padding: 12px 24px; }          /* vertical horizontal */
.b { margin: 8px 0 16px 0; }        /* top right bottom left */
.c { padding-top: 10px; padding-left: 6px; }

06

Flexbox & Grid

Two systems that solved layout forever

Flexbox arranges items in one direction — a row or a column. Grid builds a proper two-dimensional layout with rows and columns. Between them they replace every old float-and-clear hack.

CSS flex.css

/* a navigation bar: logo left, links right */
.navbar {
  display: flex;
  align-items: center;          /* vertical centring */
  justify-content: space-between; /* horizontal split */
  gap: 16px;                    /* space between items */
  padding: 12px 20px;
}

/* cards that wrap onto the next line on small screens */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card-row > .card {
  flex: 1 1 260px;              /* grow | shrink | ideal width */
}

/* perfectly centred content in the middle of a section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

CSS grid.css

/* a responsive card grid with NO media queries */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* a fixed two-column page layout */
.page {
  display: grid;
  grid-template-columns: 260px 1fr;   /* sidebar + content */
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  gap: 20px;
}

.page > .sidebar { grid-area: sidebar; }
.page > .header  { grid-area: header;  }
.page > .main    { grid-area: main;    }

/* centre one thing on screen - the shortest way */
.center { display: grid; place-items: center; }

1
gap is the modern way to space flex and grid items. Do not add margins to every child.
2
justify-content works along the main axis, align-items across it. In a row, justify is horizontal; add flex-direction: column and they swap.
3
repeat(auto-fit, minmax(260px, 1fr)) is the single most useful line of CSS on this page — it makes a grid that reshapes itself for any screen size.
4
place-items: center centres in both directions in one line, and it is the fastest way to centre anything.

07

Responsive design

Most of your visitors are on a phone — build for that first

CSS responsive.css

/* 1. fluid by default - never a fixed width on a main container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;          /* always a little breathing room */
}

/* 2. images never overflow their box */
img { max-width: 100%; height: auto; display: block; }

/* 3. responsive text with clamp(min, preferred, max) */
h1 { font-size: clamp(1.8rem, 6vw, 3.5rem); }

/* 4. media queries: extra rules for small screens
      write desktop first, then adjust downward */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }
  .page > .sidebar { display: none; }
}

@media (max-width: 600px) {
  .navbar { flex-direction: column; align-items: flex-start; }
  .card-row > .card { flex: 1 1 100%; }
}

/* 5. respect the visitor's motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Test on a real size

1
Open DevTools (F12), press Ctrl+Shift+M and pick a phone. Resize slowly and watch for layout breaks.
2
Horizontal scrolling is the number one mobile bug. Fix it with max-width: 100% on media, overflow-wrap: break-word on long text, and no fixed pixel widths wider than the screen.
3
Body text should be at least 16px, and anything tappable at least 44×44 pixels. Small targets are the most common accessibility failure.

08

Mistakes & how to fix them

Almost every beginner bug is on this list

What you see	Usually caused by	The fix
Nothing has any style	The `<link>` to your CSS is wrong	Open the Network tab — a 404 means the path is wrong
Page scrolls sideways	A fixed width, or a wide image/table	`max-width: 100%`; check with `outline: 1px solid red;`
Margins collapse oddly	Vertical margins of parent and child overlap	Use `padding`, or a flex/grid parent
Background colour cut off	Parent has no height because children float	Use flexbox or grid instead of float
CSS rule does nothing	Lower specificity, or a stray typo	Check spelling; avoid `!important`; inspect in DevTools
Text cannot wrap	A long word or URL	`overflow-wrap: break-word;`
Image is squashed	Forced width and height	Set one dimension and `height: auto`
Layout jumps while loading	Images without dimensions	Add `width`/`height` or an aspect ratio

How to debug any layout problem in 60 seconds

1
Right-click the misbehaving element → Inspect. You now see its exact box, padding and margin in colour.
2
Edit the CSS live in the Styles panel. Nothing is saved, so experiment freely and copy out what works.
3
Temporarily add outline: 1px solid red; to see the real size of a box. Outline never shifts the layout, unlike border.
4
Press Ctrl+F in the Console and search your class name — it tells you if the element exists at all.

09

HTML & CSS cheat sheet

Keep this open while you practise

Do this	Write this	Notes
Start a page	`<!DOCTYPE html>`	Always the first line
Language	`<html lang="en">`	Helps screen readers
Page title	`<title>…</title>`	Shown in the browser tab
Mobile ready	`<meta name="viewport" …>`	Never remove it
Link CSS	`<link rel="stylesheet" href="style.css">`	Inside `<head>`
Heading	`<h1>` … `<h6>`	One `h1` per page
Paragraph	`<p>text</p>`	Blocks of text
Link	`<a href="…">text</a>`	New tab: `target="_blank" rel="noopener"`
Image	`<img src="…" alt="…">`	Alt text is required
Bullet list	`<ul><li>…</li></ul>`	Numbered: `<ol>`
Divider	`<hr>`	Void element
Group for styling	`<div class="card">`	Only when no tag fits
Style an element	`class="name"`	Reusable — prefer over `id`
Reset box model	`* { box-sizing: border-box; }`	Put it first
Text	`font-size: 1rem; line-height: 1.6;`	Readable defaults
Colour	`color: #0f172a;`	Text colour (US spelling)
Background	`background: #f8fafc;`	Not `color`
Round corners	`border-radius: 14px;`	Pill shape: `999px`
Shadow	`box-shadow: 0 4px 14px rgba(0,0,0,.08);`	x y blur colour
Space inside	`padding: 20px;`	Between content and border
Space outside	`margin: 20px auto;`	`auto` centres a fixed-width block
Row layout	`display: flex; gap: 16px;`	Add `flex-wrap: wrap`
Centre anything	`display: grid; place-items: center;`	Both directions
Responsive grid	`repeat(auto-fit, minmax(260px, 1fr))`	No media queries needed
Fluid text	`clamp(1.8rem, 6vw, 3.5rem)`	Scales with the screen
Small screens	`@media (max-width: 600px) { }`	Tablet: 900px
Smooth hover	`transition: all .2s ease;`	Add to the base rule

Practice project: a study-hub card

HTML card.html

<section class="grid">
  <article class="card">
    <span class="badge">Class 10</span>
    <h2>Premium Materials</h2>
    <p>Hand-picked notes for every subject, updated for 2026.</p>
    <a class="btn" href="index.materials.html">Browse notes</a>
  </article>

  <article class="card">
    <span class="badge">Practice</span>
    <h2>Mock Tests</h2>
    <p>Real exam questions with instant scoring.</p>
    <a class="btn" href="index.mock-tests.html">Start a test</a>
  </article>
</section>

CSS card.css

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f8fafc;
  color: #0f172a;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
}

.card h2 { margin: 0; font-size: 1.25rem; }
.card p  { margin: 0; color: #475569; line-height: 1.6; }

.badge {
  align-self: flex-start;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.btn {
  margin-top: auto;
  align-self: flex-start;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
}

.btn:hover { background: #1e293b; }

How a web page is built

What you need

Page structure & the tags you need

Text, links & images

Lists, tables & forms

CSS basics

The box model — every element is a box

Flexbox & Grid

Responsive design

Test on a real size

Mistakes & how to fix them

How to debug any layout problem in 60 seconds

HTML & CSS cheat sheet

Practice project: a study-hub card

Test yourself

Q1 Which part of a page is visible to the visitor?

Q2 Which selector targets every element with `class="card"`?

Q3 What prevents a fixed-width box from growing wider than you asked?

Q4 Which line creates a responsive grid without any media queries?

Continue with another language

HTML & CSS notes for beginners

What you need

The box model — every element is a box

Test on a real size

How to debug any layout problem in 60 seconds

Practice project: a study-hub card

Test yourself

Q1 Which part of a page is visible to the visitor?

Q2 Which selector targets every element with class="card"?

Q3 What prevents a fixed-width box from growing wider than you asked?

Q4 Which line creates a responsive grid without any media queries?

Continue with another language

Q2 Which selector targets every element with `class="card"`?