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

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

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

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

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

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

難度：中等難度。

不過，不要被“簡單”所誤導， 因為和這里的任何項目一樣， 初級開發(fā)人員和高級開發(fā)人員都可以根據(jù)他們解決的問題而苦苦掙扎。 我們將其簡單地進行了規(guī)?；驗樗粫魏螐碗s的UI元素，并且所有內(nèi)容都可以封裝。

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

來源

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

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

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

難度：硬

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

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

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

難度：硬

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

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

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

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

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

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

難度：中等

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

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

來源

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

測驗功能：

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

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

難度：容易

打印優(yōu)化有其怪癖。 尤其是當您隱藏網(wǎng)站上的任何現(xiàn)有元素時， 清理背景， 改善版式， 使用分頁符并格式化頁面。

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

您可以使用的示例網(wǎng)站：

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

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

難度：瘋狂

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

來源

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

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

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

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

來源

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

難度：中等難度

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

為這一天做準備， 這對您來說是一個挑戰(zhàn)：

實施以下設計：

來源

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

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

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

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

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