一個非常好的問題。先解釋下Web前端開發的新發展。

隨著移動互聯網的發展，前端開發成為重點。移動端有多個平臺，Android，iOS，微信小程序，支付寶小程序，還有不斷出現的新操作系統，比如阿里YunOS，華為鴻蒙，等等。

為了支持這些平臺和系統，越來越多的應用開始使用H5跨平臺架構，現在有個新名詞叫做“大前端”。

一，H5跨平臺開發

這時的H5前端開發已經不再是單單的網頁開發了，而是前端應用開發。具體到H5 Hybrid架構，常用三劍客：HTML, css, JavaScript

1) HTML和css是頁面設計，沒有代碼邏輯

2) JavaScript編程，還有其它衍生語言，比如常用的TypeScript

JavaScript是一種腳本語言，由解釋器加載執行，常用在網頁前端動態展示、和服務后端交互等場景。接下來重點介紹JavaScript開發。

二，學習階段和時間計劃

1）編程基礎，一到兩周

學習JavaScript語言基礎，掌握基本的編程方法。如果對著課本教程學習比較枯燥，難以堅持，那么可以使用網上的一些學習練手資源，邊學習邊動手，比如HackerRank

2）開發框架，一到兩月

JavaScript前端開發有很多成熟的框架可用，比如JQuery, AngularJS，React，還有前后端都跑通的NoteJS。阿里開源框架Ant Design Pro是一個功能完善的腳手架，推薦新學者練手。

新手學習時，推薦當前普遍使用的Top3開發框架，太新或者太舊的都不適合用來學習練手。

3）項目經驗，一到兩年

學習的最終目的是學以致用，在實際項目中積累經驗，不斷提升。有了一定技術基礎后，推薦嘗試參與開源項目，在開發功能、提交代碼的過程中，提升非常快。而且開源項目經驗，和工作經驗一樣，應聘時非常受歡迎。

我是工作多年的Web應用架構師，歡迎關注我，了解更多IT專業知識。

前言

學習Web前端開發，需要的基本條件就是一根網線+一臺電腦。對于想要學習Web前端的同學，可以按以下步驟來進行學習。

熟悉HTML

HTML就猶如人的骨架，是一個頁面的基本組成。HTML所需要學習的內容就是HTML標簽。標簽都是由開始標簽和結束標簽構成，同時標簽也會有一系列的屬性。如下所示：

運行效果如下所示：

推薦閱讀書籍《HTML＆XHTML權威指南》

熟悉CSS

CSS猶如人的膚色，CSS用來確定HTML標簽各位置的擺放以及界面的視覺效果，比如標簽的大小，字體顏色等設置。代碼示例如下：

運行效果如下：

推薦閱讀書籍《CSS權威指南》

熟悉JavaScript

JavaScript猶如人的血液，正因有了血液的流動，人才有活力，正因有了JavaScript，頁面才有了交互。代碼示例如下：

運行結果如下：

JavaScript推薦閱讀數據《JavaScript高級程序設計》

組件庫和JavaScript框架

有了前面三步，我們就掌握了Web前端開發的基礎了。但在實際工作開發中，為了提高開發工作效率，我們還需要掌握一套組件庫和對應的JavaScript框架。

較為流行的組合有兩大類：element組件庫+Vue框架 和 Ant Design組件庫 + React框架。但在國內的公司當中，element組件庫 + Vue框架的這種組合使用更多一些，所以也推薦初學者可以先掌握Element組件庫 + Vue框架的方式來進行學習。

總結

以上就是學習Web前端的步驟和相關資料，希望能幫到有想法進入Web前端的小伙伴們。如有其他疑問，也可關注私信與我。如果覺得問題文章不錯，歡迎大家關注轉發哦！

關注我，不定期分享好玩科技知識，帶大家一起體會探索科技的那份獨有思考和樂趣。

我是一個有10年項目架構經驗的java軟件工程師，歡迎關注我，了解更多java前沿技術!目前都使用微服務實現模塊化Web應用。