1. 基礎(chǔ)項(xiàng)目

CSS 漸變生成器

• 目的：學(xué)習(xí)CSS漸變和JavaScript DOM操作。
• 內(nèi)容：創(chuàng)建一個簡單的網(wǎng)頁應(yīng)用，允許用戶選擇顏色并生成CSS漸變效果，同時顯示相應(yīng)的CSS代碼。
• 技術(shù)棧：HTML, CSS, JavaScript。

隨機(jī)名言生成器

• 目的：學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)（如數(shù)組和對象）和事件處理。
• 內(nèi)容：構(gòu)建一個應(yīng)用，每次點(diǎn)擊按鈕時顯示一條隨機(jī)名言。
• 技術(shù)棧：HTML, CSS, JavaScript。

圖片輪播器

• 目的：學(xué)習(xí)CSS布局和JavaScript DOM操作來控制元素顯示。
• 內(nèi)容：創(chuàng)建一個圖片輪播器，用戶可以通過點(diǎn)擊按鈕或自動播放來查看圖片。
• 技術(shù)棧：HTML, CSS, JavaScript。

2. 進(jìn)階項(xiàng)目

Todo 列表應(yīng)用

• 目的：學(xué)習(xí)Vue、React或Angular等現(xiàn)代前端框架的基礎(chǔ)知識，包括組件、狀態(tài)管理和事件處理。
• 內(nèi)容：構(gòu)建一個待辦事項(xiàng)列表應(yīng)用，用戶可以添加、刪除和編輯待辦事項(xiàng)。
• 技術(shù)棧：Vue.*/React.*/Angular.*, HTML, CSS。

天氣應(yīng)用

• 目的：學(xué)習(xí)API調(diào)用、異步數(shù)據(jù)處理和前端框架的*特性。
• 內(nèi)容：創(chuàng)建一個天氣應(yīng)用，用戶輸入城市名后顯示該城市的天氣信息。
• 技術(shù)棧：Vue.*/React.*/Angular.*, HTML, CSS, 第三方天氣API。

音樂播放器

• 目的：學(xué)習(xí)音頻處理、播放控制、用戶交互和前端框架的深入應(yīng)用。
• 內(nèi)容：構(gòu)建一個音樂播放器，用戶可以播放、暫停、停止音樂，并控制音量和播放列表。
• 技術(shù)棧：Vue.*/React.*/Angular.*, HTML, CSS, JavaScript (處理音頻)。

3. *項(xiàng)目

博客網(wǎng)站

• 目的：學(xué)習(xí)前后端分離、路由管理、用戶認(rèn)證、數(shù)據(jù)庫操作和SEO優(yōu)化。
• 內(nèi)容：搭建一個完整的博客網(wǎng)站，包括用戶注冊、登錄、發(fā)布文章、評論等功能。
• 技術(shù)棧：Vue.*/React.*/Angular.* + Node.*/Express, MongoDB/MySQL, HTML, CSS。

電商網(wǎng)站

• 目的：學(xué)習(xí)復(fù)雜的用戶交互、購物車管理、訂單處理和支付集成。
• 內(nèi)容：構(gòu)建一個電商網(wǎng)站，用戶可以瀏覽商品、添加到購物車、下單購買并支付。
• 技術(shù)棧：Vue.*/React.*/Angular.* + Node.*/Express, MongoDB/MySQL, Stripe/PayPal支付集成, HTML, CSS。

4. 低代碼/無代碼平臺項(xiàng)目

App*ith

• 目的：學(xué)習(xí)低代碼開發(fā)平臺的使用，快速構(gòu)建管理面板和內(nèi)部工具。
• 內(nèi)容：使用App*ith平臺，通過拖放UI組件和連接API來構(gòu)建一個簡單的內(nèi)部應(yīng)用。
• 技術(shù)棧：App*ith平臺，無需深入前端技術(shù)棧。

Amis

• 目的：通過*ON配置快速生成后臺頁面，減少開發(fā)成本。
• 內(nèi)容：使用Amis框架，通過*ON配置來生成包含數(shù)據(jù)獲取、表單提交等功能的后臺頁面。
• 技術(shù)棧：Amis框架，無需深入前端技術(shù)棧。