Scribd
Upload
0 views18 pages

HTML CSS JS Complete Summary Guide

The document is a comprehensive guide covering HTML, CSS, and JavaScript, structured into sections that range from web basics to advanced concepts. It includes detailed explanations of web technologies, essential tags, best practices, and responsive design techniques. The guide serves as a resource for beginners to experts, providing quick references and essential information for web development.

Uploaded by

denniskpe0dk0
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views18 pages

HTML CSS JS Complete Summary Guide

The document is a comprehensive guide covering HTML, CSS, and JavaScript, structured into sections that range from web basics to advanced concepts. It includes detailed explanations of web technologies, essential tags, best practices, and responsive design techniques. The guide serves as a resource for beginners to experts, providing quick references and essential information for web development.

Uploaded by

denniskpe0dk0
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML, CSS & JavaScript — Complete Summary Guide Page 1

HTML, CSS & JavaScript

Complete Summary Guide


Beginner → Expert

7 Sections · Tags · Properties · Methods · Patterns · Projects · Career

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 2

SECTION 1 — WEB BASICS

How the Web Works


• DNS – Translates domain → IP address
• HTTP/HTTPS – Protocol for client–server communication; HTTPS = encrypted via TLS
• Request/Response – Browser sends GET/POST → Server returns HTML/CSS/JS/data
• IP → TCP → HTTP → HTML – Data packets travel, TCP ensures delivery, HTTP carries content

Browser Rendering Pipeline


• 1. Parse HTML → build DOM tree
• 2. Parse CSS → build CSSOM
• 3. Render Tree = DOM + CSSOM
• 4. Layout – calculate element positions/sizes
• 5. Paint – fill pixels
• 6. Composite – layer rendering (GPU)
• Reflow = layout recalc (expensive) | Repaint = visual change only (cheaper)

Frontend vs Backend
Aspect Frontend Backend

Language HTML, CSS, JavaScript Python, Node, PHP, Go, Java…

Runs on Browser (client) Server

Handles UI, UX, interactivity Logic, DB, auth, APIs

Storage LocalStorage, Cookies Databases (SQL, NoSQL)

Frameworks React, Vue, Angular Express, Django, Laravel

Deployment Overview
• Static sites: Netlify, Vercel, GitHub Pages (HTML/CSS/JS only)
• Full-stack: Render, Railway, Heroku, AWS, DigitalOcean
• CDN: Cloudflare, AWS CloudFront — caches assets globally
• CI/CD: GitHub Actions, GitLab CI — auto build & deploy on push

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 3

SECTION 2 — HTML COMPLETE SUMMARY

Document Structure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="[Link]"> </head> <body> <!-- content
--> <script src="[Link]"></script> </body> </html>

Essential HTML Tags — Quick Reference


Tag Purpose Example

<!DOCTYPE html> Declares HTML5 document Always first line

<html lang=""> Root element + language lang="en"

<head> Metadata container Not visible

<meta> Page metadata charset, viewport, description

<title> Browser tab title <title>My Site</title>

<link> Link external resources CSS stylesheets

<script> Embed/link JavaScript defer, async attrs

<h1>–<h6> Headings (h1=most important) One h1 per page

<p> Paragraph Block-level text

<a href=""> Hyperlink target="_blank" for new tab

<img src="" alt=""> Image alt required for accessibility

<ul> / <ol> Unordered/Ordered list <li> children

<table> Data table thead, tbody, tfoot

<tr> Table row Inside table

<th> Table header cell scope="col/row"

<td> Table data cell colspan, rowspan

<form> Form container action, method

<input> Input field type, name, required

<label> Input label for= matches input id

<button> Clickable button type="submit/button/reset"

<select> Dropdown <option> children

<textarea> Multi-line text input rows, cols

<div> Generic block container Layout/grouping

<span> Generic inline container Styling text

<header> Page/section header Semantic

<nav> Navigation links Semantic

<main> Main content One per page

<article> Self-contained content Blog posts, news

<section> Thematic grouping With heading

<aside> Sidebar/tangential Complementary content

<footer> Page/section footer Semantic

<figure>/<figcaption> Image with caption Semantic media

<video> Embed video controls, autoplay, muted

<audio> Embed audio controls, src

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 4

Tag Purpose Example

<iframe> Embed external content src, sandbox

<canvas> Drawing surface Via JS API

<svg> Inline SVG vector Scalable graphics

<details>/<summary> Expandable disclosure Native accordion

<dialog> Native modal open attr + JS showModal()

<template> Inert HTML fragment Used by JS

<picture> Responsive images source + img fallback

<br> Line break Inline

<hr> Horizontal rule Thematic break

<strong> Bold + semantic importance Screen readers

<em> Italic + semantic emphasis

<code> Inline code Monospace

<pre> Preformatted text Preserves whitespace

<blockquote> Block quotation cite attr

<abbr> Abbreviation title attr = full form

<time> Date/time datetime attr

<mark> Highlighted text

<data> Machine-readable val value attr

Input Types
Type Use

text Plain text

password Masked text

email Email (validated)

number Numeric

tel Telephone

url URL (validated)

date/time Date & time pickers

checkbox Boolean toggle

radio One-of-many select

file File upload

range Slider

color Color picker

hidden Hidden data

search Search field

submit Submit form

Semantic Tags — Why They Matter


• Improves SEO — search engines understand content structure
• Improves Accessibility — screen readers use landmarks
• Improves Maintainability — code is self-documenting
• Use header/main/footer/nav/article/section/aside instead of divs

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 5

Meta Tags & SEO Essentials


<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
name="description" content="Page description (150–160 chars)"> <meta name="keywords" content="html, css, js"> <!--
minimal impact now --> <meta property="og:title" content="Title"> <!-- Open Graph --> <meta property="og:image"
content="[Link]"> <link rel="canonical" href="[Link]

• One <h1> per page — main keyword


• Descriptive alt on every image
• Meaningful <title> — 50–60 chars
• Structured data (JSON-LD) for rich results

Global Attributes
Attribute Purpose

id Unique identifier

class CSS/JS selector

style Inline CSS

title Tooltip text

data-* Custom data attributes

hidden Hides element

tabindex Keyboard focus order

contenteditable Editable content

draggable Drag & drop

aria-* Accessibility roles/states

lang Language override

translate Translation hint

Accessibility (a11y) Essentials


• alt on all images; empty alt="" for decorative images
• label for= every input, or aria-label
• Use semantic HTML first; ARIA only when needed
• role attribute when semantics are unclear
• tabindex="0" for keyboard-accessible custom controls
• Sufficient color contrast (WCAG AA: 4.5:1 for text)
• Skip navigation link: <a href="#main">Skip to content</a>

HTML Best Practices


• Always declare DOCTYPE and lang
• Close all tags; self-close void elements: <img /> <br />
• Use lowercase tag and attribute names
• Quote all attribute values
• Place <script> at end of body or use defer
• Validate HTML at [Link]

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 6

SECTION 3 — CSS COMPLETE SUMMARY

Selectors
Selector Example What it targets

Element p {} All <p> elements

Class .card {} class="card"

ID #nav {} id="nav" (unique)

Universal * {} Everything

Descendant .nav a {} <a> inside .nav

Child .nav > a {} Direct <a> child of .nav

Adjacent sibling h2 + p {} <p> right after h2

General sibling h2 ~ p {} All <p> after h2

Attribute input[type="text"] Attribute match

Pseudo-class a:hover, li:nth-child(2) State/position

Pseudo-element p::before, p::after Generated content

Not :not(.active) Excludes selector

Has div:has(img) Parent has child

Is / Where :is(h1,h2,h3) {} Group selectors

Box Model
• content → padding → border → margin
• box-sizing: border-box — width includes padding + border (use always)
• margin: auto — centers block elements horizontally
/* Reset */ *, *::before, *::after { box-sizing: border-box; } /* Shorthand: top right bottom left */ padding:
10px 20px 10px 20px; margin: 0 auto; /* center */

Colors & Typography


Property Values Notes

color #hex, rgb(), hsl(), named Text color

background-color same as color Element background

opacity 0–1 Affects entire element

font-family Arial, sans-serif Fallback stack

font-size px, rem, em, % rem relative to root

font-weight 100–900, bold

line-height 1.5, px, em 1.5 recommended

letter-spacing px, em Tracking

text-align left, center, right, justify

text-decoration none, underline, line-through

text-transform uppercase, lowercase, capitalize

@font-face src: url() Custom fonts

Flexbox — Complete
.container { display: flex; flex-direction: row | column | row-reverse | column-reverse; flex-wrap: nowrap | wrap
| wrap-reverse; justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 7

align-items: stretch | flex-start | flex-end | center | baseline; align-content: same as justify-content


(multi-line); gap: 16px; /* row-gap column-gap */ } .item { flex: 1; /* shorthand for grow shrink basis */
flex-grow: 1; /* how much to grow */ flex-shrink: 0; /* prevent shrinking */ flex-basis: 200px; align-self:
center; /* override align-items */ order: 2; }

CSS Grid — Complete


.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 16px;
grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .item { grid-column: 1 /
3; /* span cols 1-2 */ grid-row: 1 / 2; grid-area: header; /* named area */ } /* Useful patterns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive */

Positioning
Value Behavior

static Default. Normal flow. top/left/etc. have no effect

relative Normal flow. Offset from itself. Creates stacking context

absolute Removed from flow. Positioned to nearest non-static ancestor

fixed Removed from flow. Positioned to viewport

sticky Hybrid: relative until scroll threshold, then fixed

• z-index controls stacking order (higher = on top); only works on positioned elements

Responsive Design & Media Queries


/* Mobile-first approach — base styles for mobile, then scale up */ /* Breakpoints (common) */ @media (min-width:
640px) { /* sm */ } @media (min-width: 768px) { /* md */ } @media (min-width: 1024px) { /* lg */ } @media
(min-width: 1280px) { /* xl */ } /* Other queries */ @media (prefers-color-scheme: dark) { /* dark mode */ }
@media (prefers-reduced-motion: reduce) { /* reduce animation */ } @media print { /* print styles */ } /* Fluid
typography */ font-size: clamp(1rem, 2.5vw, 2rem);

CSS Variables (Custom Properties)


:root { --color-primary: #0f3460; --spacing-lg: 2rem; --font-main: "Inter", sans-serif; } .card { background:
var(--color-primary); padding: var(--spacing-lg); /* Fallback: */ color: var(--text, #333); }

Animations & Transitions


/* Transitions */ .btn { transition: background 0.3s ease, transform 0.2s; } .btn:hover { transform:
translateY(-2px); } /* Keyframe Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } } .card { animation: fadeIn 0.4s ease forwards; } /* Properties */
animation-delay: 0.2s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode:
forwards; /* keeps end state */

CSS Properties — Common Reference


Property Values/Example Notes

display block | inline | flex | grid | none Layout mode

visibility visible | hidden hidden keeps space

width / height px, %, vw/vh, auto, min/max-content

min/max-width px, %, none Responsive constraint

overflow visible | hidden | scroll | auto Content overflow

border 1px solid #ccc width style color

border-radius 4px, 50% Circle with 50%

box-shadow 2px 4px 8px rgba(0,0,0,.1) inset optional

cursor pointer, default, not-allowed, grab

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 8

Property Values/Example Notes

object-fit cover | contain | fill For img/video

aspect-ratio 16/9, 1 Maintain ratio

clip-path circle(), polygon() Shape masking

filter blur(4px), brightness(0.8) Visual effects

backdrop-filter blur(10px) Frosted glass

transform translate, rotate, scale, skew GPU accelerated

will-change transform, opacity Performance hint

scroll-behavior smooth Native smooth scroll

list-style none, disc, decimal List markers

white-space nowrap, pre-wrap Text wrapping

word-break break-word, break-all Long word wrapping

pointer-events none | auto Click pass-through

user-select none | text | all Text selection

resize none | vertical | both Textarea resize

outline offset, color Focus indicator

CSS Architecture — BEM


• Block — standalone component: .card
• Element — part of block: .card__title, .card__image
• Modifier — variation: .card--featured, .btn--large
/* BEM example */ .button {} /* Block */ .button__icon {} /* Element */ .button--primary {} /* Modifier */
.button--large {} /* Modifier */

Performance Tips
• Minimize reflows: avoid reading layout props after writes (e.g., offsetHeight)
• Use transform/opacity for animation — GPU composited
• Use will-change sparingly (memory cost)
• Lazy-load non-critical CSS with media attribute
• Remove unused CSS — use PurgeCSS or CSS Modules
• Prefer logical properties: margin-inline, padding-block (i18n-friendly)

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 9

SECTION 4 — JAVASCRIPT COMPLETE SUMMARY

Variables & Data Types


// Declarations var x = 1; // function-scoped, hoisted, avoid let y = 2; // block-scoped, reassignable const z =
3; // block-scoped, no reassignment // Data Types // Primitives let str = "hello"; // String let num = 42; //
Number (int + float) let big = 9007199254740991n;// BigInt let bool = true; // Boolean let undef; // undefined let
nul = null; // null (object type – quirk) let sym = Symbol("id"); // Symbol (unique) // Reference let obj = { key:
"value" }; // Object let arr = [1, 2, 3]; // Array let fn = () => {}; // Function typeof "hi" // "string"
[Link](arr) // true

Operators
Type Operators

Arithmetic + - * / % ** (exponent)

Assignment = += -= *= /= %= **= ??=

Comparison == != === !== < > <= >=

Logical && || ! ?? (nullish coalescing)

Bitwise & | ^ ~ << >> >>>

Ternary condition ? ifTrue : ifFalse

Optional chain obj?.prop, fn?.()

Spread ...arr, ...obj

Rest function fn(...args)

Destructure const {a,b} = obj; const [x,y] = arr

typeof typeof value → string

instanceof obj instanceof Class

in "key" in obj → boolean

Control Flow
// if / else if / else if (x > 0) { } else if (x < 0) { } else { } // switch switch(day) { case "Mon": break;
default: break; } // Ternary const label = score >= 50 ? "Pass" : "Fail"; // Nullish const val = input ??
"default"; // if input is null/undefined // Logical OR assignment [Link] ||= 5000; [Link] ??=
"guest";

Loops
for (let i = 0; i < 10; i++) {} while (condition) {} do { } while (condition); for (const item of array) {} //
iterables for (const key in object) {} // own + inherited keys [Link]((item, i) => {}); // array method
break; // exit loop continue; // skip iteration

Functions
// Declaration (hoisted) function add(a, b) { return a + b; } // Expression const add = function(a, b) { return a
+ b; }; // Arrow (no own this) const add = (a, b) => a + b; // Default params function greet(name = "World") {
return `Hello ${name}`; } // Rest params function sum(...nums) { return [Link]((a,b) => a+b, 0); } //
Immediately Invoked (function() { /* runs immediately */ })(); // Higher order const double = x => x * 2;
[1,2,3].map(double); // [2,4,6]

Arrays — Methods
Method Returns Use

push(x) new length Add to end

pop() removed element Remove from end

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 10

Method Returns Use

shift() removed element Remove from start

unshift(x) new length Add to start

splice(i,n,x) removed items Insert/remove at index

slice(start,end) new array Shallow copy portion

concat(arr) new array Merge arrays

indexOf(x) index or -1 Find index

includes(x) boolean Check existence

find(fn) element or undefined First match

findIndex(fn) index or -1 Index of first match

filter(fn) new array Keep matching items

map(fn) new array Transform each item

reduce(fn, init) single value Accumulate

some(fn) boolean Any match?

every(fn) boolean All match?

flat(depth) new array Flatten nested

flatMap(fn) new array Map then flat(1)

sort(fn) mutated array Sort (mutates!)

reverse() mutated array Reverse (mutates!)

join(sep) string Array to string

[Link](x) new array Iterable to array

[Link](1,2,3) new array Create from args

Objects
const person = { name: "Alice", age: 30, greet() { return `Hi, I am ${[Link]}`; } }; // Access [Link]; //
dot notation person["age"]; // bracket notation // Destructuring const { name, age = 25 } = person; // Spread /
merge const updated = { ...person, age: 31 }; // Object methods [Link](obj); // [keys] [Link](obj); //
[values] [Link](obj); // [[k,v]...] [Link]({}, obj); // shallow clone [Link](obj); //
immutable [Link](entries); // entries to obj // Optional chaining user?.address?.city ?? "Unknown";

DOM Manipulation
// Select [Link]("id"); [Link](".class"); // first match
[Link]("[Link]"); // NodeList // Modify content [Link] = "Hello"; // safe (no XSS)
[Link] = "<b>Hi</b>"; // parses HTML (XSS risk!) // Attributes [Link]("data-id", 123);
[Link]("data-id"); [Link]("disabled"); // Classes [Link]("active");
[Link]("hidden"); [Link]("open"); [Link]("active"); // Styles
[Link] = "red"; [Link]("--color", "blue"); // CSS var // Create/Insert/Remove const div =
[Link]("div"); [Link](div); [Link](div, ref); [Link](new,
old); [Link](); // Modern insertion [Link](el); [Link](el); [Link](sibling);
[Link](sibling); [Link]("beforeend", "<p>Hi</p>");

Events
// Add event [Link]("click", handler); [Link]("click", handler, { once: true, passive:
true }); // Remove event [Link]("click", handler); // Event object [Link]("click",
(e) => { [Link](); // stop default (e.g. form submit) [Link](); // stop bubbling
[Link]([Link], [Link]); }); // Event delegation
[Link]("ul").addEventListener("click", (e) => { if ([Link]("li")) { /* handle */ } });
// Common events click, dblclick, mouseenter/leave, mouseover/out keydown, keyup, keypress input, change, submit,
focus, blur scroll, resize, load, DOMContentLoaded touchstart, touchend, touchmove dragstart, dragover, drop

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 11

ES6+ Features Summary


Feature Syntax / Example

let / const Block-scoped variables

Arrow functions const fn = (x) => x * 2

Template literals `Hello ${name}`

Destructuring const {a} = obj; const [x] = arr

Default params function fn(x = 0)

Rest / Spread fn(...args) / [...arr] / {...obj}

Classes class Animal { constructor() {} }

Modules import/export (see below)

Promises new Promise((res,rej) => {})

async/await async function fn() { await p; }

Symbol Symbol("desc")

Map new Map(); .set(k,v) .get(k)

Set new Set([1,2,3]) — unique values

WeakMap/WeakSet Garbage-collectable keys

Optional chaining obj?.prop?.nested

Nullish coalescing x ?? "default"

Logical assignment x ??= 0; x ||= 1; x &&= fn()

Array methods find, findIndex, flat, flatMap, at()

[Link]/fromEntries Convert obj ↔ entries array

String methods padStart, padEnd, trimStart, trimEnd, replaceAll

Numeric separators 1_000_000

globalThis Cross-env global object

Async JavaScript
// Callback (old) setTimeout(() => [Link]("done"), 1000); // Promise fetch("/api/data") .then(res =>
[Link]()) .then(data => [Link](data)) .catch(err => [Link](err)) .finally(() => setLoading(false));
// async/await (recommended) async function getData() { try { const res = await fetch("/api/data"); if (![Link])
throw new Error(`HTTP ${[Link]}`); const data = await [Link](); return data; } catch (err) {
[Link]("Fetch failed:", err); } } // Parallel const [users, posts] = await [Link]([getUsers(),
getPosts()]); // First to resolve/reject [Link]([p1, p2]); // All settled (never throws)
[Link]([p1, p2]);

Fetch API
// GET const res = await fetch("[Link] const data = await [Link](); // POST const res
= await fetch("/api/users", { method: "POST", headers: { "Content-Type": "application/json", "Authorization":
`Bearer ${token}` }, body: [Link]({ name: "Alice" }) }); // Response helpers [Link]; // true if 200-299
[Link]; // 200, 404, 500... [Link](); // parse JSON body [Link](); // parse text body [Link](); //
binary data [Link]("Content-Type");

Error Handling
try { riskyOperation(); } catch (err) { [Link]([Link]); [Link]([Link]); } finally {
cleanup(); // always runs } // Custom error class ValidationError extends Error { constructor(msg) { super(msg);
[Link] = "ValidationError"; } } // Global handler [Link]("unhandledrejection", e => {
[Link]("Unhandled promise:", [Link]); });

Modules (ES Modules)

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 12

// Named exports export const PI = 3.14; export function add(a, b) { return a + b; } // Default export export
default class App {} // Import import App from "./[Link]"; import { PI, add } from "./[Link]"; import * as Math
from "./[Link]"; import { add as sum } from "./[Link]"; // alias // Dynamic import (lazy load) const module =
await import("./[Link]"); // In HTML <script type="module" src="[Link]"></script>

JS Methods — Common Reference


Method / API Purpose

[Link]/warn/error/table Debugging output

[Link](obj) JS object to JSON string

[Link](str) JSON string to JS object

parseInt(str, 10) String to integer

parseFloat(str) String to float

Number(val) Convert to number

String(val) Convert to string

Boolean(val) Convert to boolean

[Link]/ceil/round(n) Round numbers

[Link]() Random 0–1

[Link]/min(...nums) Max/min of values

[Link]() Current timestamp (ms)

new Date() Date object

setTimeout(fn, ms) Delayed execution

setInterval(fn, ms) Repeated execution

clearTimeout/clearInterval(id) Cancel timer

[Link](k,v) Persist data (string only)

[Link](k) Session-scoped storage

[Link]({},title,url) SPA navigation

[Link] Get/set current URL

[Link] Get user location

[Link] Read/write cookies

URLSearchParams(search) Parse query string

structuredClone(obj) Deep clone object

[Link]() Generate UUID v4

IntersectionObserver Lazy load / scroll detection

ResizeObserver Watch element size changes

MutationObserver Watch DOM changes

requestAnimationFrame(fn) Smooth animation loop

queueMicrotask(fn) Schedule microtask

Worker / SharedWorker Background threads

Proxy / Reflect Intercept object operations

String Methods
"hello".toUpperCase() // "HELLO" " hello ".trim() // "hello" "hello world".split(" ") // ["hello","world"]
"hello".includes("ell") // true "hello".startsWith("he") // true "hello".indexOf("l") // 2
"hello".replace("l","r") // "herlo" (first only) "hello".replaceAll("l","r") // "herro" "hi".padStart(5, "0") //
"000hi" "hi".repeat(3) // "hihihi" "hello".slice(1, 3) // "el" "hello".at(-1) // "o" `${"hello".charAt(0)}` // "h"

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 13

/regex/.test("string") // true/false "string".match(/regex/g) // array or null

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 14

SECTION 5 — PROFESSIONAL PRACTICES

Project Structure
project/ ■■■ [Link] ■■■ /css ■ ■■■ [Link] ■ ■■■ [Link] ■■■ /js ■ ■■■ [Link] ■ ■■■ /modules ■
■■■ [Link] ■ ■■■ [Link] ■■■ /assets ■ ■■■ /images ■ ■■■ /fonts ■■■ /components (if framework) ■■■ [Link]

Clean Code Principles


• Meaningful names: getUserData() not gd(), isLoggedIn not flag
• Single responsibility: one function = one task
• DRY: Don't Repeat Yourself — extract reusable functions/components
• KISS: Keep It Simple, Stupid — avoid over-engineering
• Comments: explain WHY not WHAT; code should be self-documenting
• Consistent formatting: use Prettier/ESLint
• Small functions: < 20 lines is a good target
• No magic numbers: const MAX_RETRIES = 3; not if (count > 3)

Git & GitHub — Essential Commands


Command Purpose

git init Initialize new repo

git clone <url> Clone remote repo

git status Show working tree status

git add . Stage all changes

git add <file> Stage specific file

git commit -m "msg" Commit staged changes

git push origin main Push to remote

git pull Fetch + merge remote changes

git branch feature Create branch

git checkout -b feature Create + switch branch

git switch main Switch branch (modern)

git merge feature Merge branch into current

git rebase main Rebase onto main

git log --oneline Compact commit history

git diff Show unstaged changes

git stash Temporarily shelve changes

git reset --hard HEAD~1 Undo last commit (DANGER)

git revert <hash> Safe undo (new commit)

.gitignore List files to exclude from tracking

Debugging
• DevTools: F12 — Elements, Console, Network, Sources, Performance
• [Link]/warn/error/table/group for runtime debugging
• Breakpoints: click line numbers in Sources panel
• debugger statement: pause execution in code
• Network tab: inspect API calls, status, headers, payload
• Lighthouse: audit performance, a11y, SEO, best practices
• React/Vue DevTools: browser extensions for component inspection

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 15

Security Basics
• XSS: Never use innerHTML with user input — use textContent
• CSRF: Use CSRF tokens; SameSite cookies
• CSP: Content-Security-Policy header to block injections
• HTTPS: Always use TLS in production
• CORS: Configure server to allow only trusted origins
• Input validation: validate on both client AND server
• Sensitive data: never store tokens/secrets in localStorage (use httpOnly cookies)
• Dependencies: audit with npm audit; keep packages updated

Performance Essentials
• Lazy load images: loading="lazy" on <img>
• Minimize JS: bundle, minify, tree-shake (Vite/Webpack)
• Code split: dynamic imports for large modules
• Cache: service workers, Cache-Control headers
• Images: use WebP/AVIF, correct sizes, srcset
• Critical CSS: inline above-fold styles
• Debounce/throttle expensive event handlers (scroll, resize, input)
• Measure: Lighthouse, Web Vitals (LCP, FID, CLS)

Browser Compatibility
• Check [Link] before using new features
• Use Babel to transpile modern JS for older browsers
• Use PostCSS / Autoprefixer for CSS vendor prefixes
• Set browserslist in [Link] to target browsers
• Test in Chrome, Firefox, Safari, Edge + mobile browsers
• Polyfills: core-js for JS; CSS @supports for feature detection

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 16

SECTION 6 — MINI PROJECT BLUEPRINTS

Beginner Projects
Project Key Concepts Core Code Pattern

Counter App DOM manipulation, events querySelector + addEventListener + textContent

To-Do List CRUD, array, localStorage push/splice + render fn + [Link]

Quiz App Objects, conditionals, score data array + current index + score counter

Calculator Operators, state machine string eval or manual parser + button events

Color Picker Input events, CSS vars input[type=color] + [Link]

Intermediate Projects
Project Key Concepts Core Code Pattern

Weather App Fetch API, async/await, API keys fetch(url+key) + async fn + DOM update

Markdown Editor String parsing, split view textarea input + [Link] + innerHTML (sanitized)

Expense Tracker Filter, reduce, charts Array filter/reduce + [Link] or D3

Movie Search REST API, pagination, search OMDB/TMDB API + debounce + card rendering

Drag & Drop Kanban Events, HTML5 DnD API dragstart/dragover/drop + column state

Form Validator Regex, error handling Validate on blur + show error messages

Advanced Projects
Project Key Concepts Core Code Pattern

Real-time Chat WebSocket, async, events new WebSocket(url) + onmessage + send()

PWA with Offline Service Worker, Cache API register SW + [Link] + fetch intercept

SPA Router History API, components pushState + popstate event + render by route

Canvas Game requestAnimationFrame, physics game loop + update() + draw() + collision

E-commerce UI State management, cart, filter pub/sub or Redux pattern + local state

Auth System JWT, sessions, forms fetch POST /login + store token + protected routes

Project Architecture Pattern


// Separation of concerns // 1. [Link] — state + CRUD operations // 2. [Link] — fetch calls only // 3. [Link] —
DOM rendering only // 4. [Link] — event listeners only // 5. [Link] — init + wire together // Example: [Link]
import { loadTodos } from "./[Link]"; import { renderTodos } from "./[Link]"; import { bindEvents } from
"./[Link]"; async function init() { const todos = await loadTodos(); renderTodos(todos); bindEvents(); }
init();

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 17

SECTION 7 — DEPLOYMENT & CAREER QUICK GUIDE

Hosting Platforms
Platform Type Best For Free Tier

Netlify Static + serverless Jamstack, static sites Yes

Vercel Static + serverless [Link], React apps Yes

GitHub Pages Static Project/personal sites Yes

Render Full-stack Node, Python, databases Yes (limited)

Railway Full-stack Backend APIs, DBs Yes (limited)

Cloudflare Pages Static + edge Global performance Yes

AWS / GCP / Azure Cloud Production enterprise Pay-as-go

DigitalOcean VPS/PaaS Custom server control Paid ($4+/mo)

Deployment Workflow
• 1. Code → git push → GitHub repo
• 2. Connect repo to Netlify/Vercel
• 3. Set build command: npm run build
• 4. Set publish directory: dist/ or build/
• 5. Add environment variables in platform dashboard
• 6. Auto-deploy on every push to main branch
• 7. Custom domain: buy from Namecheap/GoDaddy/Cloudflare, point DNS to host

Custom Domain & DNS


• A Record: point domain → IP address
• CNAME: point subdomain → another domain (e.g. www → [Link])
• SSL/TLS: free via Let's Encrypt — most hosts auto-provision
• Propagation: DNS changes take up to 48 hours

Portfolio Tips
• Live projects: every project must have a working URL
• Source code: public GitHub repos with clear READMEs
• README template: title, description, live link, tech stack, setup instructions, screenshots
• Quantity + quality: 3–5 polished projects > 20 unfinished ones
• Portfolio site: custom domain ([Link]), minimal design, fast loading
• Show range: beginner → intermediate → advanced project

Career Roadmap
Stage Skills Action

Beginner HTML + CSS + basic JS Build 3 static projects, push to GitHub


(0–3 mo)

Junior ES6+, DOM, Fetch, Git Build 2 dynamic apps, apply for internships
(3–6 mo)

Mid-level React/Vue, REST APIs, Testing Contribute to OSS, build full-stack apps
(6–12 mo)

Senior Architecture, Perf, Security, CI/CD Lead projects, mentor, system design
(1–2 yr)

Tools & Resources


• MDN Web Docs ([Link]) — definitive reference

Beginner to Expert · Revision · Exams · Quick Reference


HTML, CSS & JavaScript — Complete Summary Guide Page 18

• [Link] — browser compatibility


• [Link] — CSS guides (Flexbox, Grid)
• [Link] — modern JS tutorial
• [Link] — Google's performance & best practices
• VS Code extensions: Prettier, ESLint, GitLens, Live Server, Path IntelliSense
• npm: axios, dayjs, zod, lodash, [Link] (useful libraries)

Quick Skill Checklist


✓ HTML Semantic markup, forms, accessibility, SEO

✓ CSS Flexbox, Grid, responsive, animations, BEM

✓ JavaScript ES6+, async/await, DOM, events, modules

✓ Git Commit, branch, merge, push, pull request

✓ DevTools Debug, network, performance, lighthouse

✓ Deployment Netlify/Vercel, custom domain, CI/CD

✓ Performance Core Web Vitals, lazy load, bundle size

✓ Security XSS, CSRF, HTTPS, input validation

✓ A11y ARIA, keyboard nav, contrast, screen reader

✓ Portfolio 3+ live projects, GitHub, custom domain

Beginner to Expert · Revision · Exams · Quick Reference

You might also like