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

8,420 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',
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.

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 JavaScript course that covers everything in one go is..!

This course covers the latest JavaScript syntax and teaches you how to develop two projectsโ€”from API calls, DOM manipulation, and state management to routing and SPA developmentโ€”using only vanilla JavaScript without any libraries.

Modern JavaScript Syntax
Learning ES6+ Versions

From APIs and DOM manipulation to state management and 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 help you clarify parts you didn't fully understand while taking the course, or to review the content even after completing it,
we also provide a
handbook that you can view alongside the lectures as shown in the image below!

Handbook (Lecture Syllabus Website)

๐Ÿ™‹๐Ÿปโ€โ™€๏ธ Recommended for these people

From basics to advanced all at once!
For 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.

Review 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 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 unique advantages.

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 additional concept learning

Midterm project development allows you to check if you have understood the learned content well. Afterward, 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

For students, the lecture notes are provided in a web page format (handbook),
and the project code and materials used in the lecture are 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 basic grammar 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 that arose while developing the mid-term project, we will learn about components and module systems.
First, we will study using the lecture materials and example code, and then resolve 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 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 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 lectures 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 into 8 or more out of the 10 items,
you don't need to take the course ๐Ÿ˜„

  • I am well aware of scope and hoisting.

  • I understand Promise objects and asynchrony, 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

  • Use the Chrome browser.

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

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

12,034

Learners

441

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

158 reviews

4.8

158 reviews

  • 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๐Ÿ‘๐Ÿ‘

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

  • 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 ๐Ÿ˜Š

  • 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! ๐Ÿฅณ๐Ÿฅณ

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

$27.50