wkdska15905720

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.

nhcodingstudio

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

실습 중심

토이프로젝트

프론트엔드

클론코딩

웹개발

입문

초급

중급이상

자바스크립트

JavaScript

리액트

React

Web Application

Document Object Model

frontend

Giới thiệu

📂 Mini Notion Part 1: Bắt đầu dự án và khung cơ bản

📂 Mini Notion Part 2. Quản lý dữ liệu tài liệu và cây thư mục sidebar

📂 Mini Notion Phần 3. Trình soạn thảo nội dung và đồng bộ hóa trạng thái

📂 Mini Notion Phần 4. Nâng cao quản lý tài liệu

📂 Mini Notion Phần 5. Thêm·xóa trang và nâng cao thùng rác

📂 Mini Notion Phần 6. Bookmark và Modal Tìm kiếm

📂 Mini Notion Phần 7. Cài đặt và môi trường người dùng

📂 Mini Notion Phần 8. Modal Confirm và phím tắt

📂 Mini Notion Part 9. Điều khiển thanh bên và khởi tạo ứng dụng

📂 Mini Notion Phần 10. Tổng kết toàn bộ cấu trúc