2020 - 2021 年 Web 前端最新導航 - 前端學習資源分享&前端面試資源彙總

國慶這幾天，我收集了大量能夠顯著提高開發效率的前端導航連接。

這些導航連接對我頗有幫助，但願對你也是如此。

這些好用的導航連接都已經部署到下面的網站上了，在那裏食用更美味哦。

Web 前端最新導航  https://www.kwgg2020.com/

筆者博客地址： https://github.com/biaochenxu...

JavaScript

• JavaScript 教程
• ES6 入門教程
• JavaScript 30 使用原生 JavaScript 在 30 天內完成 30 個項目
• Codewars 和其餘人一塊兒完成真實的代碼挑戰，提高你的技術
• JavaScript 教程 現代 JavaScript 教程
• 優秀的JS代碼規範
• 開發的寶藏項目
• TypeScript 教程：https://github.com/xcatliu/typescript-tutorial
• Node.js學習 https://blog.poetries.top/node-learning-notes/

CSS

• css的各類效果實現 css的各類效果實現（尤爲是動畫效果）
• CSS Inspiration 在這裏找到寫 CSS 的靈感
• CSS 經常使用樣式 總結一些經常使用的 CSS 樣式
• Animate.css 開箱即用的跨瀏覽器 CSS 動畫效果
• animista 按需定製 CSS 動畫效果
• SpinKit 聚集了實現各類加載效果的 CSS 代碼片斷
• CSS Minifier 在線 CSS 代碼極簡化/壓縮工具
• https://sass.bootcss.com/docu... Sass 是成熟、穩定、強大的 CSS 擴展語言
• https://less.bootcss.com/ 一種將css賦予了動態語言特性的動態樣式語言
• https://stylus-lang.com/ 富有表現力、動態、健壯的CSS

算法

• JavaScript 算法與數據結構：https://github.com/trekhleb/javascript-algorithms
• leetcode解題之路：https://github.com/azl397985856/leetcode
• 五分鐘學算法：https://github.com/MisterBooo/LeetCodeAnimation
• LeetCode題目的思路 https://github.com/MisterBooo/LeetCodeAnimation 用動畫的形式呈現解LeetCode題目的思路。
• 極客時間 App 的《數據結構與算法之美》
• GitHub 上 170K+ Star 的前端學習的數據結構與算法項目 https://github.com/biaochenxu...
• JavaScript 數據結構與算法之美 - 十大經典排序彙總: https://github.com/biaochenxuying/blog/issues/42
• 算法可視化工具 https://github.com/algorithm-visualizer/algorithm-visualizer 算法可視化工具是一個交互式的在線平臺，能夠從代碼中可視化算法。
• 算法可視化來源 https://visualgo.net/en
• 觀察算法的工做方式 https://github.com/skidding/illustrated-algorithms 變量和操做的可視化表示加強了控制流和實際源代碼。

前端面試

• 前端面試常考問題整理，按模塊知識點分類：https://blog.poetries.top/FE-Interview-Questions/
• 前端開發面試題: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
• web前端面試寶典：https://github.com/h5bp/Front-end-Developer-Interview-Questions/
• 掘金前端面試題合集：https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md
• 前端面試圖譜：https://yuchengkai.cn/docs/zh/
• GitHub 上 100K+ Star 的前端面試開源項目彙總 https://github.com/biaochenxu...

技術社區

• GitHub：https://github.com/ 高質量的內容創做和分享平臺
• stackoverflow：https://stackoverflow.com/ 一個回答技術問題的網站
• 掘金：https://juejin.im/ 目前來看，國內的不少優質前端文章，都在掘金上。
• 博客園：https://www.cnblogs.com/ 一個很純粹的技術博客平臺。
• 知乎：https://www.zhihu.com/ 不少作技術的同窗也開始玩知乎了，阿里的很多前端大牛在知乎上就很是活躍。
• CSDN：https://www.csdn.net/ 廣告太多，但奈何你這麼老牌。
• segmentfault：https://segmentfault.com/ 比較低調的技術博客平臺。
• v2ex：https://www.v2ex.com/ 一個關於分享和探索的地方
• http://cnodejs.org/ Node.js專業中文社區
• https://www.smashingmagazine.... 一個web技術類的博客雜誌站點
• https://www.jstips.co/ 天天推出一個JS技巧的網站
• W3cplus：https://www.w3cplus.com/ 是一個致力於推廣國內前端行業的技術博客
• 印記中文 - https://docschina.org/ 印記中文是最權威是技術中文文檔社區
• 收集優質的中文前端博客：https://github.com/FrankFang/best-chinese-front-end-blogs

博客團隊

• 騰訊AlloyTeam：http://www.alloyteam.com/
• 騰訊社交用戶體驗ISUX：https://isux.tencent.com/
• 淘寶FED | 淘寶前端團隊：http://taobaofed.org/
• 阿里巴巴國際UED：http://www.aliued.com/
• 京東 | 凹凸實驗室：https://aotu.io/
• 餓了麼前端:https://zhuanlan.zhihu.com/ElemeFE
• 百度前端研發部FEX：http://fex.baidu.com/
• 360 | 奇舞團：https://75team.com/
• 美團技術團隊: https://tech.meituan.com/

GitHub 統計

• GitHub 中文排行榜、高分優秀中文項目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts
• GitHub 全球排名：https://gitstar-ranking.com/ 這個排名很權威。若是你的項目超過 10k star，就能上榜，躋身全球 GitHub 項目前1000名。

構建

• NPM：https://www.npmjs.com/
• Yarn：https://yarnpkg.com/zh-Hans/
• Webpack：https://webpack.js.org/
• Gulp：https://www.gulpjs.com.cn/
• Babel：https://babeljs.io/
• ESLint：https://cn.eslint.org/ 可組裝的JavaScript和JSX檢查工具。
• PostCSS：https://www.postcss.com.cn/ 用 JavaScript 工具和插件轉換 CSS 代碼的工具

部署

• GitHub Pages GitHub 提供的免費靜態網站託管服務
• Netlify 30 秒內部署你的網站
• Vercel 快速部署你的網站
• Surge 只需一個命令就能夠發佈你的網站
• Heroku 在雲端構建、運行你的應用

靜態站點搭建工具

• Hexo：https://hexo.io/zh-cn/
• VuePress：https://www.vuepress.cn/
• GitBook：https://www.gitbook.com/

前端代碼規範 

• 騰訊的 http://tgideas.qq.com/doc/index.html
• 京東的 https://guide.aotu.io/index.html
• Bootstrap編碼規範：https://codeguide.bootcss.com/
• es6編程風格：http://es6.ruanyifeng.com/#docs/style
• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript
• ESLint 檢測、修正 JavaScript 代碼的問題
• Prettier 格式化 JavaScript 代碼

調試抓包

• whistle：https://wproxy.org/whistle/ 代理抓包工具，很好很強大。
• Fiddler：https://www.telerik.com/fiddler 代理抓包工具。
• Easy Mock：https://www.easy-mock.com

開發工具

• VS Code：https://code.visualstudio.com/
• Sublime Text：https://www.sublimetext.com/
• WebStorm：https://www.jetbrains.com/webstorm/
• Atom：https://atom.io/

在線工具

• CodePen - https://codepen.io/ 在線代碼測試工具

• Can I use - https://caniuse.com/ Web前端兼容性列表
• TinyPNG - https://tinypng.com/ PNG/JPG 圖片在線壓縮利器
• CNZZ站點統計 - https://www.umeng.com/ 國內經常使用的站點統計工具

前端大會

• Vue.js開發者大會 https://fequan.com/ Vue.js開發者大會中國
• 中國JS開發者大會 https://jsconfchina.com/ 一場專一於JavaScript和Node.js技術的國際性大會
• 中國CSS開發者大會 https://css.w3ctech.com/ 提升css開發姿式的大會
• D2前端技術論壇 http://d2forum.alibaba-inc.com/ 阿里巴巴舉辦，分享技術的樂趣，探討行業的發展

圖標

• Font Awesome：http://www.fontawesome.com.cn/ 網站開發最流行的圖標集
• Feather 簡潔美觀的開源圖標
• Ionicons 精心繪製的開源圖標
• Simple Icons 常見品牌的 SVG 圖標
• Material Design Icons 輕快、精美的符號圖標，包括常見操做和事項
• Tabler Icons 681 枚可定製的開源 SVG 圖標

色彩

• Material Design Colors Material Design 色彩
• Flat UI Colors 2 14 組配色、280 種顏色
• Color Hunt 分享色彩搭配的自由開放平臺，包括成千上萬人工選取的配色，能夠從中獲取配色的靈感
• Color Space 配色方案、CSS 顏色漸變生成工具
• uiGradients 美觀的顏色漸變
• Colors and Fonts 色彩和字體工具
• Coolors 配色方案生成工具

插畫

• Undraw 持續更新的精美的 SVG 插畫集
• manypixels 免費插畫集
• IRA Design 經過調配漸變色、搭配手繪組件定製插畫
• Free Illustrations by Lukasz Adam 免費 SVG 插畫
• Blobmaker 在線 SVG 形狀生成器
• Get Waves 在線 SVG 波形生成器

圖片

• Unsplash 可供無償使用的圖片
• Pexels 精美的免費圖片和視頻
• Burst 免費高分辨率圖片，可用於網站和商業用途
• ISO Republic 使用 CC0 許可的免費高分辨率圖片和視頻
• Pixabay 使人驚歎的免費（公共領域）圖片和視頻站點
• StockSnap.io 精美的免費圖片，一樣使用 CC0 許可
• Photopea 在線圖片編輯工具，支持大量高級功能
• Online Image Compressor 在線圖片壓縮工具，一次能夠壓縮多達 20 張圖片
• Bulk Resize Photos 最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無需上傳到服務器）

其餘

• 單元測試：https://github.com/goldbergyoni/javascript-testing-best-practices
• web.dev 評測網站性能（基於 Lighthouse）
• Shape Divider 定製各類形狀的網站分區 SVG 的工具
• GTmetrix 網頁性能分析工具
• Can I Use 前端技術的瀏覽器支持狀況
• Carbon 代碼轉圖片工具
• Wappalyzer 檢測某個網站使用的技術棧

設計工具

• 墨刀：原型設計工具。網址：https://modao.cc/
• 藍湖：一款產品文檔和設計圖的在線協做平臺。網址：https://lanhuapp.com
• PxCook（像素大廚）：高效易用的自動標註工具。軟件下載連接：https://www.fancynode.com.cn/pxcook

前端導航網站地址： https://www.kwgg2020.com

筆者博客地址：https://github.com/biaochenxu...

推薦閱讀：

• 經過10個實例小練習，快速入門熟練 Vue3 核心新特性

支持一下下👇