Week 1 — Web Development Foundations

Frontend vs. Backend: Understanding How Web Applications Work

Every modern web application has different parts working together to deliver a seamless user experience. In this lesson, you will learn the difference between frontend and backend development, understand the responsibilities of each, and discover how APIs connect the two.

We will explore how the frontend handles what users see and interact with, while the backend manages application logic, processes requests, and communicates with databases. Through practical examples, you will see how a user's action in a browser can trigger a request to a server and return the information needed to update the interface.

Prerequisite: Lesson 1 — How the Web Works: Browsers, HTTP, DNS, Domains, and Hosting.

Next lesson: Installing and Using VS Code and Browser Developer Tools.

Download lesson notes (PDF)

In this lesson, you will learn

Explain the difference between frontend and backend development.
Identify the technologies commonly used on each side.
Understand what APIs do and how they enable communication between frontend and backend systems.
Trace a simple request-and-response flow in a web application.
Recognize how frontend, backend, and databases work together to deliver a complete application.

Practical exercises

In your own words, explain what the frontend, backend, and API each do when a user loads a course page and views their enrollments.

Resources

Course outline

Course

Modern Frontend Web Development

Week 1 — Web Development Foundations

1. How the Web Works: Browsers, HTTP, DNS, Domains, and Hosting4 min
2. Frontend vs. Backend: Understanding How Web Applications Work
3. Installing and Using VS Code and Browser Developer ToolsLocked
4. Creating Your First HTML Page and Inspecting It with DevToolsLocked
5. Git and GitHub Fundamentals for BeginnersLocked

Week 2 — HTML and Page Structure

6. HTML Document Structure, Elements, Tags, and AttributesLocked
7. Headings, Paragraphs, Links, Images, and ListsLocked
8. Semantic HTML and Accessible Page StructureLocked
9. HTML Forms, Input Types, Labels, and ValidationLocked
10. Building a Complete Registration Website with HTMLLocked

Week 3 — CSS Fundamentals

11. Introduction to CSS, Selectors, and CSS RulesLocked
12. Colors, Backgrounds, Typography, and Web FontsLocked
13. The CSS Box Model, Margins, Padding, and BordersLocked
14. CSS Units, Specificity, Inheritance, and the CascadeLocked
15. Styling Your Registration Website with CSSLocked

Week 4 — Layouts and Responsive Design

16. CSS Display, Positioning, and the Flow of a PageLocked
17. CSS Flexbox for Modern Web LayoutsLocked
18. CSS Grid for Two-Dimensional LayoutsLocked
19. Responsive Design, Media Queries, and Mobile-First DevelopmentLocked
20. Building a Responsive Landing Page from ScratchLocked

Week 5 — Intermediate CSS and Website Design

21. CSS Variables and Reusable Design TokensLocked
22. Pseudo-Classes, Pseudo-Elements, and Advanced SelectorsLocked
23. CSS Transitions, Transforms, and AnimationsLocked
24. Reusable Components, UI Consistency, and Common Design PatternsLocked
25. Building and Deploying a Complete Business WebsiteLocked

Week 6 — JavaScript Fundamentals

26. Introduction to JavaScript and Running Your First ScriptLocked
27. Variables, Data Types, and OperatorsLocked
28. Conditional Statements and Boolean LogicLocked
29. Loops, Iteration, and Repetitive TasksLocked
30. Building a Grade Calculator and Number Guessing GameLocked

Week 7 — JavaScript Functions and Data Structures

31. Functions, Parameters, Return Values, and ScopeLocked
32. Arrays and Essential Array MethodsLocked
33. Objects, Properties, and Nested DataLocked
34. Modern JavaScript: Arrow Functions, Destructuring, and Template LiteralsLocked
35. Building an Expense Tracker with JavaScriptLocked

Week 8 — DOM Manipulation and Browser Storage

36. Understanding the DOM and Selecting HTML ElementsLocked
37. Changing Content, Styles, and Elements with JavaScriptLocked
38. Events, Event Listeners, and Interactive InterfacesLocked
39. Form Handling, Validation, and Local StorageLocked
40. Building a Task Manager with Persistent TasksLocked

Week 9 — HTTP, JSON, and Working with APIs

41. HTTP Requests, Responses, Status Codes, and JSONLocked
42. Understanding REST APIs, Endpoints, and Request MethodsLocked
43. Fetching Data with the JavaScript Fetch APILocked
44. Async/Await, Promises, and Handling API ErrorsLocked
45. Building a Data Explorer with a Public APILocked

Week 10 — API-Driven Applications

46. GET, POST, PUT, PATCH, and DELETE in PracticeLocked
47. Searching, Filtering, Sorting, and Paginating API DataLocked
48. Loading States, Empty Results, and Error HandlingLocked
49. Working with Mock APIs and Simulated CRUD OperationsLocked
50. Building a Product Explorer with Search and FiltersLocked

Week 11 — Bootstrap CSS Framework

51. Introduction to Bootstrap and Setting Up a ProjectLocked
52. Bootstrap Containers, Breakpoints, and the Grid SystemLocked
53. Bootstrap Typography, Utilities, Spacing, and ColorsLocked
54. Bootstrap Components: Navigation, Cards, Buttons, and FormsLocked
55. Building an Admin Dashboard with BootstrapLocked

Week 12 — Tailwind CSS

56. Introduction to Tailwind CSS and Project SetupLocked
57. Utility Classes, Spacing, Typography, and ColorsLocked
58. Responsive Design, Breakpoints, and State VariantsLocked
59. Reusable UI Patterns and Consistent Styling with TailwindLocked
60. Rebuilding the Admin Dashboard with Tailwind CSSLocked

Week 13 — React Fundamentals

61. What React Is, Why It Matters, and Setting Up a ProjectLocked
62. JSX, Components, and Rendering Your First InterfaceLocked
63. Props, Reusable Components, and Component CompositionLocked
64. Rendering Lists, Using Keys, and Conditional RenderingLocked
65. Building a Landing Page and Student Directory with ReactLocked

Week 14 — React State and Forms

66. Understanding React State and the useState HookLocked
67. Handling Events and Updating the InterfaceLocked
68. Controlled Inputs and React FormsLocked
69. Updating Arrays and Objects in StateLocked
70. Building a Student Management Application with ReactLocked

Week 15 — React Hooks, APIs, and Routing

71. Understanding useEffect and Component Side EffectsLocked
72. Fetching API Data in React ApplicationsLocked
73. Managing Loading, Error, and Empty States in ReactLocked
74. Client-Side Routing and Navigation in ReactLocked
75. Building a Multi-View API Explorer with ReactLocked

Week 16 — React Architecture and Testing

76. Organizing React Projects, Components, and FilesLocked
77. Reusable Hooks, Shared Logic, and Component DesignLocked
78. Understanding Frontend Testing and Writing Your First TestsLocked
79. Testing Components, User Interactions, and Common WorkflowsLocked
80. Building an E-Commerce Frontend with ReactLocked

Week 17 — Next.js and the App Router

81. React vs. Next.js and Setting Up a Next.js ProjectLocked
82. The App Router, Pages, Layouts, and Nested RoutesLocked
83. Dynamic Routes, Link Components, and NavigationLocked
84. Server Components, Client Components, and the use Client DirectiveLocked
85. Loading UI, Not Found Pages, and Page MetadataLocked

Week 18 — Next.js Data Fetching and Application Features

86. Fetching Data in Server and Client ComponentsLocked
87. Building Data Lists and Dynamic Detail PagesLocked
88. Handling Loading, Error, Empty, and Not Found StatesLocked
89. Search Parameters, Filtering, and Client-Side InteractionsLocked
90. Forms, State, Caching, and Safe Configuration in Next.jsLocked

Week 19 — Production Readiness and Deployment

91. Organizing Components, Utilities, and Data ModulesLocked
92. Responsive Design, Accessibility, and Functional TestingLocked
93. Metadata, Image Optimization, and Performance AuditsLocked
94. Environment Variables, Configuration, and Frontend Security AwarenessLocked
95. Production Builds, Vercel Deployment, and DebuggingLocked

Week 20 — Final Capstone Project

96. Defining Your Capstone Project Scope and Selecting a ProblemLocked
97. Planning Routes, Components, Data, and the User InterfaceLocked
98. Testing Your Application and Fixing DefectsLocked
99. Writing Your README and Preparing Your GitHub RepositoryLocked
100. Presenting and Demonstrating Your Final ProjectLocked

Course

Modern Frontend Web Development

Week 1 — Web Development Foundations

1. How the Web Works: Browsers, HTTP, DNS, Domains, and Hosting4 min
2. Frontend vs. Backend: Understanding How Web Applications Work
3. Installing and Using VS Code and Browser Developer ToolsLocked
4. Creating Your First HTML Page and Inspecting It with DevToolsLocked
5. Git and GitHub Fundamentals for BeginnersLocked

Week 2 — HTML and Page Structure

6. HTML Document Structure, Elements, Tags, and AttributesLocked
7. Headings, Paragraphs, Links, Images, and ListsLocked
8. Semantic HTML and Accessible Page StructureLocked
9. HTML Forms, Input Types, Labels, and ValidationLocked
10. Building a Complete Registration Website with HTMLLocked

Week 3 — CSS Fundamentals

11. Introduction to CSS, Selectors, and CSS RulesLocked
12. Colors, Backgrounds, Typography, and Web FontsLocked
13. The CSS Box Model, Margins, Padding, and BordersLocked
14. CSS Units, Specificity, Inheritance, and the CascadeLocked
15. Styling Your Registration Website with CSSLocked

Week 4 — Layouts and Responsive Design

16. CSS Display, Positioning, and the Flow of a PageLocked
17. CSS Flexbox for Modern Web LayoutsLocked
18. CSS Grid for Two-Dimensional LayoutsLocked
19. Responsive Design, Media Queries, and Mobile-First DevelopmentLocked
20. Building a Responsive Landing Page from ScratchLocked

Week 5 — Intermediate CSS and Website Design

21. CSS Variables and Reusable Design TokensLocked
22. Pseudo-Classes, Pseudo-Elements, and Advanced SelectorsLocked
23. CSS Transitions, Transforms, and AnimationsLocked
24. Reusable Components, UI Consistency, and Common Design PatternsLocked
25. Building and Deploying a Complete Business WebsiteLocked

Week 6 — JavaScript Fundamentals

26. Introduction to JavaScript and Running Your First ScriptLocked
27. Variables, Data Types, and OperatorsLocked
28. Conditional Statements and Boolean LogicLocked
29. Loops, Iteration, and Repetitive TasksLocked
30. Building a Grade Calculator and Number Guessing GameLocked

Week 7 — JavaScript Functions and Data Structures

31. Functions, Parameters, Return Values, and ScopeLocked
32. Arrays and Essential Array MethodsLocked
33. Objects, Properties, and Nested DataLocked
34. Modern JavaScript: Arrow Functions, Destructuring, and Template LiteralsLocked
35. Building an Expense Tracker with JavaScriptLocked

Week 8 — DOM Manipulation and Browser Storage

36. Understanding the DOM and Selecting HTML ElementsLocked
37. Changing Content, Styles, and Elements with JavaScriptLocked
38. Events, Event Listeners, and Interactive InterfacesLocked
39. Form Handling, Validation, and Local StorageLocked
40. Building a Task Manager with Persistent TasksLocked

Week 9 — HTTP, JSON, and Working with APIs

41. HTTP Requests, Responses, Status Codes, and JSONLocked
42. Understanding REST APIs, Endpoints, and Request MethodsLocked
43. Fetching Data with the JavaScript Fetch APILocked
44. Async/Await, Promises, and Handling API ErrorsLocked
45. Building a Data Explorer with a Public APILocked

Week 10 — API-Driven Applications

46. GET, POST, PUT, PATCH, and DELETE in PracticeLocked
47. Searching, Filtering, Sorting, and Paginating API DataLocked
48. Loading States, Empty Results, and Error HandlingLocked
49. Working with Mock APIs and Simulated CRUD OperationsLocked
50. Building a Product Explorer with Search and FiltersLocked

Week 11 — Bootstrap CSS Framework

51. Introduction to Bootstrap and Setting Up a ProjectLocked
52. Bootstrap Containers, Breakpoints, and the Grid SystemLocked
53. Bootstrap Typography, Utilities, Spacing, and ColorsLocked
54. Bootstrap Components: Navigation, Cards, Buttons, and FormsLocked
55. Building an Admin Dashboard with BootstrapLocked

Week 12 — Tailwind CSS

56. Introduction to Tailwind CSS and Project SetupLocked
57. Utility Classes, Spacing, Typography, and ColorsLocked
58. Responsive Design, Breakpoints, and State VariantsLocked
59. Reusable UI Patterns and Consistent Styling with TailwindLocked
60. Rebuilding the Admin Dashboard with Tailwind CSSLocked

Week 13 — React Fundamentals

61. What React Is, Why It Matters, and Setting Up a ProjectLocked
62. JSX, Components, and Rendering Your First InterfaceLocked
63. Props, Reusable Components, and Component CompositionLocked
64. Rendering Lists, Using Keys, and Conditional RenderingLocked
65. Building a Landing Page and Student Directory with ReactLocked

Week 14 — React State and Forms

66. Understanding React State and the useState HookLocked
67. Handling Events and Updating the InterfaceLocked
68. Controlled Inputs and React FormsLocked
69. Updating Arrays and Objects in StateLocked
70. Building a Student Management Application with ReactLocked

Week 15 — React Hooks, APIs, and Routing

71. Understanding useEffect and Component Side EffectsLocked
72. Fetching API Data in React ApplicationsLocked
73. Managing Loading, Error, and Empty States in ReactLocked
74. Client-Side Routing and Navigation in ReactLocked
75. Building a Multi-View API Explorer with ReactLocked

Week 16 — React Architecture and Testing

76. Organizing React Projects, Components, and FilesLocked
77. Reusable Hooks, Shared Logic, and Component DesignLocked
78. Understanding Frontend Testing and Writing Your First TestsLocked
79. Testing Components, User Interactions, and Common WorkflowsLocked
80. Building an E-Commerce Frontend with ReactLocked

Week 17 — Next.js and the App Router

81. React vs. Next.js and Setting Up a Next.js ProjectLocked
82. The App Router, Pages, Layouts, and Nested RoutesLocked
83. Dynamic Routes, Link Components, and NavigationLocked
84. Server Components, Client Components, and the use Client DirectiveLocked
85. Loading UI, Not Found Pages, and Page MetadataLocked

Week 18 — Next.js Data Fetching and Application Features

86. Fetching Data in Server and Client ComponentsLocked
87. Building Data Lists and Dynamic Detail PagesLocked
88. Handling Loading, Error, Empty, and Not Found StatesLocked
89. Search Parameters, Filtering, and Client-Side InteractionsLocked
90. Forms, State, Caching, and Safe Configuration in Next.jsLocked

Week 19 — Production Readiness and Deployment

91. Organizing Components, Utilities, and Data ModulesLocked
92. Responsive Design, Accessibility, and Functional TestingLocked
93. Metadata, Image Optimization, and Performance AuditsLocked
94. Environment Variables, Configuration, and Frontend Security AwarenessLocked
95. Production Builds, Vercel Deployment, and DebuggingLocked

Week 20 — Final Capstone Project

96. Defining Your Capstone Project Scope and Selecting a ProblemLocked
97. Planning Routes, Components, Data, and the User InterfaceLocked
98. Testing Your Application and Fixing DefectsLocked
99. Writing Your README and Preparing Your GitHub RepositoryLocked
100. Presenting and Demonstrating Your Final ProjectLocked