Frontend Machine Coding Interview Questions
1.0.0
建立基本 HTML 頁面：建立一個基本 HTML 頁面，其中包括頁首、導覽功能表、主要內容部分和頁尾。
響應式導覽選單：使用 HTML、CSS 和 JavaScript/jQuery 實作響應式導覽選單，可在較小的螢幕上折疊成漢堡選單。
JavaScript 計算器：使用 HTML、CSS 和 JavaScript 建立一個簡單的計算器，可以執行基本算術運算（加法、減法、乘法、除法）。
圖像輪播：使用 HTML、CSS 和 JavaScript/jQuery 建立圖像輪播/滑塊，允許使用者使用下一個和上一個按鈕瀏覽一組圖像。
待辦事項清單應用程式：使用 HTML、CSS 和 JavaScript 開發待辦事項清單 Web 應用程式。使用者應該能夠新增、編輯和刪除任務。
響應式設計：使用媒體查詢和 CSS 取得現有網頁並使其回應各種螢幕尺寸（例如桌上型電腦、平板電腦、行動裝置）。
Fetch API ：使用 Fetch API 從 JSON 端點檢索資料並使用 JavaScript 將其顯示在網頁上。
單頁應用程式 (SPA) ：使用您選擇的前端框架（例如 React、Angular、Vue.js）建立簡單的單頁應用程式 (SPA)。建立多個視圖並在它們之間導航。
表單驗證：使用 HTML5 和 JavaScript 實作註冊表單的用戶端表單驗證。驗證電子郵件、密碼強度和必填欄位等欄位。
實作拖放功能：使用 HTML、CSS 和 JavaScript 建立具有拖放介面的網頁。允許使用者拖曳元素並將其放入指定區域。
無限滾動：在網頁上實現無限滾動功能。當使用者使用 JavaScript 和 AJAX 向下捲動頁面時載入其他內容。
互動式地圖：使用地圖庫（例如，Leaflet、Google Maps API）建立互動式地圖，並允許使用者搜尋位置、新增標記並在點擊標記時顯示附加資訊。
Web 可訪問性：確保網頁符合 Web 可訪問性標準 (WCAG)。進行必要的 HTML 和 CSS 修改，以提高殘障使用者的可訪問性。
CSS 動畫：建立 CSS 動畫，例如旋轉載入器或淡入淡出效果，以增強網頁上的使用者體驗。
響應式電子郵件範本：設計和編碼一個在桌面和行動電子郵件用戶端上看起來都不錯的響應式電子郵件範本。
動態內容過濾：建立一個網頁，讓使用者可以使用 JavaScript 根據類別或標籤動態過濾內容。
社群媒體分享按鈕：在網頁上實施社群媒體分享按鈕（例如 Facebook、Twitter）。當使用者點擊按鈕時，應該會出現一個共享對話框。
影像延遲載入：實現影像延遲載入以提高頁面效能。圖像僅應在視口中時載入。
表單自動完成：使用 JavaScript 將自動完成功能新增至搜尋輸入欄位。當使用者鍵入時提供建議。
實現燈箱：建立一個燈箱/模式窗口，當使用者點擊縮圖或按鈕時顯示圖像或內容。
即時聊天應用程式：使用前端框架（例如 React、Vue.js）和 WebSocket 或 Firebase 等後端技術建立即時聊天應用程式。
響應式表格：使 HTML 表格響應式。確保表格適應不同的螢幕尺寸而無需水平滾動。
資料視覺化：使用 D3.js 或 Chart.js 等 JavaScript 函式庫建立資料視覺化圖表（例如長條圖、圓餅圖）。
黏性導航：實現黏性導覽欄，向下捲動時黏在頁面頂部，向上捲動時返回其原始位置。
網頁效能優化：優化載入緩慢的網頁的效能。識別瓶頸並套用最佳化以減少載入時間。
漸進式 Web 應用程式 (PWA) ：將 Web 應用程式轉換為漸進式 Web 應用程式。新增離線存取和推播通知等功能。
單元測試：使用 Jest 等測試框架為 JavaScript 函數或元件編寫單元測試。
跨瀏覽器相容性：確保網頁在不同的網頁瀏覽器（例如 Chrome、Firefox、Edge）中正常運作且外觀一致。
Web 安全性：識別並修復 Web 應用程式中的安全漏洞，例如跨站腳本 (XSS) 或跨站請求偽造 (CSRF)。
響應式電子郵件簽章：設計和編碼可在電子郵件用戶端中使用的響應式電子郵件簽章。
無限輪播：建立無限輪播/滑桿，自動循環瀏覽一組影像或內容，為使用者提供導航控制。
圖片庫：建立一個圖片庫，使用者可以在其中查看圖像集合，點擊以放大，並使用上一個和下一個按鈕瀏覽它們。
工具提示元件：使用 HTML、CSS 和 JavaScript/jQuery 設計和實作可重複使用的工具提示元件，當滑鼠懸停在特定元素上時會出現該元件。
資料獲取和顯示：從公共 API（例如 GitHub API、OpenWeatherMap API）獲取資料並使用 JavaScript 將其顯示在網頁上。適當地設定資料的格式和樣式。
動畫下拉選單：建立一個下拉式選單，當使用者將滑鼠懸停在觸發元素上時，該選單可以以流暢的動畫展開和折疊。
互動式表單：透過自動建議、輸入驗證和使用 JavaScript 的條件表單欄位等互動式功能來增強 Web 表單。
頁面轉換：使用 CSS 轉換和 JavaScript 在網站的不同部分或頁面之間實現平滑的頁面轉換。
鍵盤快速鍵：為 Web 應用程式新增鍵盤快速鍵以改善使用者可存取性和導航。
深色模式切換：建立一個深色模式切換按鈕，用於在淺色和深色模式之間切換網站的配色方案。
WebGL 實驗：開發互動式 WebGL 項目，例如 3D 視覺化或動畫，並將其嵌入網頁中。
自訂影片播放器：使用自訂控制項（例如播放、暫停、音量和進度條）建立自訂 HTML5 影片播放器。
頁面列印樣式：定義用於列印網頁的 CSS 樣式，以便在紙張上列印時看起來格式良好。
實作照片庫：建立一個包含相簿、縮圖的照片庫，並能夠以更大尺寸查看影像。
Web 音訊播放器：建立基於 Web 的音訊播放器，具有播放、暫停、音量控制和播放清單支援等功能。
SVG 動畫：使用 CSS 或 JavaScript 對 SVG 圖形進行動畫處理，以創造引人注目的視覺效果。
自訂 CSS 框架：使用預先設計的元件和樣式開發自訂 CSS 框架，以實現快速前端開發。
Web 動畫框架：建立一個 JavaScript 動畫框架，簡化網頁上元素動畫的過程。
擴增實境 Web 應用程式：開發擴增實境 (AR) Web 應用程序，使用 WebXR 或類似技術將數位內容覆蓋在使用者的現實世界視圖上。
漸進式影像載入佔位符：實施漸進式影像載入技術，在載入高品質影像時將模糊或低品質的影像顯示為佔位符。
自動化 Web 測試：使用 Selenium 或 Cypress 等測試框架為 Web 應用程式編寫自動化測試。
自訂 Web 動畫庫：建立一個小型 JavaScript 函式庫，用於為網頁上的元素添加動畫效果，包括對各種緩動功能的支援。
自訂 UI 元件：使用 HTML、CSS 和 JavaScript 從頭開始建立自訂 UI 元件，例如模式對話方塊、日期選擇器或自動完成。
行動優先開發：按照行動優先方法開發網頁，確保其在行動裝置上外觀和功能良好，並擴展到更大的螢幕。
第三方 API 整合：與第三方 API（例如 Google 地圖、Twitter、YouTube）集成，並在您的網頁上顯示來自該 API 的資料或內容。
離線支援：為 Web 應用程式實現離線支持，允許使用者即使在沒有網路連線的情況下也可以存取內容。
瀏覽器記錄 API ：使用瀏覽器歷史記錄 API 在單頁應用程式 (SPA) 中實作用戶端路由。
無限滾動與分頁：將無限滾動與分頁結合，可以有效地載入和顯示內容，同時允許使用者瀏覽資料頁面。
Web 音訊播放器：建立基於 Web 的音訊播放器，具有播放、暫停、音量控制和播放清單支援等功能。
WebGL 實驗：開發互動式 WebGL 項目，例如 3D 視覺化或動畫，並將其嵌入網頁中。
延遲載入模組：在前端框架（例如 React、Angular、Vue.js）中實作模組延遲加載，以減少初始套件大小。
SVG 圖示庫：建立可重複使用的 SVG 圖示庫，具有搜尋和使用功能，可輕鬆整合到 Web 專案中。
WebGL 3D 場景：使用 WebGL 開發 3D 場景，包括 3D 模型、紋理和互動元素。
延遲加載圖像：實現延遲加載圖像，僅當圖像進入用戶視口時才加載，從而提高頁面加載效能。
Web 效能監控：實施 Web 效能監控和分析，以追蹤和分析一段時間內的網站效能。
Web 安全性審核：對 Web 應用程式執行安全性審核並識別 SQL 注入、XSS 和 CSRF 等漏洞。建議並實施修復。
Server-Side Rendering (SSR) with React ：為 React 應用程式設定伺服器端渲染 (SSR)。
WebGL Shader Effects ：建立基於 WebGL 的著色器效果，例如水波紋效果或動態粒子系統。
延遲加載圖像：實現延遲加載圖像，僅當圖像進入用戶視口時才加載，從而提高頁面加載效能。
Web 效能監控：實施 Web 效能監控和分析，以追蹤和分析一段時間內的網站效能。
Web 安全性審核：對 Web 應用程式執行安全性審核並識別 SQL 注入、XSS 和 CSRF 等漏洞。建議並實施修復。
伺服器端渲染（SSR） ：為前端框架（例如React、Angular）實現伺服器端渲染，以提高初始頁面載入效能。
WebGL Shader Effects ：建立基於 WebGL 的著色器效果，例如水波紋效果或動態粒子系統。
虛擬 DOM 實作：在 JavaScript 中實作簡化的虛擬 DOM（類似 React 的虛擬 DOM）。
漸進式影像載入：開發一種漸進式載入影像的影像載入技術，從低品質佔位符開始，逐漸提高到高品質影像。
觸控和手勢事件：在 Web 應用程式中實現觸控和手勢事件，以在行動裝置上提供基於觸控的互動。
瀏覽器儲存管理：建立一個用於管理瀏覽器儲存（localStorage、sessionStorage）的實用程序，並提供設定、取得和刪除資料的方法。
Web Worker ：使用 Web Worker 從主執行緒卸載運算密集型任務，從而提高效能。
自訂 UI 元件：使用 HTML、CSS 和 JavaScript/jQuery 從頭開始建立自訂 UI 元件，例如模式對話方塊、日期選擇器或自動完成。
行動優先開發：按照行動優先方法開發網頁，確保其在行動裝置上外觀和功能良好，並擴展到更大的螢幕。
第三方 API 整合：與第三方 API（例如 Google 地圖、Twitter、YouTube）集成，並在您的網頁上顯示來自該 API 的資料或內容。
離線支援：為 Web 應用程式實現離線支持，允許使用者即使在沒有網路連線的情況下也可以存取內容。
瀏覽器儲存加密：對瀏覽器儲存（例如localStorage）中儲存的資料實施加密，以增強安全性。
WebGL 粒子動畫：使用 WebGL 建立粒子動畫，模擬火、雨或煙火等效果。
WebGL 資料視覺化：使用 WebGL 開發資料視覺化，以互動式 3D 格式表示複雜的資料集。
自訂拖放：為網頁上的元素建立自訂拖放功能，而無需依賴外部程式庫。
伺服器端渲染（SSR） ：為前端框架（例如React、Angular）實現伺服器端渲染，以提高初始頁面載入效能。
WebGL Shader Effects ：建立基於 WebGL 的著色器效果，例如水波紋效果或動態粒子系統。
虛擬 DOM 實作：在 JavaScript 中實作簡化的虛擬 DOM（類似 React 的虛擬 DOM）。
漸進式影像載入：開發一種漸進式載入影像的影像載入技術，從低品質佔位符開始，逐漸提高到高品質影像。
觸控和手勢事件：在 Web 應用程式中實現觸控和手勢事件，以在行動裝置上提供基於觸控的互動。
瀏覽器儲存管理：建立一個用於管理瀏覽器儲存（localStorage、sessionStorage）的實用程序，並提供設定、取得和刪除資料的方法。
Web Worker ：使用 Web Worker 從主執行緒卸載運算密集型任務，從而提高效能。
瀏覽器儲存加密：對瀏覽器儲存（例如localStorage）中儲存的資料實施加密，以增強安全性。
WebGL 粒子動畫：使用 WebGL 建立粒子動畫，模擬火、雨或煙火等效果。
WebGL 資料視覺化：使用 WebGL 開發資料視覺化，以互動式 3D 格式表示複雜的資料集。
自訂拖放：為網頁上的元素建立自訂拖放功能，而無需依賴外部程式庫。
React 元件：建立一個簡單的 React 元件（例如按鈕或卡片）並將其呈現在網頁上。
狀態管理：建立一個管理和顯示狀態的 React 元件，例如點擊按鈕時遞增的計數器。
Props 和 PropTypes ：建立一個接受 props 並使用 PropTypes 定義和驗證預期 props 的 React 元件。
條件渲染：根據使用者驗證等條件在 React 元件中實作條件渲染。
處理事件：為 React 元件新增事件處理程序（例如 onClick、onChange）以使它們具有互動性。
元件生命週期：在 React 元件中利用元件生命週期方法（例如，componentDidMount、componentDidUpdate）。
React 中的表單：在 React 元件中建立表單並在使用者輸入資料時管理其狀態。
React Router ：使用 React Router 在 React 應用程式中設定路由，具有多個路由和導航。
API資料取得：從React元件中的API取得資料並顯示它。
Context API ：使用 React 的 Context API 來跨多個元件管理和共用狀態或資料。
Redux 設定：在 React 應用程式中設定 Redux 儲存、操作和化簡器。
Redux 狀態管理：使用 Redux 實作狀態管理，將 React 元件連接到 Redux 儲存。
Redux 中間件：使用 Redux 中間件（例如 Thunk）來處理 Redux 支援的 React 應用程式中的非同步操作。
身份驗證流程：在 React 應用程式中實現使用者身份驗證和授權，包括登入和受保護的路由。
React Hooks ：使用 useState 和 useEffect 等鉤子將基於類別的 React 元件重寫為功能元件。
Redux Saga ：整合 Redux Saga 以處理基於 Redux 的 React 應用程式中的副作用（例如 API 呼叫）。
React 高階元件 (HOC) ：建立高階元件 (HOC) 來為現有 React 元件新增功能。
錯誤處理：在 React 應用程式中實作錯誤處理並顯示錯誤訊息。
優化效能：透過減少不必要的渲染和使用記憶來優化 React 應用程式的效能。
使用 React 測試庫進行單元測試：使用 React 測試庫和 Jest 為 React 元件編寫單元測試。
Server-Side Rendering (SSR) with React ：為 React 應用程式設定伺服器端渲染 (SSR)。
Progressive Web App (PWA) with React ：將 React 應用程式轉換為具有離線支援的漸進式 Web 應用程式。
國際化（i18n） ：在 React 應用程式中實現國際化和在地化。
React 動畫：使用 React Spring 或 Framer Motion 等函式庫為 React 元件新增動畫和過渡。
資料分頁：在 React 應用程式中實作資料分頁，以區塊的形式取得和顯示資料。
即時更新：使用 WebSocket 或類似技術在 React 應用程式中啟用即時更新。
使用 OAuth 進行身份驗證：在 React 應用程式中實現基於 OAuth 的身份驗證（例如 OAuth 2.0）。
測試 React Hooks ：使用 React 測試函式庫和 Jest 為自訂 React hook 編寫單元測試。
自訂 React Router ：使用 React Router 的低階 API 建立自訂路由器，以更深入地了解路由。
Redux Store ：建立 Redux 儲存並定義操作和化簡器來管理狀態。
Redux Actions 和Reducers ：實作Redux actions 和Reducers 來處理Redux 儲存體中的特定功能或資料。
Redux Middleware ：將自訂中間件新增至 Redux 儲存以攔截和修改操作。
Redux Thunk ：使用 Redux Thunk 中間件來處理 Redux 儲存中的非同步操作。
Redux Saga ：設定 Redux Saga 來管理 Redux 支援的應用程式中的副作用，例如 API 呼叫。
Redux 狀態規範化：規範 Redux 儲存的形狀以有效管理關聯式資料。
Redux 選擇器函數：在 Redux 應用程式中建立選擇器函數，以有效擷取和計算衍生狀態。
Redux 不可變狀態：確保 Redux 儲存的狀態保持不可變，以防止意外突變。
Redux Persistence ：在 Redux 應用程式中實現狀態持久化，允許跨會話保存和恢復狀態。
Redux 測試：使用 Jest 等測試函式庫為 Redux 操作、reducer 和選擇器編寫單元測試。
Redux 中介軟體測試：測試 Redux 中介軟體，例如 Thunk 或 Saga，以確保正確的行為。
Redux DevTools ：整合並使用 Redux DevTools 檢查和偵錯 Redux 儲存。
Redux 與 React 整合：將 React 應用程式連接到 Redux 儲存、排程操作並將狀態對應到 props。
Redux 與 Angular 整合：使用 NgRx 等函式庫將 Redux 與 Angular 應用程式整合。
Redux 與 Vue.js 整合：使用 Vuex 等函式庫將 Redux 與 Vue.js 應用程式整合。
Angular 元件：建立一個簡單的 Angular 元件並將其顯示在模板中。
Angular 模板語法：使用 Angular 的模板語法來渲染動態內容和資料。
Angular 雙向綁定：在 Angular 中實作雙向資料綁定，以同步元件與其模板之間的資料。
Angular 指令：使用內建和自訂 Angular 指令來操作 DOM 並控制渲染。
Angular 服務：創建並使用 Angular 服務來跨元件共享資料和邏輯。
Angular 依賴注入：在 Angular 中應用依賴注入將服務注入到元件中。
Angular 路由：在具有多個視圖和導航的 Angular 應用程式中設定路由。
Angular Forms ：在 Angular 中建立表單，包括模板驅動和反應式表單。
Angular 中的 HTTP 請求：發出 HTTP 請求以從 Angular 應用程式中的 API 檢索資料。
Angular Observables ：使用 observables 和 RxJS 函式庫來處理 Angular 中的非同步資料。
Angular Pipes ：在 Angular 中建立自訂管道以轉換和格式化模板中的資料。
Angular 指令：開發自訂 Angular 指令以向元素添加行為和互動性。
Angular 模組：將 Angular 應用程式組織成功能模組以提高可維護性。
Angular 動畫：使用 Angular 的動畫功能在 Angular 元件中實現動畫和過渡。
Angular 中的單元測試：使用 Jasmine 和 Karma 等測試框架為 Angular 元件、服務和管道編寫單元測試。
Angular 中的端對端測試：使用 Protractor 等工具對 Angular 應用程式執行端對端 (E2E) 測試。
Angular Routing Guards ：在 Angular 中建立路由防護，以根據身份驗證等條件控制對路由的存取。
Angular 攔截器：在 Angular 中實作攔截器，以向 HTTP 請求新增全域錯誤處理、日誌記錄或驗證。
使用 Angular 進行伺服器端渲染 (SSR) ：為 Angular 應用程式設定伺服器端渲染 (SSR)。
Angular 國際化 (i18n) ：在 Angular 應用程式中實現國際化和在地化。
Angular 延遲載入：透過延遲載入功能模組來優化 Angular 應用程式。
Angular 自訂表單：在 Angular 中為複雜的表單場景建立自訂表單控制項和驗證器。
Angular 測試最佳實踐：應用測試 Angular 應用程式的最佳實踐，包括元件測試和模擬相依性。
Angular Material ：在 Angular 應用程式中整合和使用 Angular Material 元件和樣式。
Angular 狀態管理：使用 NgRx 等函式庫在 Angular 應用程式中實作狀態管理。
Vue.js 實例：建立 Vue.js 實例並在範本中渲染資料。
Vue.js 資料綁定：在 Vue.js 中實作資料綁定，以根據資料的變更更新 UI。
Vue.js 指令：使用 Vue.js 指令來操作 DOM 並為範本新增行為。
Vue.js 元件：建立 Vue.js 元件並在父子元件之間傳遞資料。
Vue.js 事件處理：處理 Vue.js 元件中的使用者事件並觸發操作。
Vue.js 表單：在 Vue.js 中建立表單並使用指令和方法管理表單資料。
Vue.js 路由：在具有多個視圖和導航的 Vue.js 應用程式中設定路由。
Vue.js 狀態管理：使用 Vuex 管理 Vue.js 中的應用程式狀態。
Vue.js HTTP 請求：發出 HTTP 請求以從 Vue.js 應用程式中的 API 取得資料。
Vue.js 生命週期掛鉤：利用 Vue.js 生命週期掛鉤在元件生命週期的不同階段執行操作。
Vue.js 自訂指令：在 Vue.js 中建立自訂指令以擴充功能。
Vue.js 過濾器：在 Vue.js 中定義並使用自訂過濾器來格式化和轉換範本中的資料。
Vue.js 過渡和動畫：在 Vue.js 元件中添加過渡和動畫，以獲得流暢的 UI 效果。
Vue.js 單元測試：使用 Jest 等測試函式庫為 Vue.js 元件編寫單元測試。
Vue.js 端對端測試：使用 Cypress 等工具對 Vue.js 應用程式執行端對端 (E2E) 測試。
Vue.js 路由防護：在 Vue.js 中建立路由防護，以根據驗證等條件控制對路由的存取。
Vue.js 伺服器端渲染 (SSR) ：為 Vue.js 應用程式設定伺服器端渲染 (SSR)。
Vue.js 國際化 (i18n) ：在 Vue.js 應用程式中實現國際化和在地化。
Vue.js 延遲載入：透過延遲載入元件和路由來最佳化 Vue.js 應用程式。
Vue.js Composition API ：使用 Vue.js Composition API 開發元件，以獲得更靈活且可重複使用的程式碼。
Vue.js 自訂指令：在 Vue.js 中建立自訂指令以擴充功能。
Vue.js 過濾器：在 Vue.js 中定義並使用自訂過濾器來格式化和轉換範本中的資料。
Vue.js 轉換和動畫：在 Vue.js 元件中新增轉換和動畫，以獲得流暢的 UI 效果。
Vue.js 單元測試：使用 Jest 等測試函式庫為 Vue.js 元件編寫單元測試。
Vue.js 端對端測試：使用 Cypress 等工具對 Vue.js 應用程式執行端對端 (E2E) 測試。
Vue.js 路由防護：在 Vue.js 中建立路由防護，以根據驗證等條件控制對路由的存取。
Vue.js 伺服器端渲染 (SSR) ：為 Vue.js 應用程式設定伺服器端渲染 (SSR)。
Vue.js 國際化 (i18n) ：在 Vue.js 應用程式中實現國際化和在地化。
Vue.js 延遲載入：透過延遲載入元件和路由來最佳化 Vue.js 應用程式。
Vue.js Composition API ：使用 Vue.js Composition API 開發元件，以獲得更靈活且可重複使用的程式碼。
