Introduction to Frontend Development with HTML, CSS, JS, and React

What you’ll learn

• Build semantic and structured web pages using HTML.
• Design and style responsive layouts with CSS and TailwindCSS.
• Add dynamic interactivity and functionality to websites with JavaScript.
• Develop complex, component-based user interfaces using React and TypeScript.
• Manage your projects with version control using Git and GitHub.

A playlist teaches. This proves you learned it.

Every feature below ladders up to one question: can you actually do the job and pass the interview.

Inside the course

7 milestones, 49 lessons, ~5 hours of video. Every lesson comes with hands-on tasks and active-recall checks — you practise it, not just watch it.

1. 1

   HTML Fundamentals

   9 topics

   Start building the structure of web pages with HTML. This milestone covers setting up your development environment, understanding the basic syntax of HTML, and working with essential tags for text, lists, links, images, tables, and forms.

   • Setting Up Your Development Environment
   • Creating Your First HTML File
   • Understanding the HTML Boilerplate
   • Working with Typography Tags
   • Inline Text Styling and Lists
   • Creating Links and Understanding Attributes
   • Embedding Images
   • Buttons and Tables
   • Building HTML Forms
2. 2

   Styling with CSS Fundamentals

   9 topics

   Learn to add style and design to your HTML structures using CSS. This milestone covers the different ways to apply CSS, core concepts like selectors, the box model, and how to style typography, colors, backgrounds, and more.

   • Applying CSS: Inline, Internal, and External Stylesheets
   • CSS Selectors and Color Values
   • Using Browser Developer Tools for CSS
   • Styling Typography
   • The CSS Box Model: Margin, Padding, and Borders
   • Working with Backgrounds and Gradients
   • Styling Lists
   • Styling Buttons and Using Pseudo-Classes
   • Positioning Elements and Introduction to Media Queries
3. 3

   JavaScript Programming Fundamentals

   9 topics

   Bring your websites to life with JavaScript. You'll learn the core programming concepts, including variables, data types, arrays, objects, loops, and conditional logic, setting the stage for DOM manipulation.

   • Introduction to JavaScript and Variables
   • Data Types and String Manipulation
   • Arrays and Basic Array Methods
   • Objects and JSON
   • Looping with for, for...of, and while
   • Higher-Order Array Loops (forEach, map, filter)
   • Conditional Logic with if/else
   • Ternary Operator and Functions
   • DOM Manipulation and Event Handling
4. 4

   Version Control with Git and GitHub

   4 topics

   Master the essential tools for version control and collaboration. This milestone explains the difference between Git and GitHub, and walks through the complete workflow of creating repositories, staging, committing, and pushing changes.

   • Git vs. GitHub and Initial Setup
   • Creating a Repository and Making Local Commits
   • Pushing to Remote and Working with Branches
   • Collaborating with Pull Requests and Resolving Conflicts
5. 5

   Rapid UI Development with Tailwind CSS

   5 topics

   Learn how to build modern, responsive user interfaces rapidly with Tailwind CSS. This milestone focuses on a practical, project-based approach to using utility classes for styling, layout, and responsiveness.

   • Setting Up Tailwind CSS
   • Building a Responsive Navbar
   • Creating the Hero and Card Sections
   • Building a Contact Form
   • Customizing the Theme
6. 6

   Building Applications with React

   9 topics

   Dive into building dynamic user interfaces with React, a powerful JavaScript library. You'll learn about components, JSX, state management with hooks like useState, handling events, and passing data with props.

   • Introduction to React and Project Setup with Vite
   • Understanding JSX and Rendering Components
   • Managing State with the useState Hook
   • Passing Data with Props
   • Rendering Lists and Handling Keys
   • Handling Component Events and Callback Functions
   • Filtering and Deleting State Data
   • Routing with React Router
   • Persisting State with `useEffect` and Local Storage
7. 7

   Writing Type-Safe Code with TypeScript

   4 topics

   Enhance your JavaScript projects with TypeScript for better scalability and safety. This milestone introduces you to type definitions, interfaces, generics, and how to apply them in a React application to prevent common bugs.

   • Introduction to TypeScript and Project Setup
   • Creating and Using Interfaces
   • Typing Component Props and Functional Components
   • Typing State, Events, and Functions