1. Basics of DOM API 1h 3m
- innerHTML
- createElement
- appendChild
- addEventListener
We learn the basic DOM API and practice how to structure HTML and attach events without using a frontend framework.
A JavaScript course for the mid-level developers
You know enough about JavaScript and frameworks,
but you don't feel like getting better and don't feel confident?
Write client-side routing, SSR, hydration, CLI, form library, and more
— with your own hands from scratch.
"It's working, but why...?"
We always use many different libraries and frameworks for web development. But, there are many times when we don't really get how things work. The JavaScript world is filled with so many different parts, and we often don't know how to make sense of it all. Sinabro JavaScript is a course that provides a way to help you move from a beginner level to intermediate, and from intermediate to an advanced level.
Sinabro(시나브로) is an adverb in Korean that translates to English as "little by little, unknowingly". It is often used to describe a process or change happening slowly over time.
As the JavaScript ecosystem has evolved, it has accumulated technical debt and become entangled with numerous elements. Although you can learn by trial and error on your own, it's also a good approach to sit down and learn thoroughly from someone who has already experienced it.
It's easy to panic even over minor bugs if you don't understand the fundamental principles of how the frameworks and libraries you are using work in harmony. Through the course, you will understand how things work by developing important topics from scratch.
Repeating similar toy projects can make your hands faster, but a different strategy is needed to dig deeper. Once you deeply understand the core concepts, you will have the basic knowledge to easily understand any new framework that comes out.
JavaScript, especially in the frontend ecosystem, still has many problems to solve, and various attempts are continuously taking place. That's why countless new libraries, frameworks, and concepts are pouring out. However, most of the attempts are trying to solve existing problems in new ways. Once you try to solve these existing problems directly without such solutions, you can easily understand how the new ones solve things differently by comparing them.
Hear it from our members
Jeonghyun
Junior frontend developer
When studying development, I often wondered about how to use this particular part that I was studying. Through Eunjae's lectures, I was able to find answers to many of those questions. This lecture focuses more on the practical applications rather than just the conceptual aspects, so I think there are many things to learn from it. I highly recommend it!
Lena
Junior frontend developer
Here is a lecture by Eunjae that I heard after studying JavaScript briefly, getting a job with React, and spending a tearful year. Even while working with React at my company, I always felt stuck when I didn't know JavaScript. I've taken various lectures, but this lecture is the first one that helped me understand the overall flow and context of frontend development! It was a great lecture where I not only learned the overall flow but also gained a lot of insight into the roadmap and direction I should take as a frontend developer or job seeker! If you're a frontend developer or a job seeker, I highly recommend you to take this lecture.
Jaehyun
Frontend developer at Naver SmartEditor
I would like to recommend this excellent lecture to those who are starting to learn frontend development and want to jump to the next level. Eunjae's Sinabro JavaScript is not boring but exciting, and it is based on the practical domain concept of a shopping mall.
Romuru Tempest
Junior frontend developer
When you still feel unfamiliar with JavaScript, I think it's a very good lecture to get to know it. It provides helpful content for practical tasks rather than delving into the intricate details of JavaScript itself. I recommend it because it allows you to consider the code structure of JS from various points. Instead of having a single major goal, it is a lecture that conveys the efforts of Eunjae to create multiple intermediate goals for learning and then construct them as 'the best examples' for efficient learning.
Gosu
Junior full-stack developer in UK
The JavaScript lecture I attended understood my needs the best and was the most helpful! I had a shaky foundation in JavaScript basics, so I eagerly desired in-depth JavaScript lectures as I jumped straight into React without a solid understanding.
However, most lectures focused on beginners, leaving me thirsty in that aspect. Many people understand these concepts mentally, but when it comes to applying them, they struggle with array methods, await, async, and so on. I had a vague understanding, but if someone asked for a concise explanation, I would stumble. However, if I took a lecture, they would only explain the basic theories I already knew and move on without providing examples of when, why, and how to use them.
That's why I think Sinabro JavaScript is perfect for those who want intermediate to advanced JavaScript lectures, like me! Learning array methods with a focus on passing unit tests was extremely helpful, and it gave me more opportunities to apply them in practical code, resulting in positive feedback during my one-year review. Sinabro JavaScript not only provides practical help but also offers an exceptional opportunity for junior developers, regardless of whether they are frontend or backend developers, to grow one step further. It's rare to find such an excellent lecture, but Sinabro JavaScript has accomplished it. 👍👍
I won't spam you. I'm busy building this course 🙂
I will let you know when it's ready.
Table of Contents
Each episode is designed to help you to implement a specific topic from scratch. After each episode, you will gain confidence little by little, unknowingly.
We learn the basic DOM API and practice how to structure HTML and attach events without using a frontend framework.
Part 1. Basic Implementation
We implement the product list and shopping cartof an e-commerce website. The goal is to implement dynamic interactions directly using the DOM APIs.
When you add or remove items from the shopping cart, we ensure that the quantity updates everywhere at once (in both the product list and the cart). This helps us understand the importance of modern front-end frameworks.
Part 2. Refactoring Code into Components
We refactor the code from the Part 1, breaking them down into multiple components for better management. We think about design, meaning, and role in doing so.
Part 3. Implementing Reactivity
Instead of imperatively finding each DOM element and updating the quantity, we reactively update the DOM elements as data changes.
We learn the basics of a web server by using Express. These days, Serverless Functions provided by Vercel or Netlify are easy and convenient. However, we're going to see how the backend used to be made with Express before such things existed. We'll also explore how a frontend launched with vite sends requests to the Express server, and renders the received data.
We practice three Array methods (filter, map, and reduce). Unit tests with input and output are provided. Your task is to write the code that makes all the tests pass. This practice helps you grow muscle to use arrays better.
We will examine the structure of npm libraries, and take our time to understand the complex issues entangled with Common JS and ES Module. Then, we will deploy the library to npm.
We are going to create a small subset of jQuery. We will learn how to set up a monorepo using yarn workspace, and experience the overall workflow by working on a library, sample apps, and a documentation site within the monorepo. We will also write unit tests using vitest, experience the difficulties that occurs during the library build process, and learn about treeshaking.
We are going to create a movie search website. The outcome is very simple, but we will cover very important concepts in this episode. We will learn about the browser's History API, and use it to implement client-side routing, similar to React Router, ourselves. And then, we directly implement Server-Side Rendering using an Express server. We also implement the part where the client performs Hydration. After completing this, you will be able to understand the process of SSR + Hydration in Next.js in quite detail.
Similar to the Array method practice episode, we practice with callback, Promise, async, and await to better handle asynchronous flows.
We often create static websites using Jekyll, Gatsby, Next.js, and so on. We examine how such tools create static websites and try to mimic their build process. In the process, we make a script written in Node.js, without any framework or tool, build posts written in markdown into a static blog and eventually deploy it on Vercel.
We will examine the structure of CLI libraries on npm, and try to create and deploy our own CLI to NPM. After that, you can install and use it with the command npm install -g <your-package-name>
.
<form action="/save" method="post">
In the past, we used to create forms like above. We will implement it in the old way to understand how it works. And you'll learn why we do it differently now.
Nowadays, we use libraries like react-hook-form quite a lot. We will understand the benefits of such libraries and create something similar ourselves.
Who is this for?
This is a course for people who have a basic understanding of JavaScript and are familiar with frameworks like React or Vue. However, if you find it difficult to understand what's happening behind the scenes in those frameworks or why certain errors occur, this course is for you. Sometimes, when you encounter an error, you search for solutions online and apply them without fully comprehending why they work. Additionally, you may feel overwhelmed by the constantly evolving JavaScript ecosystem, and it may seem like you're always starting from scratch when learning new things. By taking this course, you will be able to put all the small pieces of knowledge in your mind together.
What makes it different from other courses?
There are lots of courses that teach you how to make something cool. In these courses, they show you how to build things step by step using different libraries and services. It is useful in terms of learning how to combine what, but it is not easy to cover the why aspect in such courses.
In Sinabro JavaScript, you learn how things used to be done in the past and why they are done differently now. You also understand the advantages and disadvantages of each approach. By implementing the features that frameworks invisibly provide, you can learn why those features are implemented.
Knowing "what" and "how" is important, but it's hard to go far without understanding "why". The reason for not feeling confident in development is often because you don't understand 'why'. When something goes wrong, it's difficult to know how to fix it if you don't understand the situation completely. Just fixing the problem by following search results or AI chat bots without knowing why it worked can make you feel uneasy, and you might worry about what to do if a similar problem happens again.
Therefore, understanding "why" is important to improve your skills. You can learn by trying things yourself, but it's also helpful to learn from someone who has already experienced it and can explain it in detail. I believe there is less demand for targeted courses at this intermediate level compared to beginner courses, which makes these courses rare.
Does the course use Tailwind CSS?
In just one episode, we design using Tailwind CSS in "Building an e-commerce website". If you are not familiar with Tailwind CSS, you can write CSS in your preferred way.
I have another question!
DM me on Twitter, or email me at hey@learnwitheunjae.dev.
I won't spam you. I'm busy building this course 🙂
I will let you know when it's ready.