Complete Web Development Educational Course
From your first HTML page to a fullstack web application
This repository is a comprehensive educational course in fullstack web development. The course is designed for first-year students and beginner developers with no prior programming experience.
The course covers all aspects of modern web development: from creating your first HTML page to deploying a fully functional online store with a server and database.
After completing the course, you will be able to:
- ✅ Create modern responsive web pages (HTML5, CSS3)
- ✅ Write interactive scripts in Vanilla JavaScript
- ✅ Develop REST APIs with Node.js and Express
- ✅ Work with relational databases (MySQL)
- ✅ Implement user authentication
- ✅ Understand client-server architecture
- ✅ Build a portfolio of completed projects
| Audience | Suitable? |
|---|---|
| IT students | ✅ Perfect |
| Beginner web developers | ✅ Perfect |
| Career changers | ✅ Yes |
| Instructors | ✅ Ready-made materials |
The course is divided into 4 main modules, each containing practical examples, theory, and homework assignments. Books and guides are placed by topic inside the shared resources folder 0. resources/ for convenience.
📁 Path: 1. frontend/
| Section | Description | Lessons | Resources & Books |
|---|---|---|---|
| HTML, CSS, JS | Complete web programming course from scratch | 22 | Books on HTML/CSS/JS, Git and WebStorm guides in 0. resources/1. frontend/ |
| Webinars | Additional sessions and code reviews | — | — |
| Landing Example | Ready-made landing page example | — | — |
Key Topics:
- 📄 HTML5: structure, semantics, forms
- 🎨 CSS3: Flexbox, Grid, responsiveness, animations
- ⚡ JavaScript: DOM, events, LocalStorage
- 🎮 6 practical portfolio projects
📁 Path: 2. backend/
| # | Lesson | Topic | Resources & Books |
|---|---|---|---|
| 01 | Course Introduction | Overview of server-side development | Node.js book, Postman API testing guide in 0. resources/2. backend/ |
| 02 | Client-Server Architecture | HTTP, REST, API | |
| 03 | Node.js and Express | Creating your first server | |
| 04 | Routing and Middleware | Request handling | |
| 05 | MVC Architecture | Model-View-Controller | |
| 06 | MySQL Integration | Database connection | |
| 07 | Authentication (Passport.js) | Login, registration, sessions | |
| 08 | Frontend + Backend Integration | Connecting all parts | |
| 09 | Testing | Application testing basics |
Key Topics:
- 🖥 Node.js and Express.js
- 🔐 Authentication and sessions
- 📡 REST API design
- 🏗 Architectural patterns
📁 Path: 3. databases/
The databases module is split into main lessons and webinars:
- 📁 1. sql-mysql/ — main lessons on SQL and MySQL.
- 📁 2. webinars-lessons/ — additional webinar materials.
| # | Lesson | Topic | Resources & Books |
|---|---|---|---|
| 01 | Course Introduction | Database overview | Database & SQL books in 0. resources/3. databases/ |
| 02 | DBMS Types | Relational and non-relational databases | |
| 03 | MySQL Installation | Environment setup | |
| 04 | Database Design | ER diagrams, normalization | |
| 05 | SQL Basics (CREATE) | Creating tables | |
| 06 | CRUD Operations | SELECT, INSERT, UPDATE, DELETE | |
| 07 | JOIN and Aggregation | Table joins, grouping |
Key Topics:
- 🗄 Relational data model
- 📊 SQL queries
- 🔗 Table relationships
- 📐 Database schema design
📁 Path: 4. full-stack-store-app/
A complete online store — the final project combining all acquired knowledge. Web application development guidelines and coursework tasks are located in 0. resources/4. full-stack/.
| Component | Technologies | Description |
|---|---|---|
| Frontend | HTML, CSS, JS | Store interface |
| Backend | Node.js, Express | API server |
| Database | MySQL | Data storage |
| Auth | Passport.js | Registration and login |
➡️ Detailed project documentation
Use the schema below to quickly navigate through the educational materials:
fullstack-web-development-course/
├── 0. resources/ # Common course resources (books, guides, tasks)
│ ├── 0. shared/ # Common resources for the whole course
│ │ └── glossary/ # Glossary of terms (RU/EN)
│ ├── 1. frontend/ # HTML/CSS/JS books, WebStorm and Git guides
│ ├── 2. backend/ # Node.js book, Postman API testing guide
│ ├── 3. databases/ # SQL books, ER modeling and database design guides
│ └── 4. full-stack/ # Web app development guide and coursework tasks
├── 1. frontend/ # Client-side development
│ ├── 1. html-css-js/ # Base 22 lessons
│ │ └── 00-environment-setup/ # Practice and examples for environment setup
│ ├── 2. webinars-lessons/ # Additional frontend webinars
│ ├── 3. example-landing/ # Simple landing page example
│ ├── 4. frontend-with-svelte-and-backend/
│ └── 5. svelte-without-backend/ # Standalone educational Svelte version of the store
├── 2. backend/ # Server-side development
│ ├── 1. node-js/ # Base 9 lessons
│ └── 2. webinars-lessons/ # Additional backend webinars
├── 3. databases/ # Databases module
│ ├── 1. sql-mysql/ # 7 lessons on SQL and MySQL
│ └── 2. webinars-lessons/ # Database webinars
├── 4. full-stack-store-app/ # Final and practical projects
│ ├── 1. step-by-step-frontend/ # Step-by-step store frontend assembly
│ ├── 2. step-by-step-backend/ # Step-by-step store backend assembly
│ ├── 3. store-app/ # Final fullstack store (HTML/JS + Node.js)
│ └── 4. store-app-svelte/ # Svelte + Node.js version of the store
└── docs/ # Demo version for GitHub Pages (Mock API in localStorage)
The repository contains several implementations of the TechParts Store educational web application. Use the table below to understand the differences:
| Project Path | Stack | Backend Role | Data Storage | Target Audience |
|---|---|---|---|---|
docs/ |
Vanilla HTML/CSS/JS | None (Mock API) | Browser localStorage |
For quick preview (live demo on GitHub Pages). Runs without a server. |
4. full-stack-store-app/3. store-app/ |
Vanilla JS + Express | Real Express Server | MySQL Database | Main project of the course. Classic Fullstack project. |
4. full-stack-store-app/4. store-app-svelte/ |
SvelteKit + Express | Real Express Server | MySQL Database | Advanced level. For learning reactive frontend frameworks. |
1. frontend/5. svelte-without-backend/ |
Svelte | None (Mock API) | Browser localStorage |
Intermediate step for learning Svelte basics without a backend. |
| Tool | Description | Link |
|---|---|---|
| VS Code | Code editor | Download |
| Node.js | JavaScript platform | Download (LTS) |
| Git | Version control system | Download |
| MySQL | Database (optional) | Download |
git clone https://github.com/mrsky1001/fullstack-web-development-course.git
cd fullstack-web-development-courseRecommended learning path:
- Frontend → Start with
1. frontend/1. html-css-js/ - Databases → Continue with
3. databases/ - Backend → Then
2. backend/ - Full-stack → Final project
4. full-stack-store-app/
Each lesson contains:
- 📖 README.md — theoretical material
- 💻 examples/ — ready-made code examples
- ✏️ practice/ — self-study assignments
| Module | Time | Outcome |
|---|---|---|
| Frontend (HTML/CSS/JS) | 10-12 weeks | Modern web pages |
| Databases | 3-4 weeks | MySQL proficiency |
| Backend | 4-5 weeks | REST API with Node.js |
| Full-stack project | 2-3 weeks | Complete application |
Total duration: ~20-24 weeks (at 8-10 hours per week)
📁 Path: 0. resources/
| Resource Category | Description |
|---|---|
| 0. shared/ | Common resources for the whole course (glossary, etc.) |
| 1. frontend/ | HTML/CSS/JS books, Git manual, and WebStorm installation guides |
| 2. backend/ | Node.js book, API testing manual with Postman |
| 3. databases/ | Materials and books regarding databases and SQL |
| 4. full-stack/ | Web application development guides and coursework topics |
No complex frameworks at the start — only pure technologies:
- HTML5, CSS3, JavaScript (ES6+)
- Node.js without additional abstractions
- Pure SQL without ORM
All code contains comments in Russian explaining:
- What the code does
- Why it's done this way
- How it works
- Practical assignments after each lesson
- Real projects for your portfolio
- All examples can be run locally
Lessons are structured from simple to complex, each building on previous knowledge.
┌─────────────────────────────────────┐
│ FULLSTACK WEB DEVELOPER │
│ (Junior Level) │
└──────────────┬──────────────────────┘
│
┌─────────────────────────┼─────────────────────────┐
│ │ │
┌────▼────┐ ┌─────▼─────┐ ┌──────▼──────┐
│FRONTEND │ │ DATABASE │ │ BACKEND │
│ Module │ │ Module │ │ Module │
│ 1 │ │ 3 │ │ 2 │
└────┬────┘ └─────┬─────┘ └──────┬──────┘
│ │ │
│ • HTML5 │ • SQL │ • Node.js
│ • CSS3 │ • MySQL │ • Express
│ • JavaScript │ • Design │ • REST API
│ • DOM / Events │ • Table Relations │ • Auth
│ │ │
└─────────────────────────┼─────────────────────────┘
│
┌──────────────▼──────────────┐
│ FULL-STACK STORE APP │
│ (Final Project) │
└─────────────────────────────┘
If you find a bug or want to suggest an improvement:
- 🐛 Create an Issue describing the problem
- 🔧 Or submit a Pull Request with a fix
- 💡 Suggest new examples or assignments
Create, experiment, don't be afraid to make mistakes!