todo app frontend mentor

前端導師 - 托多應用

歡迎！

感謝您檢查此前端編碼挑戰。

前端導師的挑戰使您可以在現實生活流中提高技能。

為了應對這一挑戰，您需要對HTML，CSS和JavaScript有很好的了解。

挑戰

您的挑戰是構建此todo應用程序，並使其看起來盡可能接近設計。

您可以使用您喜歡的任何工具來幫助您完成挑戰。因此，如果您有一些想練習的東西，請隨時嘗試一下。

您的用戶應該能夠：

• 根據設備的屏幕尺寸查看應用程序的最佳佈局
• 有關頁面上的所有交互元素，請參見懸停狀態
• 在列表中添加新的錄音
• 馬克·托多斯（Mark Todos）
• 從列表中刪除戒酒
• 通過所有/活動/完整的戒酒過濾
• 清除所有完成的戒酒
• 切換光線和黑暗模式
• 獎金：拖放以在列表中重新排序項目

想要對挑戰提供一些支持？加入我們的Slack社區，並在#HELP頻道中提出問題。

在哪裡可以找到一切

您的任務是為/design文件夾內的設計構建項目。您會發現可以使用的設計的手機和桌面版本。

設計採用JPG靜態格式。這意味著您需要對諸如font-size ， padding和margin等樣式使用最佳判斷。這應該有助於訓練您的眼睛，以感知間距和大小的差異。

如果您想要設計文件（我們提供草圖和無花果版本），以便更詳細地檢查設計，則可以訂閱為Pro成員。

您將在/images文件夾中找到所有必需的資產。資產已經進行了優化。

還有一個style-guide.md文件，其中包含您需要的信息，例如調色板和字體。

構建您的項目

隨意使用您感到舒適的任何工作流程。以下是一個建議的過程，但不覺得您需要遵循以下步驟：

1. 將您的項目初始化為GitHub上的公共存儲庫。如果您需要一些幫助，這將使與社區共享您的代碼變得更加容易。如果您不確定該怎麼做，請仔細閱讀此嘗試GIT資源。
2. 配置您的存儲庫將您的代碼發佈到URL。如果您在挑戰期間需要一些幫助，這也將很有用，因為您可以與回購URL共享項目的URL。有多種方法可以做到這一點，但是我們建議使用Vercel。我們有更多有關在下面使用Vercel部署項目的更多信息。
3. 瀏覽設計，以開始計劃如何解決該項目。此步驟對於幫助您為CSS課程提前思考以創建可重複使用的樣式至關重要。
4. 在添加任何樣式之前，請使用HTML構建內容。首先編寫HTML可以幫助您將注意力集中在創建結構良好的內容上。
5. 寫出項目的基本樣式，包括通用內容樣式，例如font-family和font-size 。
6. 開始在頁面頂部添加樣式並進行工作。只有一旦您完成了您的工作區域，才能進入下一節。

部署您的項目

如上所述，有多種免費託管您的項目的方法。我們建議使用Vercel，因為它是一項了不起的服務，並且非常容易設置。如果您想使用Vercel，請遵循以下步驟以開始：

1. 註冊到Vercel並通過入職流，並通過使用其Vercel進行GitHub集成來確保您的GitHub帳戶連接。
2. 使用“來自git存儲庫”按鈕的“導入項目”頁面將項目連接到Vercel，並選擇要部署的項目。
3. 連接後，每次您git push時，Vercel都會創建一個新的部署，並且部署URL將在儀表板上顯示。您還將收到帶有URL的每個部署的電子郵件。

分享您的解決方案

有多個地方可以共享您的解決方案：

1. 將其提交在平台上，以便其他用戶可以在網站上看到您的解決方案。這是我們的“提交解決方案的完整指南”，以幫助您做到這一點。
2. 在Slack社區的＃完成項目頻道中共享您的解決方案頁面。
3. 推文@frontendmentor，並提及@frontendmentor ，其中包括repo和Tweet中的現場網址。我們很想看看您的建造內容並幫助分享它。

給出反饋

始終歡迎反饋，因此，如果您有任何挑戰，請發送電子郵件給hi [dot] io。

這個挑戰是完全免費的。請與任何會發現對練習有用的人分享。

有有趣的建築！

社區贊助商

非常感謝我們的社區贊助商！

• 精通零是Web開發的所有內容，都是令人難以置信的學習資源。在安德烈·尼戈（Andrei Neagoie）的帶領下，這些課程確實是高質量的內容，並且涵蓋了各種各樣的需求技能。
• 多元化技術是代理人中代表性不足的人的驚人資源。該網站為任何尋求新機會的人提供工作清單。資源部分還充滿了有用的鏈接，可以潛入！
• 如果您正在尋找新的角色，TripleByte是一個非常不錯的產品。這是一項免費服務，可讓您進行機密測驗。根據您的結果，公司將為您擔任其空缺角色！