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