做前端設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)的，素材永遠(yuǎn)很重要。因?yàn)樗夭牡拿烙^程度往往直接決定了網(wǎng)頁頁面的風(fēng)格、整潔度、色調(diào)等等。

我大學(xué)時(shí)候，在一家非常小型的創(chuàng)業(yè)公司實(shí)習(xí)。公司人員只有幾個(gè)，所以在那時(shí)我基本上算是獨(dú)立開發(fā)了一個(gè)旅游酒店訂購平臺(tái)，前端設(shè)計(jì)、后端開發(fā)、公眾號(hào)開發(fā)等等都涉及，那段時(shí)間基本是我最全能的時(shí)候了。

所以當(dāng)時(shí)我也收集了許多的前端素材，在這里一并分享給大家。

一、圖標(biāo)類

每一個(gè)Web開發(fā)者，尤其是前端開發(fā)人員一定都會(huì)需要icon圖標(biāo)來為項(xiàng)目增色。

Font Awesome提供可縮放的矢量圖標(biāo)，可以使用CSS所提供的所有特性對它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

特點(diǎn)：免費(fèi)，高質(zhì)量,。非常簡潔的icon圖標(biāo)庫。

這是一個(gè)比較有設(shè)計(jì)感的Icon圖庫，并且已經(jīng)打包分類好，缺點(diǎn)是只有部分是免費(fèi)的。個(gè)人覺得里面免費(fèi)的圖庫也已經(jīng)夠用了。

附上圣誕特輯！

阿里巴巴UX部門推出的矢量圖標(biāo)管理網(wǎng)站，也是國內(nèi)首家推廣Webfont形式圖標(biāo)的平臺(tái)。這個(gè)相信大家都用過！

二、圖片素材

無版權(quán)限制的圖片素材

Pexels可以說是圖片素材界的超級(jí)網(wǎng)紅了，說到圖片肯定哪里都有它，我自己都推薦好幾次了。可以免費(fèi)下載各種各樣的分辨率，包括原圖尺寸。

網(wǎng)址：(https://www.pexels.com/)

例如搜索：圣誕節(jié)（Christamas）

這個(gè)主要用作素材，是不同種類的無背景素材圖片！直接可以免費(fèi)用。注意它是全部都是無背景圖片，非常適合那些需要PNG透明底配圖的。

(http://pngimg.com/)

例如搜索：Birds

KaboomPics是以生活化免費(fèi)高質(zhì)量圖片素材為主的圖片素材庫。里面的圖片都是攝影愛好者攝影后通過審核上傳的。并且可以應(yīng)用于任何項(xiàng)目，沒有版權(quán)限制。

自媒體可以從中找封面圖，攝影愛好者也可以從中欣賞或著學(xué)習(xí)。

（https://unsplash.com/）

先這樣~希望這些資源對你有幫助，下次還會(huì)更新一些web開發(fā)的常用工具。

如果有幫助，歡迎關(guān)注我以示支持，也以防錯(cuò)過下一波干貨！~

web前端即為網(wǎng)站的前端開發(fā),前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。 web前端開發(fā)通過HTML,CSS及JavaScript以及衍生出來的各種技術(shù)、框架、解決方案,來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。

1.根據(jù)項(xiàng)目或者產(chǎn)品需求負(fù)責(zé)實(shí)現(xiàn)PC端及移動(dòng)頁面的設(shè)計(jì)和開發(fā)、調(diào)試等工作，高效、高質(zhì)地完成代碼編寫，確保符合前端代碼規(guī)范;

2、與后端開發(fā)團(tuán)隊(duì)緊密配合，完成接口對接，確保前后端有效交互共同完成項(xiàng)目或者產(chǎn)品;

3、綜合運(yùn)用客戶端和服務(wù)器端構(gòu)建與優(yōu)化方案、模塊化開發(fā)等手段，提升開發(fā)效率和系統(tǒng)性能;

4、持續(xù)優(yōu)化前端應(yīng)用，改善用戶交互以及視覺，保證前端網(wǎng)頁的兼容性以及頁面響應(yīng)速度并負(fù)責(zé)前端代碼的維護(hù)，

5、了解并結(jié)合業(yè)務(wù)需求，設(shè)計(jì)滿足用戶需要、符合用戶習(xí)慣、運(yùn)用大數(shù)據(jù)分析能力、體現(xiàn)大數(shù)據(jù)特色的系統(tǒng)。

6.與設(shè)計(jì)師、產(chǎn)品工程師緊密工作在一起,實(shí)現(xiàn)產(chǎn)品前端ui和交互方面的開發(fā)需求，確保不同平臺(tái)、設(shè)備上具有優(yōu)秀的用戶體驗(yàn)；

0. Google：https://google.com

這個(gè)不用多說了吧。

GitHub — 開發(fā)者最最最重要的網(wǎng)站：https://github.com

這個(gè)不用多說了吧，代碼托管網(wǎng)站，上面有很多資源，想要什么輪子，上去搜就好了。并且呢，上面有很多優(yōu)秀的程序員，你可以在這里交到很多好朋友喔。

2. 掘金 — 幫助開發(fā)者成長的技術(shù)社區(qū)：https://juejin.im

現(xiàn)在國內(nèi)優(yōu)質(zhì)的開發(fā)者交流學(xué)習(xí)社區(qū)，可以去看大佬們寫的文章，也可以自己分享學(xué)習(xí)心的，與更多開發(fā)者交流。認(rèn)識(shí)更多的小伙伴兒，提升個(gè)人影響力。

3. 算法學(xué)習(xí) LintCode：https://www.lintcode.com/

算法學(xué)習(xí)網(wǎng)站，上去每天刷兩道算法題，走遍天下都不怕。

4. 算法學(xué)習(xí) LeetCode：https://leetcode.com/

也是算法題網(wǎng)站，同上。

5. 算法學(xué)習(xí) LeetCode 中文站：https://leetcode-cn.com/

這個(gè)是上面算法題網(wǎng)站的中文站點(diǎn)，英文不好的可以刷這個(gè)，英文好的推薦去刷英文網(wǎng)站的題目，還能提升英語能力。

6. 牛客網(wǎng) — 面經(jīng)和刷面試題：https://www.nowcoder.com

各個(gè)公司的面試題和面經(jīng)分享，找工作前認(rèn)真刷一刷，一定會(huì)有很大收獲！拿到心儀的 offer！

7. Web 開發(fā)練習(xí)題：https://www.freecodecamp.org/

這是國外發(fā)起的一個(gè) Web 開發(fā)學(xué)習(xí)的網(wǎng)站，從簡單到深入，一步一步帶你學(xué)習(xí) Web 開發(fā)。就像一本練習(xí)冊，并且當(dāng)你完成相應(yīng)的內(nèi)容后，會(huì)得到相應(yīng)的資格認(rèn)證。

8. 百度前端技術(shù)學(xué)院 — 前端開發(fā)項(xiàng)目庫：http://ife.baidu.com

學(xué)前端的看這里，百度官方推出的前端開發(fā)學(xué)習(xí)技術(shù)學(xué)院，題目從簡單到困難，如果你把里面的題都做會(huì)了，找個(gè) BAT 的前端工作不成問題的。

9. Stack Overflow — 解決 bug 的社區(qū)：https://stackoverflow.com/

開發(fā)過程中遇到什么 bug，上去搜一下，只要搜索的方式對，百分之 99 的問題都能搜到答案。在這里能夠與很多有經(jīng)驗(yàn)的開發(fā)者交流，如果你是有經(jīng)驗(yàn)的開發(fā)者，還可以來這兒幫助別人解決問題，提升個(gè)人影響力。