강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image
NEW
Programming

/

Web Development

Triển khai Notion trực tiếp bằng Vanilla JavaScript

Khóa học này là một dự án frontend cấp độ fullstack tập trung vào việc triển khai Notion từ đầu đến cuối bằng Vanilla JavaScript, không chỉ dừng lại ở việc clone UI đơn thuần mà còn tập trung vào việc hiểu sâu nguyên lý hoạt động bên trong. Chúng ta sẽ trực tiếp triển khai tất cả các tính năng cốt lõi của một ứng dụng ghi chú thực tế bằng vanilla JS như: sidebar tree, tạo tài liệu lồng nhau, tự động lưu, routing, thùng rác, yêu thích, modal tìm kiếm, modal cài đặt, chuyển đổi theme, Export/Import, phím tắt, responsive layout, drag resize. Mục tiêu là học vững chắc các hoạt động chuẩn của trình duyệt (event bubbling, DOM tree, local storage, Blob, FileReader, hash routing, v.v.) mà bạn phải biết trước khi sử dụng các framework như React, Vue, để có thể hiểu hoàn toàn "tại sao lại hoạt động như vậy" và xây dựng nội lực có thể debug được.

19 học viên đang tham gia khóa học này

  • nhcodingstudio
실습 중심
토이프로젝트
프론트엔드
클론코딩
웹개발
JavaScript
React
Web Application
DOM
frontend

Dịch cái này sang tiếng Việt

  • Thiết kế kiến trúc ứng dụng quy mô lớn dựa trên Vanilla JS

  • Luồng dữ liệu một chiều và đồng bộ hóa màn hình

  • Hash routing và đồng bộ hóa địa chỉ

  • Mô hình hóa cây thanh bên & tài liệu lồng nhau

  • Trải nghiệm người dùng tạo tài liệu lồng nhau (tạo→hiển thị→chỉnh sửa)

  • Kết nối nhập liệu·định dạng·thanh công cụ của trình soạn thảo

  • Chiến lược lưu tự động và debounce (cân bằng giữa tải, an toàn và tính tức thì)

  • Bảo vệ snapshot và schema của Local Storage

  • Thùng rác (xóa mềm)·Khôi phục·Xóa vĩnh viễn

  • Hiển thị danh sách yêu thích và danh sách phái sinh

  • Bộ chọn emoji·Đóng khi click bên ngoài·Tính toán vị trí

  • Tìm kiếm modal: Bộ lọc thời gian thực & Điều hướng bàn phím

  • Cài đặt modal và chuyển đổi theme: <html data-theme> + CSS biến

  • Điều khiển độ rộng sidebar·Animation·Responsive

  • Export/Import·Phím tắt·Xử lý lỗi

Group 49

📒 Tạo ứng dụng Notion bằng Vanilla JS

Khóa học này là quá trình triển khai trực tiếp từ đầu đến cuối một ứng dụng quản lý tài liệu theo phong cách Notion chỉ bằng Vanilla JavaScript. Vì không sử dụng các framework như React, Vue mà chỉ hoàn thành bằng JS, HTML, CSS thuần túy, bạn có thể hiểu đúng đắn các nguyên lý cơ bản của frontend.

Gần đây các khóa học clone coding thường sử dụng framework để mô phỏng UI. Tất nhiên điều này có ích, nhưng cuối cùng React hay Vue cũng xử lý thao tác DOM, quản lý state và hệ thống event bằng Vanilla JS ở bên trong.
Do đó, để hiểu đúng framework và debug tốt, bạn cần biết nguyên lý hoạt động cơ bản của JS và cấu trúc rendering của browser. Khóa học này được thiết kế để bạn tự nhiên nắm vững những kiến thức nền tảng đó thông qua việc tạo ra một dự án hoàn chỉnh có thể sử dụng trong thực tế.

🚀 Tại sao lại làm Notion bằng Vanilla JS?

Chúng ta sử dụng Notion hàng ngày, vậy bên trong nó hoạt động theo nguyên lý gì?
Reacthay Vue có nhiều khóa học clone với các framework như vậy, nhưng cuối cùng thì nền tảng của chúng vẫn là Vanilla JS và DOM. Trong khóa học này, không sử dụng framework, chỉ với HTML·CSS·JavaScript, bạn sẽ được triển khai một ứng dụng kiểu Notion thực tế từ đầu đến cuối và học đúng nguyên lý của nó.

Không chỉ đơn thuần mô phỏng UI, mà thiết kế kiến trúc theo ba trục: tầng dữ liệu tài liệu, UI rendering, và tương tác sự kiện·routing, rồi hoàn thành một ứng dụng thực sự hoạt động.

✨ Giới thiệu khóa học

Ứng dụng hoạt động chủ yếu trên ba tầng.

Thứ nhất là tầng dữ liệu, quản lý danh sách tài liệu, yêu thích, thùng rác, tài liệu đang hoạt động, trạng thái thanh bên, v.v. trong một đối tượng state duy nhất. Dữ liệu này được kết nối với localStorage, khôi phục lại trạng thái tương tự ngay cả sau khi làm mới trang.

Thứ hai là tầng rendering. Cây sidebar, vùng nội dung chính, danh sách thùng rác, modal yêu thích, v.v. đều được cấu trúc để vẽ lại DOM dựa trên trạng thái. Nguyên tắc luôn là "trạng thái → màn hình", và nhờ luồng một chiều này, dữ liệu và màn hình được duy trì nhất quán mà không cần cập nhật từng phần phức tạp.

Thứ ba là tầng tương tác. Các hành động như click, nhập liệu, phím tắt, routing, mở/đóng modal, kéo sidebar đều được thực hiện thông qua event listener. Event thay đổi state, và tầng rendering lại phản ứng trong cấu trúc tuần hoàn này giúp ứng dụng hoạt động ổn định.

Cốt lõi của khóa học này không chỉ đơn giản là "nút bấm hoạt động" mà là hiểu được nguyên lý nào làm cho hoạt động đó trở nên khả thi ở cấp độ mã code.

  • Điều chỉnh độ rộng sidebar là mousedown → mousemove → mouseup cách luồng này kết hợp với thuộc tính CSS tùy chỉnh như thế nào,

  • Modal tìm kiếm hoàn thiện toàn bộ UX như thế nào, từ sự kiện nhập liệu, điều hướng bằng bàn phím, đến xử lý ESC và nhấp chuột vào nền,

  • Việc chuyển đổi theme là cách một checkbox và data-theme attribute, lưu trữ localStorage kết hợp với nhau như thế nào,

Bạn sẽ có thể theo dõi và xác nhận bằng mắt toàn bộ quá trình này.

🔑 Tính năng triển khai

Các tính năng được triển khai trực tiếp trong khóa học này đều là những yếu tố tạo nên khung sườn của ứng dụng thực tế.

📂 Cấu trúc cây tài liệu & tạo tài liệu lồng nhau: Triển khai thanh bên phân cấp có mối quan hệ cha-con


✏ Đổi tên inline: Chỉnh sửa tiêu đề ngay lập tức bằng cách nhấp đúp/F2

🗑 Quản lý thùng rác: Xóa tài liệu → Chuyển vào thùng rác → Khôi phục/Xóa vĩnh viễn triển khai toàn bộ quy trình

⭐ Modal yêu thích: Ghim và truy cập nhanh các tài liệu quan trọng


🔍 Modal tìm kiếm: Hỗ trợ lọc ngay khi nhập, điều hướng bằng phím mũi tên/Enter

⚙ Modal cài đặt: Chuyển đổi chủ đề sáng·tối, Lưu trữ vĩnh viễn localStorage

⌨ Phím tắt bàn phím: Ctrl/Command+K tìm kiếm, Ctrl/Command+Shift+N tài liệu mới,
F2 đổi tên

📏 Điều khiển độ rộng thanh bên: Thu gọn/mở rộng bằng nút, thay đổi kích thước bằng kéo thả, tự động thu gọn trên mobile


🔄 Định tuyến & Khôi phục trạng thái: Điều hướng dựa trên hash, Duy trì trạng thái khi làm mới trang

💾 Lưu trữ & tải dữ liệu: Tự động lưu localStorage, hỗ trợ Export/Import

🧭 Khởi tạo định tuyến: Khi vào ứng dụng lần đầu chuyển đến tài liệu "Welcome" hoặc đồng bộ hash


📅 Hiển thị thông tin meta: Tự động cập nhật "Ngày chỉnh sửa cuối cùng"


🛠 Modal Confirm: Quy trình xác nhận cho các thao tác không thể hoàn tác như xóa vĩnh viễn

🎨 Liên kết vùng trình soạn thảo: Đồng bộ hóa với state ngay khi nhập tiêu đề·nội dung

🔗 Cấu trúc tuần hoàn trạng thái-render-sự kiện: Trực tiếp nắm vững nguyên lý cốt lõi của kiến trúc ứng dụng

[[SPAN_1]]🔑[[/SPAN_2]] Tính năng triển khai

Các tính năng được triển khai trực tiếp trong khóa học này đều là những yếu tố cốt lõi tạo nên khung xương của ứng dụng thực tế.

  • 📂 Cấu trúc cây tài liệu & tạo tài liệu lồng nhau: Triển khai thanh bên phân cấp với mối quan hệ cha-con

  • ✏ Đổi tên inline: Nhấp đúp/F2 để chỉnh sửa tiêu đề ngay lập tức

  • 🗑 Quản lý thùng rác: Xóa tài liệu → Chuyển vào thùng rác → Khôi phục/Xóa vĩnh viễn

  • ⭐ Modal yêu thích: Ghim và truy cập nhanh các tài liệu quan trọng

  • 🔍 Modal tìm kiếm: Lọc ngay khi nhập, điều hướng bằng phím mũi tên/Enter

  • ⚙ Modal cài đặt: Chuyển đổi giao diện sáng·tối, lưu trữ vĩnh viễn localStorage

  • ⌨ Phím tắt bàn phím: Ctrl/Command+K tìm kiếm, Ctrl/Command+Shift+N tài liệu mới, F2 đổi tên

  • 📏 Điều khiển độ rộng thanh bên: Thu gọn/mở rộng bằng nút, thay đổi kích thước bằng kéo thả, tự động thu gọn trên mobile

  • 🔄 Định tuyến & Khôi phục trạng thái: Điều hướng dựa trên hash, duy trì trạng thái giống nhau khi làm mới

  • 💾 Lưu trữ & tải dữ liệu: Tự động lưu trữ dựa trên localStorage và export/import

  • 🧭 Khởi tạo định tuyến: Di chuyển đến tài liệu "Welcome" khi lần đầu vào ứng dụng hoặc đồng bộ hóa hash

  • 📅 Hiển thị thông tin meta: Tự động cập nhật "Ngày chỉnh sửa cuối cùng"

  • 🛠 Modal Confirm: Thêm quy trình xác nhận của người dùng cho các thao tác không thể hoàn tác như xóa vĩnh viễn

  • 🎨 Liên kết vùng trình soạn thảo: Nhập tiêu đề và nội dung được đồng bộ hóa ngay lập tức với state

  • 🔗 Cấu trúc tuần hoàn trạng thái-render-sự kiện: Học kiến trúc tổng thể của ứng dụng

🎯 Những điều bạn sẽ học được qua khóa học này

  1. Thiết kế và render trực tiếp cấu trúc cây tài liệu lồng nhau

  2. Nguyên lý định tuyến và hiểu về chuyển đổi trang thông qua URL hash

  3. Quản lý trạng thái và lưu trữ bền vững: Lưu trữ và khôi phục dữ liệu ứng dụng bằng localStorage

  4. Mẫu Modal: Overlay, đóng bằng ESC, xử lý click nền, cân nhắc khả năng truy cập

  5. Chức năng tìm kiếm: Triển khai logic lọc ngay lập tức khi nhập và điều hướng bằng bàn phím

  6. Hệ thống chủ đề: Chuyển đổi chủ đề sáng·tối và quản lý biến CSS toàn cục

  7. Logic phím tắt: Xử lý sự kiện bàn phím và ctrl/metaKey theo từng nền tảng

  8. File API: Sử dụng Blob và FileReader để xuất/nhập dữ liệu JSON

  9. Quy trình khôi phục/xóa thùng rác: Mẫu an toàn bảo vệ tính toàn vẹn dữ liệu

  10. Modal Confirm: Mẫu UX để xác nhận trước các thao tác không thể hoàn tác

  11. Kéo thả thay đổi kích thước thanh bên: Kỹ thuật điều khiển bố cục thường được sử dụng trong thực tế

  12. Render dựa trên trạng thái: Đảm bảo UI có thể dự đoán được với luồng một chiều "trạng thái → màn hình"

  13. Thiết kế logic khởi tạo: Tự động hóa quá trình trước khi chạy ứng dụng bằng hàm init()

  14. Phương pháp luận debug: Theo dõi luồng trạng thái → rendering để tìm nguyên nhân lỗi một cách nhanh chóng

  15. Nâng cao hiểu biết về framework: Cảm nhận được tại sao Virtual DOM và quản lý state của React/Vue lại cần thiết

📈 Những gì bạn có thể đạt được từ khóa học này

  • Cảm giác kết nối trạng thái, DOM và sự kiện thành một hệ thống duy nhất

  • Hiểu nguyên lý đồng bộ hóa trạng thái với bộ nhớ trình duyệt (localStorage)

  • Trải nghiệm triển khai từ đầu đến cuối các mẫu UI như sidebar/modal/thanh tìm kiếm

  • Khả năng sử dụng event bubbling, stopPropagation, preventDefault một cách phù hợp

  • Biến CSS và thuộc tính tùy chỉnh - Cách kiểm soát layout và theme

  • Kỹ thuật kết hợp UI responsive và media query với JS để điều khiển

  • Trải nghiệm khôi phục luồng UX có thể thấy trong ứng dụng Notion thực tế bằng Vanilla JS

  • Sức mạnh của việc "quan sát bằng mắt thường hoạt động gốc" đằng sau sự trừu tượng hóa của framework

  • Cách theo dõi và debug DOM và luồng sự kiện trong các tình huống có vấn đề

  • Trải nghiệm thiết kế mở rộng từ các đơn vị chức năng nhỏ đến kiến trúc toàn bộ ứng dụng

  • Phím tắt, popover, overlay và các khả năng triển khai tương tác thực tế

  • Từ tạo tài liệu mới đến xóa, cảm giác quản lý toàn bộ vòng đời tài liệu

  • Không chỉ là theo dõi code đơn giản mà là "sức mạnh có thể giải thích tại sao nó hoạt động như vậy"

👩‍💻 Khuyến nghị cho những người như thế này

  • Không chỉ đơn thuần làm theo các chức năng mà dành cho những ai muốn hiểu sâu về cấu trúc của ứng dụng

  • Những bạn muốn rèn luyện nền tảng cơ bản với Vanilla JS trước khi học framework

  • Những người muốn hiểu "tại sao nó hoạt động như vậy" nguyên lý trước khi học React/Vue

  • Vượt qua việc clone coding, những ai muốn tự tay tạo ra ứng dụng portfolio của riêng mình

  • Những người muốn hiểu cách thức hoạt động của DOM, sự kiện và bộ nhớ của trình duyệt web một cách thực tế

  • Những người muốn học cách triển khai các mẫu UI thực tế như sidebar, modal, thanh tìm kiếm, v.v.

  • Những người muốn hoàn thành trực tiếp các dự án nhỏ và có được sự tự tin về frontend

  • Những người muốn phát triển khả năng debug và giải thích các vấn đề UI xảy ra trong môi trường vận hành dịch vụ

  • Những người muốn mở rộng tự nhiên sang TypeScript, React, Vue dựa trên nền tảng Vanilla JS

  • Dành cho những ai muốn trở thành developer có thể giải thích rõ ràng "tại sao code lại chạy như vậy"

📌 Lưu ý trước khi học

  • Nếu bạn đã biết cấu trúc cơ bản của HTML/CSS và cú pháp cơ bản của JavaScript thì có thể theo dõi một cách suôn sẻ.

  • Đặc biệt, tốt nhất là bạn nên biết về addEventListener, if/else, forEach, và cách truy cập đối tượng.

  • Có thể học trên cả môi trường Mac/Windows, chỉ cần có trình duyệt Chrome mới nhất là có thể thực hành ngay mà không cần cài đặt thêm gì.

✨ 마무리

Khóa học này được thiết kế để vượt xa việc clone code đơn thuần, giúp bạn đồng thời nắm vững các nguyên lý kiến trúc frontend và các pattern thực tế. Sau khi hoàn thành tất cả 49 bài học, bạn không chỉ có trong tay một ứng dụng kiểu Notion hoàn chỉnh, mà cònReact/Vue phát triển được khả năng hiểu sâu hơn về cách hoạt động bên trong của các framework như và có thể debug hiệu quả hơn.

Bây giờ đã đến lúc các bạn trực tiếp trải nghiệm tạo ra Notion bằng Vanilla JSđể phát triển thêm một bước như một frontend developer. Hẹn gặp các bạn trong khóa học. 🚀

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người muốn hiểu đúng đắn nguyên lý hoạt động cơ bản của web trước khi tìm hiểu về framework

  • Những người đã phát triển với React hoặc Vue nhưng thường gặp khó khăn khi debugging

  • Những ai muốn triển khai từ đầu đến cuối các tính năng thường được sử dụng trong thực tế

  • Những người quan tâm đến cấu trúc ứng dụng ưu tiên local hoạt động được ngay cả khi không có kết nối internet

  • Những người đang chuẩn bị tìm việc hoặc xây dựng portfolio và cần một dự án có thể giải thích được quá trình triển khai

  • Những người cần hiểu cấu trúc frontend với tư cách là nhà phát triển backend hoặc fullstack

  • Những người muốn thiết lập các mẫu UI/UX chung mà cả team có thể sử dụng

  • Nhà thiết kế hoặc người lập kế hoạch muốn hiểu những hạn chế và khả năng của trình duyệt

  • Những người cần cải thiện jQuery hoặc codebase cũ thành JS hiện đại

  • Những người làm công việc QA hoặc testing muốn hiểu về sự thay đổi trạng thái của SPA

  • Những người muốn vượt ra khỏi việc chỉ đơn thuần sử dụng các framework như React, Vue mà muốn hiểu được nguyên lý bên trong

  • Những người quan tâm đến khả năng tiếp cận và UX tập trung vào bàn phím

  • Những người muốn mang lại trải nghiệm người dùng ổn định

  • Mentor muốn giải thích từ cơ bản đến framework một cách liên kết trong demo giáo dục hoặc nghiên cứu nội bộ công ty

  • Người cần ngôn ngữ để giải thích thiết kế hệ thống và trade-off khi chuẩn bị phỏng vấn frontend

Cần biết trước khi bắt đầu?

  • HTML & CSS

  • JavaScript

Xin chào
Đây là

182

Học viên

7

Đánh giá

4.4

Xếp hạng

10

Các khóa học

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

Chương trình giảng dạy

Tất cả

51 bài giảng ∙ (4giờ 49phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Ưu đãi có thời hạn

19 ₫

39%

837.038 ₫

Khóa học khác của nhcodingstudio

Hãy khám phá các khóa học khác của giảng viên!

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

Basic

Basic

HTML/CSS, JavaScript, React

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]Course Thumbnail

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]

nhcodingstudio

An Express.js journey from beginner to mastery, flowing like water! A backend journey where you learn properly by directly implementing from basic server concepts to completing a CRUD project.

Basic

Basic

express.js, Node.js, routing

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]Course Thumbnail

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]

nhcodingstudio

Building a Node.js Server Engine – Learning Framework Design through an Express.js CloneCourse Thumbnail

Building a Node.js Server Engine – Learning Framework Design through an Express.js Clone

nhcodingstudio

Beyond simply using Express.js, this lecture will have you directly implementing its internal engine from scratch to finish, allowing you to truly internalize the operating principles of a real server. You will directly build all of Express's components, such as routers, middleware, request-response objects, static file handling, and template rendering, from the ground up, providing an experience that fosters growth as a server developer.

Basic

Basic

JavaScript, Node.js, Express

Building a Node.js Server Engine – Learning Framework Design through an Express.js CloneCourse Thumbnail

Building a Node.js Server Engine – Learning Framework Design through an Express.js Clone

nhcodingstudio

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]Course Thumbnail

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]

nhcodingstudio

This course goes beyond simple DOM manipulation, deeply learning how to dynamically compose and react to web UIs within interactions with actual users. It's structured for you to learn by directly implementing common issues encountered in practice, from the essence of event systems, bubbling and capturing, event delegation, real-time UX feedback, to performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flow and state changes.

Basic

Basic

HTML/CSS, JavaScript, React

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]Course Thumbnail

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]

nhcodingstudio

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]Course Thumbnail

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

Beginner

Beginner

HTML/CSS, JavaScript, React

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]Course Thumbnail

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]Course Thumbnail

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]

nhcodingstudio

📌 This course starts with a strategic AI Tic-Tac-Toe project and is a curriculum that completes the core concepts of object-oriented programming through practical examples. Through game implementation, you will train logic design and AI strategic thinking, and then directly experience OOP design techniques such as inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to go beyond syntax and grow into a 'designing developer' through a real project.

Basic

Basic

JavaScript, HTML/CSS, oop

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]Course Thumbnail

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]

nhcodingstudio

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]Course Thumbnail

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]

nhcodingstudio

Through this course, students will broadly learn the basics and advanced concepts of JavaScript, from setting up the development environment to variables, conditional statements, functions, objects, and arrays. Through thorough review with practice exercises and quizzes, they will be able to develop problem-solving skills that can be immediately applied to web and mobile development practices.

Beginner

Beginner

JavaScript, HTML/CSS, Web Application

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]Course Thumbnail

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]

nhcodingstudio

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]Course Thumbnail

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

nhcodingstudio

This course systematically masters intermediate to advanced CSS techniques such as "CSS Position, Transition, Transform, Animation, Flexbox, Grid, and Responsive Web Design," and equips you with skills immediately applicable in real-world projects through various hands-on practice projects.

Basic

Basic

HTML/CSS

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]Course Thumbnail

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

nhcodingstudio

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]Course Thumbnail

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]

nhcodingstudio

The "Learning HTML + CSS Properly: Complete Mastery from Beginner to Practical Application Part 1" course is designed to provide a deep understanding of how the internet and the web work, and to solidify the basics of HTML/CSS through a practice-oriented curriculum. By taking this course, you can firmly grasp the essential concepts of web development and immediately apply them to projects.

Beginner

Beginner

HTML/CSS

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]Course Thumbnail

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]

nhcodingstudio

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]Course Thumbnail

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

Beginner

Beginner

HTML/CSS, JavaScript, React

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]Course Thumbnail

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

Advanced Modern Javascript with ES6 Grammar Part 3Course Thumbnail

Advanced Modern Javascript with ES6 Grammar Part 3

usefulit

This course is designed to learn the JavaScript programming language along with the latest ES6 grammar.

Intermediate

Intermediate

JavaScript, ES6

Advanced Modern Javascript with ES6 Grammar Part 3Course Thumbnail

Advanced Modern Javascript with ES6 Grammar Part 3

usefulit

Yalco's Reactive Programming - Learn ReactiveX easily with JavaScriptCourse Thumbnail

Yalco's Reactive Programming - Learn ReactiveX easily with JavaScript

yalco

⚡ Short and sweet full 160-minute course! Copy and paste code from website to website and learn reactive programming with ReactiveX 😎

Basic

Basic

RxJS, JavaScript, Functional Programming

Yalco's Reactive Programming - Learn ReactiveX easily with JavaScriptCourse Thumbnail

Yalco's Reactive Programming - Learn ReactiveX easily with JavaScript

yalco

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

Basic

Basic

HTML/CSS, JavaScript, React

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

<M.B.I.T> Create a test page! with DjangoCourse Thumbnail

<M.B.I.T> Create a test page! with Django

jejucoding

Create a web page that tests your development type! MBIT (My Best IT Personalities), not MBTI! You can learn the overall process of web development by creating your own 'MBIT Test Page'. (Uses Django 3.1 version.)

Basic

Basic

HTML/CSS, JavaScript, Django

<M.B.I.T> Create a test page! with DjangoCourse Thumbnail

<M.B.I.T> Create a test page! with Django

jejucoding

Sinabro JavascriptCourse Thumbnail

Sinabro Javascript

eunjae

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

Intermediate

Intermediate

JavaScript, vanilla-js

Sinabro JavascriptCourse Thumbnail

Sinabro Javascript

eunjae

Clean up JavaScript: Jump up!Course Thumbnail

Clean up JavaScript: Jump up!

tonextday

The final course of JavaScript! It covers the structure and method of the execution context, Event Loop, and multi-threading based on ES2025. It covers the language culture contained in the JavaScript language.

Basic

Basic

JavaScript

Clean up JavaScript: Jump up!Course Thumbnail

Clean up JavaScript: Jump up!

tonextday

Masterclass in developing portfolio sites using various frameworksCourse Thumbnail

Masterclass in developing portfolio sites using various frameworks

webstoryboy

Learn how to build a beautiful portfolio site using Vite, React, Vue, and Next.js. Perfect for developers looking to improve their practical front-end development skills using multiple frameworks.

Basic

Basic

Portfolio, React, Vue.js

Masterclass in developing portfolio sites using various frameworksCourse Thumbnail

Masterclass in developing portfolio sites using various frameworks

webstoryboy

[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)Course Thumbnail

[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)

dakgangjung123

This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

Basic

Basic

React, Electron, GUI

[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)Course Thumbnail

[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)

dakgangjung123

A real introductory all-in-one development boot camp for non-majorsCourse Thumbnail

A real introductory all-in-one development boot camp for non-majors

grab

The ultimate full-stack course that teaches even beginners about web, server, mobile apps, and machine learning!! If you're not sure where to start with development, I highly recommend this course. It's all done with just Javascript!

Beginner

Beginner

JavaScript, React, Node.js

A real introductory all-in-one development boot camp for non-majorsCourse Thumbnail

A real introductory all-in-one development boot camp for non-majors

grab

Creating a Map Service with Corona Map Developers 1Course Thumbnail

Creating a Map Service with Corona Map Developers 1

donghunee

This is a course on creating a map service taught by the developers of Corona Map.

Basic

Basic

Node.js, Web Application, Express

Creating a Map Service with Corona Map Developers 1Course Thumbnail

Creating a Map Service with Corona Map Developers 1

donghunee

Functional Programming and JavaScript ES6+Course Thumbnail

Functional Programming and JavaScript ES6+

mduniv

This is a course where you can learn ES6+ and functional programming. This course covers and applies the iterable/iterator/generator protocols of ES6+ in detail. You can learn functional programming based on iterables, map/filter/reduce, pipelines, lazy evaluation through generators, promise composition, concurrency/parallelism, async/await and asynchronous error handling, etc. Master this course and practice to become an intermediate JavaScript developer!

Basic

Basic

JavaScript, Functional Programming

Functional Programming and JavaScript ES6+Course Thumbnail

Functional Programming and JavaScript ES6+

mduniv

Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

Hybrid App with Expo Framework to Increase Web Developer's Salary

codecamp

This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

Basic

Basic

React, Next.js, expo

Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

Hybrid App with Expo Framework to Increase Web Developer's Salary

codecamp

Clean up JavaScript: Base buildup!Course Thumbnail

Clean up JavaScript: Base buildup!

tonextday

It covers thinking. You can logically organize the core and fundamentals of JavaScript. You can organize your own JavaScript experience and thoughts. You can establish the logic of JavaScript technology. You can broaden your perspective on the entire JavaScript. You can prepare for JavaScript technical interview questions.

Basic

Basic

JavaScript, Interview, Tech Interview

Clean up JavaScript: Base buildup!Course Thumbnail

Clean up JavaScript: Base buildup!

tonextday

Building a Node.js Server Engine – Learning Framework Design through an Express.js CloneCourse Thumbnail

Building a Node.js Server Engine – Learning Framework Design through an Express.js Clone

nhcodingstudio

Beyond simply using Express.js, this lecture will have you directly implementing its internal engine from scratch to finish, allowing you to truly internalize the operating principles of a real server. You will directly build all of Express's components, such as routers, middleware, request-response objects, static file handling, and template rendering, from the ground up, providing an experience that fosters growth as a server developer.

Basic

Basic

JavaScript, Node.js, Express

Building a Node.js Server Engine – Learning Framework Design through an Express.js CloneCourse Thumbnail

Building a Node.js Server Engine – Learning Framework Design through an Express.js Clone

nhcodingstudio

The Immortal jQuery Still Alive - From Basics to PracticeCourse Thumbnail

The Immortal jQuery Still Alive - From Basics to Practice

ezweb

jQuery, a JavaScript library used by over 75% of websites worldwide! This course is structured to help you understand the principles and build a strong foundation rather than focusing on flashy effects. Learn jQuery from the basics to advanced applications to complete your own portfolio or use it immediately in the field.

Basic

Basic

HTML/CSS, JavaScript, jQuery

The Immortal jQuery Still Alive - From Basics to PracticeCourse Thumbnail

The Immortal jQuery Still Alive - From Basics to Practice

ezweb

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)Course Thumbnail

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

codingworks

The JS Core Theory and Practical Example Textbook and Completed Version for Web Publishers is a lecture textbook produced in PDF format. This textbook helps web publishers to fully acquire the basics of JavaScript and jQuery that they must know. A feature of this textbook is that it allows you to strengthen your theory through small missions connected to the theory. In particular, this textbook is also fully prepared with practical examples that utilize all the theories learned. The entire PDF page contains more than 320 pages of pure JavaScript (Vanilla JavaScript) and jQuery, with sufficient explanations added so that Coding Works can be easily understood. In particular, publishers can learn practical examples of jQuery interactions that are essential for creating websites.

Basic

Basic

JavaScript, jQuery, HTML/CSS

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)Course Thumbnail

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

codingworks

React Native with Expo: Learning Properly from ZeroChoCourse Thumbnail

React Native with Expo: Learning Properly from ZeroCho

zerocho

Web developers (especially React developers) can now truly easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps with Expo.

Basic

Basic

React, React Native, Hybrid App

React Native with Expo: Learning Properly from ZeroChoCourse Thumbnail

React Native with Expo: Learning Properly from ZeroCho

zerocho

JavaScript Machine Learning TensorFlow.jsCourse Thumbnail

JavaScript Machine Learning TensorFlow.js

tonextday

We will cover the concept of machine learning in a JavaScript environment. We will cover the form and code of implementing machine learning with JavaScript and TensorFlow.js.

Intermediate

Intermediate

Tensorflow, JavaScript, Machine Learning(ML)

JavaScript Machine Learning TensorFlow.jsCourse Thumbnail

JavaScript Machine Learning TensorFlow.js

tonextday

Vibe Coding Among Developers – Practical Edition (Cursor AI, Figma)Course Thumbnail

Vibe Coding Among Developers – Practical Edition (Cursor AI, Figma)

codecamp

Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

Intermediate

Intermediate

React, Next.js, cursor

Vibe Coding Among Developers – Practical Edition (Cursor AI, Figma)Course Thumbnail

Vibe Coding Among Developers – Practical Edition (Cursor AI, Figma)

codecamp