HTML
Essential Tags
| Tag | Use |
|---|
| <h1>–<h6> | Headings — h1 is most important, one per page |
| <p> | Paragraph of text |
| <a href="..."> | Hyperlink — add target="_blank" for new tab |
| <img src="..." alt="..."> | Image — alt is required for accessibility |
| <ul> / <ol> / <li> | Unordered / ordered list / list item |
| <div> | Generic container — use only when no semantic tag fits |
| <span> | Inline container for styling a portion of text |
| <strong> / <em> | Bold / italic with semantic meaning |
| <br> | Line break (use sparingly — margin/padding is usually better) |
Semantic Layout Tags
<body>
<header> ... </header> <!-- page header / logo / nav -->
<nav> ... </nav> <!-- navigation links -->
<main> <!-- primary content (one per page) -->
<article> ... </article> <!-- self-contained content -->
<section> ... </section> <!-- thematic group -->
<aside> ... </aside> <!-- sidebar / related -->
</main>
<footer> ... </footer> <!-- page footer -->
</body>
Form Inputs
| type= | Use |
|---|
| text | Single-line text input |
| email | Email — validated by browser |
| password | Hidden text input |
| number | Numeric input with up/down arrows |
| checkbox | Boolean toggle |
| radio | Single choice from a group (same name) |
| submit | Submits the form |
CSS
Selector Reference
| Selector | Targets |
|---|
| p | All <p> elements |
| .card | Elements with class="card" |
| #header | Element with id="header" |
| a:hover | Links on hover |
| li:first-child | First <li> in its parent |
| .nav > a | Direct <a> children of .nav |
| h1, h2, h3 | Any of h1, h2, or h3 |
| input[type="text"] | Attribute selector |
Flexbox
/* Container */
.flex { display: flex; }
flex-direction: row | column | row-reverse | column-reverse
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
align-items: flex-start | flex-end | center | stretch | baseline
flex-wrap: nowrap | wrap | wrap-reverse
gap: 1rem /* space between items */
/* Item */
flex: 1 /* grow equally */
flex: 0 0 200px /* fixed 200px, no grow/shrink */
align-self: center /* override align-items for this item */
order: 2 /* visual order (default 0) */
Grid
/* Container */
.grid { display: grid; }
grid-template-columns: 200px 1fr 2fr /* fixed, flexible */
grid-template-columns: repeat(3, 1fr) /* 3 equal columns */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) /* responsive */
grid-template-rows: auto 1fr auto /* shrink, grow, shrink */
gap: 1rem /* both row and column gap */
/* Item spanning */
grid-column: 1 / 3 /* start at 1, end before 3 */
grid-column: span 2 /* span 2 columns from current position */
Common Values
| Property | Common values |
|---|
| position | static (default) | relative | absolute | fixed | sticky |
| display | block | inline | inline-block | flex | grid | none |
| overflow | visible | hidden | scroll | auto |
| cursor | pointer | default | not-allowed | text | grab |
| transition | all 0.2s ease | color 0.15s | transform 0.3s ease-in-out |
JavaScript
Variables & Types
const x = 5 // immutable binding (use by default)
let y = 5 // mutable binding
// var is legacy — don't use it
// Types: string, number, boolean, null, undefined, object, symbol
typeof 'hi' // "string"
typeof 42 // "number"
typeof null // "object" (historical bug — null is not an object)
Array.isArray([]) // true (use this, not typeof)
Array Methods
| Method | What it does |
|---|
| .map(fn) | Transform each item → new array (same length) |
| .filter(fn) | Keep items where fn returns true → new array |
| .reduce(fn, init) | Fold array into a single value (sum, group, flatten) |
| .find(fn) | First item where fn returns true (or undefined) |
| .some(fn) | true if any item passes fn |
| .every(fn) | true if all items pass fn |
| .includes(val) | true if val is in the array |
| .sort(fn) | Sort in-place — use (a,b) => a-b for numbers |
| .push / .pop | Add/remove from end |
| .slice(s, e) | Copy sub-array (non-mutating) |
| .flat(n) | Flatten nested arrays n levels deep |
DOM API
// Selecting
document.querySelector('.card') // first match
document.querySelectorAll('.card') // all matches (NodeList)
document.getElementById('hero') // by ID
// Reading / writing
el.textContent = 'text' // set text (safe, no HTML)
el.innerHTML = '<b>html</b>' // set HTML (careful with user input)
el.value // input field value
// Attributes
el.getAttribute('href')
el.setAttribute('href', '/new')
el.removeAttribute('disabled')
// Classes
el.classList.add('open')
el.classList.remove('open')
el.classList.toggle('open')
el.classList.contains('open') // → boolean
// Creating / inserting
const div = document.createElement('div')
div.textContent = 'Hello'
parent.appendChild(div)
// Events
el.addEventListener('click', handler)
// Common events: click, input, change, submit, keydown, mouseover, focus, blur
Async / Fetch
// async function always returns a Promise
async function getData(url) {
const res = await fetch(url); // waits for response headers
if (!res.ok) throw new Error(res.status);
return res.json(); // waits for body
}
// Promise.all — run fetches in parallel
const [users, posts] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
]);
// localStorage — persists across page reloads
localStorage.setItem('key', JSON.stringify(value));
const val = JSON.parse(localStorage.getItem('key'));
Gotchas & Tips
- == vs === — always use
===; == does type coercion with surprising results
- Truthy/falsy —
0, "", null, undefined, NaN are falsy; everything else is truthy
- Array.sort — default sort is alphabetical. Use
.sort((a,b) => a-b) for numbers
- async without await — if you forget
await, you get a Promise object, not the value
- Event delegation — add one listener to the parent and use
event.target instead of listeners on each child
- innerHTML XSS — never set
innerHTML to user-provided text; use textContent instead