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.
56 lessons0 challenges~12.75 hoursBeginner — 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 HTMLbeginner10 min read
- Elementsbeginner12 min read
- Attributesbeginner10 min read
- Linksbeginner12 min read
- Imagesbeginner12 min read
- Lists and Tablesbeginner10 min read
- Semantic HTML & Page Structurebeginner12 min read
- Forms & Inputbeginner14 min read
- Project: Personal Profile Websitebeginner15 min read
- Checkpoint: HTML Understandingbeginner15 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 Itbeginner8 min read
- Selectors, Classes & the Cascadebeginner14 min read
- Units, Colors & Valuesbeginner10 min read
- Typography & Readabilitybeginner10 min read
- The Box Modelbeginner14 min read
- Display & Flowbeginner10 min read
- Positioningbeginner10 min read
- Flexboxbeginner16 min read
- CSS Gridbeginner14 min read
- Responsive Designbeginner16 min read
- Transitions & Motionbeginner10 min read
- Project: Responsive Portfoliobeginner20 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 Doesbeginner10 min read
- Variables: Naming Valuesbeginner12 min read
- Types and Operatorsbeginner14 min read
- Making Decisions: if / elsebeginner12 min read
- Loops: Repeating Workbeginner14 min read
- Functions: Reusable Codebeginner16 min read
- Scope and Arrow Functionsbeginner14 min read
- Arrays: Lists of Valuesbeginner16 min read
- Objects: Labeled Databeginner16 min read
- The DOM: Reading and Changing the Pageintermediate16 min read
- Creating and Removing Elementsintermediate14 min read
- Events: Listening and Reactingintermediate16 min read
- Forms: Reading Input and Validatingintermediate16 min read
- Browser Storage: localStorage + JSONintermediate14 min read
- Asynchronous JavaScript: Promises and async/awaitintermediate18 min read
- Talking to Servers: fetch and APIsintermediate18 min read
- Checkpoint: JavaScript Foundationsintermediate15 min read
- Project: Interactive Web Appintermediate25 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 Directlybeginner12 min read
- Git: A Time Machine for Your Codebeginner16 min read
- Branches: Experiment Without Breaking Thingsbeginner16 min read
- GitHub: Your Code, Onlinebeginner16 min read
- Deploy: Put Your Site on the Internetintermediate14 min read
- Checkpoint: Developer Workflowintermediate12 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.