강의

멘토링

로드맵

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

8,246 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

9,754

Learners

198

Reviews

108

Answers

4.9

Rating

2

Courses

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

(현) 프론트엔드 교육자

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


웹 페이지

https://hyobb.com/

온라인 강의

도서

외부활동

Curriculum

All

55 lectures ∙ (9hr 42min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

114 reviews

4.9

114 reviews

  • minzinging님의 프로필 이미지
    minzinging

    Reviews 1

    Average Rating 5.0

    5

    33% enrolled

    시각자료도 깔끔하고 무엇보다 라이브 코딩으로 천천히 하나하나 알려주셔서 좋았습니다. 꾸준히 수강 후 완강해보겠습니다! 좋은 강의 감사합니다.

    • 효빈 Hyobin
      Instructor

      좋은 수강평 감사합니다😀 꼭 완강하셨으면 좋겠습니다!!

  • SK님의 프로필 이미지
    SK

    Reviews 13

    Average Rating 5.0

    Edited

    5

    56% enrolled

    이정환님 강의를 보고 한입 커뮤니티에 가입하여 해당 강의를 알게되었습니다. SPA 를 이용만 해봤지 직접 만드는건 안해본거 같아서 이미 결제 버튼을 누르고 있더라구요 ㅋㅋ 하고있는게 있어서 한입 챌린지는 참여하지 못했지만 매우 만족하는 강의 입니다. 아는 부분은 넘겨가며, 핸드북으로 복습 하면서 강의 후반부만 들었는데 매우 만족하는 강의 입니다. 이정환님도 딕션이 좋아 듣기 편했는데 효빈님도 딕션이 남다르게 좋네요. 감사합니다.

    • 효빈 Hyobin
      Instructor

      SK님! 좋은 수강평 감사드립니다 😊 추후에 다시 한 번 복습용으로 한입 챌린지에 참여해보시는 것도 좋을 것 같습니다 :) 다시 한 번 좋은 수강평 감사드립니다 👍

  • 노홍기님의 프로필 이미지
    노홍기

    Reviews 3

    Average Rating 5.0

    Edited

    5

    100% enrolled

    목소리가 잘들리고 발음도 또박또박 정확해서 2배속으로 들어도 잘 들립니다! 그리고 이해하기 쉬운 구성으로 되어있네요. 감사합니다.

    • 효빈 Hyobin
      Instructor

      노홍기님! 좋은 수강평 감사드립니다 :) 완강 축하드립니다👍👍

  • 동우님의 프로필 이미지
    동우

    Reviews 21

    Average Rating 5.0

    5

    15% enrolled

    자바스크립트를 처음 접하더라도 기초부터 탄탄하게 리액트를 배우기전 공부하기 좋은 최고의 강의인것 같아요! 좋은강의 만들어주셔서 감사합니다!!

    • 효빈 Hyobin
      Instructor

      동우님! 좋은 수강평 감사합니다 😊

  • 라따뚜이님의 프로필 이미지
    라따뚜이

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    자바스크립트 개념이 부족한 저에게 적합한 강의라고 생각합니다. 바닐라 자바스크립트에 대해 필요한 개념들만 쏙쏙 얻고 가는것 같아 정말 많은 도움이 되었습니다 👍 핸드북이 제공되서 프로젝트 코드를 작성하는데 편했습니다!! 복습하기도 좋고 강의를 들으면서 함께 보기에도 아주 좋습니다. 좋은 강의를 저렴하게 수강할 수 있었습니다. 감사합니다!!

    • 효빈 Hyobin
      Instructor

      라따뚜이님 😊 좋은 수강평 감사합니다!! 완강 축하드립니다 🥳🥳

$27.50

hyobin's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!