
Complete JavaScript in One Go: From Vanilla JavaScript to SPA Development
hyobin
Let's learn from basic syntax to advanced concepts while developing a SPA with vanilla JavaScript🔥
초급
JavaScript, SPA, DOM
If you aspire to be a web frontend developer? Take your first step with fun JavaScript courses✨

Reviews from Early Learners
5.0
일론 머스크
The lecture content is really stuck in my head. Other lectures are honestly boring and I often find it hard to focus, so I sometimes just zone out while watching, but this lecture makes me focus and follow along. Even though I don't have any background knowledge about the technology, I can still enjoy the lecture and focus on it, so I think the teacher's communication skills are amazing. Thank you for creating such a great lecture.
5.0
Ch.3
I worked as an operating publisher for about 3 years. I always used jQuery a lot, so I had a thirst for JavaScript. For those who want to study JavaScript for the first time like me, this is the best lecture! It implements and explains in detail not only the basics but also advanced learning. It was also great that it emphasized important parts and did not miss them, and it was helpful for practical work. The reasonable price and lecture time were a great help in completing the lecture. It made me want to study JavaScript harder!! Thank you!! I look forward to the next lecture!
5.0
시콜라킹
Today, I completed the project. I was learning React, but I purchased this course to solve my shortcomings, review, and regrets about JavaScript. The instructor's clear pronunciation and voice were great, and I was able to relearn and review parts of JavaScript that I had been confused or had forgotten. I can see the text that was organized in the same way as the video, so I will read it from time to time and continue studying. Thank you. Highly recommended!
Reasons to Learn JavaScript
Basic concepts of web development
Frequently used JavaScript syntax in practice
Developing a project that can actually be used
A stepping stone for learning Typescript, React.js, and Next.js.
JavaScript first steps
from basic concepts to web page creation🚀
The 'JavaScript First Steps for Web Frontend' course has received so much love from students that
it has been published as a book titled 'JavaScript First Steps' 🙇🏻♀️
Since the book contains the content from the course, it would be great to read it as a reference when taking the course :)
Thank you to all the students, and we ask for your continued interest.
JavaScript is a globally popular language and a programming language actually used by many companies. The most widely used libraries and frameworks in web frontend development today, such as React, Vue, and Next, are all based on JavaScript, so you need to learn JavaScript to use them flexibly.
From basics to advanced grammar
Easy learning
All lecture materials used in the course provided
Develop unique projects from scratch
Those who want to thoroughly learn JavaScript, the foundation of frontend development,
from basic to advanced concepts
Development beginners and non-majors can also take this course
We explain everything kindly and in detail. (We also provide lecture script web pages.)
Unlike common projects like Todo Lists,
you can directly develop and even use your own "custom Chrome start page."
Stop taking courses that only teach language and grammar!
Learn step by step about JavaScript fundamentals, advanced grammar, why you need to learn JavaScript, how JavaScript works,
and how to do web programming with JavaScript systematically and thoroughly, then effectively master JavaScript by developing real-world projects that you can actually use by applying what you've learned.
.gif)
The JavaScript First Steps for Web Frontend course is...
These are actual reviews from students who have taken "JavaScript First Steps for Web Frontend."
🧑🎓
The visual materials are clean and the instructor's delivery is excellent. You explained the key points clearly, so it was great to listen to for review purposes as well! The lecture materials you provided were also helpful for organizing what I learned! Thank you for the great lecture
👩🏻💻
Clean PPT, examples that make everything click, I think this is the best lecture that teaches necessary functions without any fluff!! The most disappointing thing is that there's only one lecture by Hyobin. Please make more lectures :)
🙆♂️
The lecture content goes straight into my head. Honestly, other lectures are often boring and I have trouble concentrating, so there were times when I would zone out while watching, but with this lecture, I keep focusing and following along. Even though I have no background knowledge about the technology, the fact that I find myself concentrating and watching the lecture with interest shows that the teacher's delivery skills are incredible. Thank you for creating such a great lecture.
🕵️♀️
Content that I couldn't understand well while studying alone is now being understood clearly as I listen to the lectures. I especially love how you explain JavaScript terminology and concepts that can be difficult, easily with example code. I think this is a must-take course before learning React, Vue.js, etc.! I hope there will be an advanced JavaScript course as well😍
Section 1. Why Should You Learn JavaScript?
What kind of language is JavaScript? Why is it popular and used by many companies?
Reasons why you should learn JavaScript - we'll tell you about them.
Section 2. Getting Started with JavaScript
First, we'll learn about where and how JavaScript operates.
Then, we'll examine various example codes one by one in an online editor that anyone can easily use, while learning in detail about the basic concepts of JavaScript.
Section 3. Applying JavaScript
You'll learn advanced concepts that are a bit more challenging than what you learned in the previous section, along with various visual materials. After picking up only the essential concepts you need, you can learn in detail about asynchronous processing, which is an important concept in JavaScript.
Section 4. DOM and DOM API
You will learn in detail about the DOM object that manipulates web pages. Through live coding, you can try using various JavaScript DOM APIs one by one together. You'll practice using frequently used DOM APIs and manipulate web pages in various ways.
Section 5. Preparing the Project
This is a time to learn in detail additional concepts needed when creating "My Own Chrome Start Page". Since we'll learn the necessary concepts in detail beforehand, you'll be able to develop the project without much difficulty in the next section.
Section 6. Project: My Own Chrome Start Page

We will develop "My Own Chrome Start Page" by utilizing everything we've learned from sections 1 through 5.
Even if it's content we've already learned, we'll go through it step by step slowly, so you can review what you've learned while developing the project at the same time. At the end, we'll even set it up together so you can actually use the project you've developed.
Bonus. Essential CSS You Must Know
This is a JavaScript course, but in Section 6, you can learn about the two most commonly used CSS properties that are good to know for project development.
If you're already proficient with CSS, you can skip that section.
Q. I'm new to programming. Is it okay for me to take this course?
Yes. This course is designed to explain various JavaScript concepts in detail and in a kind manner, making it accessible even for those who are new to programming, so you can take it without difficulty. Since we provide both the PPT slides and scripts used in the course completely free of charge, taking the course along with these learning materials will be much more helpful for understanding the course content.
Q. Is it okay if I don't know HTML and CSS?
HTML and CSS are knowledge needed only in sections 5-6. HTML code and CSS code are provided separately, so you can learn JavaScript without any problems even if you don't know HTML and CSS.
Additionally, for HTML, we provide a brief explanation of what each line of code does as we write it, so you can follow along without much difficulty. For CSS, properties that require conceptual explanations are covered in detail separately in the [Appendix] section. Therefore, if you need it, you can take that section first and then take the main lecture to follow along without difficulty.
Q. What should I study after completing the entire course?
If you've taken courses to become a web frontend developer, I recommend first trying to create the final project "My Own Chrome Start Page" on your own. Later, you can study JavaScript more deeply, including difficult concepts, or learn JavaScript-based libraries and frameworks such as React.js, Vue.js, or Next.js.
💾 Please check before taking the course!
Who is this course right for?
For those who are new to programming
For those who want to complete unique projects
To those aspiring to be front-end developers
For those who want to learn JavaScript quickly and thoroughly.
For those looking for a JavaScript course with friendly explanations
For those who want to take the course along with the course materials.
For those who lack a foundation in JavaScript
Need to know before starting?
CSS (Concepts only needed in Section 6)
HTML (Concept needed only in Section 6)
11,572
Learners
375
Reviews
136
Answers
4.9
Rating
8
Courses
Hello, I'm Hyobin Kim 😊
I provide easy and friendly lectures for those who aspire to become front-end developers.
(Current) Frontend Development Instructor
(Former) Startup Frontend Lead Developer
Web page
Online Courses
Books
External Activities
Conducted special lectures at Udemy, Codeit, Hanyang Women's University, etc.
All
42 lectures ∙ (6hr 47min)
Course Materials:
9. operator
10:17
12. Scope
07:56
13. Hoisting
06:18
15. object
15:07
16. array
10:54
17. Loop
18:14
All
95 reviews
4.8
95 reviews
Reviews 2
∙
Average Rating 5.0
5
I think this is the most friendly and detailed lecture among the JavaScript lectures for beginners. It goes over even the most detailed concepts accurately, and on top of that, it explains all the codes in detail, so I think it's a good lecture that you can take without having to Google it separately. 1. The visuals are very intuitive and pretty. 2. It's so nice to listen to without getting tired because of the accurate diction! 3. There are many lectures that usually only teach you grammar and end, but the process of applying what you've learned and creating a practical project is very impressive.
Thank you, Jeonghwan😀
Reviews 1
∙
Average Rating 5.0
5
**A lecture that gave hope that even a dropout can code** After entering computer science, even the professor gave up on me, This lecture saved me No matter how much I read the book, I couldn't understand what it was saying, but it's amazing that it goes into my head without subtitles I highly recommend this to anyone who needs a lecture at eye level like me!!
I'm so glad that my lecture was helpful to Hansol😃 Thank you for listening attentively!
Reviews 1
∙
Average Rating 5.0
5
I'm starting to understand things that I didn't understand well while studying on my own through the lectures. I especially like how the terms and concepts of JavaScript, which can be difficult, are explained easily with example codes. I think it's a must-listen before learning react, vue.js, etc.! I wish there were lectures for the advanced JavaScript course😍
As you said, understanding JavaScript is essential before learning libraries or frameworks like react and vue!! I'm glad you found the lecture content easy to understand. I'll also consider taking an in-depth JavaScript course😊 Thank you.
Reviews 1
∙
Average Rating 5.0
5
I took this course because I wanted to learn JS and front-end. This course explains grammar in detail so that even non-majors can fully understand the content. Also, the curriculum includes advice based on practical work, actual project unit implementation, etc., so I was personally very satisfied. I think this is a course that beginners or those who are interested in web front-end development who are inexperienced like me can definitely feel their capabilities have improved by one level.
wlsdyd620, I feel like it was worth making the lecture since you grew a level through my lecture😃 Thank you for listening attentively!!
Reviews 64
∙
Average Rating 4.8
5
The lecture content is really stuck in my head. Other lectures are honestly boring and I often find it hard to focus, so I sometimes just zone out while watching, but this lecture makes me focus and follow along. Even though I don't have any background knowledge about the technology, I can still enjoy the lecture and focus on it, so I think the teacher's communication skills are amazing. Thank you for creating such a great lecture.
I'm so glad that the lecture wasn't boring and was well-conveyed. Thank you for taking the class diligently!!
Limited time deal
$19.80
25%
$26.40
Check out other courses by the instructor!
Explore other courses in the same field!