inflearn logo

[E-book] Learn JavaScript for 10,000 Won — From Syntax to Practical UI

Hello, I am Gamja, a 4th-year frontend developer. Thinking back to when I first learned JavaScript, I remember many times when I felt like I understood everything while following along with YouTube videos or books, but my mind would go completely blank the moment I opened an empty editor. At first, I was just busy copying and pasting code I found through Googling. Because of that, when an error occurred, I didn't know where to start fixing it, and I would spend several days staying up all night in frustration. That’s when I realized a painful truth: writing one line of code yourself while understanding the principles is more valuable for your actual skills than copying someone else's code 100 times. Many beginners struggle with these concerns in front of the high wall of JavaScript: 🚨 "I made the screen look pretty with HTML/CSS, but I feel lost trying to make it move." 🚨 "I've memorized all the syntax for variables and functions, but I don't know how to combine them in practice." 🚨 "My head hurts just hearing terms like event bubbling or DOM manipulation." That is why I prepared this course. I have organized only the 'surest shortcuts' that I learned through countless trials and errors. While preparing the materials, I didn't list difficult development jargon. I boldly discarded the grammar found in thick textbooks that you won't even use right away. Instead, I will plant the core principles used in practice as naturally as breathing into your mind through intuitive everyday metaphors like 'conveyor belts' and 'paint palettes.' In this course, you won't just learn theory. As soon as you learn the theory, you will build four core UIs that you will inevitably encounter in frontend work—such as accordions, tab menus, and dark mode toggles—from scratch with me. After completing the course, you will no longer be someone who scrapes someone else's code and presses the run button while praying. You will be reborn as a real frontend developer who can design how to structure a screen on your own and write JavaScript code according to your intentions. I have included all of my practical know-how. Don't stop in front of an empty editor anymore. It's time to get started.

4 learners are taking this course

Level Basic

Course period Unlimited

frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y
frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y

What you will gain after the course

  • Understanding the core operating principles of JavaScript (variables, functions, control flow statements)

  • A Perfect Understanding of DOM Manipulation and Event Handling

  • How to breathe life into static screens made with HTML/CSS

  • Implement practical UI components such as accordions, tab menus, and dark mode yourself.

  • The ability to write code according to your own intentions, going beyond simply 'copy-pasting' others' code.

📌 Recommended for the following people

  • Those who know HTML/CSS but get stuck when it comes to JS

  • Those who want to learn at their own pace by reading instead of watching lecture videos

  • Those who can copy and paste code but don't understand why it works

  • Those who don't know where to start when an error occurs


🚨 Have you ever had an experience like this?

"I thought I understood everything while following along with YouTube tutorials, but I can't do anything when I open a blank editor."

"I've memorized the syntax for variables and functions, but I don't know how to combine them in practice."

"Event bubbling, DOM manipulation... just hearing the terms gives me a headache."

I’ve experienced this frustration myself. When I first learned JS, I was busy copying and pasting code I found through Googling, and when an error occurred, I would stay up all night in frustration because I didn't know where to start fixing it.

I realized it then, deep in my bones.

"Writing one line of code yourself while understanding the principles is more valuable for your skills than copying someone else's code 100 times."

This course began from that experience.

📖 How is this course conducted?

This course is provided in an e-book format. You can learn by reading without any videos.

HTML and CSS are provided in their completed state, and we will write the JS code together line by line. Every time code is added, we first explain "why we are using this code" and then proceed by checking the execution results.

Because you write the code after understanding the principles rather than simply typing along, you will be able to apply what you've learned to new situations even after the lecture ends.

Additionally, each chapter includes a live demo that you can click and interact with directly. You can see the results immediately as you read, making understanding much faster.

🗂️ Curriculum

Part 1. Basic JS Syntax — Building the Foundation of the Language

  • Chapter 1. What is JavaScript — What JS does in the browser, how to use the console

  • Chapter 2. Variables and Data Types — let/const, primitive types, typeof, type conversion

  • Chapter 3. Operators — Arithmetic/Assignment/Comparison/Logical Operators, Short-circuit Evaluation, Optional Chaining

  • Chapter 4. Control Flow and Loops — if/else, switch, for/while/for...of, break/continue

  • Chapter 5. Function Basics — Declaration/Expression/Arrow Functions, Scope, Parameter Patterns

Part 2. DOM and Events — Manipulating the browser as you wish

  • Chapter 6. What is the DOM — DOM tree structure, the role of the document object

  • Chapter 7. DOM Selection and Manipulation — querySelector, textContent/innerHTML, classList

  • Chapter 8. Event System — addEventListener, Event Object, Bubbling, Event Delegation

Part 3. Practical Examples — Building What You've Learned Yourself

  • Chapter 9. Accordion — classList.toggle and Event Delegation Patterns

  • Chapter 10. Tab Menu — A pattern for linking tabs and panels by index

  • Chapter 11. Dark Mode Toggle — CSS variables, body class switching, localStorage

  • Chapter 12. Character Limit Counter — input event, real-time state reflection

🛠️ This is how the practical examples will proceed

All practical examples are provided with separate HTML, CSS, and JS files.

HTML/CSS — Provided in a completed state. Check the structure and design first before starting.

JS — We will build it ourselves by adding code line by line in stages. At each step, I will explain "why this code is necessary" before moving on to the next line.

Adding Features — Once the basic functionality is complete, we'll try adding extra features. For example, we'll add an "Expand/Collapse All" button for the accordion and "Keyboard Arrow Key Navigation" for the tabs.

Live Demo — Each chapter includes a demo that you can click and interact with directly. You can see the results with your own eyes immediately while reading the code.

✅ What you will gain after taking the course

Knowledge Aspect

  • Full JS basic syntax — You will understand and be able to use variables, types, operators, conditional statements, loops, and functions yourself.

  • Understand the principle of how the browser converts HTML into the DOM.

  • You can freely utilize DOM APIs used daily in practice, such as querySelector, classList, and addEventListener.

  • You can understand and apply event bubbling and event delegation patterns.

In terms of practical skills

  • Accordion, tab menu, dark mode toggle, and character counter — you can directly build 4 UI components that can be used immediately in practice.

  • You will develop the habit of writing structured code by separating HTML, CSS, and JS files.

  • You will internalize the role separation pattern where JS only toggles classes and CSS handles the visual changes.

  • You will know how to save user settings with localStorage and detect the system dark mode. và cách phát hiện chế độ tối (dark mode) của hệ thống.

In terms of mindset

  • You will be able to explain the "why" behind the code you wrote.

  • You will get a sense of what order to approach things in when creating a new UI.

  • You no longer need to copy and paste someone else's code.

💬 Q&A Guide

If you get stuck while watching the lecture, please feel free to leave a question at any time.

We will respond within 2 to 3 business days. Please do not give up after struggling alone for days. We will help you solve the problems where you are stuck.. Đừng một mình loay hoay suốt nhiều ngày rồi bỏ cuộc. Chúng tôi sẽ cùng bạn giải quyết những chỗ đang gặp vướng mắc.

However, please note that it may be difficult to provide answers in the following cases.

  • Advanced content beyond the scope of the lecture

  • Request for a full code review of a personal project

⚠️ Please check before taking the course

Prerequisite knowledge required

  • You must be able to read basic HTML tags (div, button, input, etc.).

  • You need to understand the concept of applying styles using class and id in CSS.

It's okay if you don't know these things

  • You don't need to know JS at all. We'll start from the very beginning together.

  • It's okay even if you don't have any programming experience.

  • You can start right away with just a browser, without any development environment setup.

Recommended for
these people

Who is this course right for?

  • Those who know how to use HTML/CSS but get stuck when it comes to JS

  • Those who find watching lecture videos frustrating

  • Those who copy and paste code from search results without knowing why it works

Need to know before starting?

  • A very basic knowledge of HTML and CSS is required. (Just knowing the concepts of tags, classes, and IDs is enough!)

  • It's okay if you don't have any prior programming experience. We will teach you step-by-step from the very beginning.

Hello
This is kamjaaaaaaa

Hello, I'm Gamja, a frontend developer with 4 years of experience.

Currently, I am developing a global mobility service. I have gained practical experience by building multi-language services, and I am also a global Top 30 contributor to react-hook-form, an open-source library used by developers worldwide.

But I wasn't always like this from the beginning.

When I first learned JS, I felt like I understood everything while following along with YouTube tutorials, but I countless times experienced my mind going blank the moment I opened an empty editor. At first, I was busy just copying and pasting code I found through Googling, and when an error occurred, I didn't know where to start, leading to many frustrated nights staying up for days.

I struggled a lot during that process. I wrote code without even knowing what the DOM was, and I wasted hours not understanding why an event was firing twice. What I needed most back then wasn't memorizing vast amounts of syntax. It was someone who could explain "why this code works."

I created this course by organizing everything I've built up over four years of practical experience, along with the areas where I struggled the most as a beginner. You don't have to take the long way around like I did. I've already been through it for you.

More

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Similar courses

Explore other courses in the same field!

Limited time deal

$6,930.00

30%

$7.70