HTML/CSS, followed by JavaScript and React: An Introduction to Front-End Development with AI

🤖 In an era when AI writes code for you, why can’t I fix my own code?

AI can suggest code quickly. However, determining whether that code meets the requirements, fixing errors, and applying it to a real service are the developer’s responsibilities.

If your fundamentals are weak, you may end up copying AI’s answers as they are, and even when a small problem arises, you won’t know where to start fixing it.

This course is not about learning “how to ask AI to create code for you.” You will first learn the core syntax of JavaScript, the DOM, and events, then naturally expand into React’s component and state structure. AI is used as a learning partner, while the focus remains on developing the ability to read, modify, and verify generated code yourself.

Preview the completed project

▶ View the completed React version

https://ai-js-react.vercel.app/

Recommended for people like these 🙋

• For those who have learned HTML/CSS but feel lost about what to learn next.

• Those who have learned JavaScript syntax but get stuck when moving on to React

• Those who have tried AI coding tools but find it difficult to determine whether the code they receive is correct and fix it.

• Those who want to experience the full project workflow—from organizing requirements to implementation, testing, and building—beyond small examples.

Prerequisite knowledge

• A level at which you can create simple web pages with HTML/CSS (tag structure and basic styling)

• Basic usage of VS Code and web browsers (developer tools)

• No prior experience with JavaScript or React is required.

What makes this course different 💡

The perfect progression after HTML/CSS

You’ll progress one step at a time, in the order of JavaScript fundamentals → DOM and events → React.

Build the same feature twice (JavaScript → React)

First, build search and filtering in JavaScript, then reimplement the same functionality in React. This is where you gain a hands-on understanding of the differences between the two approaches.

Even if you get stuck, you can start over

Start and complete code are provided for every lesson. If you get stuck, start again from the start code for that lesson.

Hands-on implementation is central; AI is used selectively

It may be faster to leave everything to AI, but when problems arise, you won’t know what to fix. You will enter most of the code yourself to learn the underlying principles, and use AI only to organize requirements or suggest implementation approaches. You decide what to incorporate.

🛤️ Two Learning Methods to Suit Your Style

• Both methods use the same video. {{Please indicate where the learning notes are provided (e.g., the Class Materials tab).}}

• The learning notes are a manual to keep open beside the video and follow along with. They organize the prompts to enter, the code to write, and ways to check when you get stuck.

Here’s what you’ll learn 📚

🌱 Section 1 · AI and JavaScript: First Steps

Learn how to use AI as a coding partner rather than an answer generator, set up a JavaScript execution environment, and run your first code.

• Lesson 1 - What Should You Learn After HTML/CSS? Why You Need JavaScript

• Lesson 2 - How to Use AI as a Coding Partner, Not an Answer Sheet

• Lesson 3 - Getting Started with JavaScript - Variables and Data Types

  
  

🧩 Section 2 · The Power to Read Code: JavaScript Core Syntax

Learn variables, conditional statements, functions, arrays, objects, and map. Build the foundation to read and explain AI-generated code on your own.

• Lesson 4 - Code Makes Decisions on Its Own: Operators and if Statements

• Lesson 5 - No More Repetitive Code: Understanding Functions at a Glance

• Lesson 6 - Arrays: The Container for Product Lists

• Lesson 7 - How to Represent a Single Product: Objects and Data Structures

• Lesson 8 - From for to map: The Easiest Way to Work with Lists

• Lesson 9 - Your Ticket to React: Essential Modern JS Syntax

🖱️ Section 3 · The Power Behind Interactive Screens: DOM and Events

Select elements and handle click and input events to render product cards from data, then implement search and category filtering yourself.

• Lesson 10 - Get Hands-On with Elements on the Screen (DOM Selection)

• Lesson 11 - A Web That Responds When Clicked: Event Handling (Separation of Structure)

• Lesson 12 - Change the Screen with Code: Text, Styles, and Classes

• Lesson 13 - Cards Galore Just by Adding Data: List Rendering

• Lesson 14 - Build a product search that finds items instantly as you type

• Lesson 15 - Complete the Category Filter with a Single Button Click

⚛️ Section 4 · Expanding Your Thinking from JavaScript to React

Rebuild the feature you just created using a component, props, and state structure. This section helps you experience the difference between the two approaches firsthand.

• Lesson 16 - Why React? Experiencing the Limitations of Direct DOM Manipulation

• Lesson 17 - Your First React Project (Vite)

• Lesson 18 - Understanding JSX: JavaScript That Looks Like HTML, JSX

• Lesson 19 - Build the Screen Like LEGO: Separating the Product Card Component

• Lesson 20 - From Parent to Child: Passing Data with Props

• Lesson 21 - When Values Change, the Screen Changes Too: useState

• Lesson 22 - Handling Clicks and Input with React: Events and Forms

• Lesson 23 - Complete a List with Just One Array: map and key

• Lesson 24 - Design Before Building: Search Requirements and State Design

🛒 Section 5 · A React Product Exploration Project Completed with AI

From organizing requirements to implementing search, combined category and price filters, wishlisting, and product details. Wrap up with Vitest tests and a build, then compare code reviews and refactoring points using Copilot and Claude Code.

• Lesson 25 - Starting the Project: Organizing Requirements and Designing the Structure

• Session 26 - Implementing Product Search with React

• Session 27 - Combined Filters: Search + Category + Price Conditions

• Lesson 28 - Favorite Products You Like and View Their Details

• Lesson 29 - Will It Really Work Well? Verifying with Vitest

• Lesson 30 - AI Code Review, Refactoring, and Project Completion

The person who created this course

I’m a front-end instructor who has taught everyone from non-majors to beginners, covering everything from HTML/CSS to JavaScript and React.

At ESTSOFT KDT, Green Computer Academy, and other institutions, I have met many people who feel lost about “what to do after HTML/CSS.” That’s why I have created project-based classes that break down complex concepts into small hands-on exercises and guide students to complete their own finished projects.

I have authored web publishing and web design books, including “Learning to Code for the First Time with Web Publishing,” and run the web publishing YouTube channel 'ezweb'.

Inflearn EZWEB Full Course →

Do you have any questions?

Q. 🔰 I’m new to coding—can I keep up?

Basic knowledge is enough. We start step by step with JavaScript, and provide start code for each lesson so anyone can begin practicing in the same environment.

Q. 🤖 Which AI tool do you use, and is it paid?

The primary tool is GitHub Copilot, and you can complete the course using the free plan. {{Add one line after checking whether the free plan’s monthly usage limit could prevent you from completing the exercises}} In the later code review and refactoring sections, we also use Claude Code to compare the results from the two tools. Claude Code is paid, and we explain this upfront in the course. Installation instructions will be made available through a link to the instructor’s YouTube video.

Q. 💳 Is it difficult to take the course without paying for Claude Code?

Claude Code is only used in the section comparing the two tools, and the final work is done with Copilot. Even without paying, you can follow along by watching the comparison process in the video.

Q. 📓 Is it enough to just watch the videos, or do I also need the learning notes?

You can learn by simply following along with the videos. If you choose the second learning method (working with AI through prompts), the study notes are essential.

Things to Note Before Taking the Course

Recommended Next Steps

After completing this course, continue your learning with the following courses.

Practical React + TypeScript - Learn TypeScript Through a TodoList Project

Building Websites with AI - A Practical React Project with Stitch · Figma Make · React