Web Dev for All

A living learning repository documenting Abdul Rahman's progression through modern web development. It combines structured notes, focused exercises, API-driven interfaces, backend experiments, and small projects built while learning.

The repository is intentionally organized by subject so each area can be explored independently.

What You Will Find Here

• Fundamentals explained through notes and small experiments
• Frontend interfaces built with HTML, CSS, JavaScript, React, and Tailwind CSS
• Backend practice with Node.js, Express, TypeScript, authentication, and HTTP APIs
• SQL lessons and database exercises
• Git and GitHub learning material
• Generative AI and chatbot experiments
• SEO concepts and practical references

Repository Map

Area	Focus	Start here
Collection of mini-projects	Complete frontend interfaces, API consumers, and games	Project list
Learn JavaScript	Language fundamentals, DOM work, asynchronous JavaScript, notes, and assignments	JavaScript projects
Learn React	React foundations and application practice	React learning folder
Learn Backend	Node.js, Express, TypeScript, authentication, and HTTP concepts	Backend learning folder
Backend Best Collection	Production-ready APIs and backend services including CRUD operations and REST architecture	Backend collection
Learn TypeScript	TypeScript notes and projects using different runtimes and tools	TypeScript learning folder
Learn SQL	SQL fundamentals, queries, and database concepts	SQL guide
Learn HTML	HTML guides, challenges, resources, and practice projects	HTML learning folder
Learn CSS	CSS concepts, layouts, and styling practice	CSS learning folder
Learn Tailwind	Tailwind CSS experiments with CDN and Vite	Tailwind guide
Learn GenAI	Chatbot and generative AI experiments	GenAI learning folder
Learn Git & GitHub	Version control notes and GitHub workflows	Git notes
Learn Modern SEO	SEO theory, technical concepts, and practical references	SEO guide
Industry skills	Additional industry-focused learning material	Industry skills folder

Featured Projects

The Collection of mini-projects contains self-contained applications, including:

• Product Listing Interface
• Quotes Listing Application
• React Meals Listing Interface
• Random Users Viewer
• Random Cat Viewer
• ChaiTube Video Listening
• Tic Tac Toe

Backend and API projects include:

• CRUD Notes App - RESTful CRUD API built with Express 5, MongoDB, and Mongoose

JavaScript practice projects are available in Learn JavaScript/Code Projects, and the assignment work is grouped in Learn JavaScript/chaicode-repo-assignments.

Running A Project Locally

This is a collection of independent learning projects rather than one application with a single root build command.

1. Clone the repository:

   git clone https://github.com/abdulrdeveloper/web-dev-for-all.git
   cd web-dev-for-all

2. Enter the project you want to run:

   cd "Collection of mini-projects/Product-Listing-Interface"

3. Install dependencies and start the development server:

   npm install
   npm run dev

4. Open the local URL printed by Vite.

For a JavaScript assignment project, use its own package scripts:

cd "Learn JavaScript/chaicode-repo-assignments/js-dom-abdulrdeveloper"
npm install
npm test

Not every folder is a Node.js application. Notes, HTML/CSS/JavaScript exercises, and documentation can usually be opened directly. Check the nearest project README.md and package.json before running commands.

Technology Coverage

• HTML5 and CSS3
• JavaScript and DOM APIs
• React and Vite
• TypeScript
• Node.js and Express
• REST APIs
• Authentication
• SQL
• Tailwind CSS
• Jest and automated testing
• Git and GitHub
• Generative AI
• Search engine optimization

Repository Conventions

• Learning notes stay close to the topic they explain.
• Applications remain isolated in their own project directories.
• Each runnable project owns its dependencies and scripts.
• Generated directories such as node_modules, build output, coverage, and local environment files are ignored.
• Project-specific setup details belong in the project's local README.md.

Purpose

This repository is a practical record of learning by building. It is updated as new concepts are studied, assignments are completed, and ideas are turned into working projects.

Contributing

Contributions, bug fixes, suggestions, and improvements are always welcome! Please check out CONTRIBUTING.md for contribution guidelines, repository conventions, and pull request workflows.

Author

Abdul Rahman

• GitHub: @abdulrdeveloper
• Repository: web-dev-for-all
• Portfolio: abdulrdeveloper.me