
一度で終わらせるJavaScript: バニラJavaScriptでSPA開発まで
hyobin
基本文法から応用概念まで学習しながら、バニラJavaScriptでSPAを開発してみましょう🔥
초급
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)
10,945
Learners
265
Reviews
120
Answers
4.9
Rating
3
Courses
안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공하고 있습니다.
(현) 프론트엔드 개발 강사
(전) 스타트업 프론트엔드 리드 개발자
웹 페이지
온라인 강의
도서
외부활동
udemy, codeit, 한양여자대학교 등 특강 진행
All
42 lectures ∙ (6hr 47min)
Course Materials:
All
89 reviews
4.8
89 reviews
Reviews 2
∙
Average Rating 5.0
5
入門者のためのJavaScript講義の中で最もフレンドリーで詳細な講義ではないかと思います。 細かい概念も正確にわたって渡してくださり、しかもすべてのコードを詳しく説明していただき、別途グーグルなしで受講できる良い講義だと思います。 1. 視覚資料が非常に直感的でかなりです。 2.正確な辞書で眠くないで聞くのはとても良いです! 3. 普通の文法だけを学んで終わる講義が多いが、学んだ内容を応用して実用的なプロジェクトを作る過程がとても印象的です。
チョンファンありがとうございます😀
Reviews 1
∙
Average Rating 5.0
5
**自退生もコーディングできるという希望を与えた講義** コムボール入学後、教授もあきらめたたわごと この講義が救済してくれました。 本をいくら見ても何の言葉なのか理解できなかったのに不思議に字幕なしでも頭にすっぽり入ってきますね 私のように目の高さの講義が必要な方に積極的におすすめします!
ハンソル様に私の講義が役に立ったようで本当に嬉しいです😃一生懸命聞いてくれてありがとう!
Reviews 1
∙
Average Rating 5.0
5
JSとフロントを学びたいので、その講義を受講しました。該当講義は非専攻者も内容を十分に理解できるように文法などを詳しく説明してくれますね。また、実務に基づいてアドバイスする点や実際のプロジェクト単位の実装などまでカリキュラムに含まれており、個人的に非常に満足していました。私のように、Webフロント開発が未熟な入門者や興味のある方は、明らかに能力が一段階成長したことを感じられる講義だと思います。
wlsdyd620さん、私の講義を通して一段階成長してたなんて講義を制作したやりがいそうです😃頑張ってくれてありがとう!
Limited time deal ends in 18:15:16
$3,185.00
24%
$26.40
Check out other courses by the instructor!
Explore other courses in the same field!