easybank landing page

前端導師 - EasyBank著陸頁

歡迎！

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

前端導師挑戰通過構建現實的項目來幫助您提高編碼技巧。

為了應對這一挑戰，您需要對HTML，CSS和JavaScript的基本了解。

挑戰

您的挑戰是構建此著陸頁，並使它盡可能接近設計。

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

您的用戶應該能夠：

• 根據設備的屏幕尺寸查看網站的最佳佈局
• 有關頁面上的所有交互元素，請參見懸停狀態

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

在哪裡可以找到一切

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

設計採用JPG靜態格式。使用JPG將意味著您需要使用最佳判斷，例如font-size ， padding和margin 。

如果您希望設計文件（我們提供素描和無花果版本）更詳細地檢查設計，則可以訂閱為Pro成員。

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

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

構建您的項目

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

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

部署您的項目

如上所述，有很多方法可以免費託管您的項目。我們推薦的主人是：

• github頁面
• 動詞
• Netlify

您可以使用這些解決方案之一或我們其他任何受信任的提供商託管您的網站。閱讀有關我們推薦和值得信賴的主人的更多信息。

創建一個自定義README.md

我們強烈建議使用自定義覆蓋此README.md 。我們在此入門代碼中的README-template.md文件中提供了一個模板。

該模板提供了添加的指南。自定義README將幫助您解釋您的項目並反思您的學習。請隨時隨意編輯我們的模板。

將信息添加到模板中後，刪除此文件，然後將README-template.md文件重命名為README.md 。這將使它顯示為您的存儲庫的讀數文件。

提交解決方案

在平台上提交解決方案，以供社區其他成員參觀。請遵循我們的“完整指南提交解決方案”，以獲取有關如何執行此操作的提示。

請記住，如果您正在尋找解決方案的反饋，請在提交問題時一定要提出問題。您的問題越具體和詳細，您就會獲得社區有價值的反饋的機會越高。

分享您的解決方案

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

1. 在社區的＃完成項目頻道中共享您的解決方案頁面。
2. 推文@frontendmentor和提及@frontendmentor ，包括推文中的回購和現場網址。我們很想看看您的建造內容並幫助分享它。
3. 在LinkedIn等其他社交渠道上分享您的解決方案。
4. 博客有關您建立項目的經驗。撰寫有關您的工作流程，技術選擇和通過代碼進行交談的方法是增強您所學到的知識的絕妙方式。很棒的寫作平台是dev.to，hashnode和codenewbie。

我們提供模板以幫助您在平台上提交解決方案後共享解決方案。在尋找反饋時，請進行編輯，並包括特定的問題。

您的問題越具體，社區的另一個成員就會越有可能為您提供反饋。

得到了我們的反饋？

我們喜歡收到反饋！我們一直在尋求改善我們的挑戰和平台。因此，如果您想提及任何內容，請通過電子郵件發送給hi [dot] io。

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

有有趣的建築！