social media dashboard with theme switcher

前端導師 - 帶主題切換器的社交媒體儀表板

歡迎！

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

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

為了做到這一挑戰，您需要對HTML，CSS和一小部分JavaScript的基本了解。

挑戰

您的挑戰是建立這個社交媒體儀表板，並使它盡可能接近設計。

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

您的用戶應該能夠：

• 根據設備的屏幕尺寸查看網站的最佳佈局
• 有關頁面上的所有交互元素，請參見懸停狀態
• 將顏色主題切換到他們的喜好

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

在哪裡可以找到一切

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

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

如果您希望草圖文件更詳細地檢查設計，則可以從平台上的挑戰頁面購買。

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

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

構建您的項目

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

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

部署您的項目

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

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

分享您的解決方案

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

1. 將其提交在平台上，以便其他用戶可以在網站上看到您的解決方案。其他用戶將能夠給您反饋，這可以幫助改善下一個項目的代碼。
2. 在Slack社區的＃完成項目頻道中分享您的存儲庫並實時URL。
3. 推文@frontendmentor，並提及@frontendmentor ，其中包括repo和Tweet中的現場網址。我們很想看看您的建造內容並幫助分享它。

給出反饋

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

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

有有趣的建築！