Frontend and backend fundamentals, frameworks, and best practices.
Set up a Next.js project from scratch and understand the App Router.
A beginner-friendly map of how websites work, what to learn first, and how to practise by building one small product.
A browser resolves a domain through DNS, opens a protected connection with HTTPS, sends an HTTP request, receives resources from a server or CDN, and renders them while JavaScript may request more data.
Web vocabulary becomes manageable when grouped by journey: a client resolves a domain through DNS, opens a network connection, sends an HTTP request, receives a response, and renders resources identified by URLs.
HTML describes meaning and structure: headings form an outline, landmarks divide regions, links navigate, buttons perform actions, and labels connect controls to instructions. Semantic markup gives browsers and assistive technology useful information before CSS.
Readable CSS establishes a clear type scale, comfortable line length, sufficient contrast, consistent spacing, and layouts that adapt from narrow to wide screens. Responsive design follows content needs, not a list of device names.
JavaScript responds to events, transforms data, updates state, and reflects state back into the interface. Keeping a single source of truth prevents the screen and underlying data from disagreeing.
A backend enforces business rules, coordinates data and external services, authenticates requests, and returns results through an interface such as an API. It protects invariants that cannot be trusted to browser code.
Choose a server-side language from constraints: team skill, ecosystem, runtime needs, libraries, operations, and hiringโnot from benchmark headlines alone. Several mainstream choices can solve the same product problem well.
An HTTP server listens on a port, parses requests, routes method-plus-path pairs, runs application logic, and returns a status, headers, and body. Start with one health route before adding frameworks or databases.
Authentication proves who a user is; a session remembers that proof across requests. A secure session uses an unpredictable identifier, server-side expiry, protected cookies, and explicit logout or revocation.
An API is a contract for asking another system to do something or return data. In the restaurant analogy, the menu defines allowed requests, the waiter carries them, and the kitchen performs hidden implementation work.
JSON represents objects and arrays with a small syntax optimized for common application data; XML represents nested elements and attributes with namespaces and richer document-oriented tooling. Choose from the receiving contract, not personal taste.
A REST-style API models resources with stable URLs, uses HTTP methods for intent, returns meaningful status codes, and keeps requests self-contained. Consistency is more valuable than chasing architectural purity.
Robust API clients classify errors, bound retries, paginate until a documented stopping signal, and respect rate-limit headers. Retrying everything blindly can amplify an outage.
Git records snapshots and branches locally; GitHub hosts the repository and adds collaboration, review, automation, and access controls. A small project needs a simple history more than an elaborate branching model.
Git-based deployment connects a reviewed commit to a reproducible build and an environment. The host checks out the commit, installs locked dependencies, runs validation, publishes artifacts, and preserves logs for rollback.
Canvas paints pixels into one bitmap-like surface; SVG keeps shapes as DOM elements. Canvas suits dense, frequently redrawn scenes, while SVG suits scalable diagrams and individually interactive objects.