Web Development
HTML5, React, Angular, Next.js, Vite and modern frontend development guides and projects.
Weeks 9-10: Advanced Angular Patterns (RxJS, NgRx, Performance)
Architect reactive data flows using advanced RxJS operators, multicasting, and backpressure control. Implement NgRx state management (actions, reducers, effects, selectors) and add unit tests with marble diagrams. Diagno
Read article →Weeks 11-12: Capstone Delivery & Production Polish
Integrate previous weeks’ work into a cohesive SaaS admin portal capstone. Implement production-level concerns: documentation, analytics, logging, accessibility, and deployment automation. Harden performance with SSR/hyd
Read article →AngularLab
This project was generated using Angular CLI version 19.2.19.
Read article →Angular Boot & Render Flow (angular-lab)
Host page: src/index.html contains <app-root></app-root>, the mount point for Angular. Bootstrap script: src/main.ts runs bootstrapApplication(AppComponent, appConfig) to start the Angular runtime.
Read article →Angular-Lab Startup Deep Dive
This document traces the entire lifecycle of the angular-lab workspace from launching the dev server to rendering the initial page in the browser.
Read article →Week 01-02 Angular Sandbox
This workspace packages the component library examples from Weeks 1-2 into a runnable Angular application.
Read article →Angular Startup & Modal Interaction (Week 01-02 Sandbox)
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); ` bootstrapApplication spins up Angular using the standalone API. AppComponent is declared as the root component. appConfig registers glob
Read article →Week 03-04 Angular Sandbox
This workspace wraps the directives, forms, and DI examples into a runnable Angular application with a lightweight backend that echoes form submissions.
Read article →Week 03-04 Sandbox: Startup & Request/Response Flow
This document explains, in detail, how the Angular application boots, renders the page, and exchanges data with the Express backend when you submit the registration form.
Read article →Questionnaire System
A production-ready questionnaire system built with Next.js frontend and Express backend, featuring MySQL database integration via Prisma ORM.
Read article →Full Stack Development & RESTful API
Full stack development refers to building and maintaining both the frontend (client-facing) and backend (server-side) portions of a web application, plus the infrastructure that connects them.
Read article →Frontend Design: HTML5, CSS & JavaScript
The frontend is everything users see and interact with in a web browser. It consists of three core technologies
Read article →HTML5 完整教學課程
歡迎來到 HTML5 完整教學課程！本課程將帶您從零開始，逐步掌握現代網頁開發的三大核心技術：HTML、CSS 和 JavaScript。
Read article →HTML5 課程範例檔案
這個目錄包含所有課程中的 HTML 範例代碼，方便學生直接在瀏覽器中開啟查看效果。
Read article →第 1 課：HTML 基礎介紹
HTML（HyperText Markup Language，超文本標記語言）是用來建立網頁的標準標記語言。它不是程式語言，而是一種標記語言，用來描述網頁的結構和內容。
Read article →第 2 課：文字標籤和格式化
顯示效果： 這段文字很重要（語義化） 這段文字是粗體（純樣式）
Read article →第 3 課：列表和連結
HTML 提供三種列表類型：無序列表、有序列表和定義列表。
Read article →第 4 課：圖片和多媒體
必要屬性： src：圖片的來源路徑 alt：替代文字（圖片無法顯示時的說明）
Read article →第 5 課：表格
HTML 表格用於顯示結構化的數據，由行和列組成。
Read article →第 6 課：表單基礎
表單（Form）是網頁中用來收集使用者輸入資料的重要元素。常見的應用包括：: 登入/註冊頁面 搜尋功能 聯絡表單 問卷調查 訂單表單
Read article →第 7 課：表單進階
HTML5 提供內建的表單驗證功能，無需 JavaScript 即可進行基本驗證。
Read article →第 8 課：HTML5 語義化標籤
語義化標籤（Semantic Tags）是具有明確意義的 HTML 標籤，能夠清楚描述內容的性質和用途。
Read article →第 9 課：HTML5 新功能
<canvas> 元素提供一個畫布，可以使用 JavaScript 在上面繪製圖形。
Read article →第 10 課：CSS 基礎介紹
CSS（Cascading Style Sheets，層疊樣式表）是用來控制網頁外觀和版面配置的樣式語言。
Read article →