1. 基礎(chǔ)項(xiàng)目
CSS 漸變生成器
- 目的:學(xué)習(xí)CSS漸變和JavaScript DOM操作。
- 內(nèi)容:創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)應(yīng)用,允許用戶(hù)選擇顏色并生成CSS漸變效果,同時(shí)顯示相應(yīng)的CSS代碼。
- 技術(shù)棧:HTML, CSS, JavaScript。
隨機(jī)名言生成器
- 目的:學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)(如數(shù)組和對(duì)象)和事件處理。
- 內(nèi)容:構(gòu)建一個(gè)應(yīng)用,每次點(diǎn)擊按鈕時(shí)顯示一條隨機(jī)名言。
- 技術(shù)棧:HTML, CSS, JavaScript。
圖片輪播器
- 目的:學(xué)習(xí)CSS布局和JavaScript DOM操作來(lái)控制元素顯示。
- 內(nèi)容:創(chuàng)建一個(gè)圖片輪播器,用戶(hù)可以通過(guò)點(diǎn)擊按鈕或自動(dòng)播放來(lái)查看圖片。
- 技術(shù)棧:HTML, CSS, JavaScript。
2. 進(jìn)階項(xiàng)目
Todo 列表應(yīng)用
- 目的:學(xué)習(xí)Vue、React或Angular等現(xiàn)代前端框架的基礎(chǔ)知識(shí),包括組件、狀態(tài)管理和事件處理。
- 內(nèi)容:構(gòu)建一個(gè)待辦事項(xiàng)列表應(yīng)用,用戶(hù)可以添加、刪除和編輯待辦事項(xiàng)。
- 技術(shù)棧:Vue.*/React.*/Angular.*, HTML, CSS。
天氣應(yīng)用
- 目的:學(xué)習(xí)API調(diào)用、異步數(shù)據(jù)處理和前端框架的*特性。
- 內(nèi)容:創(chuàng)建一個(gè)天氣應(yīng)用,用戶(hù)輸入城市名后顯示該城市的天氣信息。
- 技術(shù)棧:Vue.*/React.*/Angular.*, HTML, CSS, 第三方天氣API。
音樂(lè)播放器
- 目的:學(xué)習(xí)音頻處理、播放控制、用戶(hù)交互和前端框架的深入應(yīng)用。
- 內(nèi)容:構(gòu)建一個(gè)音樂(lè)播放器,用戶(hù)可以播放、暫停、停止音樂(lè),并控制音量和播放列表。
- 技術(shù)棧:Vue.*/React.*/Angular.*, HTML, CSS, JavaScript (處理音頻)。
3. *項(xiàng)目
博客網(wǎng)站
- 目的:學(xué)習(xí)前后端分離、路由管理、用戶(hù)認(rèn)證、數(shù)據(jù)庫(kù)操作和SEO優(yōu)化。
- 內(nèi)容:搭建一個(gè)完整的博客網(wǎng)站,包括用戶(hù)注冊(cè)、登錄、發(fā)布文章、評(píng)論等功能。
- 技術(shù)棧:Vue.*/React.*/Angular.* + Node.*/Express, MongoDB/MySQL, HTML, CSS。
電商網(wǎng)站
- 目的:學(xué)習(xí)復(fù)雜的用戶(hù)交互、購(gòu)物車(chē)管理、訂單處理和支付集成。
- 內(nèi)容:構(gòu)建一個(gè)電商網(wǎng)站,用戶(hù)可以瀏覽商品、添加到購(gòu)物車(chē)、下單購(gòu)買(mǎi)并支付。
- 技術(shù)棧:Vue.*/React.*/Angular.* + Node.*/Express, MongoDB/MySQL, Stripe/PayPal支付集成, HTML, CSS。
4. 低代碼/無(wú)代碼平臺(tái)項(xiàng)目
App*ith
- 目的:學(xué)習(xí)低代碼開(kāi)發(fā)平臺(tái)的使用,快速構(gòu)建管理面板和內(nèi)部工具。
- 內(nèi)容:使用App*ith平臺(tái),通過(guò)拖放UI組件和連接API來(lái)構(gòu)建一個(gè)簡(jiǎn)單的內(nèi)部應(yīng)用。
- 技術(shù)棧:App*ith平臺(tái),無(wú)需深入前端技術(shù)棧。
Amis
- 目的:通過(guò)*ON配置快速生成后臺(tái)頁(yè)面,減少開(kāi)發(fā)成本。
- 內(nèi)容:使用Amis框架,通過(guò)*ON配置來(lái)生成包含數(shù)據(jù)獲取、表單提交等功能的后臺(tái)頁(yè)面。
- 技術(shù)棧:Amis框架,無(wú)需深入前端技術(shù)棧。