강의

멘토링

커뮤니티

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) 134 reviews

8,343 learners

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

Reviews from Early Learners

What you will gain after the course

  • 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

11,370

Learners

318

Reviews

129

Answers

4.9

Rating

8

Courses

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

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

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


웹 페이지

https://hyobb.com/

온라인 강의

도서

외부활동

Curriculum

All

55 lectures ∙ (9hr 40min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

134 reviews

4.9

134 reviews

  • minzinging7984님의 프로필 이미지
    minzinging7984

    Reviews 1

    Average Rating 5.0

    5

    33% enrolled

    The visuals are neat and, above all, I liked that you taught me step by step slowly through live coding. I will continue to take the class and complete it! Thank you for the great lecture.

    • hyobin
      Instructor

      Thank you for the good review😀 I hope you finish the course!!

  • ygvbhy518205님의 프로필 이미지
    ygvbhy518205

    Reviews 13

    Average Rating 5.0

    Edited

    5

    56% enrolled

    I found out about this lecture by joining the Han-ib community after watching Lee Jung-hwan's lecture. I've only used SPAs before, but I've never built one myself, so I was already clicking the payment button 😆😆. I couldn't participate in the Han-ib challenge because I'm already working on something else, but I'm very satisfied with the lecture. I skipped through the parts I already knew and only listened to the latter half of the lecture while reviewing with the handbook, but I'm very satisfied with the lecture. Lee Jung-hwan was easy to listen to because of his good diction, but Hyobin also has exceptionally good diction. Thank you.

    • hyobin
      Instructor

      SK, thank you for your great review! 😊 I think it would be a good idea to participate in the Han-ip Challenge again for review later on :) Thank you again for your great review. 👍

  • devrooney님의 프로필 이미지
    devrooney

    Reviews 3

    Average Rating 5.0

    Edited

    5

    100% enrolled

    The voice is clear and the pronunciation is clear and precise, so it's easy to listen to even at double speed! And it's easy to understand. Thank you.

    • hyobin
      Instructor

      Thank you for your good review, Hong-gi Noh :) Congratulations on completing the course👍👍

  • dangwoo님의 프로필 이미지
    dangwoo

    Reviews 21

    Average Rating 5.0

    5

    15% enrolled

    Even if you are new to JavaScript, I think this is the best lecture to study from the basics before learning React! Thank you for making such a great lecture!!

    • hyobin
      Instructor

      Dongwoo! Thank you for the great review 😊

  • skateboard295254님의 프로필 이미지
    skateboard295254

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    I think this is the perfect lecture for someone like me who lacks JavaScript knowledge. It was really helpful because I felt like I was getting only the essential concepts of vanilla JavaScript 👍 The provided handbook made it easy to write the project code!! It's good for reviewing and also great to look at while listening to the lecture. I was able to take a good lecture at a low price. Thank you!!

    • hyobin
      Instructor

      Ratatouille, thank you for the great review! 😊 Congratulations on completing the course! 🥳🥳

Limited time deal ends in 2 days

$27,500.00

21%

$27.50

hyobin's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!