HafizRich Learn
Understand the web. Build it deliberately.
Knowledge is power for humanity.
Clear, practical guides connecting HTML, CSS, browser JavaScript, Node.js, npm, Vite and deployment—without hiding what the tools actually do.
$ 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.
Accessible structure and layout
Structure accessible documents and create responsive layouts.
Learn the foundations →02 / BROWSER JAVASCRIPTBehaviour in the browser
Learn values, functions, modules, the DOM, events, fetch and async code.
Learn JavaScript →03 / BROWSER & HTTPRequests and debugging
Understand requests, responses, URLs, status codes and DevTools.
Follow a page request →04 / NPM & VITEDevelopment workflow
Learn dependencies, package scripts, development servers and production builds.
Understand the tools →05 / GIT & DEPLOYMENTFrom source to production
Version your work, use GitHub and publish static output safely.
Ship a website →06 / NODE.JS & APISOptional 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.
Keep learning
Get new lessons through RSS.
Subscribe without sharing an email address, or download the roadmap for offline reference.