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

wscats發表於2021-11-29
Web前端筆記

文章和教程

部落格

  • 前端回憶錄 | 前端筆記本 - 一個前端博主記錄的心得和總結
  • 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 網格佈局的可視備忘單。

? 如何運作？

對於 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 - 免費圖片或視訊。

? 可及性

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

⚡ React

為什麼要 React？

ES2015 +

路由

狀態管理

Redux

捆綁包

Webpack

建立東西

?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。

實戰案例

準備面試（問題）

相關文章