
Complete JavaScript in One Go: From Vanilla JavaScript to SPA Development
hyobin
While learning from basic grammar to advanced concepts, let's develop an SPA with Vanilla JavaScript🔥
Basic
JavaScript, SPA, DOM
If you aspire to be a web frontend developer? Take your first step with fun JavaScript courses✨

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,355
Learners
316
Reviews
129
Answers
4.9
Rating
8
Courses
안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공하고 있습니다.
(현) 프론트엔드 개발 강사
(전) 스타트업 프론트엔드 리드 개발자
웹 페이지
온라인 강의
도서
외부활동
udemy, codeit, 한양여자대학교 등 특강 진행
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
90 reviews
4.8
90 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 ends in 6 days
$24,750.00
25%
$26.40
Check out other courses by the instructor!
Explore other courses in the same field!