JavaScript Little by Little

Build a solid foundation of skills and confidence by developing various topics from scratch with JavaScript.

(4.9) 36 reviews

607 learners

Level Intermediate

Course period Unlimited

JavaScript
JavaScript
vanilla-js
vanilla-js
JavaScript
JavaScript
vanilla-js
vanilla-js

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

damyo

100% enrolled

It felt different from the lectures I've seen so far, and I felt like I was taking a break, so I took the class comfortably. It doesn't mean that the lectures were light or easy. In the past, I liked the lectures that crammed in a lot of knowledge and skills(?) (I felt like I was getting my money's worth😁), but sometimes it was hard to keep up, and I was confused whether the lectures were for the students or if the lecturers were just displaying what they knew like trophies and building up their own achievements. Eunjae's lectures seemed to have a good balance. They were moderately wide and moderately deep. Above all, it was good because I could experience following the flow of thought as if I was solving a problem, rather than memorizing formulas. It also gave me a chance to think again about things I didn't know, but just took for granted and didn't wonder about, and things I didn't care about because I considered them unimportant. I need to look back on how I deal with and think about problems, and what kind of attitude I've had so far. If you have the chance, it would be great if you could share Eunjae's tips as a developer (what tools you use, how you work/collaborate, etc.). I look forward to seeing you again with another great lecture. Thank you.

5.0

Gichul Roh

100% enrolled

The lecturer seems like a philosopher who codes. Development is a fun thing in some ways, and it helped me find that fun again. At first, I hesitated because the lecture was a bit pricey, but I finished the first session. I think I should watch it two or three times. There are many lectures on making apps, but thanks to the Node environment and library development lectures, my understanding of related development environments has increased. I look forward to the next lecture. I hope you do well from afar. Finally, in the video of Section 12, Creating a Static Blog, Deployment, there is a blackout for about a minute.

5.0

miho2582

58% enrolled

I usually like to spy on the instructor's SNS account, and when he introduced the lecture, I quickly read the curriculum. I was doing a vanilla JavaScript-based project while preparing for a job, and while doing the project, I often thought that my JavaScript skills were still not enough! This lecture provided insight into how to implement convenient functions in libraries & frameworks in JavaScript, and concepts that are difficult to study alone, such as TDD and npm distribution. While studying FE, I vaguely knew about the concepts but wanted to learn them in detail, so it was good to follow along with the instructor, which helped ease the burden. This lecture is recommended for those who quickly moved from JavaScript to React or started developing with React but are stuck. This lecture is useful even now that I am preparing for a job, but if it had been shown to me a year ago... when I was desperately craving insight, I think it would have been a lecture that I would have applauded. The instructor is very considerate in many ways, from the fact that he manages students through a separate Discord to the fact that he distributes discount codes for job seekers! I recommend it! (And the cat that appears briefly in the video is cute too. ☺️)

What you will gain after the course

  • Improving core JavaScript skills without frameworks

  • Understanding the JavaScript Ecosystem More Deeply

Level Up! Strengthen the core of your JS skills.

💡 “It works, but why does it work?”

We are always developing for the web using numerous libraries and frameworks. However, there are many times when we don't understand exactly what is happening or how it works. The JavaScript ecosystem is intricately intertwined with so many different elements that it's hard to know how to untangle the threads.

Bit by bit, JavaScript provides a stepping stone for you to level up from junior to mid-level, and from mid-level to senior.

“Web development is too complex”

It's because of the technical debt accumulated as the JavaScript ecosystem has evolved, along with the countless interconnected elements. While you could learn it yourself through trial and error, sitting down and learning calmly with someone who has already gone through it is also a great way.

“I can do it, but I lack confidence.”

If you don't understand the fundamental principles of how the frameworks and libraries you use work together in harmony, it's easy to panic even at minor bugs. Through the lecture, try to understand the operating principles by developing important topics yourself without using libraries.

“I want to level up my development skills”

Repeating similar toy projects may make your hands faster, but a different strategy is needed to go deeper. Once you have a deep understanding of the core concepts, you will develop the foundational knowledge to easily understand any new framework or technology that emerges.

“New things are coming out too fast and too often”

JavaScript, especially the frontend ecosystem, still has many problems to solve, and various experiments are constantly happening. That's why countless new libraries, frameworks, and concepts are pouring out. However, most of them are attempts to solve existing problems in new ways.

Once you try to solve existing problems directly without those solutions, you will be able to easily understand new ones by comparing how they solve things differently.

🙌🏻 Hello, I'm Eunjae Lee.

I have primarily worked in front-end development at companies such as Daum, Kakao, and Algolia. Currently, I am working as a full-stack developer at Storyblok.

After working at a startup for a long time, I woke up one day to find that so much had changed. I used AngularJS from 2014 until the end of 2017, and it wasn't until 2018 that I started studying the countless things I had missed. Starting with ES6, React, Babel, ... it truly felt endless.

Moving to France in 2019 and joining a company called Algolia was a great opportunity for me to work while gaining a deep understanding of various concepts. I built the big picture by experiencing things firsthand and asking those around me. After some time had passed, I began to think, "How great would it have been if there was content that organized all of this well?" and eventually, I ended up creating this course.


📖 Table of Contents (Total 13 hours 16 minutes)

1. Basics of DOM API

Learn the basic DOM APIs and practice how to structure HTML and attach events without using a frontend framework. (1h 3m)

  • innerHTML
  • createElement
  • appendChild
  • addEventListener

2. Creating a Shopping Mall

We will implement the shopping mall product list and shopping cart sections. The goal is to implement dynamic interactions by directly using the DOM API. By developing the process of adding and removing products from the cart while ensuring the same data (quantity added) is simultaneously updated across various parts of the screen (product list and cart), you will experience firsthand why modern frontend frameworks are necessary. (1h 20m)

Next, we will refactor the shopping mall product list and shopping cart by breaking them down into multiple components, considering design, semantics, and roles to make them easier to manage. (52m)

Finally, instead of manually finding DOM elements to update quantities, we will implement a way for the DOM to update reactively and automatically whenever the data is updated. (52m)

3. Web Server Basics

We will learn the basics of web servers by using Express. These days, Serverless Functions provided by Vercel or Netlify are easy and convenient. We will use Express to understand how backends were structured before such services existed.

We will also render data received by sending requests from a Vite-powered frontend to an Express server, and explore the CORS issue encountered during that process. (45m)

4. Array Methods

We will practice representative Array methods such as filter, map, and reduce through various examples. Assuming you are already familiar with the basic syntax, this session will proceed like a workout to build your proficiency. (1h 18m)

5. Basics of npm Libraries

We will examine what structure an npm library should have and take the time to understand the complex issues surrounding CommonJS and ES Modules. Then, we will directly publish the library we worked on to npm. (27m)

6. Creating mini query

We will create a very small subset of jQuery. You will learn how to configure a monorepo using yarn workspaces and experience the overall workflow for library development by building a library, an example app, and a documentation site within it.

We will also try writing unit tests using vitest, experience the difficulties that arise during the library build process, and take a look at tree-shaking. (1h 7m)

7. Movie Information Site

We will create a movie search site. Although the final result is very simple, this episode covers very important concepts. You will learn about the browser's History API and use it to directly implement Client-Side Routing, similar to React Router. (45m)

Next, we will directly implement Server-Side Rendering (SSR) using an Express server, as well as the Hydration process on the client side. After completing this, you will be able to understand the SSR + Hydration process of Next.js in great detail. (1h 14m)

8. Practicing Asynchrony

Similar to the Array methods practice episode, we will practice callback, Promise, async, and await to handle asynchrony better. (38m)

9. Creating a Static Blog

Many people create static websites using tools like Jekyll, Gatsby, or Next.js. We will examine how these tools create static websites and try to mimic that build process.

In this process, we will write a script using Node.js without any frameworks or tools to build static blog posts written in Markdown and even deploy them to Vercel. (1h 3m)

10. Creating a CLI

We will examine the structure of an npm library for CLI, create a CLI ourselves, and publish it to npm. After that, you will be able to install and use it via npm install -g <package-name>. (48m)

11. Creating a Form Library

<form action="/save" method="post">

In the past, forms were often written in the format shown above. We will implement it using that traditional method to understand how it actually works. We will also learn why that approach is no longer commonly used today. Furthermore, we will explore the advantages of modern libraries like react-hook-form and try building something similar ourselves. (1h 4m)

👥 Once you enroll

Those who purchase the course will be invited to a learner-exclusive Discord channel. Feel free to post any questions that arise while taking the course. You can also learn from questions posted by others.

I hope we can learn together by freely asking questions and discussing things in a space where it's okay not to know everything. After all, the most important goal is to boost your confidence in JavaScript.


❓ Frequently Asked Questions

Q. Do you use Tailwind CSS in the course?

In just one episode, "Building a Shopping Mall," we use Tailwind CSS for the design. If you are not familiar with Tailwind CSS, you can write the CSS in your own preferred way. If you are interested, you may also refer to the free video I created.

Q. Is my skill level sufficient to take this course?

It's hard to pinpoint exactly, but if the following items apply to you, it should be a good fit for you to take the course.

  • Understand the difference between let and const.
  • You can handle modules using import/export.
  • I have some understanding of the difference between import and require.
  • I understand the syntax const { name, address } = person.
  • You can create a simple To-Do app using React or Vue.js by storing tasks in variables without a database.
  • If using React, you have a general idea of how to use useEffect and useMemo.
  • If asked to create a To-Do app, I can roughly imagine how to break down the components.

Q. How is this different from other courses?

There are many courses aimed at building a specific project. In those cases, they show the process of gradually building up by combining various technologies, libraries, and services. While useful for learning about various things (What) and how to combine them (How), the nature of such courses makes it difficult to cover the "Why."

In Sinabro JavaScript, you will understand the pros and cons of each approach by learning the history of specific topics—why we now do things this way compared to how they were done in the past. Additionally, by manually implementing features that frameworks typically hide from us, you will come to understand the "why" behind those actions.

Knowing the "What" and "How" is very important, but without the "Why," it's difficult to go far. The reason for a lack of confidence while developing is usually due to a lack of "Why." When a bug occurs, you don't know how to solve it because you don't fully understand the situation; and even when you apply a solution found through Googling and it works, you feel uneasy because you don't understand why it was resolved, leading to worries about what to do if the same situation happens again.

That's why learning the "Why" accurately is an essential process for upgrading to the next level. While you can learn by trial and error, learning from someone who has already gone through that process and explains it in detail is also an efficient method. In fact, since the demand for lectures targeting the mid-level is inevitably lower than for beginner courses, I believe lectures with this specific targeting are quite rare.

Q. Is there a preview lecture?

Yes! I have created short free videos with content like warm-up exercises that would be good to watch before starting this course. You can check them out at this link.

Q. Is there a discount for students or job seekers?

Yes, it is possible. We provide a discount after a simple verification process.

Q. I have another question!

Please send me an email or a Twitter DM and I will get back to you. Since I live in France, please understand that my response may be slightly delayed due to the time difference.

Recommended for
these people

Who is this course right for?

  • "It works, but why does it work?"

  • "Web development is so complex"

  • "I can do it, but I lack confidence."

  • "I want to level up my development skills."

  • "So many new things are coming out so quickly."

Need to know before starting?

  • This is not a course for JavaScript beginners. It is a course for core training to move from junior to mid-level, and from mid-level to senior.

Hello
This is eunjae

628

Learners

37

Reviews

17

Answers

4.9

Rating

2

Courses

Hello. I'm Eunjae Lee. I live in France. I love zoning out at home while watching my cats, and I enjoy taking about an hour-long walk after dinner. I live in a small town near Paris because I find loud and crowded city centers overwhelming. I like birdwatching, and I have a hobby of growing vegetables.

To talk more about my development work, since November 2022, I have been building an extension platform for developer users at Storyblok, a company that creates a Headless CMS service.

In 2019, I moved to France to join Algolia, a cloud-based search solution company. There, I worked on an open-source UI library called InstantSearch. I spent most of my time managing common logic separately and ensuring each flavor acted as a minimal wrapper in order to provide the library in four different versions: Vanilla JavaScript, React, Vue.js, and Angular. Besides that, I participated in several other open-source projects as part of my work.

Before that, I worked as a full-stack developer at a startup in Korea and Singapore for about three years, and prior to that, I spent four to five years primarily focused on frontend development at Kakao and Daum Communications.

More

Curriculum

All

118 lectures ∙ (19hr 56min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

36 reviews

4.9

36 reviews

  • damyo7477님의 프로필 이미지
    damyo7477

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    It felt different from the lectures I've seen so far, and I felt like I was taking a break, so I took the class comfortably. It doesn't mean that the lectures were light or easy. In the past, I liked the lectures that crammed in a lot of knowledge and skills(?) (I felt like I was getting my money's worth😁), but sometimes it was hard to keep up, and I was confused whether the lectures were for the students or if the lecturers were just displaying what they knew like trophies and building up their own achievements. Eunjae's lectures seemed to have a good balance. They were moderately wide and moderately deep. Above all, it was good because I could experience following the flow of thought as if I was solving a problem, rather than memorizing formulas. It also gave me a chance to think again about things I didn't know, but just took for granted and didn't wonder about, and things I didn't care about because I considered them unimportant. I need to look back on how I deal with and think about problems, and what kind of attitude I've had so far. If you have the chance, it would be great if you could share Eunjae's tips as a developer (what tools you use, how you work/collaborate, etc.). I look forward to seeing you again with another great lecture. Thank you.

    • eunjae
      Instructor

      Wow, I'm so glad you felt that way. I really thought from the time I was planning the lecture that it would be nice to learn each topic "step by step", and I'm so happy that you felt that way. I'll think about the bonus episode about development tools and collaboration methods 😊

  • gichulroh6344님의 프로필 이미지
    gichulroh6344

    Reviews 14

    Average Rating 4.7

    5

    100% enrolled

    The lecturer seems like a philosopher who codes. Development is a fun thing in some ways, and it helped me find that fun again. At first, I hesitated because the lecture was a bit pricey, but I finished the first session. I think I should watch it two or three times. There are many lectures on making apps, but thanks to the Node environment and library development lectures, my understanding of related development environments has increased. I look forward to the next lecture. I hope you do well from afar. Finally, in the video of Section 12, Creating a Static Blog, Deployment, there is a blackout for about a minute.

    • eunjae
      Instructor

      Thank you so much for the great review 😊 There was a long gap in the video you mentioned. Thanks to you, I was able to remove it and reupload it. Thank you!

  • qpyou12340482님의 프로필 이미지
    qpyou12340482

    Reviews 9

    Average Rating 4.9

    5

    14% enrolled

    A lecture from deep insight! I recommend it :)

    • eunjae
      Instructor

      Thank you evanjin 😊

  • leehyunji07152667님의 프로필 이미지
    leehyunji07152667

    Reviews 2

    Average Rating 5.0

    5

    97% enrolled

    I'm a junior developer in my third year! I was browsing through the courses and I liked it so much that I bought it and listened to it. It was so good. Since my company focuses on functional development, it was hard for me to learn about project setup or core JS concepts. It was so helpful and good to learn such diverse and essential knowledge. I was impressed by how you implemented SSR yourself and made it work like React using JS. I also liked how you covered bundlers and module concepts. It seems like a course that teaches you how to catch fish, not give them fish. I felt like you put a lot of thought into the course structure while listening to the course. I'll review it from time to time. Thank you~!

    • eunjae
      Instructor

      Thank you for your kind words 😊 I also tried my best to teach you how to catch fish, not the fish, so I'm so glad you felt that way. If you have any questions, please leave them anytime. Thank you!

  • sai님의 프로필 이미지
    sai

    Reviews 4

    Average Rating 5.0

    5

    58% enrolled

    I usually like to spy on the instructor's SNS account, and when he introduced the lecture, I quickly read the curriculum. I was doing a vanilla JavaScript-based project while preparing for a job, and while doing the project, I often thought that my JavaScript skills were still not enough! This lecture provided insight into how to implement convenient functions in libraries & frameworks in JavaScript, and concepts that are difficult to study alone, such as TDD and npm distribution. While studying FE, I vaguely knew about the concepts but wanted to learn them in detail, so it was good to follow along with the instructor, which helped ease the burden. This lecture is recommended for those who quickly moved from JavaScript to React or started developing with React but are stuck. This lecture is useful even now that I am preparing for a job, but if it had been shown to me a year ago... when I was desperately craving insight, I think it would have been a lecture that I would have applauded. The instructor is very considerate in many ways, from the fact that he manages students through a separate Discord to the fact that he distributes discount codes for job seekers! I recommend it! (And the cat that appears briefly in the video is cute too. ☺️)

    • eunjae
      Instructor

      Hello. I'm so glad it was helpful 🥹 Thank you so much for your kind words, and I hope you do well in your job search!

Similar courses

Explore other courses in the same field!

$110.00