JavaScript All-in-One: From Vanilla JavaScript to SPA Development

Let's develop an SPA with Vanilla JavaScript while learning everything from basic syntax to advanced concepts🔥

(4.8) 159 reviews

8,427 learners

Level Basic

Course period Unlimited

JavaScript
JavaScript
SPA
SPA
DOM
DOM
REST API
REST API
JavaScript
JavaScript
SPA
SPA
DOM
DOM
REST API
REST API

Reviews from Early Learners

Reviews from Early Learners

4.8

5.0

Chan

89% enrolled

I had already taken JavaScript courses once or twice before. But strangely, I always felt like I knew it, but when I actually tried to use it, it never worked out well. This course felt like it organized all those ambiguous parts one by one. It wasn't just about explaining syntax and ending there, but it was great that the instructor continuously connected and explained why this concept is needed and how it's used later in SPAs. What I especially liked was the project section. Usually, you just follow along and that's it, but this course had a flow of intermediate project → recognizing problems → supplementing concepts → final project, so I couldn't help but think. Honestly, it wasn't easy, but I gained a lot from it. The course materials (handbook) are also well-organized, so I keep referring to them not only when taking the course but also when reviewing. I would recommend this course to anyone who wants to properly organize JavaScript once again.

5.0

산독기

100% enrolled

I completed the course! What I felt while completing the course was that I was happy to be able to take a really meticulously prepared lecture at a reasonable price. Development courses have wildly varying prices, and I'm currently taking several courses together, but just because the price is expensive doesn't mean the instructor properly answers questions or provides code updates. So I was quite disappointed with a certain instructor, but listening to Hyobin's lecture, it's really clearly different. It's a bit awkward to compare with others, but I hope educators like Hyobin become even more successful. It would be so great if you expanded your courses to React or Next.js beyond JavaScript! As an Inflearn user for n years, this was the most cost-effective and beneficial course. Of course, the final project was difficult, but I think the difficulty was meant to humbly encourage us to review again, which was motivating. I've never left such a long course review, but I became a fan of Hyobin and am leaving this review to recommend it to others! The detailed handbook, clear diction, clean examples, quick Q&A responses - there wasn't a single disappointing aspect. I hope you become even more famous on Inflearn and in the education industry! Thank you for the great course!

5.0

kimday365

100% enrolled

I've been preparing for a job change and am returning to FE after almost 5 years. I was overwhelmed about where to start studying again, Through this course, I was able to learn so much - from reviewing parts I knew lightly before, to new grammar structures, and even advanced topics like objects/properties/components at the unit level. The project work was especially beneficial. Rather than just learning basic knowledge & grammar, I learned about how to use it effectively in actual work, and it was even more interesting because we worked on a new project instead of the usual todo list! I'm really looking forward to the next course! Thank you for the great lecture :)

What you will gain after the course

  • Vanilla JavaScript Basic Syntax

  • JavaScript concepts required for practical development

  • Asynchronous programming through Promise objects and async/await

  • Components and Modularization

  • Web element manipulation using the DOM API

  • State management using state and setState

  • Developing an SPA without libraries

  • Routing via 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

Recruiting for the 9th One Bite Challenge (until midnight, Monday, April 6th): https://link.onebitefe.com/r/d56zy3

🤯 Vanilla JavaScript
Why should we 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 inner workings of JavaScript,
and enabling you to use various tools and technologies efficiently.

Even when using libraries like React.js, you can understand how these technologies work and develop the ability to build freely without relying on libraries. Therefore, 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 how to develop two projects from scratch—covering API calls, DOM manipulation, state management, routing, and SPA development
using only vanilla JavaScript without any libraries.

Latest JavaScript Syntax
Learning ES6+ Versions

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

Reviewing content and repetitive 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 one below.

Section 1–Section 5 Lecture Material Preview

Section 6–Section 9 Lecture Material Preview

By taking JavaScript All-in-One, you can develop
the following two projects.

Intermediate Project

Final Project

To ensure you can clarify parts you didn't fully understand while taking the course, or
review the content even after completing the course,
a handbook is also provided that you can refer to along with the lectures, as shown in the image below!

Handbook (Lecture Curriculum Website)

🙋🏻‍♀️ Recommended for these people

From basics to advanced all at once!
Those who want to learn everything from basic to advanced concepts in one go.
Learn the necessary concepts by developing a project yourself.

I am preparing for a front-end job.
A job seeker preparing for a career as a front-end developer.

Learn the concepts of DOM manipulation, state management, and SPA.

I don't know Vanilla JavaScript well.
Those who are using React.js, Next.js, etc., but lack confidence in JavaScript.

Take the time to relearn the essential concepts needed before using libraries and frameworks.

After taking the course..

  • You can understand the basic syntax of Vanilla JavaScript, as well as concepts ranging from basic to advanced.

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

  • DOM manipulation, API calls, state management, and SPA development can be done using only JavaScript.


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

💥 Here is how this course differs from others

The "JavaScript All-in-One" course has the following key differences.

Detailed conceptual explanations through lecture materials

Animation-applied clean and intuitive materials, along with example codes, allow you to thoroughly learn everything from basic grammar and concepts to advanced topics.

Example code written together

Write the concepts you've learned directly in VSCode.
Live coding sessions allow us to practice by writing JavaScript code together.

Mid-term project development and learning additional concepts

Intermediate project development allows you to check if you have understood the learned content well. Afterwards, you will identify problems with the developed project and learn additional necessary concepts to create a better project.

Review of all content through final project development

We will develop a final project together using everything learned in the course. You can review all the content once more while developing the project.

All materials provided

Students will be provided with the lecture notes in a web page format (handbook),
and the project code and materials used in the lecture will be provided via GitHub and as PDFs, respectively.

🔎 I'm curious about the detailed curriculum

The curriculum for the "JavaScript All-in-One" course is as follows.

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

First, you will learn the basic syntax and advanced concepts using lecture materials (PPT),
and then solidify your understanding by directly writing example code to apply what you have learned.

📌 Section 3. DOM and DOM API

After studying DOM in detail, you will learn about various DOM APIs that allow you to manipulate the DOM.

While learning how to manipulate frequently used form elements, you will then practice manipulating the DOM yourself using the DOM API.

📌 Section 4. this and Arrow Functions

Learn about JavaScript's this keyword and check which values are bound to this depending on the situation through
hands-on practice.

Afterward, we will also examine the relationship between this and arrow functions, as well as this and regular functions.

📌 Section 5. Intermediate Project

We will develop a simple website using everything we have learned so far.
We will develop the website and identify the problems one by one that occurred during the production process.

📌 Section 6. Components and Module Systems

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

📌 Section 7. State Management and SPA

You will learn about State Management and SPA, concepts necessary to resolve issues encountered during the intermediate project.
While learning what State Management is and how to develop it, you will also explore the concepts of SPA and MPA, as well as CSR and SSR. Finally, you will apply what you have learned to refactor the intermediate project code.

📌 Section 8. Final Project

We will develop the final project by utilizing everything we have learned so far.

We will examine the functions required for a website, break them down into components by function together, and then develop the website ourselves using VSCode.

Search functionality, filtering functionality, and page navigation are among the features to be developed.

💬 Frequently Asked Questions

Q. Can non-majors take this course?

Since we cover basic concepts and provide lecture materials, even those who are starting development for the first time can take the course. However, please make sure to review and practice multiple times!

I want to preview the lecture!

We are offering 8 lectures for free.

If you would like to preview the lectures,
please take the lectures marked with 'Preview'.

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

If you already have some knowledge of JavaScript,
please use the checklist below to perform a self-diagnosis!

If you fall under 8 or more out of the 10 items,
it's okay not to take the course 😄

  • I am well-acquainted with scope and hoisting.

  • I understand Promise objects and asynchronous programming, and I can receive data by calling APIs.

  • You can manipulate the DOM with JavaScript.

  • I have a good understanding of this in JavaScript.

  • I understand SPA and how SPAs work.

  • Can implement state management without using libraries.

  • Websites can be componentized by function.

  • Modularize files and develop using import and export.

  • Page routing can be implemented using the history api.

  • SPA can be implemented with JavaScript.


📣 Notes before taking the course

Practice Environment

  • The Chrome browser is used.

  • VSCode is used to write code. (Installation and usage instructions are included in the lecture.)

Learning Materials

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

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

  • Project code can be found via the github link.

Prerequisites and Precautions

  • Prerequisite Knowledge: HTML, CSS

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

    • CSS code is provided separately.

  • Precautions

    • Please use the Chrome browser and VSCode for your learning.

    • Answers to your questions will be provided within 24 hours.


띠배너

Recommended for
these people

Who is this course right for?

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

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

  • Those who want to learn Vanilla JavaScript

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

  • Those who want to learn together with others through a study group

Need to know before starting?

  • HTML

  • CSS

Hello
This is hyobin

12,282

Learners

457

Reviews

137

Answers

4.9

Rating

20

Courses

Hello, I am Hyobin Kim 😊
I provide easy and friendly lectures for those who aspire to become front-end developers.


Web page

https://hyobb.com/

Online Courses

Books

External Activities

  • YozmIT Writer

  • Conducted special lectures at Udemy, Codeit, Hanyang Women's University, etc.

More

Curriculum

All

56 lectures ∙ (9hr 40min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

159 reviews

4.8

159 reviews

  • 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. 👍

  • 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!!

  • 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👍👍

  • 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! 🥳🥳

  • pasw91537님의 프로필 이미지
    pasw91537

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

    After listening to the Javascript for Web Frontend course, I took this course and it was good because I understood it well. If you listened to the sample course and found this course a little burdensome, I recommend the Javascript for Web Frontend course. And if you have the chance, I would like you to plan and create a course on a shopping mall site that you can learn by making and following. There don't seem to be many courses related to shopping mall sites, such as Inflearn and others. The affordable course was very helpful. Thank you.

    • hyobin
      Instructor

      Congratulations on completing the course, pasw9 👏 The JavaScript course that you can finish in one go is a better course if you take it after taking the first step course!! I will prepare a shopping mall site course in the future if I get the chance! Thank you for the good course review 😊

Similar courses

Explore other courses in the same field!

$27.50