Frontend Fundamentals
Your first step into web development!
Overview
This course is a beginner-friendly, hands-on introduction to modern web development.
Rather than spending hours on theory before building anything, you’ll learn by creating small, practical projects. We’ll start with the foundations of HTML and CSS, introduce JavaScript and browser interactivity, work with local storage and APIs, and finish by building your first React application.
Each module builds on what you learned before it, giving you a clear path from your first webpage to a working React application.
What You’ll Build
Module 1 — Hello Web
Learn how a webpage is structured with HTML and how CSS changes its appearance.
You’ll learn: HTML structure, common HTML elements, basic CSS, and styling.
Source code: View Module 1 on GitHub
Module 2 — Click Counter
Bring your webpage to life by introducing JavaScript and responding to user actions.
You’ll learn: JavaScript basics, variables, DOM manipulation, and event listeners.
Source code: View Module 2 on GitHub
Module 3 — To-Do List
Build your first useful browser application: a to-do list that remembers your tasks even after you refresh the page.
You’ll learn: Functions, arrays, DOM manipulation, user input, and localStorage.
Source code: View Module 3 on GitHub
Module 4 — Weather App
Take your first step beyond the browser by connecting your application to real-world data from an external API. We’ll also introduce Vite as our development environment.
You’ll learn: APIs, fetch(), JSON data, asynchronous requests, and Vite.
Source code: View Module 4 on GitHub
Module 5 — Quote Generator
Build a simple quote generator while taking a closer look at asynchronous JavaScript.
You’ll learn: Functions, async/await, API requests, loading states, and updating the interface dynamically.
Source code: View Module 5 on GitHub
Module 6 — React Weather App
Now that you understand the fundamentals, we’ll rebuild the Weather App using React and Vite.
Instead of manually updating the DOM, you’ll learn how React lets us build an application using components and state.
You’ll learn: React fundamentals, JSX, components, useState, events, API requests, and Vite.
Source code: View Module 6 on GitHub
Capstone Project — My Dashboard
Once you’ve completed all six modules, it’s time to bring everything together.
For your capstone project, you’ll build a personal dashboard application that combines the concepts covered throughout the course.
Your dashboard can include:
- A personalized greeting
- A weather widget
- A to-do list
- A random quote
- Persistent data with
localStorage - A light/dark theme switcher
The goal of the capstone is not to introduce lots of new concepts. Instead, it gives you an opportunity to take what you already know and combine those skills into one complete application.
By the end of the course, you won’t just have followed along with tutorials — you’ll have built a collection of working projects and a final application that you can continue improving and make your own.
Using the Source Code
The source code for every module is available on GitHub. Use the repositories to follow along with the videos, compare your implementation, troubleshoot problems, or revisit a project later.
Try building each project yourself before looking at the finished code. Experiment, make changes, break things, and figure out why they broke. That’s where a lot of the learning happens.