A comprehensive, highly-structured repository documenting my progression from absolute zero to building modern front-end web applications with HTML5, CSS3, JavaScript (ES6+), and React.js.
Featuring 130+ practice files, detailed study guides, and interactive mini-projects.
Γ¡É Star this repository ┬╖ Quick Start ┬╖ Roadmap ┬╖ Curriculum ┬╖ Projects ┬╖ FAQ
- About the Project
- Repository at a Glance
- Target Audience
- How to Study with this Repo
- Suggested Learning Path
- Quick Start
- Curriculum
- Mini Projects
- Learning Progress
- Tips for Beginners
- Common Mistakes & Fixes
- Helpful Resources
- Keyboard Shortcuts
- FAQ
- Contributing
This is my personal learning notebook and practice code registry for web development. I document topics as I learn them, writing heavily commented code templates and runnable exercises. It serves as a practical blueprint for self-learners and students who want to master front-end technologies through real building, not just reading theory.
| Feature | Details |
|---|---|
| Built for | Beginners, CS students, and self-taught web developers |
| Pillars | Semantic HTML5 ┬╖ Responsive CSS3 & Tailwind ┬╖ Modern JS (ES6+) ┬╖ React.js |
| Format | Isolated, runnable code files, structured note-sheets, and complete apps |
| Cost | 100% Free & Open-source ΓÇö fork, clone, edit, and experiment |
Note
No complex build environments needed for basic files!
Simply open any .html file inside HTML/CSS/JS folders directly in your browser or run them using VS Code's Live Server. No npm install required until you reach the React section!
| Metric | Details |
|---|---|
| Learning Tracks | 4 Core Tracks (HTML, CSS, JavaScript, React.js) |
| Code Files | 130+ Practice Files & Configurations |
| Mini Projects | 4 Interactive Projects |
| Prior Prerequisites | None (Starts from absolute ground zero) |
| Track | Core Concepts Covered | Quick Navigation |
|---|---|---|
| HTML | Page metadata, form controls, media embedding, semantic structure | /HTML |
| CSS | Box Model, Flexbox, CSS Grid, Positions, Transitions, BEM, Tailwind CSS | /CSS |
| JavaScript | Data types, Closure, Prototypes, DOM, Event Loop, Promises & Async/Await | /JS |
| React.js | Virtual DOM, JSX, Props, Hooks (State, Effects, Context, Ref, Reducer), Router | /React_JS |
Folder-specific READMEs: HTML Guide ┬╖ CSS Guide ┬╖ JavaScript Guide
| If you are... | Suggested Starting Point |
|---|---|
| Brand new to coding | Quick Start Γ₧ö Start with HTML/TextTags.html |
| Comfortable with markup, need styling | Explore CSS Box Model and Flex Box |
| Looking to master Modern CSS | Explore Tailwind CSS and Anchor Positioning |
| Ready for logic and APIs | Head over to the JavaScript Track |
| Moving from Vanilla JS to Frameworks | Study React.js Introduction and useState |
1. Select Phase Γ₧ö Follow the roadmap track in chronological order.
2. Clone & Open Γ₧ö Pull the repository locally and open in VS Code.
3. Serve Files Γ₧ö Right-click and launch with the Live Server extension.
4. Read Annotations Γ₧ö Read through the inline comments explaining *why* the code works.
5. Break & Rebuild Γ₧ö Tweak values, trigger error states, and rebuild components to consolidate learning.
Developer Tooling Checklist: VS Code ┬╖ Modern Browser (Chrome/Firefox/Edge) ┬╖ Live Server Extension ┬╖ Git ┬╖ Node.js & npm (for React)
flowchart TD
classDef html fill:#f06529,stroke:#333,stroke-width:2px,color:#fff;
classDef css fill:#2965f1,stroke:#333,stroke-width:2px,color:#fff;
classDef js fill:#f0db4f,stroke:#333,stroke-width:2px,color:#000;
classDef react fill:#61dbfb,stroke:#333,stroke-width:2px,color:#000;
classDef proj fill:#4caf50,stroke:#333,stroke-width:2px,color:#fff;
HTML[HTML5 Basics]:::html --> CSS_Box[CSS Box Model]:::css
CSS_Box --> CSS_Layout[Flexbox & Grid]:::css
CSS_Layout --> CSS_Adv[Positioning & Responsiveness]:::css
CSS_Adv --> CSS_Arch[CSS Architecture & Floating Labels]:::css
CSS_Arch --> Tailwind[Tailwind CSS]:::css
Tailwind --> JS_Core[JavaScript Basics & Objects]:::js
JS_Core --> JS_Adv[Scope, Closures & Prototypes]:::js
JS_Adv --> JS_DOM[DOM Manipulation]:::js
JS_DOM --> JS_Async[Promises, Async/Await & Event Loop]:::js
JS_Async --> React_Basics[React Core & Virtual DOM]:::react
React_Basics --> React_Hooks[State, Effects & Hooks]:::react
React_Hooks --> React_Router[React Routing & Context]:::react
React_Router --> Projs[Interactive Mini Projects]:::proj
To clone this repository and start playing with the code on your local machine:
# Clone the repository
git clone https://github.com/SaqibShah-dev/web-dev-journey.git
# Navigate into the project folder
cd web-dev-journey
# Open in VS Code
code .- Install Live Server in VS Code (
Ctrl + Shift + XΓ₧ö search and install "Live Server"). - Open
HTML/TextTags.html. - Right-click inside the editor Γ₧ö click Open with Live Server.
- Change text, hit save (
Ctrl + S), and see changes reflect instantly in your browser.
Discover the foundational skeleton of web pages, semantic layouts, and search engine optimization concepts.
Directory: /HTML
| Lesson File | Key Concept |
|---|---|
| MetaTags.html | Document encoding, SEO meta elements, viewport settings for responsiveness. |
| TextTags.html | Headings, paragraphs, spans, strong/em styling, and inline typography. |
| Lists.html | Ordered (<ol>), unordered (<ul>), and definition lists (<dl>). |
| divContainer.html | Block vs inline elements, container elements, and layout boundaries. |
| LinksImages.html | Anchor navigation (<a>) and image rendering (<img>) with alt tags. |
| Tables.html | Semantic tables featuring <thead>, <tbody>, rows, headers, and cell spans. |
| Multimedia.html | Native audio and video streaming elements with custom attributes. |
| Forms.html | Input controls, forms validation, textareas, checkboxes, and select dropdowns. |
| simple_page_layout.html | Complete semantic frame (<header>, <main>, <section>, <aside>, <footer>). |
| practice_project.html | Comprehensive review project merging all core HTML elements. |
Learn how to style web pages, manage spacing, configure layouts using grid systems, and implement responsiveness.
Directory: /CSS
| Topic | Folder | Core Files |
|---|---|---|
| Box Model | Box Model | Box_model.html ┬╖ Spacing strategies ┬╖ Margin collapses |
| Flexbox Layouts | Flex Box | understand_flex.html ┬╖ Navbar_task.html ┬╖ card_grid_task2.html |
| Grid Layouts | grid | css_grid_fundamental.html ┬╖ image-gallery-prject.html ┬╖ auto-fit-and-auto-fill.html |
| Positioning | Positioning Types | Task1ΓÇöBadge-on-Icon.html ┬╖ Modal.html ┬╖ Sticky Navbars |
| Responsive Design | Responsive design | Media queries ┬╖ Task1ΓÇöFluid-Typography.html ┬╖ Mobile-first rules |
| CSS Architecture | css-architecture | Block-Element-Modifier.html (BEM styling methodology) |
Transition from vanilla styles to the modern, rapid utility-first utility classes model.
Directory: /CSS/Tailwind css
| Lesson File | Key Concept |
|---|---|
| Learning-Tailwind-css.txt | Quick-reference cheatsheet for standard utility rules. |
| Using-Tailwind-CSS.html | Implementing fonts, borders, shadows, backgrounds, and layouts with class properties. |
| Responsive-Design-in-Tailwind.html | Designing mobile-to-desktop interfaces with breakpoints (sm:, md:, lg:). |
| Project.html | Landing page component mockup built purely using Tailwind utility configurations. |
Adopt cutting-edge styling paradigms supported by contemporary web engines.
Directories: /CSS/Anchor-Positioning ┬╖ /CSS/Floating_label
- Anchor-positioning-template.html ΓÇö Configuring modern overlays and tooltips via CSS standard
anchor-nameattributes. - floating-example.html ΓÇö Building interactive, animated form inputs with floating labels entirely in CSS.
Master variables, scopes, arrays, objects, and object-oriented programming concepts.
Directory: /JS
| Topic | Folder | Main Learning File |
|---|---|---|
| Variables & Types | variable-and-types | variable-and-types.js (Primitives vs Reference types) |
| Functions & Scope | functions | function.js (Declarations, Arrow expressions, scoping, parameters) |
| Arrays & Methods | arrays | arrays.js (Traversal, map, filter, reduce, mutation methods) |
| Object Literals | Objects | objects.js (Prototypes, getters/setters, JSON parser, destructuring) |
| Closures | scopeAndClosure | scopeAndClosure.js (Lexical scopes, memory encapsulation) |
| ES6+ Modern Syntax | ES6 | Modules imports/exports, Template literals, and Optional chaining (?.) |
| Prototypes & Classes | prototypesAndClasses | prototypesAndClasses.js (OOP, inheritance, this context) |
Learn how the browser manages page state, fetches external data, handles async execution, and compiles programs.
Directory: /JS
| Lesson File | Topic / Concept |
|---|---|
| dom-manipulation.js | Selecting nodes, tracking window events, modifying inline styles, rendering dynamic tags. |
| Async.js | Synchronous blockades, Callback Hell, Promises, and handling asynchronous workflows with Async/Await. |
| callstack.js | Explaining context initialization, call recursion, and stack frame overflows. |
| eventLoop.js | Understanding microtasks (Promises), macrotasks (setTimeouts), and non-blocking event loops. |
| howJSWorks.txt | Detailed cheat sheet on the JS engine compilation, execution contexts, and compilation structures. |
Learn how to build component-driven interfaces using React, manage state updates, use hooks, and implement routing.
Directory: /React_JS
| Phase / Module | Study Target | Links & Code Samples |
|---|---|---|
| Foundations | React problems solved, UI-as-a-function, Virtual DOM, and compilation. | introduction.txt |
| State Hook | Managing active state with useState, handling asynchronous updates. |
understand_use_state |
| Effect Hook | Lifecycle syncing, side-effects, and subscription cleanups via useEffect. |
understand_useEffect |
| Data Flow | Parent-child communication, prop drilling, and input bindings via props. |
understand_props |
| Ref Hook | Directly accessing DOM nodes and persisting values without triggers using useRef. |
understand_useRef |
| Global State | Sharing data globally without prop-drilling using useContext API. |
understand_useContext |
| Complex State | Managing complex state structures and action dispatches via useReducer. |
understand_useReducer |
| Custom Hooks | Encapsulating reusable component logic and state behaviors in custom hooks. | understand_customHooks |
| Events | Synthesized event systems, bubble preventions, and input bindings. | understand_event_handling |
| Routing | Building Multi-page layouts and parsing URL params via React Router. | understand_reactRouter |
| Vite Sandbox | Core template app to practice hook integrations and compile tests. | my-react-app |
This repository includes a set of projects designed to merge and test all the HTML, CSS, JavaScript, and React knowledge acquired.
| Project Name | Key Skills Practiced | Technologies Used | Source Folder |
|---|---|---|---|
| ** To-Do Dashboard** | DOM Event listeners, local array mutations, list rendering, form control. | HTML5 ┬╖ CSS3 ┬╖ Vanilla JS | /JS/to-do-list |
| ** Weather forecast App** | API fetch handling, asynchronous data loading, search filters, state transitions. | HTML5 ┬╖ CSS3 ┬╖ Fetch API | /JS/weather-app |
| ** GitHub Profile Search** | Handling HTTP query headers, parsing REST responses, UI rendering. | HTML5 ┬╖ Tailwind ┬╖ Fetch API | /JS/githubProfileSearch |
| ** Netflix landing Page** | CSS Grid rows, media queries, absolute overlays, accordion UI components. | HTML5 ┬╖ Responsive CSS3 | /CSS/Netflix Landing Page |
- Phase 1: HTML5 Semantics & Forms
- Phase 2: CSS Layouts (Flexbox, Grid, Positions)
- Phase 3: Utility CSS (Tailwind)
- Phase 4: JavaScript Core & OOP Prototypes
- Phase 5: Asynchronous JS & Browser Internals
- Phase 6: React.js Component Lifecycle & Basic Hooks
- Phase 7: React.js Advanced hooks & Custom Logic
- [/] Phase 8: React Routing & Application Architecture (Current)
- Coming Next: State Management (Redux Toolkit), Git workflows, and Full-Stack MERN Integration.
- Keep DevTools Open (
F12): When testing styling tweaks, use the Elements tab. For JavaScript logic, monitor prints and warnings in the Console tab. - Type it Out manually: Do not copy-paste code snippets. Writing them line-by-line is essential for building muscle memory and learning code patterns.
- Save and Refresh: Use the Live Server extension so you don't waste time manually refreshing the browser.
- Follow the Order: Don't skip JS to learn React immediately. Understanding asynchronous scopes, array methods (like
.map(),.filter()), and object destructuring is essential for React development.
| Problem | Cause | Resolution |
|---|---|---|
| CSS changes are not updating | Active browser caches or missing file saves. | Force refresh using Ctrl + Shift + R, or check if the style link stylesheet path is relative. |
| Blank browser screen on JS scripts | JavaScript files are not DOM linked, or write logs to the console only. | Press F12 to open DevTools, select the Console tab, and check for execution logs or errors. |
| Flex or Grid alignments failed | Positioning child properties without styling the wrapper. | Make sure to set display: flex or display: grid on the parent container element. |
| Images are failing to load | Using absolute hard-coded computer directories or path typos. | Use relative routing paths: e.g., ../images/photo.png. |
| Form doesn't submit/refresh | Missing form containers or button submission types. | Wrap form inputs in a <form> container and assign type="submit" on the action button. |
- MDN Web Docs ΓÇö Authoritative HTML/CSS/JS documentation.
- web.dev ΓÇö Google's guidelines for performance and accessibility rules.
- React Dev Documentation ΓÇö The updated documentation for contemporary hooks.
- Can I Use ΓÇö Browser compatibility verification for advanced properties.
- CSS-Tricks Flexbox Guide ΓÇö Outstanding visual layout guides.
- CSS-Tricks Grid Guide ΓÇö Complete layout structure reference maps.
- Figma ΓÇö Free tool for designing UI mockups.
| Shortcut | Action |
|---|---|
Ctrl + Shift + X |
Open the Extension Marketplace |
Ctrl + Shift + P |
Command Palette (Search: "Live Server: Open") |
Ctrl + / |
Toggle inline/block comments |
Shift + Alt + F |
Auto-format current code structure |
Ctrl + D |
Select next matching word token |
| Key | Action |
|---|---|
F12 / Ctrl + Shift + I |
Toggle the DevTools window |
Ctrl + Shift + C |
Activate element inspector mode |
Ctrl + Shift + J |
Open the Console tab directly |
Ctrl + R |
Refresh current layout state |
Ctrl + Shift + R |
Empty cache and force reload |
Do I need to learn HTML/CSS before JavaScript?
Yes! HTML provides the structure, and CSS defines the styling. Without them, JavaScript has no DOM elements to select, modify, or animate.
What is the difference between Flexbox and Grid?
Use Flexbox for single-dimension layouts (like a horizontal navigation bar or vertical lists). Use Grid for two-dimensional structures (like dynamic card portfolios or complete site templates).
Why is my React component rendering twice?
By default, React runs in <StrictMode> in development environments. This helps identify side-effect issues and cleanups. It does not run twice in production builds.
Can I clone and reuse this code for my own study?
Absolutely! This repository is designed to be a learning tool. You can fork it, copy code patterns, and use it as a foundation for your own projects.
Found a bug, typo, or want to contribute a clearer study guide? Contributions are welcome!
- Fork this repository.
- Create a new branch:
git checkout -b docs/improvement-details. - Commit your modifications and push:
git push origin docs/improvement-details. - Open a Pull Request for review.
Saqib Shah
BS Artificial Intelligence student at BIIT (PMAS AAUR), Pakistan.
Learning modern web engineering step by step and documenting the journey to build useful guidelines for self-taught developers.
If this repository helped you in your learning path, please consider giving it a star Γ¡É ΓÇö it helps other beginners find it!