1. ReactJS
1.1. Fudamentals
1.1.1. Create React App
1.1.2. Function Components
1.1.3. Class Components (Optional)
1.1.4. JSX
1.1.5. Props
1.1.6. State
1.1.7. useState and useEffect Hooks
1.1.8. setState and Component Lifecycle Methods
1.1.9. Conditional Rendering
1.1.10. Lists and Keys
1.1.11. Building Simple Forms
1.1.12. Composition vs Inheritance
1.2. Advanced
1.2.1. Context
1.2.2. Refs
1.2.3. Error Boundaries
1.2.4. Portals
1.2.5. HTTP Requests (using Axios)
1.2.5.1. GET
1.2.5.2. POST
1.2.6. Hooks
1.2.6.1. useContext
1.2.6.2. useReducer
1.2.6.3. useRef
1.2.6.4. useMemo
1.2.6.5. useCallback
1.2.6.6. Custom Hooks
1.2.7. Higher Order Components
1.2.8. Render Props
1.2.9. Reconciliation
1.3. Ecosystem
1.3.1. Slate Management
1.3.1.1. Redux/ Mobx/ Recoil
1.3.1.2. Apollo Client
1.3.1.3. React Query
1.3.2. Routing
1.3.2.1. React Location
1.3.2.2. React Router
1.3.3. Styling
1.3.3.1. Styled Components/ Emotion
1.3.3.2. Tailwind CSS
1.3.3.3. Chakra UI / Material UI / Ant Design
1.3.4. Forms
1.3.4.1. Formik
1.3.4.2. React Hook Form
1.3.4.3. Schema & validate
1.3.4.3.1. Yub
1.3.4.3.2. Zod
2. NextJS
3. Support tools
3.1. Component Library
3.1.1. Ant Design
3.1.2. Shadcn
3.1.3. Chakra UI
3.1.4. Material UI
3.1.5. React Bits
3.1.6. Magic UI
3.2. Temporary note
3.2.1. NextAuth.js
3.2.2. T3 stack
3.2.3. Prisma
3.3. Icon
3.3.1. Lucide
3.3.2. Iconify
3.4. Useful tools
4. Version control
4.1. Git/GitHub
5. HTML
5.1. What is HTML?
5.1.1. HTML stand for Hypertext markup language
5.1.1.1. Hypertext
5.1.1.1.1. là văn bản chứa link liên kết đến văn bản khác (thông qua thẻ <a href="">)
5.1.1.2. Markup
5.1.1.2.1. đề cập đến các thẻ và phần tử được sử dụng trong tài liệu. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
5.1.2. It is a standard text formatting language used for developing web pages released in 1993
5.1.3. HTML is a language that is interpreted by the browser and it tells the browser what to display and how to display
5.1.4. It enables documents to be displayed as web pages on the Internet, HTML provides the basic structure and content for a website using tags.
5.2. Fudamentals
5.2.1. Attributes
5.2.1.1. HTML attributes provide additional information about HTML elements.
5.2.1.2. All HTML elements can have attributes
5.2.1.3. Attributes are always specified in the start tag
5.2.1.4. Attributes usually come in name/value pairs like: name="value"
5.2.1.5. Attributes type:
5.2.1.5.1. Global attribute: class, id, style,...
5.2.1.5.2. Specific attribute: <a> href, <img> src,...
5.2.2. Metadata
5.2.2.1. Meta data is data about data, dùng để cung cấp thông tin về trang web.
5.2.2.2. <meta> tag
5.2.2.2.1. định nghĩa meta data của 1 web page
5.2.2.2.2. nằm trong thẻ <head>
5.2.2.2.3. là yếu tố không thể nhìn thấy đc trong trình duyệt
5.2.2.2.4. meta tag không có thẻ đóng, gồm 2 attribute: <meta name="" content="">
5.2.2.3. Các loại Meta data
5.2.2.3.1. Author metadata
5.2.2.3.2. Keywords metadata
5.2.2.3.3. Viewport metadata
5.2.2.3.4. Description metadata
5.2.2.3.5. Robot Metadata
5.2.3. Semantic HTML
5.2.3.1. Semantic elements = elements with a meaning.
5.2.3.2. Semantic Tags dùng để tổ chức, sắp xếp các phần tử HTML thành các phần có cấu trúc, hỗ trợ accessability và SEO (cho phép các công cụ tìm kiếm và screen reader có thể hiểu được tài liệu HTML)
5.2.3.2.1. non-semantic elements: <div> and <span> - Tells nothing about its content.
5.2.3.2.2. semantic elements: <img>, <table>, and <article> - Clearly defines its content.
5.2.3.3. <article>: dùng để chưa bài đăng trên diễn đàn, bài blog haowjc câu chuyện,... <aside> là phần nội dung phụ để b ổ sung cho nội dung chính nào đó, thường đc đặt ở slidebar. <details>: phần nội dung thu gọn có thể được mở rộng. sử dụng chung với thẻ <summary> <summary>: chú thích cho <details> <footer>: phần chân trang của 1 trang web, có thể có nhiều footer trong 1 trang web <header> : tiêu đề của trang web, 1 web page có thể có nhiều <header>, header k nằm trong <footer>, <address> hoặc <header> khác. <main>: chỉ định nội dụng chính của 1 trang web, không chứa các nội dung lặp lại ví dụ như nav. <nav>: chứa tập hợp các đường dẫn của 1 section hoặc 1 trang web <section>: định nghĩa 1 phần nào đó trong 1 trang web.
5.2.4. HTML Elements
5.2.4.1. Dùng để mô tả các thành phần của 1 trang web.
5.2.4.2. An HTML element is defined by a start tag, some content, and an end tag. <tagname>Content goes here...</tagname>
5.2.4.3. Void element: là các thẻ không có thẻ đóng hoặc k cần đóng như <br />, <img />, <hr />, etc.
5.3. Advanced
5.3.1. Accessibility
5.3.1.1. xác định các yêu cầu về cách làm cho nội dung trên các trang web như văn bản, hình ảnh, đa phương tiện, cấu trúc... có thể truy cập được bởi người thường và người khuyết tật.
5.3.1.2. khuyết tật không phải mô tả dặc điểm hoặc sự thiếu hụt chức năng của 1 con người, khuyết tật chỉ sự không phù hợp giữ thiết kế và con người.
5.3.1.3. khoảng 15 -> 20% dân số thế giới cần tới Accessibility
5.3.1.4. Accessibility benefit for everyone not only people with accessability.
5.3.2. HTML DOM
5.3.2.1. What is DOM?
5.3.2.1.1. Document Object Mode "Document Object Model" is the data representation of the objects that comprise the structure and content of a document on the web.
5.3.2.1.2. DOM tree is an in-memory representation of a document, DOM là một cấu trúc dạng cây để mô tả mô hình của các HTML Elements trong 1 tập HTML
5.3.2.1.3. JS có thể truy cập và sửa đổi DOM khiến trang web linh động hơn.
5.3.2.2. What JS can do with DOM?
5.3.2.2.1. JavaScript can change all the HTML elements in the page
5.3.2.2.2. JavaScript can change all the HTML attributes in the page
5.3.2.2.3. JavaScript can change all the CSS styles in the page
5.3.2.2.4. JavaScript can remove existing HTML elements and attributes
5.3.2.2.5. JavaScript can add new HTML elements and attributes
5.3.2.2.6. JavaScript can react to all existing HTML events in the page
5.3.2.2.7. JavaScript can create new HTML events in the page
5.3.2.3. NodeList & HTML Collection
5.3.2.3.1. Điểm giống
5.3.2.3.2. Điểm khác
5.3.2.4. DOM Tree & DOM Node
5.3.2.4.1. có thể dùng JS để truy cập vào node tree bằng mối quan hệ giữa chúng, có thể thêm xoá sửa các node.
5.3.2.4.2. DOM Node
5.3.2.4.3. Navigating between node
5.3.3. HTML BOM
5.3.3.1. BOM là các đối tượng có liên quan đến trình duyệt
5.3.3.2. BOM Types
5.3.3.2.1. window (đại diện cho cửa sổ trình duyệt)
5.3.3.2.2. screen (chứa thông tin về màn hình của người dùng)
5.3.3.2.3. location (dùng để lấy địa chỉ URL của trang web hiện tại hoặc chuyển hướng trình duyệt sang một page mới)
5.3.3.2.4. history (object chứa lịch sử của trình duyệt)
5.3.3.2.5. navigator
5.3.3.2.6. popup arlert
5.3.3.2.7. timing
5.3.3.2.8. cookies
6. CSS
6.1. What is CSS?
6.2. Fudamentals
6.2.1. CSS Selector
6.2.1.1. Basic
6.2.1.2. Complex (Combinators)
6.2.1.3. Pseudo
6.2.2. CSS Properties
6.2.2.1. Color
6.2.2.2. Background color
6.2.2.3. Font family, style, size etc
6.2.3. Values & Units
6.2.4. CSS specificity & Inheritance
6.2.5. Box modal
6.2.5.1. Padding
6.2.5.2. Border
6.2.5.3. Margin
6.2.6. Display
6.2.7. Positioning
6.2.7.1. Static
6.2.7.2. Relative
6.2.7.3. Absolute
6.2.7.4. Fixed
6.2.7.5. Sticky
6.3. Advanced
6.3.1. Shadows
6.3.2. Gradients
6.3.3. Transforms
6.3.4. Transitions
6.3.5. Animations
6.3.6. CSS Variables
6.3.7. Media Queries
6.3.8. Layout
6.3.8.1. Flexbox
6.3.8.2. Grid
6.4. CSS Pre-processors
6.4.1. SASS
6.4.2. LESS
6.4.3. PostCSS (optional)
6.5. CSS Frameworks
6.5.1. TailwindCSS
6.5.2. Bootstrap
6.5.3. Materialize
7. JS
7.1. What is JS?
7.2. Running JS
7.2.1. Script tag
7.2.2. Link external file
7.2.3. Browser console
7.2.4. With node
7.3. Fudamentals
7.3.1. Variables
7.3.1.1. Declarations
7.3.1.1.1. var
7.3.1.1.2. let
7.3.1.1.3. const
7.3.1.2. Scope
7.3.1.2.1. Global
7.3.1.2.2. Function
7.3.1.2.3. Block
7.3.1.3. Hoisting
7.3.2. Data Types and Data Structures
7.3.2.1. Types
7.3.2.1.1. Primitive Types
7.3.2.1.2. null
7.3.2.1.3. Object
7.3.2.1.4. Function
7.3.2.2. Structures
7.3.2.2.1. Array
7.3.2.2.2. Map/ Weak Map
7.3.2.2.3. Set/ Weak Set
7.3.2.2.4. Date
7.3.3. Equality
7.3.3.1. === vs ==
7.3.4. Type conversion
7.3.4.1. Explicity Conversion
7.3.4.2. Implicit Conversion
7.3.5. Loops
7.3.5.1. while
7.3.5.2. do...while
7.3.5.3. or
7.3.5.4. break/continue
7.3.5.5. for...in
7.3.5.6. for...of
7.3.6. Control Flow
7.3.6.1. if...else
7.3.6.2. Switch
7.3.6.3. try/catch/throw
7.3.7. Expressions & Operators
7.3.7.1. Assignment Operators
7.3.7.2. Arithmetic Operators
7.3.7.3. Logical Operators
7.3.7.4. Conditional Operator
7.3.7.5. Comparison Operators
7.3.7.6. Relational Operators
7.3.7.7. Bitwise Operators
7.3.7.8. String Operators
7.3.7.9. Comma Operator
7.3.7.10. Unary Operators
7.3.8. Functions
7.3.8.1. Function Declarations
7.3.8.2. Function Expressions
7.3.8.3. Calling Functions
7.3.8.4. Parameters & Arguments
7.3.8.5. Scope
7.3.8.6. Arrow Functions
7.4. Advanced
7.4.1. Advanced Scope
7.4.1.1. Nested Functions
7.4.1.2. Lexical Scoping
7.4.1.3. TIFE
7.4.1.4. Revealing Module Pattern
7.4.2. Closure
7.4.3. Currying
7.4.4. this
7.4.4.1. Implicit Binding
7.4.4.2. Explicit Binding
7.4.4.3. new Binding
7.4.4.4. Lexical Binding
7.4.4.5. Default Binding
7.4.5. Prototype
7.4.6. Prototypal Inhertiance
7.4.7. Class
7.4.8. Iterators
7.4.9. Generators
7.4.10. Event Loop
7.4.11. Asynchronous JavaScript
7.4.11.1. setTimeout
7.4.11.2. setInterval
7.4.11.3. callbacks
7.4.11.4. Promises
7.4.11.5. async await
7.4.12. Module System
7.4.12.1. CJS
7.4.12.2. ESM
7.4.12.3. Import/Export
7.4.12.4. Default and Named Exports
7.5. Web APIs
7.5.1. DOM
7.5.2. XHR & Fetch
7.5.3. Storage
7.5.4. Video and audio
7.5.5. Drawing Graphics