與其他任何技能一樣，前端開發需要大量的工作。 您可以通過多種方式來完成這項艱巨的任務， 其中一些是：

1. 在代理機構中擔任前端開發人員。
2. 在家里學習，并在側面構建項目。
3. 作為客戶的自由職業者。

每個人都有自己的積極和消極， 但一件事仍然是不變的-您獲得的任務越多樣化， 您進步得越快。

在本文中， 我們將研究一些潛在的項目，您可以單獨進行這些工作， 在這里您可以學習新技術， 方法， 可能還有一些“啊哈！”在您的前端職業生涯中的時刻。

以下所有任務都是您的GitHub個人資料上非常好的存儲庫， 特別是當您決定申請前端職位時。

一張紙條！ 下面的所有示例都是由設計師針對真實產品制作的。 我們不建議您抓住它們， 編碼它們，然后做您想做的任何事情。 所有這些都是UI元素的示例，您可以在不分發它們或以后再出售的情況下對其進行處理。

難度：中等難度。

不過，不要被“簡單”所誤導， 因為和這里的任何項目一樣， 初級開發人員和高級開發人員都可以根據他們解決的問題而苦苦掙扎。 我們將其簡單地進行了規模化，因為它不會包含任何復雜的UI元素，并且所有內容都可以封裝。

您可以選擇這樣的現有設計， 著重于下拉菜單/按鈕：

來源

或者，您可以選擇一種更通用的工具，例如Bootstrap和Foundation。 注意事項：

• 定義明確的命名約定。
• 組件介紹。
• 修飾語–大多數人喜歡更改次要元素， 因此，請考慮如何應用。 范例–您想要主要的 次要顏色； 成功， 錯誤狀態等
• 使其保持“即插即用”狀態。 您的目標是允許其他開發人員使用您的代碼而無需編寫任何CSS。 您也可以將其與基本的網格系統結合使用。

這樣一個庫的良好架構并不是一件容易的事。 您可以在職業生涯的開始以及幾年后嘗試相同的任務，然后比較您所學到的知識。

難度：硬

該任務全部與流暢的動畫和性能有關。 但除此之外， 您還必須寫下一些不太一般的視覺效果。 請參見下面的示例：

您可以在此處查看完整的動畫。 停用用戶界面后， 然后是時候添加互動了。 并非所有動畫都看起來像設計，因為它不是在瀏覽器上而是在其他工具中制作的， 但這并不意味著您無法真正接近原版。 當然， 我們將跳過任何運動模糊效果和奇怪的形狀變形， 但是其余的大部分都是您可以做的。 還有JS庫可以幫助您對整個過程進行關鍵幀設計。

此任務僅需進行兩次屏幕交換即可將其保留得更短。 除非您有精力，否則無需在此處處理移動視圖。

難度：硬

另一個棘手的任務！ 大多數游戲具有非常獨特的藝術風格，無法輕松在網絡上進行翻譯。 為了讓事情變得更艱難 這里有另一條規則–不要使用任何圖像/ svg在UI上實現形狀。

資料來源：《星際爭霸2》

為此，我們選擇了《星際爭霸2》。 如你看到的， 在實現過程中到處都有很多小細節。 的確， 在這里，“沒有資產”的規則使這一點變得困難。 您將不得不使用形狀， 剪裁， 影子魔術師， 漸變 邊界等等。 當然， 需要右側肖像和海軍陸戰隊員的圖像。

為了使事情更現實， 右上方的肖像邊框可以與下一張圖片的第一行交換：

資料來源：《星際爭霸2》

如果您設法使它在較小的屏幕和移動設備上看起來也不錯， 那么您將獲得加分！ 這將是一個非常“哇！”在您的簡歷上影響項目。

難度：中等

與上述某些設計相比，測驗游戲的構建并不難， 但他們需要編寫一些JS才能使其正常工作。 是的， 到目前為止，我們只有基于CSS的項目， 為此，您還必須使其具有交互性， 讓人們可以點擊， 查看正確/錯誤的答案等等。

如果您在Dribbble中搜索“測驗”， 您可以找到大量的例子， 但是，如果您發現很難挑選一個，則可以采取以下措施：

來源

如你看到的， 只有兩個屏幕， 這意味著您將不得不根據上面的設計提出其余的建議。

測驗功能：

• 計算正確答案
• N個選項的答案
• 單擊后顯示正確/錯誤答案
• 報告問題彈出窗口
• 回到所有測驗， 參加測驗
• 測驗結束后顯示最終分數

如果您愿意，您可以做的事情比上面提到的要多。 這通常是“一個下午”類型的項目。

難度：容易

打印優化有其怪癖。 尤其是當您隱藏網站上的任何現有元素時， 清理背景， 改善版式， 使用分頁符并格式化頁面。

對于此任務， 您可以在網上選擇一個網站， 選擇文章頁面并開始處理打印樣式。 關于該主題有很多篇文章， 所以有很多可以幫助您的。

您可以使用的示例網站：

• 亞馬遜銷售頁面–僅關注重要信息。
• 課程銷售頁面–來自SitePoint。
• 另一個課程頁面

隨意選擇您想要的任何其他網站， 您可以自己輕松或輕松地做到這一點。 如果您想查看一個良好的打印樣式的示例， 看看https：// www。砸雜志。com /， 他們真的釘了它。

難度：瘋狂

這個， 除了努力， 也很復雜。 與上述任何其他任務相比，它花費的時間更多， 因此您可能需要騰出20到30個小時以上的時間。

來源

上面的設計是Slava Kornilov對《紐約時報》的重新設計。 在鏈接中，您將看到他所做的所有設計，包括顯示整個首頁的大屏幕。

在這個項目中 您將需要從組件方面進行思考， 設置一些復雜的UI元素的樣式，例如視頻移出視口（必須繼續響應）， 字體設置， 重疊元素等等。

即使只是看一下頂部大標題后面的背景，也隱藏了其實現過程中的一些棘手部分。

他設計了很多元素， 因此，如果您愿意的話，可以在這里花費一兩個月以上的時間，而且還有很多東西要學習。 也許您甚至可以在后臺制作視頻，如下所示：

來源

為此， 也可以為不同的新聞報道制作動畫。 您還應該在這里考慮移動視圖。

難度：中等難度

儀表板無處不在。 當設計師不知道晚上該做什么時， 有時他們只是設計另一個。 只是因為。
多虧了這一點， 有很多選擇。 在某個時候，您可能必須為實際產品構建一個真實的產品。 您可能很不幸，無法獲得這些“超酷外觀”界面之一，并加載了上百萬個動畫，這些動畫根本沒有任何意義。

為這一天做準備， 這對您來說是一個挑戰：

實施以下設計：

來源

您需要在此處考慮的內容–圖表必須是真實的。 他們必須使用 真實數據， 并且您應該嘗試使它們看起來像您在頂部看到的那樣。 您可以使用許多庫， 并且很可能您將不得不進行很多擴展/修改。

如果您決定在其中加入一些動畫，那就更好了。 在簡歷上看起來很棒 正確的？

學習和成為更好的開發人員的最好方法之一就是簡單地開始編寫代碼并構建站點。 每天做一次 只需編碼一噸！ 這對您的職業生涯的前3-4年尤其有用。

有了這種經驗， 您可以輕松地擔當更高級的角色。 在這里，您可以利用從所有這些項目中獲得的經驗以及您一路上發現和克服的問題，來制定決策并有效地領導自己的團隊。記住， 始終嘗試找到一些難以解決的問題！

DevriX的創意主管和前端開發人員
亞歷克斯（Alex）的熱情在于學習新的網絡技術， 探索創新的方法來優化網站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數字藝術，最近開始在ELSYS技術學校教授設計。