前端工做學習相關網站收集整理

時間 2019-11-05

原文原文鏈接

平時上網有隨手收藏感興趣網站的習慣，上學的時候大部分收藏的都是遊戲音樂電影不可描述之類的網站，工做以後反而全是技術學習資訊之類的了。前幾天整理瀏覽器書籤的時候，發現居然有二百多個書籤了，並且一不小誤刪了幾十個恢復起來很是麻煩，因而以爲有必要換種方式記錄一下，同時精選一些以爲不錯的網站分享給有須要的同窗。javascript

文章（包括以往的文章）和瀏覽器導出的完整書籤放在github上以做備份，後面可能會更新添加新內容。css

項目地址：github.com/hoc2019/blo…html

若是部分國外網站訪問不了的，請自行解決。前端

開發工具

平時工做開發時用到的一些輔助工具類網站vue

網址	說明
regexr.com	正則表達式驗證匹配
www.gitignore.io	根據選擇生成.gitignore文件
unbug.github.io/codelf	變量命名推薦（支持中文）
www.html.cn/tool/css3Pr…	css box-shadow陰影預覽及代碼生成
www.internetke.com/jsEffects/2…	css漸變預覽及代碼生成
xuanfengge.com/easeing/cea…	css動畫緩動函數預覽及生成
www.toptal.com/developers/…	多張圖片合成雪碧圖，並生成對應css
tool.lu	衆多工具集合，包括時間戳轉換，進制轉換等
www.bootcdn.cn 或 cdn.baomitu.com	國內的CDN庫，速度快
www.jsdelivr.com	國外的cdn庫，支持github，npm，WordPress

在線編輯

代碼在線編輯運行html5

網址	說明
jsrun.net	國內網站，有代碼提示，支持cdn庫導入，不支持建立項目，有代碼示例市場。
jsbin.com	國外網站，功能少，支持本地搭建
codepen.io	國外網站，支持cdn庫導入，支持建立項目（非會員只支持一個項目），有大量豐富的代碼示例市場。
stackblitz.com	國外網站，有代碼提示，支持npm，能夠建立項目（默認建立類型沒有vue）。
codesandbox.io	國外網站，支持npm和cdn庫導入，能夠建立各類類型項目

編程題庫

經過刷題和編程訓練來提高編程思想java

注：據fcc社區說法，舊版題目已再也不維護更新，推薦使用新版，帳號不互通。（感謝Ricowang評論指出）node

視頻教程

技術分享和教程視頻。react

網址	說明
Frontendmasters	有不少大佬的課程，英語課程，英文字幕，少部分課程免費，大部分須要訂閱會員，費用較貴，能夠等黑五打折時買年費。
Egghead	英語課程，英文字幕。
IT大咖說	國內技術大會分享錄像爲主。
慕課	國內網站，免費課挺多，實戰課付費，按課付費，價格偏貴。（其餘如騰訊課堂，網易雲課堂等都差很少一個路數）
Udemy	網站有中文語言和中文課程，大部分英文課程也有中文字幕，按課收費，打折中的付費課程還算能接受。

可能看視頻更加清楚直觀，因此不少人都更喜歡看視頻，尤爲是剛入門的時候。網上如今也有不少培訓機構的課程視頻，能找到了也能夠看一看，可是進階時建議多看些國外視頻，拓寬下視野，順便練下英語能力。css3

上面大部分網站的視頻仍是付費的，若是想看免費的視頻其實能夠看youtube，上面技術分享的視頻也很是多，重點是都是免費的。

下面推薦幾個youtube的技術帳號，能夠關注一下。

這只是我關注的一部分，還有很是多，你們能夠自行探索。

文章資訊博客

學習技術，瞭解行業最新動態。

國內

國外

Echojs
Front-End Front
Hashnode
css-tricks
Devchat （音頻形式）
Medium （可訂閱郵件）
Dev （可訂閱郵件）
HTML5 Weekly （可訂閱郵件）
CSS Weekly （可訂閱郵件）
JavaScript Weekly （可訂閱郵件）
React Status （可訂閱郵件）
Ponyfoo （可訂閱郵件）
Jake Archibald blog
Dan Abramov blog
David Walsh Blog

建議申請一個專門用來接收訂閱郵件的郵箱，由於會接收到大量郵件

問答論壇

開發中遇到問題，去這些地方就對了。

網站	說明
知乎	沒什麼說的，有了知乎應該沒有人會再去用百度知道那垃圾東西了吧。
Segmentfault	更專一技術問題。
Stack Overflow	Segmentfault的外國原版，很是強大。
cnodejs	node社區
react-china	react社區
V2EX	程序員的1024？

開源框架和庫的問題，去github上找到項目查詢issue一般都能找到解決方案。

github相關

畢竟全球最大同性交友平臺，上面牛逼的人和項目很是至多，除了輪子也有不少教程，這裏推薦一些對前端學習有幫助的項目。

項目名	說明
30-seconds-of-code	短小精悍的工具函數，有中文版。
Front-end-Developer-Interview-Questions	前端面試題整理，有中文版，沒答案。
front-end-interview-handbook	前端面試手冊，有中文版，帶答案。
Front-End-Checklist	前端開發清單
javascript-algorithms	js算法和數據結構
33-js-concepts	前端開發須要掌握的33個概念，有中文版。
awesome-javascript	javascript資源列表，有中文版。
nodebestpractices	node最佳實踐列表，有中文版。