HTML Forms

Forms collect user input. The <form> element wraps controls, action and method define where and how data is sent (GET or POST).

Input types

type="text", email, tel, number, date, checkbox, radio, file, and submit are common. Use <label for="id"> tied to input id for accessibility.

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Send</button>
</form>

HTML5 semantics

HTML5 introduces elements that describe meaning: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. They help screen readers and SEO without changing default styling much.

When to use section vs article

Use article for self-contained content (a blog post, a card). Use section for thematic grouping inside a document. A page can have multiple articles; each article can contain sections.

CSS Tutorial

CSS (Cascading Style Sheets) sets presentation: colours, layout, typography, and animations. Rules apply selectors to declaration blocks.

Selectors

Element (p), class (.btn), ID (#app), attribute ([type="checkbox"]), and combinators (nav a, .card > h2) target nodes in the DOM.

Box model

Every box has content, padding, border, and margin. box-sizing: border-box is widely used so width includes padding and border.

CSS Flexbox

Flexbox lays out one-dimensional rows or columns. Set display: flex on a container, then use justify-content and align-items to distribute space.

.row { display: flex; flex-wrap: wrap; gap: 12px; }
.item { flex: 1 1 200px; }

CSS Grid

Grid is for two-dimensional layouts. Define tracks with grid-template-columns and place items with grid-column / grid-row or named areas.

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

JavaScript Tutorial

JavaScript runs in the browser and on Node.js. It is dynamically typed, supports first-class functions, and uses prototypes (or classes) for object-oriented patterns.

Variables

let and const are block-scoped; prefer const unless reassignment is needed. var is function-scoped and largely obsolete in new code.

DOM

document.querySelector returns the first match; querySelectorAll returns a static NodeList. Listen for events with addEventListener.

JSON

JSON (JavaScript Object Notation) is a text format for data exchange. In JS, JSON.parse(str) parses a string; JSON.stringify(obj) serialises an object.

const data = JSON.parse('{"ok":true,"x":42}');
console.log(data.x);

Fetch & AJAX

The Fetch API returns Promises. Use async/await or .then() to handle responses. Check response.ok before parsing JSON.

async function load() {
  const r = await fetch('/api/data');
  if (!r.ok) throw new Error(r.status);
  return r.json();
}

SQL Tutorial

SQL queries relational databases. SELECT reads rows; INSERT, UPDATE, DELETE change data. Use WHERE to filter and JOIN to combine tables.

SELECT u.name, COUNT(o.id) AS orders
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
GROUP BY u.id;

Node.js intro

Node.js runs JavaScript on the server with the V8 engine. It uses a non-blocking event loop and npm for packages. Common patterns: HTTP servers with http or frameworks like Express; fs for files; path for paths.

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('OK');
}).listen(3000);