Frontend 12 modules

Frontend Development

Learn Frontend Development from the ground up with our comprehensive curriculum.

284 lessons in 12 modules 281 challenges auto-graded 1019 quiz questions
Start course
Frontend Development
Enrol to track progress 284 lessons

Course outline

12 modules 284 lessons 281 challenges 1019 quiz questions
1

HTML & CSS

48 lessons 45 challenges
1 Learn to Code HTML 0 / 14 1. HTML Basics
Video Quiz Challenge
 2. Basic HTML Elements
Video Quiz Challenge
 3. HTML Attributes
Video Quiz Challenge
 4. HTML Links
Video Quiz Challenge
 5. HTML Lists
Video Quiz Challenge
 6. HTML Tables
Video Quiz Challenge
 7. HTML Forms
Video Quiz Challenge
 8. POST vs GET Requests
Quiz
 9. HTML Media Elements
Video Quiz Challenge
 10. HTML 5 Semantic Elements
Video Quiz Challenge
 11. HTML Styles
Video Quiz Challenge
 12. Best Practices for Writing HTML
Video Quiz Challenge
 13. ARIA Labels
Video Quiz Challenge
 14. SEO for HTML
Video Quiz Challenge
 2 Learn to Code CSS 0 / 23 1. CSS Basics
Video Quiz Challenge
 2. Selectors, Properties & Values
Video Quiz Challenge
 3. CSS Specificity
Video Quiz Challenge
 4. Relative & Absolute Units
Video Quiz Challenge
 5. CSS Colors
Video Quiz Challenge
 6. CSS Box Model
Video Quiz Challenge
 7. CSS Floating
Video Quiz Challenge
 8. CSS Positioning
Video Quiz Challenge
 9. Centering Elements
Video Quiz Challenge
 10. Displaying Elements in CSS
Video Quiz Challenge
 11. Shaping Elements in CSS
Video Quiz Challenge
 12. Typography
Video Quiz Challenge
 13. Backgrounds & Gradients
Video Quiz Challenge
 14. CSS Transforms
Video Quiz Challenge
 15. CSS Transitions & Animations
Video Quiz Challenge
 16. CSS Flexbox
Video Quiz Challenge
 17. CSS Grid
Video Quiz Challenge
 18. Responsive Web Design — Media Queries
Video Quiz Challenge
 19. Creating a CSS Grid System
Video Quiz Challenge
 20. Web Layouts
Video Quiz Challenge
 21. CSS Preprocessors (SASS / SCSS)
Video Quiz
 22. Bootstrap
Quiz
 23. CSS Best Practices
Video Quiz Challenge
 3 Modern CSS 0 / 5 1. CSS Custom Properties (Variables)
Quiz Challenge
 2. Fluid Sizing — clamp(), min(), max()
Quiz Challenge
 3. The :has() Parent Selector
Quiz Challenge
 4. Container Queries
Quiz Challenge
 5. Layout Primitives — aspect-ratio, logical properties, @layer
Quiz Challenge
 4 Forms Deep Dive 0 / 4 1. HTML5 Constraint Validation API
Quiz Challenge
 2. Mobile Keyboards, autocomplete, and inputmode
Quiz Challenge
 3. Accessible Form Errors — aria-describedby & live regions
Quiz Challenge
 4. File Inputs — Previews, Drag-and-Drop, FormData
Quiz Challenge
 5 CSS Architecture 0 / 2 1. BEM — Block, Element, Modifier
Quiz Challenge
 2. Layered Folder Structure & ITCSS
Quiz Challenge
2

One Pager

11 lessons 11 challenges
1 Build the One Pager 0 / 11 1. Intro & Project Setup
Video Quiz Challenge
 2. Common Styles & Reset
Video Quiz Challenge
 3. Header
Video Quiz Challenge
 4. Slider / Hero Section
Video Quiz Challenge
 5. Footer
Video Quiz Challenge
 6. About Section
Video Quiz Challenge
 7. Services & Tech Sections
Video Quiz Challenge
 8. Team Section
Video Quiz Challenge
 9. Contact Section
Video Quiz Challenge
 10. Interactivity (JavaScript)
Video Quiz Challenge
 11. Optimization & Lighthouse
Video Quiz Challenge
3

Bootstrap

4 lessons 4 challenges
1 Learn Bootstrap 0 / 4 1. Bootstrap
Video Quiz Challenge
 2. Bootstrap Grid System
Video Quiz Challenge
 3. Bootstrap Components
Video Quiz Challenge
 4. Bootstrap Forms
Video Quiz Challenge
4

Multi-Page Website

11 lessons 11 challenges
1 Build the Multi-Page Website 0 / 11 1. Intro & Project Setup
Video Quiz Challenge
 2. Basic HTML Structure
Video Quiz Challenge
 3. Common Styles & Reset
Video Quiz Challenge
 4. Header (shared across pages)
Video Quiz Challenge
 5. Footer (shared across pages)
Video Quiz Challenge
 6. Banner / Hero
Video Quiz Challenge
 7. Home Page
Video Quiz Challenge
 8. Gallery Page
Video Quiz Challenge
 9. Contact Page
Video Quiz Challenge
 10. News Page
Video Quiz Challenge
 11. Login / Sign-Up Pages
Video Quiz Challenge
5

JavaScript

96 lessons 96 challenges
1 JavaScript Basics 0 / 4 1. JavaScript Basics
Video Quiz Challenge
 2. Variables — Introduction
Video Quiz Challenge
 3. Variables — Coding
Video Quiz Challenge
 4. Variables — Practice
Video Quiz Challenge
 2 JavaScript Data Types 0 / 16 5. Data Types — Introduction
Video Quiz Challenge
 6. Data Types — Primitive vs Special
Video Quiz Challenge
 7. Data Types — Special (null, undefined, NaN)
Video Quiz Challenge
 8. Data Types — Booleans
Video Quiz Challenge
 9. Data Types — Numbers
Video Quiz Challenge
 10. Numbers — Methods
Video Quiz Challenge
 11. Numbers — Properties
Video Quiz Challenge
 12. Data Types — Strings
Video Quiz Challenge
 13. Strings — Basic Methods
Video Quiz Challenge
 14. Strings — Search Methods
Video Quiz Challenge
 15. Strings — Template Literals
Video Quiz Challenge
 16. Data Types — Practice
Video Quiz Challenge
 17. Type Conversions — Introduction
Video Quiz Challenge
 18. Conversions — Numbers to Strings
Video Quiz Challenge
 19. Conversions — Strings to Numbers
Video Quiz Challenge
 20. Conversions — Implementation Patterns
Video Quiz Challenge
 3 JavaScript Operators 0 / 6 21. Operators — Introduction
Video Quiz Challenge
 22. Operators — Arithmetic
Video Quiz Challenge
 23. Operators — Assignment
Video Quiz Challenge
 24. Operators — Comparison
Video Quiz Challenge
 25. Operators — Logical
Video Quiz Challenge
 26. Operators — Practice
Video Quiz Challenge
 4 JavaScript Conditional Statements 0 / 5 27. Conditional Statements — Introduction
Video Quiz Challenge
 28. Conditionals — if / else
Video Quiz Challenge
 29. Conditionals — switch
Video Quiz Challenge
 30. Conditionals — Ternary Operator
Video Quiz Challenge
 31. Conditionals — Practice
Video Quiz Challenge
 5 JavaScript Functions 0 / 5 32. Functions — Introduction
Video Quiz Challenge
 33. Functions — Coding
Video Quiz Challenge
 34. Functions — Types
Video Quiz Challenge
 35. Functions — Arrow Functions
Video Quiz Challenge
 36. Functions — Practice
Video Quiz Challenge
 6 JavaScript Events 0 / 4 37. Events — Introduction
Video Quiz Challenge
 38. Events — Coding
Video Quiz Challenge
 39. Events — Custom Events
Video Quiz Challenge
 40. Events — Practice
Video Quiz Challenge
 7 JavaScript Objects 0 / 4 41. Objects — Introduction
Video Quiz Challenge
 42. Objects — Coding
Video Quiz Challenge
 43. Objects — Constructors
Video Quiz Challenge
 44. Objects — Practice
Video Quiz Challenge
 8 JavaScript Arrays 0 / 15 45. Arrays — Introduction
Video Quiz Challenge
 46. Arrays — Coding
Video Quiz Challenge
 47. Arrays — Functions
Video Quiz Challenge
 48. Arrays — forEach
Video Quiz Challenge
 49. Arrays — Find Methods
Video Quiz Challenge
 50. Arrays — Iteration: map
Video Quiz Challenge
 51. Arrays — Iteration: filter
Video Quiz Challenge
 52. Arrays — Iteration: reduce
Video Quiz Challenge
 53. Arrays — every / some
Video Quiz Challenge
 54. Arrays — keys / values / entries
Video Quiz Challenge
 55. Arrays — with()
Video Quiz Challenge
 56. Arrays — Sort: alphabetical
Video Quiz Challenge
 57. Arrays — Sort: numeric
Video Quiz Challenge
 58. Arrays — Sort: objects
Video Quiz Challenge
 59. Arrays — Practice
Video Quiz Challenge
 9 JavaScript Loops 0 / 4 60. Loops — Introduction
Video Quiz Challenge
 61. Loops — Coding
Video Quiz Challenge
 62. Loops — break / continue
Video Quiz Challenge
 63. Loops — Practice
Video Quiz Challenge
 10 JavaScript Dates 0 / 6 64. Dates — Introduction
Video Quiz Challenge
 65. Dates — Create / Get / Set
Video Quiz Challenge
 66. Dates — Formats
Video Quiz Challenge
 67. Dates — Comparisons
Video Quiz Challenge
 68. Dates — Arithmetic
Video Quiz Challenge
 69. Dates — Practice
Video Quiz Challenge
 11 JavaScript Math Object 0 / 3 81. Math Object — Introduction
Video Quiz Challenge
 82. Math Object — Methods
Video Quiz Challenge
 83. Math Object — Properties
Video Quiz Challenge
 12 JavaScript This Keyword 0 / 3 70. this Keyword — Introduction
Video Quiz Challenge
 71. this Keyword — Coding
Video Quiz Challenge
 72. this Keyword — Practice
Video Quiz Challenge
 13 JavaScript Error Handling 0 / 3 73. Error Handling — Introduction
Video Quiz Challenge
 74. Error Handling — Coding
Video Quiz Challenge
 75. try / catch — Practice
Video Quiz Challenge
 14 JavaScript Fetch API 0 / 6 76. Fetch API — Introduction
Video Quiz Challenge
 77. Fetch API — GET
Video Quiz Challenge
 78. Fetch API — POST
Video Quiz Challenge
 79. Fetch API — PUT / PATCH / DELETE
Video Quiz Challenge
 80. Fetch API — HTTP Response Codes
Video Quiz Challenge
 91. Working with JSON
Video Quiz Challenge
 15 JavaScript Cookies 0 / 3 88. Cookies — Overview
Video Quiz Challenge
 89. Cookies — Setting and Reading
Video Quiz Challenge
 90. Cookies — Management
Video Quiz Challenge
 16 JavaScript Web Storage APIs 0 / 4 84. localStorage
Video Quiz Challenge
 85. sessionStorage
Video Quiz Challenge
 86. Web Storage API — Overview
Video Quiz Challenge
 87. Web Storage — People Management Form
Video Quiz Challenge
 17 JavaScript Fundamentals Exercises 0 / 5 92. Exercise — Arrays & Loops
Video Quiz Challenge
 93. Exercise — Events & Fetch API
Video Quiz Challenge
 94. Exercise — Objects
Video Quiz Challenge
 95. Exercise — UI Calculator
Video Quiz Challenge
 96. JavaScript — Best Practices
Video Quiz Challenge
6

JavaScript in the Browser

13 lessons 13 challenges
1 DOM, Events, and Two Mini-Projects 0 / 9 1. JavaScript in the Browser — Introduction
Video Quiz Challenge
 2. Selecting Elements
Video Quiz Challenge
 3. Manipulating HTML
Video Quiz Challenge
 4. Manipulating CSS
Video Quiz Challenge
 5. Built-in DOM Events
Video Quiz Challenge
 6. Project — UI Calculator
Video Quiz Challenge
 7. Project — TODO List
Video Quiz Challenge
 8. Dynamic Elements
Video Quiz Challenge
 9. Custom Data Attributes
Video Quiz Challenge
 2 Modern Browser APIs 0 / 4 1. IntersectionObserver — Lazy Load & Infinite Scroll
Quiz Challenge
 2. ResizeObserver — Components That Adapt to Their Box
Quiz Challenge
 3. MutationObserver — Reacting to DOM Changes
Quiz Challenge
 4. Drag-and-Drop API + File API
Quiz Challenge
7

jQuery

23 lessons 23 challenges
1 Learn jQuery 0 / 23 1. jQuery Basics — Introduction
Video Quiz Challenge
 2. jQuery Basics — Coding
Video Quiz Challenge
 3. jQuery Selectors — Introduction
Video Quiz Challenge
 4. jQuery Selectors — Coding
Video Quiz Challenge
 5. jQuery and HTML — Introduction
Video Quiz Challenge
 6. jQuery and HTML — Coding
Video Quiz Challenge
 7. jQuery and HTML — DOM Coding
Video Quiz Challenge
 8. jQuery and CSS — Introduction
Video Quiz Challenge
 9. jQuery and CSS — Coding
Video Quiz Challenge
 10. jQuery and CSS — Positions Coding
Video Quiz Challenge
 11. jQuery Events — Introduction
Video Quiz Challenge
 12. jQuery Events — Coding
Video Quiz Challenge
 13. jQuery Effects — Introduction
Video Quiz Challenge
 14. jQuery Effects — Coding
Video Quiz Challenge
 15. jQuery AJAX — Introduction
Video Quiz Challenge
 16. jQuery AJAX — GET Requests
Video Quiz Challenge
 17. jQuery AJAX — Forms
Video Quiz Challenge
 18. jQuery AJAX — Forms (English)
Video Quiz Challenge
 19. jQuery AJAX — Methods Reference
Video Quiz Challenge
 20. jQuery — Client-Side Form Validation
Video Quiz Challenge
 21. jQuery Project — Person Entry (Demo)
Video Quiz Challenge
 22. jQuery Project — Person Entry (Coding)
Video Quiz Challenge
 23. jQuery — Best Practices
Video Quiz Challenge
8

jQuery Exercises

15 lessons 15 challenges
1 Build 5 jQuery Components 0 / 15 1. Dropdowns — HTML scaffold
Video Quiz Challenge
 2. Dropdowns — CSS styling
Video Quiz Challenge
 3. Dropdowns — jQuery wiring
Video Quiz Challenge
 4. Accordions — HTML scaffold
Video Quiz Challenge
 5. Accordions — CSS styling
Video Quiz Challenge
 6. Accordions — jQuery wiring
Video Quiz Challenge
 7. Image Slider — HTML scaffold
Video Quiz Challenge
 8. Image Slider — CSS styling
Video Quiz Challenge
 9. Image Slider — jQuery wiring
Video Quiz Challenge
 10. Photo Gallery — HTML scaffold
Video Quiz Challenge
 11. Photo Gallery — CSS styling
Video Quiz Challenge
 12. Photo Gallery — jQuery wiring
Video Quiz Challenge
 13. Data Tables — HTML scaffold
Video Quiz Challenge
 14. Data Tables — CSS styling
Video Quiz Challenge
 15. Data Tables — jQuery wiring
Video Quiz Challenge
9

JavaScript Advanced

37 lessons 37 challenges
1 Async Programming 0 / 6 1. Async — Intro & Code
Video Quiz Challenge
 2. Async — Callbacks
Video Quiz Challenge
 3. Async — Promises
Video Quiz Challenge
 4. Async — async / await
Video Quiz Challenge
 5. Async — Promise.all
Video Quiz Challenge
 6. Async — Practice
Video Quiz Challenge
 2 Architecture Patterns 0 / 8 7. Patterns — Introduction
Video Quiz Challenge
 8. Module Pattern
Video Quiz Challenge
 9. Revealing Module Pattern
Video Quiz Challenge
 10. Singleton Pattern
Video Quiz Challenge
 11. Factory Pattern
Video Quiz Challenge
 12. Observer Pattern
Video Quiz Challenge
 13. Module Pattern — Practice
Video Quiz Challenge
 14. Architecture — Best Practices
Video Quiz Challenge
 3 NPM 0 / 8 15. NPM — Introduction
Video Quiz Challenge
 16. NPM — Commands (Presentation)
Video Quiz Challenge
 17. NPM — Commands (Code)
Video Quiz Challenge
 18. NPM — Managing Dependencies (Pres.)
Video Quiz Challenge
 19. NPM — Managing Dependencies (Code)
Video Quiz Challenge
 20. NPM — Scripts (Presentation)
Video Quiz Challenge
 21. NPM — Scripts (Code)
Video Quiz Challenge
 22. NPM — Best Practices
Video Quiz Challenge
 4 TypeScript 0 / 9 23. TypeScript — Intro (Presentation)
Video Quiz Challenge
 24. TypeScript — Intro (Code)
Video Quiz Challenge
 25. TypeScript — Overview
Video Quiz Challenge
 26. TypeScript — Data Types
Video Quiz Challenge
 27. TypeScript — Advanced Typing
Video Quiz Challenge
 28. TypeScript — Classes & Objects
Video Quiz Challenge
 29. TypeScript — The Compiler
Video Quiz Challenge
 30. TypeScript — Final Project
Video Quiz Challenge
 31. TypeScript — Best Practices
Video Quiz Challenge
 5 Webpack 0 / 6 32. Webpack — Introduction
Video Quiz Challenge
 33. Webpack — Basics
Video Quiz Challenge
 34. Webpack — JS / TS
Video Quiz Challenge
 35. Webpack — CSS / SCSS
Video Quiz Challenge
 36. Webpack — Advanced
Video Quiz Challenge
 37. Webpack — Optimization & Minification
Video Quiz Challenge
10

Browser DevTools

5 lessons 5 challenges
1 Browser DevTools 0 / 5 1. The Elements Panel — Inspecting & Editing the Live DOM
Quiz Challenge
 2. The Console — Logging, Evaluating, and Debugging
Quiz Challenge
 3. The Sources Panel — Breakpoints & Step Debugging
Quiz Challenge
 4. The Network Panel — Requests, Headers, and Waterfalls
Quiz Challenge
 5. Performance, Lighthouse & Memory — Profiling Your Site
Quiz Challenge
11

Web Performance

5 lessons 5 challenges
1 Web Performance 0 / 5 1. Core Web Vitals — LCP, INP, CLS
Quiz Challenge
 2. Image Optimization — Formats, srcset, lazy loading
Quiz Challenge
 3. Render-Blocking Resources & Critical CSS
Quiz Challenge
 4. Code Splitting, Tree-Shaking & Bundle Diet
Quiz Challenge
 5. Reading the Network Waterfall
Quiz Challenge
12

Assertion Test Suite

16 lessons 16 challenges
1 All Editor Types 0 / 16 1. L1 Plain HTML CSS JS — Frontend assertions A
Quiz Challenge
 2. L2 HTML SCSS jQuery — Frontend assertions B
Quiz Challenge
 3. L3 Angular — JS assertions A
Quiz Challenge
 4. L4 Vue — JS assertions B
Quiz Challenge
 5. L5 React — JS assertions C
Quiz Challenge
 6. L6 C# Console — Backend assertions full set
Quiz Challenge
 7. L7 VB Console — Backend assertions (VB.NET)
Quiz Challenge
 8. L8 C# MVC — Backend assertions (MVC shape)
Quiz Challenge
 9. L9 VB MVC — Backend assertions (VB MVC)
Quiz Challenge
 10. L10 SQL — every SQL assertion
Quiz Challenge
 11. L11 Bootstrap CSS framework
Challenge
 12. L12 TypeScript todos
Challenge
 13. L13 LESS mixins
Challenge
 14. L14 Tailwind utilities
Challenge
 15. L15 Angular component
Challenge
 16. L16 Assertion type coverage
Challenge