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

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

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. mแป™t cรกch hiแป‡u quแบฃ.

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 API calls, DOM manipulation, and state management to 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 two projects like the ones 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 that you can refer to along with the lectures, as shown in the image below! nhฦฐ hรฌnh dฦฐแป›i ฤ‘รขy!

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.

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 points of differentiation.

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 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 the content once more while developing the project.

โœจ All materials provided

We provide students with the lecture notes in a web page format (handbook),
and the project code and materials used in the lecture are provided via GitHub and PDF, 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 grammar and advanced concepts using lecture materials (PPT), and then you will solidify your understanding by directly writing example code to apply what you have learned.

๐Ÿ“Œ 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 use the DOM API to manipulate the DOM yourself.

๐Ÿ“Œ 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 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 mid-term project, we will learn about components and module systems.
First, we will study through the lecture materials and example codes, and then we will solve the problems 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, we 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

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 will 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 try the lectures marked with 'Preview'.

Q. I'm not sure if this 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. ฤ‘แปƒ lแบฅy 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.

  • You can implement page routing using the history api..

  • SPA can be implemented with JavaScript.


๐Ÿ“ฃ Notes before taking the course

Practice Environment

  • Chrome browser is used.

  • VSCode is used to write the 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 codes can be checked 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,497

Learners

479

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

160 reviews

4.8

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

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

Similar courses

Explore other courses in the same field!