超硬核 Web 前端學霸筆記，學完就去找工做！

時間 2021-08-12

標籤 javascript css html 前端 vue java node python react webpack 欄目 HTML 简体版

原文原文鏈接

文章和教程

博客

前端回憶錄 | 前端筆記本 - 一個前端博主記錄的心得和總結
Hasnode - Hashnode 是在您的我的域 free 上免費建立開發者博客並經過咱們的全球開發者社區與讀者聯繫的最簡單方法！ 👩‍💻👨‍💻
Dev.to - DEV 是一個由軟件開發人員組成的社區，他們聚在一塊兒互相幫助。
Hackernoon - 一個獨立的技術媒體網站

必須具備 Chrome 擴展程序

DailyDev - 在 Chrome 默認標籤中獲取有關 Dev 社區的最新消息。
WhatFont - 瞭解網站使用的是哪一種字體。
ColorPick Eyedropper - 只需放下筆，便可知道網站使用的是哪一種顏色。
Wappalyzer - 瞭解任何網站的技術棧
Web Developer - 該擴展程序擁有大量工具。
React Developer Tools - React 開發者工具是 Chrome DevTools 擴展，用於開源 React JavaScript 庫。它使您能夠檢查 Chrome 開發者工具中的 React 組件層次結構。

前端性能分析工具

PageSpeed Insights - PageSpeed Insights 可以針對移動設備和桌面設備生成網頁的實際性能報告，並可以提供關於如何改進相應網頁的建議。
Lighthouse - Lighthouse 是一個開源的自動化工具，用於改進網絡應用的質量。您能夠將其做爲一個 Chrome 擴展程序運行，或從命令行運行。您爲 Lighthouse 提供一個您要審查的網址，它將針對此頁面運行一連串的測試，而後生成一個有關頁面性能的報告。
Pingdom - 在線網站速度檢測工具是由一家網站監測服務公司推出的網頁速度檢測工具，幫助用戶找出影響網站速度的緣由，並給出改善網頁性能的可行性方案，對於有網站的用戶來講很是實用。
Sitespeed.io - Sitespeed.io 是一款開源的 Web 性能測試工具，用來衡量 Web 網站的綜合性能，幫助開發和測試人員分析網頁的加載速度和渲染性能。
Calibre - Caliber 是一款多功能的性能監控套件，可幫助你監控和審覈網站的性能。它還容許你經過指定測試服務器的位置，管理模擬的廣告首選項甚至模擬移動設備來模擬現實條件。它還容許你設置預算，並經過爲你提供性能降低來幫助你將預算保持在預算以內。
SpeedTracker - SpeedTracker 是一個運行在 WebPageTest 之上的工具，可在你的網站上進行按期的性能測試，並直觀顯示各類性能指標隨時間變化的方式。這使你能夠不斷評估網站，並查看新功能如何影響網站的性能。你還能夠定義預算並經過電子郵件和 Slack 獲取警報。

VS 代碼必須具備擴展名

Compile Hero - Compile Hero 是一款簡單易上手用於一鍵編譯 Less, Sass, Scss, Styl, TS, TSX, Jade, Pug 或 JS 等文件的編輯器工具。
NPM - 此擴展名可幫助您管理 Package.json 並在未安裝依賴項時提供警告，也會有所幫助與版本控制。
Prettier - Prettier 是一種自覺得是的代碼格式化程序。它經過解析代碼並使用本身的規則（考慮最大行長）從新打印代碼，從而實現一致的樣式，並在必要時包裝代碼。
彩虹括號 - 經過對環境中設置的每一個支架進行顏色編碼，能夠輕鬆找到丟失的標籤。
VS 代碼大圖標 - 經過應用適當的圖標集來按類型直觀地識別文件，從而組織環境。
佔位符圖像 - 諸如 unsplash.it 和 placehold.it 之類的服務很是有用。如今，您能夠經過直接在 VS Code 中添加佔位符圖像來節省時間
Vetur - 官方 VueJS 擴展
ESLint - 該擴展程序使用安裝在打開的工做區文件夾中的 ESLint 庫。
實時服務器 - 啓動具備實時從新加載功能的開發本地服務器，用於靜態和動態頁面。
Visual Studio IntelliCode - 此擴展程序會將最相關的完成建議移到頂部。
Chrome 調試器 - 此擴展程序可以讓您從 VS Code 內部調試在 Chrome 瀏覽器中運行的 JavaScript 代碼。
Microsoft Edge 調試器 - 在 Microsoft Edge 瀏覽器中調試 JavaScript 代碼
Firefox 調試器 - 在 Firefox 中調試 Web 應用程序或瀏覽器擴展
Bracket Pair Colorizer 2 - 可自定義的擴展程序，用於爲匹配的支架着色

VS 代碼主題

One Dark Pro - Atom 的標誌性 Visual Studio Code 的「 One Dark」主題
材料主題 - Visual Studio Code 如今最史詩般的主題
地平線主題 - 一個精美的 Visual Studio 代碼雙重主題

DOCS 和備忘單 😁

MDN Web Docs - MDN Web Docs 網站提供有關 Open Web 技術的信息，包括網站和漸進式 Web 應用程序的 HTML，CSS 和 API。
DevDocs - 針對開發人員的快速，離線和免費的文檔瀏覽器。在一個 Web 應用程序中搜索 100 多個文檔。
DEVHINTS - 少許的備忘單。
FLEX-Malven - CSS Flex 佈局的可視備忘單。
GRID-Malven - CSS 網格佈局的可視備忘單。

🌐 如何運做？

互聯網如何運做視頻 - 互聯網如何運做？
互聯網的工做原理簡介視頻 - 關於互聯網如何工做的簡要說明？
DNS - DNS 如何工做？
HTTPS - HTTPS 如何工做？

對於 HTML 和 CSS

Layout Demo - 學習 CSS 頁面結構佈局
freeCodeCamp - 學習 Web 開發的免費課程。
Flexbox Froggy - 一款可幫助您學習 CSS Flex 的遊戲。
CSS 技巧-Flexbox - Flexbox 完整指南。
Grid Garden - 一個學習 CSS Grid 的遊戲。
CSS 技巧-網格的完整指南 - CSS 網格的全面指南，着重於網格的全部設置父容器和網格子元素。
Learn CSS Grid - Jonathan Suh 撰寫的綜合指南，可幫助您瞭解和學習 CSS Grid Layout。
我可使用 - 最新的瀏覽器支持表，用於支持臺式機和移動 Web 瀏覽器上的前端 Web 技術。
HTML Dog - 簡單明瞭。
Marksheet - 無限數量的教程
ODIN 項目 - 驚人的學習方式。
CSS 效果 - CSS 動畫。
關鍵幀 - 使用可視時間線編輯器建立基本或複雜的 CSS @keyframe 動畫。
Animista - 玩準備好使用 CSS 動畫的集合。
難以上網 - 面向完整初學者的友好 Web 開發教程。
BEM - BEM 命名備忘單。
Autoprefixer - Autoprefixer 是一個 PostCSS 插件，可解析您的 CSS 並添加供應商前綴。
CSS 格式化程序 - 在線 CSS 格式化程序，CSS Beautifier。
佔位符 - 如何使用咱們的佔位符。只需在咱們的 URL 後指定圖像尺寸，您將得到一個佔位符圖像。

📝 在線 IDE，編輯器

📷 圖像資源

Unsplash - 免費圖片和照片。
Pexels - 免費的圖片。 -刪除照片數據-在互聯網上共享照片以前，先從照片中刪除我的數據。
LottieFiles - LottieFiles 是專爲-Lottie 設計的動畫集合-煩擾開發人員的日子已經一去不復返了。
removebg - 刪除圖像背景。
Pixabay - 免費圖片或視頻。

👓 可及性

輔助功能博客-中 - 七個易於實現的準則-設計更易訪問的網站的準則。
可訪問性備忘單 - 通用設計的實用方法，使每一個人均可以訪問您的網站/ webapp。

Windows 的終端

📺YOUTUBE 頻道

🖋 字體和印刷術

Google 字體 - 免費和易於使用的網絡字體的第一資源。
FontPair - 字體對可幫助設計師將 Google 字體配對在一塊兒。漂亮的 Google 字體組合和配對。
Fontjoy - Fontjoy 幫助設計師選擇最佳的字體組合。混合並匹配不一樣的字體以實現完美的配對。
Fonts Arena - 免費字體，高級字體的免費替代品，針對您的研究成果。

🎨 插圖

unDraw - 瀏覽以找到適合您須要的插圖，而後單擊下載。
freepik - 免費的圖形資源。
DrawKit - 手繪矢量插圖和圖標資源，很是適合您的下一個項目。

💧 圖標

Font Awesome - 矢量圖標和社交徽標。
Ionicons - 開源且由 MIT 許可的圖標包。
icons8 - 以 PNG 和 SVG 下載免費圖標。
flaticon - SVG，PSD，PNG，EPS 格式或圖標字體的免費矢量圖標。
簡單圖標 - 1463 個流行品牌的免費 SVG 圖標。

前端框架學習資源

⚡JAVASCRIPT

freeCodeCamp - 最好的免費資源，用於交互式學習 JavaScript。
JavaScript.info - 實用 JavaScript 教程。
JavaScript 設計模式
MDN 的 JavaScript 參考
Eloquent JavaScript - 這是一本有關 JavaScript，編程和數字奇蹟的書。您能夠在此處在線閱讀。
JavaScript30 - 30 天香草 JS 編碼挑戰。在 30 天內使用 30 個教程構建 30 件事。
DOM 操做參考
JavaScript 的工做方式
JavaScript 事件參考
最充分的函數式編程指南 - 使用 JavaScript 進行函數式編程的出色入門。
Functional-Light JavaScript - 本書探討了將函數式編程（FP）應用於 JavaScript 的核心原理。
代碼學校 - 從基礎到最佳實踐。與 JavaScript 相關的不一樣課程。
函數式編程 - 經過使用 map，filter，concatAll，reduce 和 zip 以交互方式學習函數式編程的基本原理。
在線學習 JavaScript - 帶有間隔的重複性抽認卡應用程序的交互式 JavaScript 課程。
Exercism JavaScript Track - Exercism 免費提供我的練習和基於導師的學習。

⚡ React

爲何要 React？

ES2015 +

路由

React Router Docs - 基本

狀態管理

Redux

Redux 入門 - 基本
使用慣用的 Redux 構建 React 應用程序 - 高級

捆綁包

Webpack

Webpack 入門

創建東西

幾個項目構想
React-TodoMVC
引導 React 項目
創建天氣應用
React + Redux 中的 SoundCloud 客戶端 - 關於 React 生態系統的入門知識：1，2 和 3。
使用 JSON Web 令牌（JWT)身份驗證構建 React / Redux 應用
想深刻了解 React 嗎？

🎮API

Quotes REST API - 他們說 So 在數據庫中有超過一百萬條報價，這是世界上最大的此類數據庫。 Quotes API 提供了一種簡單的方法來訪問數據。
OpenWeather - 來自 OpenWeatherMap 的簡單，快速，免費的天氣 API，您能夠訪問當前的天氣數據，每小時，5 天和 16 天的天氣預報。
公共 API - 面向開發人員的 1000 多種免費公共和開放 REST API 的彙總列表。
SWAPI - 《星球大戰》 API。
JSONPlaceholder - 無償使用僞造的在線 REST API 進行測試和原型製做。

⚡NODEJS

Node.js 教程 - Net Ninja 的 Node.js 崩潰課程教程。
您不知道 Node.js
Node 的藝術 - 涵蓋基礎知識的入門教程。
NodeSchool - 您也能夠本身進行互動的自助式講習班。
Node 模式 - 有關與 Node.js 相關的代碼和網絡模式的簡短書籍。
學習 Node - 一個高級培訓課程，用於學習如何使用 Node.js，Express 和 MongoDB 構建應用。
Node Way - 存在用於編寫可維護模塊，可伸縮應用程序和易於閱讀的代碼的 Node.js 最佳實踐和指導原則的完整哲學。
Express.js 安全提示 - 如何保存和保護應用程序。
Awesome Nodejs - 使人愉快的 Node.js 軟件包和資源。
nodebestpractices - 大量的構建 Node 應用程序的最佳實踐。對於大型項目很重要。

😐 學習 GIT

Git 手冊 - Git，GitHub，DVCS，天哪！瞭解 Git 的全部術語和基礎知識。
備忘單 - 保持這些方便！參考表涵蓋了 Git 命令，功能，SVN 遷移和 bash。提供多種語言。
學習 Git 分支 - 直接從 Web 瀏覽器嘗試 Git 命令。擁有一些您即將成爲收藏夾的功能：分支，添加，提交，合併，還原，挑選，從新設置！
可視化 Git - 看看引擎蓋下！使用免費瀏覽模式和一些構建的場景，探索 Git 命令如何影響 Web 瀏覽器中存儲庫的結構。
Git-It - 您已經下載了 Git，如今呢？將 Git-It 下載到您的計算機上，您將得到一個動手教程，該教程將教您直接在本地環境中使用真實存儲庫上的命令來使用 Git。