JavaScript + HTML/CSS
Build a page with HTML and CSS, make it react with JavaScript, then load data from an API.
Foundations is free: 7 lessons.
39 lessons, 7 free
0 of 39 lessons passed
WEB COMPLETE
You can now:
- Build a page with semantic HTML and CSS
- Lay out pages that work on phones and desktops
- Write JavaScript with functions, arrays and objects
- Make pages react to clicks, keys and forms
- Load data from an API and handle errors
- Find and fix common JavaScript and page bugs
The final challenge: JavaScript final challenge: a song finder
Practise
The course, unit by unit
Part 1: Foundations
1 unit, 7 lessons
Part 1: Foundations
1 unit, 7 lessons
Part 2: Core
1 unit, 8 lessons
Part 2: Core
1 unit, 8 lessons
-
Unit 2: Core
4 hr 20 minBrainlag Code
- if and else in JavaScript, Brainlag Code
- JavaScript for and while loops, Brainlag Code
- JavaScript functions and return, Brainlag Code
- JavaScript arrays, Brainlag Code
- JavaScript array methods: find, sort, reduce, Brainlag Code
- JavaScript objects, Brainlag Code
- Reading JavaScript error messages, Brainlag Code
- JavaScript checkpoint: logicCheckpoint, Brainlag Code
Part 3: Deeper
3 units, 24 lessons
Part 3: Deeper
3 units, 24 lessons
-
Unit 3: The page
6 hr 15 minBrainlag Code
- Semantic HTML and accessibility, Brainlag Code
- The CSS cascade and hover states, Brainlag Code
- CSS grid and responsive layout, Brainlag Code
- CSS position: absolute, fixed and sticky, Brainlag Code
- The DOM: changing a page with JavaScript, Brainlag Code
- JavaScript click events, Brainlag Code
- Reading form inputs in JavaScript, Brainlag Code
- Form validation in HTML and JavaScript, Brainlag Code
- Bug hunt: web pages that misbehaveBug hunt, Brainlag Code
- Checkpoint: interactive web pagesCheckpoint, Brainlag Code
-
Unit 4: Data and the network
5 hr 15 minBrainlag Code
- JSON in JavaScript, Brainlag Code
- async, await and promises, Brainlag Code
- fetch and web APIs, Brainlag Code
- Error handling in JavaScript, Brainlag Code
- JavaScript modules: import and export, Brainlag Code
- JavaScript with an AI assistant, Brainlag Code
- JavaScript bug huntBug hunt, Brainlag Code
- JavaScript final challenge: a song finderFinal challenge, Brainlag Code
-
Unit 5: Build an app
4 hr 10 minBrainlag Code
- JavaScript event delegation, Brainlag Code
- Keeping the page in sync with your data, Brainlag Code
- Canvas drawing and timers in JavaScript, Brainlag Code
- localStorage in JavaScript, Brainlag Code
- Accessible web apps: keyboard and screen readers, Brainlag Code
- Checkpoint: build a small web appCheckpoint, Brainlag Code
Projects
Lessons teach one idea at a time. Projects glue them together: a brief, a few milestones and a starter file.
- Brainlag Code: Bill splitter45 min, 3 milestones
- Band tour poster30 min, 5 milestones
- Game character card40 min, 5 milestones
7 more projects
- Brainlag Code: One-question quiz40 min, 3 milestones
- Brainlag Code: To-do list with filters3 hours, 6 milestones
- Brainlag Code: Five-question quiz game2 hours, 5 milestones
- Brainlag Code: Flashcards that learn with you2 hours, 5 milestones
- Brainlag Code: Film night picker4 hours, 6 milestones
- Brainlag Code: Snake on a canvas3 hours, 6 milestones
- Brainlag Code: Listening stats dashboard3 hours, 5 milestones
Bigger builds included in Brainlag Code
Questions
What is the course about?
Make things people can click. Build a page with HTML and CSS, make it react with JavaScript, then load data from an API. Everything runs right here in the page. It is for: total beginner.
What is free?
7 of the 39 lessons.
Do I need to install anything?
No. Your code runs in the browser, in the editor beside each lesson.
Do I need an account?
No. Progress saves in this browser; sign in to keep it on every device.
What can I do by the end?
- Build a page with semantic HTML and CSS
- Lay out pages that work on phones and desktops
- Write JavaScript with functions, arrays and objects
- Make pages react to clicks, keys and forms
- Load data from an API and handle errors
- Find and fix common JavaScript and page bugs
How long does it take?
About 23 hr 5 min of lessons in 5 units. Lessons take 20 to 60 minutes each.