HafizRich Learn

Understand the web. Build it deliberately.

Clear, practical guides connecting HTML, CSS, browser JavaScript, Node.js, npm, Vite and deployment—without hiding what the tools actually do.

Start learning →Explore the foundations →

$ npm install
Install the dependencies declared in package.json.

$ npm run dev
Run the project's "dev" script—Vite in this example.

// commands are defined by each project

Modern web foundations

See how the pieces connect.

Begin with the browser and the languages it understands. Then learn how development tools, servers and deployment platforms support the finished application.

01 / HTML & CSS

Accessible structure and layout

Structure accessible documents and create responsive layouts.

Learn the foundations →02 / BROWSER JAVASCRIPT

Behaviour in the browser

Learn values, functions, modules, the DOM, events, fetch and async code.

Learn JavaScript →03 / BROWSER & HTTP

Requests and debugging

Understand requests, responses, URLs, status codes and DevTools.

Follow a page request →04 / NPM & VITE

Development workflow

Learn dependencies, package scripts, development servers and production builds.

Understand the tools →05 / GIT & DEPLOYMENT

From source to production

Version your work, use GitHub and publish static output safely.

Ship a website →06 / NODE.JS & APIS

Optional backend progression

Run JavaScript outside the browser and build APIs when a project needs them.

Explore Node.js →

The learning path

Foundation before abstraction.

Browser

HTML, CSS, JavaScript, accessibility and DevTools.

Network

URLs, DNS, HTTP, HTTPS and status codes.

Workflow

npm, Vite, Git, GitHub and deployment.

Backend—when needed

Node.js, APIs, databases, authentication and security.