Module 4: HTML + CSS + JavaScript
Course Overview
| Field |
Details |
| Module Number |
Module 4 |
| Module Name |
HTML + CSS + JavaScript |
| Status |
Syllabus Pending — to be added by Rahul |
| Study Duration |
[ To be defined ] |
| Exam Format |
Live coding / explanation via recorded Teams call |
| Attempts |
Up to 3 per part |
| OneDrive Link |
[ Add OneDrive link when available ] |
Syllabus
The course follows this sequence:
-
| [Foundations |
The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations) |
-
| [Build web pages with HTML and CSS for beginners — Training |
Microsoft Learn](https://learn.microsoft.com/en-us/training/paths/build-web-pages-html-css-for-beginners/) |
- Frontend Web Development Bootcamp Course (JavaScript, HTML, CSS) — freeCodeCamp, via Class Central
-
| [Full Stack JavaScript |
The Odin Project](https://www.theodinproject.com/paths/full-stack-javascript) |
Part 1 — Foundations (The Odin Project)
| # |
Topic |
Category |
| 1 |
Introduction to Web Development |
Overview |
| 2 |
Prerequisites: how the web works, installations, text editors, command line basics |
Overview |
| 3 |
Git Basics |
Git |
| 4 |
HTML Foundations (elements, tags, boilerplate, text, lists, links/images) |
HTML |
| 5 |
Project: Recipes |
HTML |
| 6 |
CSS Foundations (cascade, inspecting HTML/CSS, box model, block and inline) |
CSS |
| 7 |
Flexbox (introduction, growing/shrinking, axes, alignment) |
CSS |
| 8 |
Project: Landing Page |
CSS |
| 9 |
JavaScript Basics (variables, operators, data types, conditionals, functions) |
JavaScript |
| 10 |
Project: Rock Paper Scissors |
JavaScript |
| 11 |
Clean Code, Loops and Arrays, DOM Manipulation and Events |
JavaScript |
| 12 |
Project: Etch-a-Sketch |
JavaScript |
| 13 |
Object Basics |
JavaScript |
| 14 |
Project: Calculator |
JavaScript |
Part 2 — Build web pages with HTML and CSS for beginners (Microsoft Learn)
| # |
Topic |
Category |
| 15 |
Build your first HTML webpage |
HTML |
| 16 |
Use CSS styles in a webpage |
CSS |
| 17 |
Learn the basics of web accessibility |
HTML / CSS |
Part 3 — Frontend Web Development Bootcamp (freeCodeCamp, via Class Central)
| # |
Topic |
Category |
| 18 |
Your first JavaScript program |
JavaScript |
| 19 |
What is JavaScript? |
JavaScript |
| 20 |
JavaScript variables |
JavaScript |
| 21 |
Basic JavaScript challenges |
JavaScript |
| 22 |
JavaScript operators |
JavaScript |
| 23 |
5 more JavaScript challenges |
JavaScript |
| 24 |
JavaScript functions, conditionals, loops |
JavaScript |
| 25 |
25 Beginner JavaScript practice problems |
JavaScript |
| 26 |
Built-in JavaScript methods |
JavaScript |
| 27 |
Callback functions |
JavaScript |
| 28 |
JavaScript primitives |
JavaScript |
| 29 |
JavaScript Dates |
JavaScript |
| 30 |
Regular Expressions |
JavaScript |
| 31 |
JavaScript String methods |
JavaScript |
| 32 |
JavaScript Array methods |
JavaScript |
| 33 |
Math utilities with JavaScript |
JavaScript |
| 34 |
Error types and other JavaScript concepts |
JavaScript |
| 35 |
10 Beginner / Intermediate JavaScript practice problems |
JavaScript |
| 36 |
HTML Crash Course |
HTML |
| 37 |
“About me page” HTML challenge |
HTML |
| 38 |
Document Object Model (DOM) |
JavaScript / HTML |
| 39 |
HTML + JavaScript “Meme Generator” challenge |
JavaScript / HTML |
| 40 |
CSS Crash Course |
CSS |
| 41 |
The CSS Box Model |
CSS |
| 42 |
Most common CSS properties |
CSS |
| 43 |
Frontend Mentor CSS “Pricing Card” challenge |
CSS |
| 44 |
Introduction to responsive web design |
CSS |
| 45 |
CSS Flexbox Crash Course |
CSS |
| 46 |
Frontend Mentor CSS Flexbox “Testimonials” challenge |
CSS |
| 47 |
Final thoughts and next steps |
Overview |
Part 4 — Full Stack JavaScript (The Odin Project)
| # |
Topic |
Category |
| 48 |
Intermediate HTML and CSS |
HTML / CSS |
| 49 |
JavaScript (DOM manipulation, OOP, fetching data from APIs) |
JavaScript |
| 50 |
Advanced HTML and CSS |
CSS |
| 51 |
React |
JavaScript / React |
| 52 |
Databases (relational databases, SQL) |
Databases |
| 53 |
NodeJS (Express, PostgreSQL) |
Node.js |
| 54 |
Getting Hired |
Overview |
Study Resources
| # |
Resource Name |
Type |
URL |
| 1 |
Foundations | The Odin Project |
Course |
link |
| 2 |
Build web pages with HTML and CSS for beginners |
Training |
link |
| 3 |
Frontend Web Development Bootcamp Course (JavaScript, HTML, CSS) |
Course |
link |
| 4 |
Full Stack JavaScript | The Odin Project |
Course |
link |
Videos & Course Material
Grads: add your own video links here via PR! See Contributing.
| Topic |
Video |
Contributed by |
| add topic |
add YouTube link |
your name |