강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Complete JavaScript in One Go: From Vanilla JavaScript to SPA Development

While learning from basic grammar to advanced concepts, let's develop an SPA with Vanilla JavaScript🔥

(4.9) 127 reviews

8,282 learners

  • hyobin
이론 실습 모두
자바스크립트
JavaScript
SPA
DOM
REST API

Reviews from Early Learners

What you will learn!

  • Vanilla JavaScript Basics

  • JavaScript Concepts Needed for Practical Development

  • Asynchronous Programming via Promise object and async/await

  • Component and Modularization

  • Web Element Control with DOM API

  • State Management using state and setState

  • Develop SPA without libraries

  • Routing via history api

  • Using JavaScript like React

🍀 Students taking the course ' First Steps in JavaScript for Web Frontend '
Purchase the course at a discounted price (35% off) through the link below!!

-> Discount coupon link

🤯 Vanilla JavaScript
Why should we learn in detail?

Vanilla JavaScript is basically JavaScript without any libraries or frameworks.
This means writing code in pure JavaScript .

Learning vanilla JavaScript is an important step in laying the foundation for web development .
You can understand the fundamental principles and workings of JavaScript.
You will be able to use a variety of tools and techniques efficiently.

You can understand how these technologies work even when using libraries like React.js ,
Because it allows you to develop freely without relying on libraries.
Learning pure JavaScript is a very important process for developers.

A JavaScript course that you can finish in one go!

Covers the latest syntax of JavaScript, without libraries.
API calls, DOM manipulation, state management, routing, and SPA development using only pure JavaScript .
This is a course where you learn by developing two projects.

Latest JavaScript Grammar
Learning ES6+ version

API, DOM manipulation, state management, and SPA development all in one!

Through a total of 2 projects
Content review and repeated learning

You can learn the concepts of JavaScript with clean lecture materials 👍
All lecture materials are provided in PDF format as shown below.

Preview of lecture materials for Sections 1-5

Preview of lecture materials for Sections 6-9

If you take the JavaScript course that you can finish in one go,
You can develop two projects as follows:

Mid-term project

Final Project

While taking the class, check the parts you didn't understand well,
So that you can review the content even after taking the class.
As shown in the image below, a handbook is also provided to accompany the lecture!

Handbook (lecture materials website)

🙋🏻‍♀️ I recommend this to these people

From basics to advanced, all in one place!
For those who want to learn from basic to advanced concepts all at once.
Learn the necessary concepts by developing your own project.

I'm preparing for a front-end job.
A job seeker preparing for employment as a front-end developer.

Learn concepts about DOM manipulation, state management, and SPAs.

I don't know much about vanilla JavaScript.
People who are using React.js, Next.js, etc., but are not confident in JavaScript.

Before using libraries and frameworks, let's review the necessary concepts.

After taking the class...

  • You can understand the basic grammar of vanilla JavaScript, from the basics to advanced concepts.

  • You can understand concepts such as array methods , asynchronous processing , components, and modularization that are frequently used in practice .

  • You can develop DOM manipulation , API calls , state management , SPA development, etc. using only JavaScript.


  • You can learn React.js and Next.js more easily.

💥 This is what makes it different from other lectures

The JavaScript course that you can finish in one go has the following differences:

Detailed explanation of concepts through lecture materials

Learn everything from basic grammar and concepts to advanced concepts through clean, intuitive materials with animations and example code .

Example code to write together

Let's write the concepts we learned directly in VSCode.
Practice writing JavaScript code together with Live Coding .

Developing mid-term projects and learning additional concepts

You can check whether you have understood the contents you have learned by developing an intermediate project . Afterwards, you can identify the problems of the developed project and learn additional concepts necessary to create a better project .

Full review of the content through final project development

We will develop a final project together using everything we learned in class . You can review the content again as you develop the project.

All materials provided

For students, the lecture materials are provided in web page format (handbook).
The project code and materials used in the lecture are provided in github and pdf respectively.

🔎 I'm curious about the detailed curriculum

The curriculum for the JavaScript course that you can finish in one go is as follows:

📌 Section 1. JavaScript Basics ~ Section 2. Asynchrony and API

First, learn basic grammar and advanced concepts through lecture materials (ppt) .
Apply what you've learned and write your own example code to solidify your understanding of the concepts.

📌 Section 3. DOM and DOM API

After learning about the DOM in detail, you will learn about the various DOM APIs that can manipulate the DOM.

As you learn how to manipulate commonly used form elements , you'll move on to manipulating the DOM directly using the DOM API.

📌 Section 4. this and arrow functions

In JavaScript Learn about this keyword
Through practice, we will see what value is bound to this depending on the situation.

After that, we will look at the relationship between this and arrow functions, and this and regular functions.

📌 Section 5. Intermediate Project

Let's use what we've learned so far to develop a simple website.
We develop a website and identify problems that arise during the production process one by one .

📌 Section 6. Components and Module System

Learn about components and module systems to solve problems that arise while developing intermediate projects.
First, you will learn through lecture materials and example codes, and then apply what you have learned to an intermediate project to solve problems.

📌 Section 7. State Management and SPA

Learn about state management and SPA, concepts you need to learn to solve problems that arise in mid-projects.
We will learn what state management is and how to develop it, and also look at the concepts of SPA, MPA, CSR, and SSR . Finally, we will apply what we have learned and modify the intermediate project code .

📌 Section 8. Final Project

We will develop a final project using everything we have learned so far.

Let's take a look at the features needed for a website, componentize them together by feature, and then develop the website directly using VSCode.

We develop features such as search functions , filtering functions , and page navigation .

💬 Frequently Asked Questions

Q. Can non-majors also take the course?

It covers basic concepts and provides lecture materials, so even beginners can take the course.

I want to listen to the lecture in advance!

We are offering 8 lectures for free.

For those who would like to listen to the lecture in advance,
Take the courses that have 'Preview' written on them.

Q. I'm not sure if the lecture will help..

If you know some JavaScript,
Try self-diagnosis using the checklist below!

If 8 or more of the 10 items apply
It's okay if you don't attend the lecture 😄

  • I am familiar with scopes and hoisting .

  • You can learn about Promise objects and asynchrony , and call APIs to receive data.

  • You can manipulate the DOM with JavaScript.

  • I am familiar with this in JavaScript.

  • I know SPA and how SPA works .

  • State management can be implemented without a library.

  • Websites can be componentized by functionality.

  • You can modularize files and develop using import and export .

  • You can implement page routing using the history API .

  • You can implement SPA with JavaScript .


📣 Things to note before taking the class

Practice environment

  • Use the Chrome browser.

  • Write code using VSCode. (Installation and usage instructions are included in the lecture.)

Learning Materials

  • Materials used in the lecture are provided in PDF format .

  • The content used in the lecture is provided in web page format .

  • The project code can be found through the github link .

Player Knowledge and Notes

  • Player Knowledge: HTML, CSS

    • Tags frequently used in HTML are explained in the lecture.

    • CSS code is provided separately.

  • Note

    • Please learn using Chrome browser and VSCode.

    • Your questions will be answered within 24 hours .


Ribbon Banner

Recommended for
these people

Who is this course right for?

  • Those who want to get a job as a frontend developer

  • Project developers wishing to learn various concepts

  • People who want to learn Vanilla JavaScript

  • Those who wish to enroll with materials

  • Those wishing to learn with others via study groups.

Need to know before starting?

  • HTML

  • CSS

Hello
This is

10,733

Learners

244

Reviews

119

Answers

4.9

Rating

3

Courses

안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공하고 있습니다.

(현) 프론트엔드 개발 강사

(전) 스타트업 프론트엔드 리드 개발자


웹 페이지

https://hyobb.com/

온라인 강의

도서

외부활동

Curriculum

All

55 lectures ∙ (9hr 40min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

127 reviews

4.9

127 reviews

  • minzinging7984님의 프로필 이미지
    minzinging7984

    Reviews 1

    Average Rating 5.0

    5

    33% enrolled

    Các tài liệu trực quan rõ ràng và hơn hết, thật tuyệt khi họ giải thích từng bước một cách chậm rãi thông qua mã hóa trực tiếp. Tôi sẽ tiếp tục học và hoàn thành khóa học! Cảm ơn bạn vì bài giảng tuyệt vời.

    • hyobin
      Instructor

      Cảm ơn bạn đã đánh giá tốt😀 Mong bạn kiên trì!!

  • ygvbhy518205님의 프로필 이미지
    ygvbhy518205

    Reviews 13

    Average Rating 5.0

    Edited

    5

    56% enrolled

    Tôi đã biết đến khóa học này sau khi xem bài giảng của Lee Jung-hwan và đăng ký vào cộng đồng Hanib. Vì tôi chỉ mới sử dụng SPA chứ chưa tự mình tạo ra nó bao giờ, nên tôi đã nhấn nút thanh toán ngay lập tức 😆😆. Vì đang có việc phải làm nên tôi không thể tham gia thử thách Hanib, nhưng tôi rất hài lòng với khóa học này. Tôi đã tua qua những phần mình đã biết và chỉ nghe phần cuối của bài giảng trong khi ôn tập bằng sổ tay, và tôi rất hài lòng với khóa học này. Cách phát âm của Lee Jung-hwan rất tốt nên nghe rất dễ, còn 효빈님 thì có cách phát âm đặc biệt tốt. Cảm ơn bạn.

    • hyobin
      Instructor

      SK님! Cảm ơn bạn vì đánh giá tốt ạ 😊 Bạn có thể tham gia thử thách "Một miếng" để ôn tập lại sau này nhé :) Một lần nữa xin cảm ơn bạn vì đánh giá tốt ạ 👍

  • devrooney님의 프로필 이미지
    devrooney

    Reviews 3

    Average Rating 5.0

    Edited

    5

    100% enrolled

    Giọng nói rõ ràng và phát âm chuẩn xác nên nghe ở tốc độ 2x vẫn rõ! Và cấu trúc dễ hiểu. Cảm ơn bạn.

    • hyobin
      Instructor

      Ông No Hong-gi! Cảm ơn vì những đánh giá tốt đẹp :) Chúc mừng đã hoàn thành khóa học👍👍

  • dangwoo님의 프로필 이미지
    dangwoo

    Reviews 21

    Average Rating 5.0

    5

    15% enrolled

    Ngay cả khi bạn mới làm quen với JavaScript, tôi nghĩ đây là khóa học tốt nhất để học trước khi học React, bắt đầu từ những điều cơ bản! Cảm ơn bạn đã thực hiện một bài giảng tuyệt vời!!

    • hyobin
      Instructor

      Dongwoo! Cảm ơn bạn đã đánh giá tốt 😊

  • skateboard295254님의 프로필 이미지
    skateboard295254

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    Tôi nghĩ rằng đây là một khóa học phù hợp với những người còn thiếu kiến thức về JavaScript. Tôi cảm thấy rất hữu ích vì tôi có thể nắm bắt được những khái niệm cần thiết về Vanilla JavaScript một cách dễ dàng 👍 Sổ tay được cung cấp giúp tôi viết code dự án một cách thuận tiện!! Nó rất tốt để ôn tập và cũng rất tuyệt để xem cùng với các bài giảng. Tôi đã có thể tham gia một khóa học hay với giá cả phải chăng. Cảm ơn bạn!!

    • hyobin
      Instructor

      Chào Ratatouille 😊 Cảm ơn bạn vì những đánh giá khoá học tích cực!! Chúc mừng bạn đã hoàn thành khoá học 🥳🥳

$27.50

hyobin's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!