강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

Let's learn from basic syntax to advanced concepts while developing a SPA with vanilla JavaScript🔥

(4.9) 135 reviews

8,345 learners

Level Basic

Course period Unlimited

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

Reviews from Early Learners

What you will gain after the course

  • Vanilla JavaScript Basic Syntax

  • JavaScript concepts needed for practical development

  • Asynchronous Programming with Promise Objects and async/await

  • Components and Modularization

  • Web Element Manipulation Using DOM API

  • State management using state and setState

  • Developing SPA without a library

  • Routing through the history API

  • Using JavaScript like React

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

-> Discount Coupon Link

🤯 Vanilla JavaScript
Why should you learn it in detail?

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

Learning vanilla JavaScript is an important process for building a foundation in web development,
allowing you to understand the fundamental principles and how JavaScript works,
and enabling you to efficiently use various tools and technologies.

Even when using libraries like React.js, you can understand how these technologies work,
and develop the ability to code freely without depending on libraries, which is why
learning pure JavaScript is a very important process for developers.

The all-in-one JavaScript course is..!

This course covers the latest JavaScript syntax and teaches you to develop 2 projects using
pure JavaScript without any libraries, learning API calls, DOM manipulation, state management, routing, and SPA development.

JavaScript Modern Syntax
ES6+ Version Learning

API, DOM manipulation, state management, and even SPA development all at once!

Review and reinforced learning
through a total of 2 projects

You can learn JavaScript concepts with clean lecture materials 👍
All lecture materials are provided as PDF files like the ones below.

Section 1~Section 5 Lecture Materials Preview

Section 6~Section 9 lecture materials preview

By taking "Complete JavaScript in One Go," you can
develop 2 projects as shown below.

Intermediate Project

Final Project

You can review parts that were difficult to understand while taking the course,
or revisit the content even after completing the course.
As shown in the image below, a handbook that you can refer to alongside the course is also provided!

Handbook (lecture materials website)

🙋🏻‍♀️ Recommended for

From basics to advanced, all at once!
For those who want to learn from basic concepts to advanced concepts all at once.
Learn the necessary concepts while developing projects hands-on.

I'm preparing for a frontend job.
Job seekers preparing for employment as a frontend developer.

Learn about concepts like DOM manipulation, state management, and SPA.

I'm not familiar with vanilla JavaScript.
Those who are using React.js, Next.js, etc., but lack confidence in JavaScript.

Before using libraries and frameworks, learn the necessary concepts once again.

After taking the course..

  • You can understand vanilla JavaScript basic syntax and concepts from fundamentals to advanced levels.

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

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


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

💥 Here's what makes this course different from others

The Complete JavaScript Course has the following key differences.

Detailed concept explanations through course materials

Animations are applied to clean and intuitive materials, and through example code, you'll thoroughly learn from basic syntax and concepts to advanced concepts.

Example code we write together

Practice the concepts you've learned by writing them directly in VSCode.
Live coding sessions where we write JavaScript code together for hands-on practice.

Intermediate Project Development and Additional Concept Learning

By developing a mid-term project, you can verify whether you've understood the material well. Afterwards, you'll identify issues in the developed project and learn additional concepts needed to create a better project.

Review of All Content Through Final Project Development

Using everything learned in the course, we'll develop the final project together. You can review the content once more while developing the project.

All materials provided

For students, lecture materials will be provided in web page format (handbook),
and project code and materials used in the lectures will be provided via GitHub and PDF respectively.

🔎 I want to see the detailed curriculum

The curriculum for the Complete JavaScript Course is as follows.

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

First learn the basic syntax and advanced concepts through lecture materials (ppt), then
solidify your understanding by writing example code yourself, applying what you've learned.

📌 Section 3. DOM and DOM API

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

Learn how to manipulate commonly used form elements, then practice directly manipulating the DOM using DOM APIs.

📌 Section 4. this and Arrow Functions

Learn about JavaScript'sthis keyword
and through practice, see what values get bound to this in different situations.

We'll then explore the relationship between this and arrow functions, as well as this and regular functions.

📌 Section 5. Intermediate Project

We'll develop a simple website using what we've learned so far.
We'll build the website and identify the problems that arose during the development process one by one.

📌 Section 6. Components and Module Systems

To solve the problems that occurred while developing the intermediate project, we'll learn about components and module systems.
First, we'll study through lecture materials and example code, then apply what we've learned to the intermediate project to resolve the issues.

📌 Section 7. State Management and SPA

You'll learn about state management and SPA, which are concepts you need to understand to solve problems that occurred in the intermediate project.
You'll learn what state management is and how to develop with it, while also exploring concepts like SPA and MPA as well as CSR and SSR. Finally, you'll apply what you've learned to modify the intermediate project code.

📌 Section 8. Final Project

Using everything learned so far, we'll develop the final project.

We'll examine the features needed for the website, componentize them by functionality together, and then develop the website directly using VSCode.

You will develop features such as search functionality, filtering functionality, and page navigation.

💬 Frequently Asked Questions

Q. Can non-majors take this course?

We cover fundamental concepts and provide course materials, so even those who are starting development for the first time can take this course. However, please make sure to review the material multiple times!

I want to preview the course!

We are offering 8 lectures for free.

If you'd like to preview the course,
try taking the lectures marked with 'Preview'.

Q. I'm not sure if this course will be helpful..

If you have some knowledge of JavaScript,
try a self-assessment using the checklist below!

If 8 or more out of 10 items apply to you,
you don't need to take this course 😄

  • I have a good understanding of scope and hoisting.

  • I understand Promise objects and asynchronous programming, and can call APIs to fetch data.

  • You can manipulate the DOM with JavaScript.

  • I have a good understanding of this in JavaScript.

  • You understand SPA and how SPA works.

  • You can implement state management without a library.

  • You can componentize a website by functionality.

  • Modularize files and develop using import, export.

  • You can implement page routing using the history api.

  • You can implement SPA with JavaScript.


📣 Notes Before Taking the Course

Practice Environment

  • Chrome browser will be used.

  • You will write code using VSCode. (Installation and usage instructions are included in the course.)

Learning Materials

  • The materials used in the course are provided in pdf format.

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

  • You can check the project code through the github link.

Prerequisites and Precautions

  • Prerequisites: HTML, CSS

    • The tags frequently used in HTML are explained in the lecture.

    • CSS code will be provided separately.

  • Notes

    • Please use Chrome browser and VSCode for learning.

    • Answers to questions will be provided within 24 hours.


띠배너

Recommended for
these people

Who is this course right for?

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

  • People who want to learn various concepts while developing a project

  • For those who want to learn vanilla JavaScript

  • Those who want to take the course along with lecture materials

  • People who want to learn together with others through study groups

Need to know before starting?

  • HTML

  • CSS

Hello
This is

11,398

Learners

325

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

135 reviews

4.9

135 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 4 days

$24,640.00

30%

$27.50

hyobin's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!