inflearn logo
inflearn logo

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.9) 146 reviews

8,392 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.9

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

> Apply for One Bite Challenge 8th Class : https://link.onebitefe.com/r/vd8zra

🍀 Students of 'JavaScript First Steps for Web Frontend',
please 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 inner workings of JavaScript,
and enabling you to use various tools and technologies efficiently. một cách hiệu quả.

Even when using libraries like React.js, understanding how these technologies work and developing the ability to build freely without depending on libraries makes learning pure JavaScript 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 by using only
vanilla JavaScript without libraries, covering everything from API calls, DOM manipulation, state management, routing, and SPA development
.

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.

Preview of Lecture Materials for Section 1 to Section 5

Section 6~Section 9 Lecture Material Preview

By taking JavaScript from Start to Finish, you can develop two projects like the ones shown below.

Intermediate Project

Final Project

To ensure you can clarify parts that were difficult to understand while taking the course, or
review the content even after completing the course,
a handbook is also provided as shown in the image below, which you can refer to alongside the lectures! như hình minh họa bên dưới!

Handbook (Lecture Syllabus 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 you need before using libraries and frameworks.

After taking the course..

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

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

  • You can develop DOM manipulation, API calls, state management, and SPA development 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

Animations are applied to clean and intuitive materials, and through example codes, you will 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 additional concept learning

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

Review of all content through final project development

Using everything learned in the lecture, we will develop a final project together. You can review 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 PDF, respectively.

🔎 I'm curious about the detailed curriculum

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

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

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

📌 Section 3. DOM and DOM API

After learning about the 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 verify which values are bound to this in different situations 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 build the website and identify the problems one by one that arise during the production process.

📌 Section 6. Components and Module Systems

To solve the problems encountered while developing the mid-term project, we will learn about components and module systems.
First, we will study using the lecture materials and example codes, and then we will solve the issues by applying what we've learned to the mid-term project.

📌 Section 7. State Management and SPA

You will learn about state management and SPA, concepts necessary to solve problems 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. giữa kỳ.

📌 Section 8. Final Project

Develop the final project by utilizing everything you have learned so far.

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

Develop features such as search functionality, filtering functionality, and page navigation. và các chức năng khác sẽ được phát triển.

💬 Frequently Asked Questions

Q. Can non-majors take this course?

Since the course covers basic concepts and provides lecture materials, even those who are starting development for the first time can take it. However, please make sure to review and practice repeatedly!

I want to preview the lecture!

We are offering 8 lectures for free.

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

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

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

If you fall under 8 or more out of the 10 items,
you don't necessarily need to take this course 😄

  • I am well-acquainted with scope and hoisting..

  • I understand Promise objects and asynchrony, and I can call APIs to fetch data. để nhận dữ liệu.

  • 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

  • We use the Chrome browser.

  • Write code using VSCode. (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 a web page format.

  • Project code can be found via the github link.

Prerequisites and Important Notes

  • Prerequisite Knowledge: HTML, CSS

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

    • CSS code will be 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

11,862

Learners

384

Reviews

137

Answers

4.9

Rating

14

Courses

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

(Current) Frontend Development Instructor

(Former) Startup Frontend Lead Developer


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

55 lectures ∙ (9hr 40min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

146 reviews

4.9

146 reviews

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

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

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

Similar courses

Explore other courses in the same field!

Limited time deal ends in 5 days

$3,117.00

27%

$27.50