Web Development Beginner
From zero to your first real website: learn how the web works, then build pages with HTML, style them with CSS, and make them interactive with JavaScript — no experience needed.
Who this course is for
For complete beginners: no coding, Git, or terminal experience assumed. Every lesson pairs a short explanation with a graded challenge, so you practice in the editor instead of just reading. By the end you will have built four real projects — a personal page, a profile site, a responsive portfolio, and an interactive app — and published your own capstone website.
What you will be able to do
- Explain how the web works: browsers, servers, HTTP, and URLs
- Write semantic, accessible HTML pages and forms
- Style pages with CSS: selectors, the box model, typography
- Build layouts with Flexbox and CSS Grid
- Make sites responsive with mobile-first media queries
- Write JavaScript: variables, functions, arrays, and objects
- Manipulate the page with the DOM and handle user events
- Validate forms and store app state with localStorage
- Load data from an API with fetch, async/await, and JSON
- Use Git and GitHub to track and publish your work
- Build, polish, and deploy a complete responsive website
The Web & Your First Website
What actually happens when you visit a website — and your first hand-written page, by the end of the module.
HTML Foundations
The building blocks of every web page: elements, attributes, links, images, lists, tables, semantic structure, and accessible forms — ending with a project and a checkpoint.
- Introduction to HTML⭐ beginner⏳ 10 min read
- Elements⭐ beginner⏳ 12 min read
- Attributes⭐ beginner⏳ 10 min read
- Links⭐ beginner⏳ 12 min read
- Images⭐ beginner⏳ 12 min read
- Lists and Tables⭐ beginner⏳ 10 min read
- Semantic HTML & Page Structure⭐ beginner⏳ 12 min read
- Forms & Input⭐ beginner⏳ 14 min read
- Project: Personal Profile Website⭐ beginner⏳ 15 min read
- Checkpoint: HTML Understanding⭐ beginner⏳ 15 min read
CSS Foundations
Make pages yours: selectors and the cascade, the box model, typography, Flexbox and Grid, responsive design, and motion with a conscience.
- What CSS Is & How to Add It⭐ beginner⏳ 8 min read
- Selectors, Classes & the Cascade⭐ beginner⏳ 14 min read
- Units, Colors & Values⭐ beginner⏳ 10 min read
- Typography & Readability⭐ beginner⏳ 10 min read
- The Box Model⭐ beginner⏳ 14 min read
- Display & Flow⭐ beginner⏳ 10 min read
- Positioning⭐ beginner⏳ 10 min read
- Flexbox⭐ beginner⏳ 16 min read
- CSS Grid⭐ beginner⏳ 14 min read
- Responsive Design⭐ beginner⏳ 16 min read
- Transitions & Motion⭐ beginner⏳ 10 min read
- Project: Responsive Portfolio⭐ beginner⏳ 20 min read
JavaScript Foundations
Make pages behave: variables and functions, arrays and objects, the DOM, events, forms with validation, browser storage, and fetching data from APIs.
- What JavaScript Does⭐ beginner⏳ 10 min read
- Variables: Naming Values⭐ beginner⏳ 12 min read
- Types and Operators⭐ beginner⏳ 14 min read
- Making Decisions: if / else⭐ beginner⏳ 12 min read
- Loops: Repeating Work⭐ beginner⏳ 14 min read
- Functions: Reusable Code⭐ beginner⏳ 16 min read
- Scope and Arrow Functions⭐ beginner⏳ 14 min read
- Arrays: Lists of Values⭐ beginner⏳ 16 min read
- Objects: Labeled Data⭐ beginner⏳ 16 min read
- The DOM: Reading and Changing the Page⭐⭐ intermediate⏳ 16 min read
- Creating and Removing Elements⭐⭐ intermediate⏳ 14 min read
- Events: Listening and Reacting⭐⭐ intermediate⏳ 16 min read
- Forms: Reading Input and Validating⭐⭐ intermediate⏳ 16 min read
- Browser Storage: localStorage + JSON⭐⭐ intermediate⏳ 14 min read
- Asynchronous JavaScript: Promises and async/await⭐⭐ intermediate⏳ 18 min read
- Talking to Servers: fetch and APIs⭐⭐ intermediate⏳ 18 min read
- Checkpoint: JavaScript Foundations⭐⭐ intermediate⏳ 15 min read
- Project: Interactive Web App⭐⭐ intermediate⏳ 25 min read
Developer Tools, Git & GitHub
Work like a developer: drive the terminal, record history with Git, publish to GitHub, and deploy your site to the internet.
- The Terminal: Talking to Your Computer Directly⭐ beginner⏳ 12 min read
- Git: A Time Machine for Your Code⭐ beginner⏳ 16 min read
- Branches: Experiment Without Breaking Things⭐ beginner⏳ 16 min read
- GitHub: Your Code, Online⭐ beginner⏳ 16 min read
- Deploy: Put Your Site on the Internet⭐⭐ intermediate⏳ 14 min read
- Checkpoint: Developer Workflow⭐⭐ intermediate⏳ 12 min read
How Modern Websites Work
The architecture tour: frontend vs backend, HTTP and JSON, databases and authentication, DNS and HTTPS — the machine behind every page you have built.
Final Project
Plan, build, and ship a complete responsive website of your own — the capstone that turns everything you learned into a published site.