介紹
本著養成良好習慣和#100DaysOfCode理念的精神，我們決定公開精心製作的“設計到程式碼”挑戰列表，您每天都在重新建立（當然還有您的變體！）原始設計螢幕截圖使其成為一個可用的網站/網路應用程式。
目標是用 HTML 和 CSS 反映所提供的設計。如果您想更深入研究，我們非常鼓勵透過 JS 或任何框架、函式庫或工具加入互動性。也許您甚至可以用它建立您的下一個微型 SaaS，誰知道呢？
我希望您能夠完成全部 100 個問題，並獲得您夢想的 Web 開發工作！ 🫡
-
個人資料卡
這是練習 Flexbox 和提升 CSS 技能的完美挑戰。
-
加入購物袋
透過建立動態購物車體驗來增強您的互動式設計技能。
-
手機導航
專注於響應式設計和使用者友好的行動導航解決方案。
-
聯絡我們
了解設計易於存取且以使用者為中心的聯絡表單，以實現更好的客戶互動。
-
食譜
製作令人愉悅的食譜顯示，以增強可讀性和用戶參與。
6.圖像輪播
開發圖像輪播以了解處理用戶互動和轉換。
-
建立帳戶
建立一個用戶友好的帳戶建立介面，並透過驗證來改進表單處理。
-
音樂活動
建立一個充滿活力的介面來顯示引人入勝且資訊豐富的音樂活動。
-
密碼產生器
實作密碼產生器來練習產生和處理安全的使用者資料。
-
註冊頁面
開發一個註冊頁面來完善表單佈局和設計，並專注於使用者體驗。
-
飯店預訂
設計一個簡化的飯店預訂介面，提供無縫的預訂體驗。
-
餐廳預訂
建立一張帶有圖像、描述、評論和清晰的號召性用語按鈕的餐廳卡。
-
任務板
建立任務管理板，幫助使用者組織專案和日常活動。
-
購物清單
建立包含訂單摘要和促銷程式碼部分的互動式購物清單。
-
通知
實作一個具有不同類型通知和沒有任何通知的空狀態的通知系統。
-
毛皮朋友
為寵物愛好者製作一份引人入勝的清單，用寵物詳細資料卡探索寵物。
17.文章滑塊
實作一個文章滑塊，透過流暢的導航來突顯特色故事。
-
影像預覽
製作一個圖庫應用程式，允許使用者以不同的佈局預覽圖像。
-
上傳圖片
建立支援拖放功能和預覽的圖像上傳介面。
20.卡錢包
開發一個數位錢包介面，顯示用戶卡和卡交易並允許加入新卡。
-
定價計劃
設計清晰簡潔的定價規劃介面，幫助使用者選擇正確的選項。
-
訊息
建立支援對話清單和個人一對一訊息視圖的訊息傳遞應用程式介面。
-
首頁
建立一個迷人的主頁，吸引訪客並引導他們瀏覽美麗的植物。
-
電影票
開發一個電影票接口，讓使用者可以買票、選座位。
-
會議日程
建立一個日程安排應用程式，幫助用戶有效地規劃和協調會議。
-
求職板
建立一個對於尋找職業機會的用戶來說直觀的工作板。
-
排行榜
建立一個排行榜介面，動態顯示從今天到年份類別的使用者排名和分數。
-
播放列表
實現一個音樂播放清單介面，允許開啟目前歌曲的彈出視窗。
-
視訊播放器
建立支援各種媒體格式和使用者互動的自訂影片播放器。
-
發票
實施發票介面，幫助用戶有效管理帳單和追蹤付款。
-
儀表板
建立一個全面的儀表板，為使用者提供見解和資料視覺化。
-
時事通訊
建立一個時事通訊註冊頁面，透過有吸引力的設計來吸引用戶的興趣。
33.品牌展示台
開發一個工具來建立和預覽配色方案等品牌元素。
-
用戶資料
設計一個包含各種選單專案的使用者設定檔下拉式選單。
-
評價我們
建立回饋表來評價使用者的體驗並透過表情符號提供有價值的見解。
36.睡眠應用程式
設計一款睡眠追蹤應用程式，提供有關睡眠模式的見解和改善建議。
-
探索航班
建立複雜的航班搜尋過濾欄。
-
音樂節
建立一個帶有導航和引人入勝的英雄部分的節日主頁。
-
二維碼掃描儀
實作 QR 碼掃描儀，透過快速掃描功能增強使用者互動。
-
常見問題解答
建立一個常見問題解答部分，透過手風琴元件為常見客戶問題提供清晰且有用的答案。
-
建立工作區
設計一個虛擬工作空間建立器，允許使用者自訂其數位工作環境。
-
設定外觀
建立一個設定頁面，讓使用者自訂其應用程式介面的外觀。
-
玩家簡介
為運動應用設計球員檔案，展示球員統計資料、職業生涯亮點等。
-
網站啟動
建立帶有倒數計時器的啟動頁面。
-
託管功能
建立一個託管服務功能頁面，解釋可用的優勢和套餐。
-
客戶名單
開發一個客戶管理表，有助於組織使用者並包含相關操作。
-
匯出文件
設計一個支援多種格式並包含可自訂設定的文件匯出介面。
-
降價帖子
建立一個基於 Markdown 的元件，支援粗體、斜體和底線文本，並具有提及使用者功能。
-
應用程式導航
為桌面和行動裝置建立應用程式導航選單。
-
好友請求
設計一個管理好友請求和使用者互動的社群網路功能。
-
下載應用程式
為應用程式建立一個下載頁面，其中包含清晰的安裝說明。
-
語言應用程式
開發一個包含課程、排行榜和互動內容的語言學習應用程式。
-
計費頁面
設計一個使用者友善的計費頁面，可以輕鬆查看訂閱、付款方式和計費歷史記錄。
-
文章摘要
使用圖像、使用者資訊和相關統計資料建立文章摘要卡。
-
進度條
為追蹤用戶進度的應用程式設計引人入勝且資訊豐富的進度條。
-
專案路線圖
建立一個專案管理工具，可可視覺化路線圖並追蹤里程碑。
-
遊戲簡介
設計一個遊戲設定檔介面，顯示玩家成就、遊戲統計資料和徽章。
-
建立任務
開發一個任務建立表單來簡化專案管理和協作。
-
計算小費
建立一個小費計算器應用程式，幫助用戶快速計算出適當的小費金額。
-
程式碼驗證
設計一個程式碼驗證元件。
-
機票
建立包含資訊和二維碼的機票卡預覽。
-
感言
設計一個推薦部分，展示使用者回饋並與潛在客戶建立信任。
-
天氣應用程式
開發一款提供準確預報和天氣相關新聞的天氣預報應用程式。
64.文件管理器
建立一個類似部落格的工具，使用者可以在其中新增文件和章節、刪除和預覽它們。
-
興趣
設計一張用戶興趣卡，讓用戶選擇自己的興趣。
-
導航使用者介面
建立動態導航 UI，可根據使用者偏好進行調整並突出顯示關鍵區域。
-
選擇帳戶
建立一個觀看者的帳戶選擇頁面。
-
用戶滿意度
進行使用者滿意度調查，收集有關使用者體驗的有意義的回饋。
-
設定檔設定
設計一個全面的個人資料設定頁面，讓使用者可以管理他們的個人資訊。
-
餅乾橫幅
建立符合資料保護法規且使用者友好的 cookie 同意橫幅。
-
電子郵件用戶端
建立一個電子郵件用戶端介面，支援有效率地組織、閱讀和撰寫電子郵件。
72.圖像集
開發一個應用程式，將圖像組織到集合中並提供標記功能。
-
推播通知
設計一個推播通知元件。
-
管理帳戶
建立帳戶管理頁面，提供使用者帳戶的清晰概述。
-
新增鏡頭
開發一個允許將鏡頭加入到集合中的模式。
-
電子書店
設計一個為使用者提供無縫瀏覽的電子書商店網站。
-
應用程式集成
建立一個有助於輕鬆整合各種應用程式和服務的介面。
-
音訊播放器
開發一個簡單的音訊播放器。
-
付款計劃
設計付款計劃介面，為用戶提供靈活的付款選項和清晰的資訊。
-
文章網格
為文章建立網格佈局，以增強可讀性和使用者參與度。
-
交貨詳情
建立送貨詳細資訊卡，確保資訊準確性並增強用戶信任。
-
調色板
為設計師開發一個工具來建立和保存自訂調色板。
-
社交分享
設計一個社群媒體分享元件。
-
買一杯咖啡
建立一個捐款頁面，鼓勵使用者透過小額捐款來支持內容創作者。
-
顧客評論
開發一張客戶評論卡，以提高透明度並幫助其他用戶做出明智的決定。
-
聊天機器人
建立一個聊天機器人，可以引導用戶瀏覽您的網站並回答常見問題。
-
圖表
設計一系列互動式圖表，以清晰且引人入勝的方式顯示資料。
-
指紋
建立利用指紋掃描或透過 PIN 登入的功能。
-
語音通話
開發一款語音通話卡，確保通話過程中的清晰度和可靠性。
-
我的設備
設計一張卡，讓使用者管理和監控所有連接的設備。
-
測驗應用程式
建立一個提供各種問題並追蹤用戶進度的測驗應用程式。
-
搜尋過濾器
開發搜尋過濾器，幫助使用者輕鬆準確地找到他們想要的內容。
-
工作管理員
建立一個任務管理器，幫助使用者組織他們的日常任務和截止日期。
-
時間小工具
設計一個提供各種時鐘功能和自訂選項的時間小工具。
95.404
開發 404 錯誤頁面，幫助迷路的使用者找到返回的路或找到有用的資源。
-
訂閱卡
建立訂閱卡功能，吸引用戶興趣並增加註冊量。
-
設計資產
建立設計資產主頁，使用者可以在其中存取不同的設計文件。
-
錄音
開發一款錄音應用程式，可捕捉清晰的音訊並提供共享和刪除功能。
-
柱卡
建立一個卡片佈局，在列中顯示訊息，以便更好地呈現資料。
-
頁尾
設計一個網站頁腳，以簡潔的佈局包含所有必要的連結和資訊。
概括
這是一個很多挑戰，但如果您完成所有這些挑戰，我很確定您將獲得新的、令人敬畏的開發技能，這將使您夢想的工作尋找過程加快 10 倍。
長期以來，我的目標是在社區中傳播基於專案的學習方法，並且讓BigDevSoon啟動並執行，這是我們過去 3 年一直致力於開發的應用程式，這對我們來說是一項巨大的成就。
我們已開啟CODEWINDOW50優惠碼，有效至 2024 年 6 月 30 日。
如果您喜歡內容，請支持我們！ ❤️
原文出處：https://dev.to/bigsondev/100-free-frontend-challenges-3f0
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式