前端開發人員的實踐項目

已發表: 2020-12-17

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

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

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

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

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

一張紙條！下面的所有示例都是由設計師針對真實產品製作的。我們不建議您抓住它們，編寫它們並做任何您想做的事情。所有這些都是UI元素的示例，您可以在不分發它們或以後再出售的情況下使用它們。

1 –組件UI庫

難度：中等難度。

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

您可以選擇一個這樣的現有設計，該設計集中在下拉菜單/按鈕上：

資源

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

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

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

2 –實施複雜動畫UI

難度：硬

該任務全部關於時尚的動畫和性能。但除此之外，您還必須寫下一些不太一般的視覺效果。請參閱以下示例：

您可以在此處查看完整的動畫。停用UI後，就該添加交互了。不是所有的動畫都看起來像設計，因為它不是在瀏覽器上而是在另一個工具上完成的，但這並不意味著您無法真正接近原始設計。當然，我們將跳過任何運動模糊效果和奇怪的形狀變形，但是其餘大部分是您可以做的。還有JS庫可以幫助您對整個過程進行關鍵幀設計。

此任務僅需進行兩次屏幕交換即可使其保持較短的時間。除非您有精力，否則無需在此處處理移動視圖。

3 –遊戲界面

難度：硬

另一個棘手的任務！大多數遊戲具有非常獨特的藝術風格，很難在網絡上翻譯。為了使事情變得更困難，這裡還有另一個規則–不要使用任何圖像/ svgs在UI上實現形狀。

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

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

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

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

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

4 –測驗遊戲

難度：中等

與上面的某些設計相比，測驗遊戲的構建並不是很難，但是它們需要編寫一些JS才能使它們起作用。是的，到目前為止，我們只有基於CSS的項目，為此，您還必須使其具有交互性，以便人們可以單擊，查看正確/錯誤的答案等等。

如果在Dribbble中搜索“測驗”，則可以找到大量示例，但是如果發現很難選擇一個示例，則可以採用以下示例：

資源

如您所見，只有兩個屏幕，這意味著您將不得不根據上面的設計提出其餘的屏幕。

測驗功能：

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

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

5 –選擇一個隨機站點並使它易於打印

難度：容易

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

對於此任務，您可以選擇網絡上的站點，選擇文章頁面，然後開始使用打印樣式。關於該主題的文章很多，因此有很多可以幫助您的。

您可以使用的示例網站：

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

隨意選擇您想要的任何其他網站，您可以自己輕鬆或輕鬆進行。如果您想查看一個良好的打印樣式的示例，請訪問https://www.smashingmagazine.com/，他們真的很滿意。

6 –複雜的雜誌樣式佈局

難度：瘋狂

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

資源

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

在這個項目中，您將需要考慮組件，設置一些複雜的UI元素的樣式，例如視頻超出視口（必須繼續響應），版式設置，重疊的元素等等。

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

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

資源

對於這一點，還可以為不同的新聞報導製作動畫。您還應該在這裡考慮移動視圖。

7 –儀表板及其圖表

難度：中等難度

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

要準備這樣的一天，這對您來說是一個挑戰：

實施以下設計：

資源

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

如果您決定在其中加入一些動畫，那就更好了。在簡歷上看起來不錯，對嗎？

到底：

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

有了這些經驗，您就可以輕鬆地擔任更高的職位。在那裡，您可以利用從所有這些項目中獲得的經驗以及在過程中發現和克服的問題，來製定決策並有效地領導自己的團隊。記住，請始終嘗試尋找一些難以解決的問題！