Keep it close

Notes for the
next small problem.

Review a concept online or download a plain-text reference to keep nearby while you practise.

Study references

Open a note when you need a reset.

Use the topics below to jump to a compact example and a few reminders. Save your own expanded notes as you learn.

Reference 01

HTML essentials

Remember the roles of landmarks, headings, links, images, and forms.

What is included

Semantic structure, meaningful alternatives, form labels, and heading hierarchy.

Reference 02

CSS layout

Keep the box model, Flexbox, Grid, sizing, and responsive behaviour within reach.

What is included

Spacing, layout choice, mobile-first rules, and focus-friendly interaction states.

Reference 03

JavaScript patterns

Review values, conditions, functions, arrays, objects, and DOM events.

What is included

Readability habits, event listeners, small functions, and safe text updates.

Read online

Compact notes with real examples.

These are concise reminders, not replacements for deliberate practice and official documentation.

HTML: give the page a useful outline.

Use one clear h1 for the page topic, then organise supporting content with headings that do not skip levels. Navigation, main content, and the footer should be easy to identify.

<header>...</header>
<main>
  <h1>Project title</h1>
  <section aria-labelledby="features">
    <h2 id="features">Features</h2>
  </section>
</main>

CSS: choose a layout tool intentionally.

Use Flexbox for a one-dimensional row or column. Use Grid when you need control over both rows and columns. Keep spacing values consistent rather than adding one-off margins everywhere.

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

JavaScript: update text safely.

When you only need to show text from code, use textContent. It prevents a value from being interpreted as HTML.

const status = document.querySelector('[role="status"]');
status.textContent = 'Saved successfully.';

Take it with you

Download a plain-text reference.

Each link serves a real, locally stored text file that opens in a text editor or can be saved for offline study.

Plain text · HTML

HTML essentials

Semantic structure, accessible forms, headings, links, and images.

Download reference

Plain text · CSS

CSS layout

Box sizing, Flexbox, Grid, responsive sizing, and focus states.

Download reference

Plain text · JavaScript

JavaScript patterns

Readable functions, safe DOM updates, events, and async basics.

Download reference

Use the reference, then build something.

A small project is often the fastest way to find the question you need answered next.

View learning paths