有前端的大佬嗎？我想自學該怎麼開始。各位大佬指點一下好嗎？
看樓主的問題應該是剛打算開始學前端吧，不知道你現在資料這準備怎麼樣了，我送你一份我上次看的資料（短鏈接如果失效的話，單獨找我要）
鏈接:https://pan.baidu.com/s/1KdYGkrweQxPHht47yyyN2Q
提取碼:y3qd
前端相比較後端而言是簡單的，不過要說它簡單，單js這部分就會讓很多人頭大，前端的難點有：
js，它是三大基礎最難的，這部分學的概念太多，記不住，像基本語法，內置對象、DOM、閉包、函數庫等等，自學的話沒人指點還真挺困難的
vue，是目前比較流行的前端框架，這部分的數據驅動，狀態管理，還有工程量大無從下手是難點
node.js，它能使前端不再局限於客戶端，還可以用來做伺服器端，要求一定要有js基礎，懂資料庫處理，是不是聽起來就不簡單
回歸正題，那要怎麼開始學習呢，給以下幾點建議
1.做好時間規劃，一定要每天規定自己能學多長時間，一般建議純自學，每天要保證4-5小時的學習時間，才不會影響整體進度。
2.做學習計劃表，三大基礎多長時間學完，框架多長時間學完，什麼時間做一個項目，這點很重要，很多人就是佛系學習，到最後學了三四個月，發現css還沒學完。
3.別總想著學會之後會怎樣，先設定小目標，腳踏實地的去實現，每一個小目標實現之後，你會發現離offer越來越近了。
4.儘可能找個組織，自學先不說自律不自律的問題，就出現一個超低級的bug，思維陷進去可能就夠你琢磨一小天，找個組織，把問題拋出去，別人一句話可能就點醒你了。
5.多啰嗦一點也就是多敲代碼，一名優秀的工程師就是在敲代碼中成長起來的，每天都要敲，切記只看視頻，不動手。
最後不管你是本專業的夥伴還是想轉行的夥伴 ，只要你下定決心要學習前端，想要在前端中給自己謀求一份發展，我都歡迎你加入我的前端自學團，我還會組織一些實戰項目，到時候會嚴格要求大家做項目 ~
先來看 github 上一大神製作的路線圖：
Learn to become a modern frontend developer?roadmap.sh
核心技能
第一步就是把前端的核心裝備拿下，它們分別是 html, css 和 JavaScript。前端的初衷是開發網頁來讓其他人看的，可以向全世界分享信息，直到最近幾年才誕生了利用這些核心知識去開發移動 APP、小程序等多終端前端應用的工具，學好核心是前端工程師必備的素養。下邊就是核心技能的簡介：
HTML
HTML 是用來編寫網頁代碼結構的，它有一系列的標籤用於顯示不同的頁面元素，比如用 & 顯示一個超鏈接，& 顯示一張圖片，就跟寫一個 word 文檔一樣，只是單純用 html 只能寫內容，不能進行排版和美化樣式，如果讓網頁變得漂亮，需要 CSS。
學習 HTML ：指南與教程
書籍：Web 開發經典叢書：HTML CSS 設計與構建網站
CSS
CSS 是用來美化 HTML 編寫的頁面的，通過一些語法選擇特定的 html 標籤，然後用一些屬性來給它們添加樣式，比如文字顏色，背景，位置，邊距，定位等等，還可以添加動畫效果讓頁面顯示的栩栩如生~。重點要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。
CSS - 設計 web
書籍：CSS 權威指南（第四版）（上下冊）
JavaScript
在寫完 html、css 之後，咱們就可以寫漂亮的頁面了，那麼接下來就是需要學習 JavaScript，讓網頁能和人進行互動，比如點擊按鈕彈出個對話框，處理用戶輸入的表單信息，添加一些複雜的動畫，使用 ajax 載入遠程數據等等。它可以直接操作 HTML 元素，給網頁開發提供了無限可能~這裡咱們一定要把 JavaScript 基礎語法掌握紮實，可以觀看我 B 站上的 JavaScript 視頻：
JavaScript 基礎教程 | 2020 年最新
JavaScript — 用戶端動態腳本
書籍：JavaScript 權威指南（第 6 版）
書籍：Eloquent JavaScript 3rd edition (包括 HTTP)
網路基礎
現在咱們可以做成型的網站了，那咱們該如何讓全世界的人看到咱們的傑作呢？那這裡網路基礎就派上用場了，不需要精通，只需要掌握幾個基本概念就好了。
域名
訪問網站咱們都知道需要使用 url (網址)，比如 www.baidu.com，這個 baidu.com 就是域名，域名可以從域名提供商購買，比如阿里雲。在購買域名之後要通過 DNS 解析服務把它對應到一台伺服器的 IP 地址上。
什麼是域名？
伺服器
伺服器就是一台安裝了伺服器程序的電腦。用戶用域名訪問一個網站時，會有 DNS 解析服務把域名解析成 IP，再通過 IP 找到相應的伺服器，伺服器程序就把網站內容傳遞給用戶的瀏覽器。咱們的網站就部署在伺服器上，它也是從提供商處購買
Linux
伺服器的操作系統一般是 linux，它可以沒有用戶界面，可以節省很多 CPU 和內存資源，這樣就要求咱們掌握一些常用命令，比如創建文件，切換目錄，複製和移動文件，顯示文件列表等。另外訪問伺服器常用的工具是 SSH 和 FTP，咱們需要通過這幾個工具來從自己的電腦連接到遠程的伺服器，然後安裝伺服器程序和上傳網站程序。
書籍：鳥哥的 Linux 私房菜 基礎學習篇(第 4 版)
伺服器程序
常用的伺服器程序有 apache、nginx，它們都是基於 HTTP 協議的，有了伺服器程序，網站文件比如 html 頁面才能發送到用戶的瀏覽器上。
Nginx 中文文檔
apache 中文文檔
HTTP 協議
協議好比如說醫生開藥方，寫的龍飛鳳舞，但是藥房藥師居然都看得懂~這個可以說他們都有固定套路來理解對方~那麼在計算機領域，協議就是電腦之間用來交換數據的規則。HTTP 協議是用來在網路上交換和傳輸數據的，比如說咱們的網站 html、css 和 js 就是通過這個 http 協議來發送到瀏覽器的。
HTTP 概述
進階技能
上邊核心技能都掌握了的話，你就已經超過一半的前端工程師了，接下來就是成長為更高級一些的前端工程師，這裡的目的是除了理解一些高級的概念之外，還要提高開發效率，也就是用到所謂的框架。
響應式布局
現在手機和平板差不多要比電腦都流行了，所以一個網站要適應不同尺寸的屏幕，有這種特性的網站就叫做響應式網站。實現響應式主要就是通過 css 的 media query 針對不同的屏幕寬度，編寫不同的 CSS 樣式。
響應式 Web 設計
兼容性調整
網站需要在不同的操作系統和瀏覽器下都要保持一致。對於 CSS，可以使用 css hack 來對不同的瀏覽器載入不同的樣式。 對於 JavaScript，則可以使用 Babel 等轉化工具，把新的 JS 語法轉換成舊的，或者使用 polyfill 加上瀏覽器不支持的語法。
跨瀏覽器測試介紹
UI 框架
UI 框架提供了頁面的基本 UI 樣式和布局系統，比如按鈕、對話框、輪播圖，省了自己去開發，常用的有 Boostrap, Semantic UI， Tailwind CSS。
Bootstrap
Semantic UI
Tailwind CSS
SEO
SEO 全稱是 Search Engine Optimization，搜索引擎優化。咱們常見的百度、谷歌這些搜索引擎會定期爬取線上的網站內容，然後進行收錄，網站內容質量優秀、結構良好、訪問量大的還會排名比較靠前。為了給自己的網站增加曝光量，這就需要針對搜索引擎給咱們的網站添加一些內容，比如關鍵字。
如何帶著 SEO 的思維將 MDN 的 Web 文檔寫的更符合搜索引擎展現
SEO 基礎知識教程
Node.js、npm / yarn
因為 Node.js 的出現，JavaScript 的開發可以脫離瀏覽器了，這樣就產生了好多藉助 Node.js 來寫前端代碼的方式，然後用相應的打包工具去打包成瀏覽器可用的代碼。這樣的好處是，咱們可以充分利用 node.js 的包管理工具來方便開發，比如使用 npm 或者 yarn 管理項目的依賴。
Node.js
npm
yarn
書籍：Node.js 實戰 第 2 版
CSS 預編譯
咱們在寫 CSS 的時候可能一段代碼要重複好多次，寫一連串的選擇器，重複的屬性組合等等。這時 CSS 預編譯工具就派上用場了，比如 SASS、LESS，它們支持 CSS 選擇器嵌套、定義變數、Mixins、函數、繼承等等。
SASS
LESS
自動化工具
自動化工具有 grunt、gulp 等，可以監控文件變動，或者做一些自動化操作，比如編譯 SASS 或 LESS 的代碼為 CSS 等。
gulp
grunt
React, Vue, Angular
這裡就不得不提當下十分熱門的前端開發框架了，React、Vue、Angular 三大件。它們都提供組件化開發的方式，這就讓前端開發模式發生了巨大的變化，以往以頁面為核心現在轉為了以組件為核心，有了這些組件可以方便的在不頁面進行復用。另外基於狀態的數據管理，也讓改變組件狀態變得十分簡單。這三個框架可以都學，但是工作中基本上只會用到一個，深入一個就可以了。至於它們的 UI 框架也可以根據工作的需要去學習比如 ant design、element UI 等。
React
Vue
Angular
Ant Design
Element UI
模塊化 CSS
因為 React 等組件化工程的出現，CSS 分散在不同的組件中，很容易因為命名衝突而導致樣式被覆蓋，模塊化的 CSS 開發方式通過使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免這些問題，它們也提供了其它類似 SASS/LESS 的功能。
CSS Modules
styled-components
工程化工具
所謂工程化的工具，也就是打包工具，前端項目的各種 JS、SASS 源代碼可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它們打包成一個單一的 js 和 css 文件，它們支持按需打包，用到的代碼才會打包到最終產品上，沒用到的則不會。另外圖片等靜態資源也可以指定規則進行打包。
webpack
parcel
測試工具
沒有人想要不健壯的代碼，在改動一個地方之後引起全局崩塌~，咱們寫好的組件需要進行詳盡的測試才能確保不出問題，另外也方便咱們工程師節省時間，因為只要添加的新功能保證測試結果還是正常，那麼就不需要再人工去測試了。常用的 UI 測試工具有 jest, enzyme 等等。
Jest
Enzyme
Puppeteer
高級技能
在把編寫網頁的技能掌握熟練以後，就要從多端開始拓展自己的技能了，另外還要深入已經掌握的技能。
TypeScript
TypeScript 是微軟編寫的一款帶類型的 JavaScript 語言，它的代碼可以編譯成普通的 JavaScript，但是編寫的時候支持強類型，並且支持完全面向對象的形式。它的好處在於帶有了類型之後，代碼更容易維護，適合大型項目的開發。
TypeScript
移動開發
移動開發包括移動的頁面 H5 開發、小程序和移動 APP 開發，好在這些有統一的開發平台，使用 React 或者 Vue 就可以進行一次開發，多平台使用。React 生態的有開發移動 APP 的 React Native，開發多端平台的 taro。 Vue 有多端開發的 uni-app。
React Native
Taro
Uni-App
桌面開發
桌面應用到現在還是有用武之地的，比如音樂軟體，聊天軟體，寫作軟體等等，這些也可以用前端技術開發，具體的工具有 eletron、proton native 等等。
Electron
Proton Native
靜態網站生成工具
靜態網站因為是純 html、css 和 JavaScript 網站，所以擁有最快的速度、對 SEO 搜索引擎優化友好，最適合用於數據不常變動的展示、博客類的網站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。
Hexo
Gatsby
Docusaurus
SSR（服務端渲染）
如果使用 React、Vue 等前端框架開發網站，那麼最終的頁面源代碼是沒有 html 的，因為它們是用 JavaScript 去動態生成 html 代碼，這樣對 SEO 很不利，不過有了 serer side rendering，服務端渲染技術，就可以解決這個問題，它是把 JavaScript 生成好 HTML 之後，再把頁面發送給瀏覽器。常用的有 react 系的 next.js，vue 系的 nuxt.js。
Next.js
Nuxt.js
GraphQL
GraphQL 是一種查詢語言，跟普通的 restful 結構不一樣，它是按照類型來組織數據的，不同的類型之間也會有對應關係，就像數據一樣，前端開發者根據自己的需要編寫 graphql 語句來按需查詢想要的數據，它的這種模式非常適合 React 這種項目結構的開發。
GraphQL
Apollo
Relay
性能優化
性能優化的概念比較廣泛，而且根據應用的用戶量、用戶類別而不同。總體來說就是提高頁面首次載入的時間、動畫執行的效率、事件響應的效率。這些可以通過優化代碼結構、文件大小、DNS 緩存、lazy loading 等來實現。
Web 性能
書籍：Web 性能權威指南
安全
安全也是一個寬泛的概念，要了解 CORS（跨域資源共享）, XSS（跨站腳本攻擊）, CSRF（跨站請求偽造） 等常見安全問題，也要了解 HTTPS 等安全協議，要盡量以周全的形式考慮，不要相信任何用戶的輸入，嚴格檢查需要接收用戶輸入的地方。
Web 安全
書籍：Web 安全測試
工作與團隊技能
工作與團隊技能是在工作中所必備的，無論是初級還是高級前端工程師，這些只要在工作遇到了，就都需要掌握。
Git
Git 是一個分散式的代碼協作工具，幾乎所有的公司都在用。Github 是 git 的一個遠程倉庫，咱們可以把代碼發布到 github 上，既可以作為公開的向全世界展示自己的代碼、進行合作，也可以作為私有的只限自己或者公司內部使用。
Git
Github
書籍：精通 Git 第 2 版
Docker
Docker 是一種新的虛擬化技術，介於虛擬機和操作系統之間，它所用的資源少，並且能自動化管理鏡像的運行環境和集群。因為前後端開發的分離的方式，大型的前端應用也會部署到 Docker 上。
Docker
CI
CI，持續集成，是一個自動化的部署過程，開發人員只需要改動代碼，提交到 git 倉庫，CI 系統會抓取代碼進行打包部署並發布，節省了人工運維的時間。
Jenkins
ESLint 和 Prettier
代碼合作經常會有風格和規範不統一的情況。ESLint 除了可以檢查語法錯誤外，還可以定義開發規範，比如縮進字元的數量、命名方式等，而 prettier 則可以根據一些規範自動格式化代碼。
EsLint
最新技術
下面是一些未來很有可能會火的新技術，提前了解一下。
WebAssembly
Web Assembly 是瀏覽器新支持的編程語言，用於輔助 JavaScript。確切的說，它不是一個編程語言，咱們可以用它的編譯器編譯其它語言，用來編寫更強大的功能，它目前支持 c++和 rust
Web Assembly
Web Components
Web Components 是類似 React、Vue 開發的方式，但是是 JS 原生支持的方式，不再需要依賴額外的庫。它的核心概念有 Custom elements（自定義元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。
Web Components
最佳實踐
在前端開發過程中有一些最佳實踐需要了解，比如 JavaScript 的設計模式、組件設計原則、代碼結構等。
JavaScript 設計模式
持續進步
在掌握了上邊所有技能之後~咱們等級就算滿級了，現在就是真正的開始了，要不斷精進自己的技能。前端技術的發展相比其它技術要快的多，咱們要時常關注一些前端新聞還有業界大佬的博客或微博，自己主動去搜索一些新的前端庫或者設計模式，然後應用到工作中去，這樣才不至於落後。另外，因為好多技術都是外國人寫的，所以要想得到第一手且最準確的消息，一定要把英語學好。一些包和工具的官方文檔就算是靠著翻譯也要把它們看懂，相信我，過不了幾天，你會發現需要查的詞越來越少，閱讀速度也越來越快。
視頻版：
2020年最新前端學習路線_嗶哩嗶哩 (゜-゜)つロ 乾杯~-bilibili?b23.tv
話不多說，直奔主題
自學前端
1、找一套學習前端開發的視頻教程和文檔；最好是最新版的。
Web前端開發HTML/CSS/JavaScript/H5/react_Vuejs教程_web前端開發必會的技能_從入門到精通__前端WEB202002期_嗶哩嗶哩 (゜-゜)つロ 乾杯~-bilibili?www.bilibili.com
對應的視頻文檔：
下載鏈接： https://pan.baidu.com/s/1OlqeBw4K06sVad6yxW2fwA
提取碼: kvnp
2、整理好學習路線。
尚學堂前端學院：前端學習路線圖?zhuanlan.zhihu.com
3、整理一套學習計劃。
比如：每天堅持學習幾個小時、每天要學會幾個知識點、打算多久可以學完等等。
以下幾個回答希望對你學習前端開發有一定的幫助：
- 27歲自學前端可以找到好的工作嗎？
- web前端想拿10K需要會哪些技能？
- 沒基礎的怎麼學習編程才能具備編程能力?
- 零基礎想學程序員一開始有什麼推薦看的書和需要注意的嗎？
- 自學web前端 如何堅持？
- 那些已經工作的程序員，如果學習新的技術或者編程語言，他們是看書自學的還是看視頻？
評論區歡迎補充！
（ps:如果您覺得有用，請點贊轉發，讓更多人看到哦）
發佈於 2020-09-14繼續瀏覽內容
知乎發現更大的世界打開
Chrome繼續
IT鍋爐野野IT培訓套路深，IT學生網求真。前端開發並沒有什麼很艱深難學的東西，想要自學也完全沒有問題，開始是非常容易的，就是html5，css3唄。互聯網上的相關學習資料和教程，一搜一大把，雖然我那時候自學只能看書，不過我知道現在入門的和基礎的視頻課都可以直接免費在線看，有什麼不好開始的呢？如果你想看書的話，我可以給你推薦這一本：
學完這個接下來你就開始學 JavaScript typescript就可以了，你可以去看那個JavaScript權威指南那本書。然後把vue和react兩個框架學到位就可以去找前端的工作了。
我是 @IT鍋爐野野 ，一直想要提前退休的老猿，記得點贊，喜歡收藏加關注。
前端開發並沒有什麼很艱深難學的東西，想要自學也完全沒有問題，開始是非常容易的，就是html5，css3唄。互聯網上的相關學習資料和教程，一搜一大把，雖然我那時候自學只能看書，不過我知道現在入門的和基礎的視頻課都可以直接免費在線看，有什麼不好開始的呢？如果你想看書的話，我可以給你推薦這一本：
學完這個接下來你就開始學 JavaScript typescript就可以了，你可以去看那個JavaScript權威指南那本書。然後把vue和react兩個框架學到位就可以去找前端的工作了。
我是 @IT鍋爐野野 ，一直想要提前退休的老猿，記得點贊，喜歡收藏加關注。
可以看一下這個：
如何系統的自學前端??www.zhihu.com
怎麼樣才能快速的學好前端？?www.zhihu.com
推薦閱讀：
