最后修改： 2020年10月28日
閱讀時(shí)間：
觀點(diǎn)
與其他任何技能一樣，前端開(kāi)發(fā)需要大量的工作。 您可以通過(guò)多種方式來(lái)完成這項(xiàng)艱巨的任務(wù)， 其中一些是：
- 在代理機(jī)構(gòu)中擔(dān)任前端開(kāi)發(fā)人員。
- 在家里學(xué)習(xí)，并在側(cè)面構(gòu)建項(xiàng)目。
- 作為客戶的自由職業(yè)者。
每個(gè)人都有自己的積極和消極， 但一件事仍然是不變的-您獲得的任務(wù)越多樣化， 您進(jìn)步得越快。
在本文中， 我們將研究一些潛在的項(xiàng)目，您可以單獨(dú)進(jìn)行這些工作， 在這里您可以學(xué)習(xí)新技術(shù)， 方法， 可能還有一些“啊哈！”在您的前端職業(yè)生涯中的時(shí)刻。
以下所有任務(wù)都是您的GitHub個(gè)人資料上非常好的存儲(chǔ)庫(kù)， 特別是當(dāng)您決定申請(qǐng)前端職位時(shí)。
一張紙條！ 下面的所有示例都是由設(shè)計(jì)師針對(duì)真實(shí)產(chǎn)品制作的。 我們不建議您抓住它們， 編碼它們，然后做您想做的任何事情。 所有這些都是UI元素的示例，您可以在不分發(fā)它們或以后再出售的情況下對(duì)其進(jìn)行處理。
難度：中等難度。
不過(guò)，不要被“簡(jiǎn)單”所誤導(dǎo)， 因?yàn)楹瓦@里的任何項(xiàng)目一樣， 初級(jí)開(kāi)發(fā)人員和高級(jí)開(kāi)發(fā)人員都可以根據(jù)他們解決的問(wèn)題而苦苦掙扎。 我們將其簡(jiǎn)單地進(jìn)行了規(guī)?；?，因?yàn)樗粫?huì)包含任何復(fù)雜的UI元素，并且所有內(nèi)容都可以封裝。
您可以選擇這樣的現(xiàn)有設(shè)計(jì)， 著重于下拉菜單/按鈕：
來(lái)源
或者，您可以選擇一種更通用的工具，例如Bootstrap和Foundation。 注意事項(xiàng)：
- 定義明確的命名約定。
- 組件介紹。
- 修飾語(yǔ)–大多數(shù)人喜歡更改次要元素， 因此，請(qǐng)考慮如何應(yīng)用。 范例–您想要主要的 次要顏色； 成功， 錯(cuò)誤狀態(tài)等
- 使其保持“即插即用”狀態(tài)。 您的目標(biāo)是允許其他開(kāi)發(fā)人員使用您的代碼而無(wú)需編寫任何CSS。 您也可以將其與基本的網(wǎng)格系統(tǒng)結(jié)合使用。
這樣一個(gè)庫(kù)的良好架構(gòu)并不是一件容易的事。 您可以在職業(yè)生涯的開(kāi)始以及幾年后嘗試相同的任務(wù)，然后比較您所學(xué)到的知識(shí)。
難度：硬
該任務(wù)全部與流暢的動(dòng)畫(huà)和性能有關(guān)。 但除此之外， 您還必須寫下一些不太一般的視覺(jué)效果。 請(qǐng)參見(jiàn)下面的示例：
您可以在此處查看完整的動(dòng)畫(huà)。 停用用戶界面后， 然后是時(shí)候添加互動(dòng)了。 并非所有動(dòng)畫(huà)都看起來(lái)像設(shè)計(jì)，因?yàn)樗皇窃跒g覽器上而是在其他工具中制作的， 但這并不意味著您無(wú)法真正接近原版。 當(dāng)然， 我們將跳過(guò)任何運(yùn)動(dòng)模糊效果和奇怪的形狀變形， 但是其余的大部分都是您可以做的。 還有JS庫(kù)可以幫助您對(duì)整個(gè)過(guò)程進(jìn)行關(guān)鍵幀設(shè)計(jì)。
此任務(wù)僅需進(jìn)行兩次屏幕交換即可將其保留得更短。 除非您有精力，否則無(wú)需在此處處理移動(dòng)視圖。
難度：硬
另一個(gè)棘手的任務(wù)！ 大多數(shù)游戲具有非常獨(dú)特的藝術(shù)風(fēng)格，無(wú)法輕松在網(wǎng)絡(luò)上進(jìn)行翻譯。 為了讓事情變得更艱難 這里有另一條規(guī)則–不要使用任何圖像/ svg在UI上實(shí)現(xiàn)形狀。
資料來(lái)源：《星際爭(zhēng)霸2》
為此，我們選擇了《星際爭(zhēng)霸2》。 如你看到的， 在實(shí)現(xiàn)過(guò)程中到處都有很多小細(xì)節(jié)。 的確， 在這里，“沒(méi)有資產(chǎn)”的規(guī)則使這一點(diǎn)變得困難。 您將不得不使用形狀， 剪裁， 影子魔術(shù)師， 漸變 邊界等等。 當(dāng)然， 需要右側(cè)肖像和海軍陸戰(zhàn)隊(duì)員的圖像。
為了使事情更現(xiàn)實(shí)， 右上方的肖像邊框可以與下一張圖片的第一行交換：
資料來(lái)源：《星際爭(zhēng)霸2》
如果您設(shè)法使它在較小的屏幕和移動(dòng)設(shè)備上看起來(lái)也不錯(cuò)， 那么您將獲得加分！ 這將是一個(gè)非?！巴?！”在您的簡(jiǎn)歷上影響項(xiàng)目。
難度：中等
與上述某些設(shè)計(jì)相比，測(cè)驗(yàn)游戲的構(gòu)建并不難， 但他們需要編寫一些JS才能使其正常工作。 是的， 到目前為止，我們只有基于CSS的項(xiàng)目， 為此，您還必須使其具有交互性， 讓人們可以點(diǎn)擊， 查看正確/錯(cuò)誤的答案等等。
如果您在Dribbble中搜索“測(cè)驗(yàn)”， 您可以找到大量的例子， 但是，如果您發(fā)現(xiàn)很難挑選一個(gè)，則可以采取以下措施：
來(lái)源
如你看到的， 只有兩個(gè)屏幕， 這意味著您將不得不根據(jù)上面的設(shè)計(jì)提出其余的建議。
測(cè)驗(yàn)功能：
- 計(jì)算正確答案
- N個(gè)選項(xiàng)的答案
- 單擊后顯示正確/錯(cuò)誤答案
- 報(bào)告問(wèn)題彈出窗口
- 回到所有測(cè)驗(yàn)， 參加測(cè)驗(yàn)
- 測(cè)驗(yàn)結(jié)束后顯示最終分?jǐn)?shù)
如果您愿意，您可以做的事情比上面提到的要多。 這通常是“一個(gè)下午”類型的項(xiàng)目。
難度：容易
打印優(yōu)化有其怪癖。 尤其是當(dāng)您隱藏網(wǎng)站上的任何現(xiàn)有元素時(shí)， 清理背景， 改善版式， 使用分頁(yè)符并格式化頁(yè)面。
對(duì)于此任務(wù)， 您可以在網(wǎng)上選擇一個(gè)網(wǎng)站， 選擇文章頁(yè)面并開(kāi)始處理打印樣式。 關(guān)于該主題有很多篇文章， 所以有很多可以幫助您的。
您可以使用的示例網(wǎng)站：
- 亞馬遜銷售頁(yè)面–僅關(guān)注重要信息。
- 課程銷售頁(yè)面–來(lái)自SitePoint。
- 另一個(gè)課程頁(yè)面
隨意選擇您想要的任何其他網(wǎng)站， 您可以自己輕松或輕松地做到這一點(diǎn)。 如果您想查看一個(gè)良好的打印樣式的示例， 看看https：// www。砸雜志。com /， 他們真的釘了它。
難度：瘋狂
這個(gè)， 除了努力， 也很復(fù)雜。 與上述任何其他任務(wù)相比，它花費(fèi)的時(shí)間更多， 因此您可能需要騰出20到30個(gè)小時(shí)以上的時(shí)間。
來(lái)源
上面的設(shè)計(jì)是Slava Kornilov對(duì)《紐約時(shí)報(bào)》的重新設(shè)計(jì)。 在鏈接中，您將看到他所做的所有設(shè)計(jì)，包括顯示整個(gè)首頁(yè)的大屏幕。
在這個(gè)項(xiàng)目中 您將需要從組件方面進(jìn)行思考， 設(shè)置一些復(fù)雜的UI元素的樣式，例如視頻移出視口（必須繼續(xù)響應(yīng)）， 字體設(shè)置， 重疊元素等等。
即使只是看一下頂部大標(biāo)題后面的背景，也隱藏了其實(shí)現(xiàn)過(guò)程中的一些棘手部分。
他設(shè)計(jì)了很多元素， 因此，如果您愿意的話，可以在這里花費(fèi)一兩個(gè)月以上的時(shí)間，而且還有很多東西要學(xué)習(xí)。 也許您甚至可以在后臺(tái)制作視頻，如下所示：
來(lái)源
為此， 也可以為不同的新聞報(bào)道制作動(dòng)畫(huà)。 您還應(yīng)該在這里考慮移動(dòng)視圖。
難度：中等難度
儀表板無(wú)處不在。 當(dāng)設(shè)計(jì)師不知道晚上該做什么時(shí)， 有時(shí)他們只是設(shè)計(jì)另一個(gè)。 只是因?yàn)椤?br /> 多虧了這一點(diǎn)， 有很多選擇。 在某個(gè)時(shí)候，您可能必須為實(shí)際產(chǎn)品構(gòu)建一個(gè)真實(shí)的產(chǎn)品。 您可能很不幸，無(wú)法獲得這些“超酷外觀”界面之一，并加載了上百萬(wàn)個(gè)動(dòng)畫(huà)，這些動(dòng)畫(huà)根本沒(méi)有任何意義。
為這一天做準(zhǔn)備， 這對(duì)您來(lái)說(shuō)是一個(gè)挑戰(zhàn)：
實(shí)施以下設(shè)計(jì)：
來(lái)源
您需要在此處考慮的內(nèi)容–圖表必須是真實(shí)的。 他們必須使用 真實(shí)數(shù)據(jù)， 并且您應(yīng)該嘗試使它們看起來(lái)像您在頂部看到的那樣。 您可以使用許多庫(kù)， 并且很可能您將不得不進(jìn)行很多擴(kuò)展/修改。
如果您決定在其中加入一些動(dòng)畫(huà)，那就更好了。 在簡(jiǎn)歷上看起來(lái)很棒 正確的？
學(xué)習(xí)和成為更好的開(kāi)發(fā)人員的最好方法之一就是簡(jiǎn)單地開(kāi)始編寫代碼并構(gòu)建站點(diǎn)。 每天做一次 只需編碼一噸！ 這對(duì)您的職業(yè)生涯的前3-4年尤其有用。
有了這種經(jīng)驗(yàn)， 您可以輕松地?fù)?dān)當(dāng)更高級(jí)的角色。 在這里，您可以利用從所有這些項(xiàng)目中獲得的經(jīng)驗(yàn)以及您一路上發(fā)現(xiàn)和克服的問(wèn)題，來(lái)制定決策并有效地領(lǐng)導(dǎo)自己的團(tuán)隊(duì)。記住， 始終嘗試找到一些難以解決的問(wèn)題！
瀏覽更多：詢問(wèn)您的代理商發(fā)展
DevriX的創(chuàng)意主管和前端開(kāi)發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來(lái)優(yōu)化網(wǎng)站性能并改善用戶體驗(yàn)。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開(kāi)始在ELSYS技術(shù)學(xué)校教授設(shè)計(jì)。
