零基礎如何迅速學習前端？

12-25

由於從事新媒體推廣工作，現在在移動端流行「高大上」的HTML5。作為代碼零基礎的我，該如何迅速學習HTML（或HTML5）？不要求學會做遊戲應用這些，只想學會做簡單的滑動頁面、跳轉即可。
或者可以提供一些快速有效的入門書籍或者視頻、技巧也可以，謝過各位大神~

從題主的問題來看，

「由於從事新媒體推廣工作，現在在移動端流行「高大上」的HTML5。作為代碼零基礎的我，該如何迅速學習HTML（或HTML5）？」

所以下面分兩種情況來分析：

1.如果題主零基礎的情況下想去學代碼的話，就得把HTML5、CSS3、JavaScript三個一口氣都學了，這樣就不需要各種求供應商和技術了。

這種情況下建議題主在網上學習+課本學習同步進行：

網上學習強推網易雲課堂上浙大的翁愷老師的計算機課程。

其一，翁愷老師本身就是高校裡面的人氣教師，講課簡明生動，很適合初學者入門【之前學過一些計算機課程，因為太過晦澀，對程序語言甚至有點心理陰影，所以初學者學的課程還是要謹慎選擇】。

其二，翁愷老師在網上授課已經有蠻多經驗了，也不會出現什麼講課中途遮住了PPT，代碼看不清等等詭異的問題。。。

其三，網易雲課堂上的三門課程都已經整理完畢，方便學習，平台也比較穩定。而且這些課程完全免費，每門課都有幾萬人在學【賣不了吃虧也買不了上當=、=

HTML5入門：HTML5入門 - 網易雲課堂

CSS3：CSS3 - 網易雲課堂

JavaScript：JavaScript - 網易雲課堂

書的話，還是推薦一些經典的吧：

《Head first HTMLCSS》：入門級必備，難度合適

《JavaScript DOM編程藝術》：同樣入門級教材

《HTML5權威指南》：內容全面，進階階段可看

《JavaScript高級程序設計》：JS聖經，殿堂級教材

建議交錯搭配學習，加深理解，不過這樣學習來比較費時間就對了

2、如果只需要能製作出簡單的H5頁面，就可以繞過代碼這關，善用各類H5製作平台，應該都能輕鬆上手。

Maka：MAKA.im | 簡單、強大的HTML5創作工具

印象中是最早開始做H5頁面的平台之一，目前只有web端沒有移動端，但網頁上各類模板齊全，動態效果和交互也做得不錯，只要自己填充內容就好，簡單易上手。

初頁：初頁 - 優質H5手機頁、微信海報

和maka不同，專門做移動端的，也有一些預設的模板，支持添加文字、圖片、音樂等，方便在手機上直接製作，勝在速度。

秀製作：秀米 XIUMI

來自微信公眾號排版常用的工具秀米出品，可以和秀米配合使用，目前也只有web端。

Epub360意派：Epub360意派-專業級H5微場景設計平台

模板不多，但自由度較高，適合有設計感的設計師來操刀製作，發揮交互功能，不過只能免費製作10個，而且作品還自帶logo，有ipad版和web版。

先看題主問題：

零基礎如何迅速學習HTML（或HTML5）

關鍵詞：`零基礎`，`迅速`，`HTML`

可能題主不知道，單純HTML是沒有意義的，必須配合CSS來產生樣式、配合js做出動效才有實際價值，所以這裡的`HTML`其實題主指的是`前端開發`吧。

基礎

既然是零基礎，那就要先補補基礎了。

目前前端的熱門使得國內外的前端學習資源大量湧現，現在只要能上網就可以獲取到質量相當高的學習資源。這裡基礎學習推薦 [菜鳥網](菜鳥教程 - 學的不僅是技術，更是夢想！)。

前端的基礎無外乎HTML、CSS、js三類，HTML控制內容、CSS控制表現、js控制動效。由於題主的要求中還有`迅速`這個要求，所以基礎學習的時間分配可以有側重：

1. HTML、HTML5標籤過一遍：大概2天。不要求對每個標籤的每個屬性都了如指掌，知道什麼情況下用什麼標籤就足矣，死記硬背也沒什麼意義，後面用的多了自然就熟了。
2. CSS、CSS3：也還是整體先過一遍：大概3天。重點關注選擇器語法、選擇器優先順序計算，要寫出高效簡潔的CSS，其實也就是看選擇器寫得好不好而已。
3. 了解常見布局：大概2天。熟悉一下常見的2列3列自適應布局方案，各種居中，各種行列的實現方式有哪些，響應式布局的實現方式等。
4. 模仿幾個PC、移動端網頁：7天。學編程主要是靠練習，前面學的都是比較零散的細節，這時候可以找一個比較簡潔的網站去模仿它的靜態頁面。這個時候的重點不是某個CSS屬性的用法，而是要看一下一個網站的HTML結構是怎樣的，

CSS樣式是怎麼組織起來的，HTML與CSS是怎麼結合的。多想想為什麼要這樣做，這裡可不可以精簡？別把這些網站想得很厲害，由於它們普遍都經過了幾波人的迭代，一般來說結構都偏複雜的，都是有優化的空間的。

通過以上的學習，基本上拿到一個設計稿你就能做出靜態頁面了。如果你還有不錯的布局意識、良好的色感，基本上你就可以做一個酷炫的靜態頁面去面試前端設計崗位了~

不過等等！是不是漏掉了js呢？

恰恰相反，由於js可以同時控制HTML和CSS，所以js在前端中的重要性其實是高於其他兩位的，而且顯然應該在有了HTML、CSS的基礎上再去學習。

1. 基礎語法：還是可以在[菜鳥網](菜鳥教程 - 學的不僅是技術，更是夢想！)上學習，也可以看看[廖老師的js教程](JavaScript教程)，過一遍也相當快。
2. 重點：事件、DOM操作。這些是js最原始的東西，主要是用來實現交互效果的。
3. 組織代碼：了解函數，了解對象，主要是為了以更好的方式組織你的代碼。不然你一行一行寫下去也行，但完全沒有條理，日後也無法改動。寫代碼要養成一個好習慣，除了考慮怎麼實現，還要考慮怎麼去組織代碼，把你的代碼弄得條理分明。

進階

通過以上基礎學習後，基本上都能滿足產品大人的常規需求了。下面就要往炫酷、屌炸天的方向去努力了：

1. 調試工具：極度推薦chrome！抱歉，其實應該在最開始推薦的。在寫CSS的時候，你還是寫一下保存然後打開瀏覽器看效果？用用chrome開發者工具吧，CSS實時調整，爽！js各種調試，爽！[chrom使用教程]

(Chrome開發者工具不完全指南（一、基礎功能篇）)
2. 性能意識：之前的基礎學習都是為了做出一個東西，而現在你應該要想著做出一個高性能的東西。性能主要有兩方面：載入速度以及頁面執行效率（多指動畫），直觀點說就是卡不卡。這裡可以看看騰訊前端項目組的總結：[移動H5

前端性能優化指南](移動H5前端性能優化指南)
3. 代碼規範：基礎部分的代碼組織沒有著重強調，是因為那個時候了解太少，以實現為目的。現在進階階段就要考慮使用面向對象的方式來組織代碼了，而且還要有模塊化工程化的意識。可以從js看起[阮一峰的模塊化教程]

(Javascript模塊化編程（一）：模塊的寫法)，主要是理解這麼個思路，日後語言層就會支持。
4. 了解一下伺服器開發，做前端總是要跟伺服器配合的，你要是完全不懂後端，那就簡直無法交流了呀。

最後說一點：時刻緊跟技術風向！不是要你去跟風，起碼你要知道風吹到哪裡去。

我將以這個回答為基礎，整理一下自己的學習歷程

對於一個習慣了產品分析的PM來說，學習資料的選擇是非常重要的，它決定著學習的效率和效果，以我感性認識來講，在計算機語言教學理論和實操上，國外要比國內好得多，而這方面好的翻譯作品是極為有限的，所以利用自己英語還算OK的前提下，找一些比較優質的國外資料，對學習會更有幫助（在這裡順帶吐槽一下國內大學毀人不倦的教材）
-------------------------------------------------------------------------------------------------------------------------------------------

一、克服恐懼，建立自信
對紛繁複雜的代碼的恐懼，往往成為很多意志不堅定的學習者的絆腳石
首先你要有明確的意識：
1. 代碼就是搭積木，作品可簡單可複雜，開始搭起來肯定奇醜無比，隨著對不同積木元素特性的持續深入的了解，會搭出更漂亮的作品。所以開始不要要求太高，只需要簡單粗暴可用即可。
2. 敲代碼對於中國人來講幾乎沒有什麼智商阻礙可言，保持耐心+細心+持之以恆。

二、初步了解HTML5、CSS、Javascript
大概花3天時間，在W3C school上大致瀏覽下以上幾種語言的定義、大致內容等，做到有初步印象
鏈接：HTML 系列教程
W3C 教程有幾個優點：
1. 每個頁面都有對應的實例，這樣可以一邊看一邊自己手動改代碼查看結果；
2. 在最短時間內瀏覽整個語言的內容框架，這樣到後面案例學習過程中，看到不懂的標籤，可以快速地查找到詳細內容；

三、用CodeCademy上手
CodeCademy是我在比較了國內外眾多H5學習教程後，最後確定採納的學習方案。它有幾個核心優勢，是我在其他中文教程網站上沒有看到的：
1. 通過一個案例由淺入深的過程，解鎖更多代碼語言；
2. 按部就班的教程，讓我無捷徑可抄，保證了知識體系的完整性；
3. 核心練習內容的篩選，讓學習者更快地掌握核心/最高頻應用的H5知識；
4. 大量的解釋說明，如針對具體標籤的字面解釋和通俗解釋（太重要了）、縮寫的解釋；
5. 知識體系梳理；充分利用麥肯錫MECE分析法，將知識脈絡梳理清，省得學員盲人摸象不著邊際

CodeCademy教程鏈接：Make a Website
截了幾張圖，大家可以看這個教程的特色：
-----------------------------------------------------------------------------------------------------------------------------------------

注意左側欄目里，解說會用很直白的語言告訴你—「標題就像報紙中的新聞標題一樣，你會首先注意到它們因為相對於正文來講，它們的字體更大，且有加粗效果」關於他對元素的理解，是不是很有趣易懂？

---------------------------------------------------------------------------------------------------------------------------------

左側欄其實分為「learn」、「instructions」、「report a bug」兩部分，分別是學習、指導和報錯，指導部分會告訴你如何進行有效的練習，還細心地提示你「一定要自己把代碼敲下來，不要偷懶複製粘貼！」，是不是很人性化？總之照著做就對了！

---------------------------------------------------------------------------------------------------------------------------------

instructions沒有完成的話，無法點擊「next」，幫助新手克服惰性，更人性化又沒有！↓↓↓

---------------------------------------------------------------------------------------------------------------------------------

學習完到一定階段還會給徽章，不會讓人覺得「學無止境」↓↓↓

另外注意屏幕右側，關於「父元素」和「子元素」的標註，非常清晰，這在國內的教程中是很少見的↑↑↑
---------------------------------------------------------------------------------------------------------------------------------

待續...收藏前請點個贊哈

我更新的比較慢，有興趣繼續深入的，可以先看看這個前端小夥子的學習歷程：https://medium.freecodecamp.com/from-zero-to-front-end-hero-part-1-7d4f7f0bff02#.untubom74

書就不必了，先從www.w3schools.com入門，之後各種雜七雜八的問題百度足矣。

去幕課網看視頻

其實你這個問題在網上有很多答案。我建議你先Google或者百度它。
World Wide Web Consortium (W3C) 是我最推薦去的地方。HTML5在HTML5。
實在需要點書的話我覺得你可以看一下這個問題：有哪些關於前端開發技術（HTML、CSS 和 JavaScript 等）的值得推薦的書籍？ - 書籍推薦
把這裡面的前幾個答案看完你或許會有新的收穫。
但是我覺得單單HTML或者HTML5的知識不夠應付一些實際情況。HTML+CSS+JS最好一塊兒學。
英語不好且沒有編程基礎的話，我和前面的各位一樣推薦：w3school 在線教程

推薦個網站：Vxplo，可以在線製作你想要的互動效果，還有教程。

http://lynda.com提供了很多不錯的課程。
HTML Essential Training很適合入門，另外還有一些HTML5的前沿技術API的專題，建議從基礎開始，循序漸進。
課程是視頻形式，且作者會根據需要更新自己嗯課程，但又不像普通的公開課視頻，一個課程的每個視頻都不會超過10分鐘，不會出現像公開課看久了枯燥的狀況。
關於下載的問題，一般在kickass.to可以搜索到

先說一個免費的網站，慕課網有完整的教程。
每個例子都去實踐。把HTML+CSS+JavaScript部分基本學完。例子也學完。
但是感覺還是不能開發什麼東西。然後百度前端技術學院！可能不是開放時間。不過沒關係。裡面內容可以去實踐。
一個一個人物敲過去。應該就有還不錯的水平了。繼續學習吧。

個人意見，如果方向是做遊戲，那還是從頭去看HTML5規範和JS語言。如果只是想做簡單的滑動頁面，只需要用工具就可以了，簡單的比如MAKA，易企秀等，Flash設計師可以用http://mugeda.com。

想學習前端HTML5開發少走彎路？只能說學習沒有捷徑，但可以找到一個適合自己正確的學習方法。萬事熟能生巧，學html5開發編代碼也是一樣的道理，遵循以下幾點，想學不會都難，簡直就是簡單粗暴。

…………………………………………開啟R模式—放大招………………………………………………

一、多看HTML代碼

HTML代碼第一步就是分析與觀看，第一步是一個熟悉的過程，通過第一步的看要了解到HTML代碼的組成部分，比如剛開始在學習超鏈接的時候就先分析超鏈接的前面是什麼字母，他需不需要在後面帶括弧，為什麼他的代碼中有一個等號，這就需要掌握看的步驟了。為了更方便自己學習可以利用觀看相關HTML5開發視頻教程，有老師的講解會理解的更快（這點很重要，好過自己無腦摸索）。

二、多練HTML代碼

在記憶了很多HTML代碼之後就要學會利用這些代碼，可以在網上搜索HTML在線編輯工具，也可以下載一款免費的HTML編輯軟體，下載完成之後先打開一個小網站，將網站的網頁與網站先看一下，最後我們就要開始一步一步的練習了，企業建議可以採取對比練習法，即是一行一行的練習HTML代碼，寫完了標題的代碼，就可以與網站的源代碼進行對比，如果有不對的地方就修改，時間長了HTML代碼寫法水平也會不斷的提高。

三、多記HTML代碼

光學會看與練並不行，那樣的東西最終還是別人的，學習HTML代碼最重要的一個過程就是記，首先我們要記HTML代碼最基本的網頁組成部分，比如說顏色如何表示、結構排序如何表示、超鏈接如何表示、關鍵詞與標題等等如何表示，而這些東西我們都必須將之記憶在大腦之中，通過記憶這個過程要讓自己的頭腦中有豐富的HTML代碼可以隨時利用。

………………………………………………R模式完畢……………………………………………………

零基礎對於代碼的學習記憶量很重要，正所謂讀書破萬卷，下筆如有神。寫代碼也是一樣，多寫、多練、多憶，好過再多的理論。知道了學習的方法，等於掌握了成功的秘訣，但這還不足以萬事具備，新手學習，最重要的還需要制定一條完整的學習線路。這樣學習起來效率是大大地好。

學習前端開發HTML5新手大致要分為6大階段：

第一階段前端頁面重構
第二階段 JavaScript高級程序設計
第三階段 PC端全棧項目開發
第四階段移動端項目開發
第五階段混合（Hybrid,ReactNative）開發
第六階段 WebApp後端系統開發

作為新手的你，看過以上幾個學習階段是不是一臉蒙蔽，但事實就是如此，每個前端開發學習者都避免不了這些知識的學習，如果想成為一位合格的HTML5開發工程師，就從以上幾個階段學起，相信自己，堅持學下去，你會發現還是TM玩兒遊戲最帶勁（笑臉*開個玩樂）。

首先先打好html,css基礎，html5大部分是結合javascript用，網上有不少視頻，慕課網這個比較不錯

《Head First HTML and CSS》，看完再來感謝我，逃

背景……

……………………………………我是一條虛線………………………………………………

為什麼會回復這個剖題呢？

最重要的一點是想找些同道中人，一起自學前端開發(這點比較急…………)

首選申明，我現在也在自學階段，看的是千鋒教學錄視頻，很多都不是免費的，屬於在線學習付費課程，因為有朋友在那裡學習，所以就順理成章成了我的囊中之物，很多是不可以共享的，花錢才可以。

為什麼我不直接去參加培訓呢？這個說來就話長了，當時快畢業的時候本來打算一起去的，但由於掛科太多，需要補考，整的整個人都沒心情了，耽誤了入學，後來由於補考完人家都學快一個月了，去了也跟不上進度了，看了網上貼吧和知乎的很多帖子，很多人都是自學成才的，於是就走上了這條不歸路（一臉蒙蔽）！

………………………………………………這條線有點粗……………………………………

對於沒有編程基礎的初學者，學習HTML5這門語言一定是對的選擇。那麼對於初學者該如何入門這門語言呢？

先認識HTML5

它是什麼，它的發展史，它有什麼優點或者缺點，它的應用價值，發展前景以及HTML5工程師、前端工程師的薪資待遇，社會人才需求量等等。而這些，其實都是應該在你入門這門課之前就應該去了解的。

HTML5語言基礎

很多學習者入手HTML5的動機是做出酷炫的頁面，或《吳亦凡要入伍》這樣爆朋友圈的東西，但是初學者是不能夠有這樣的想法的。學好基礎功，以後才能日行千里啊。初期我們可以試著從以下順序學起。【當然以下大綱也是借用他們的，嘿嘿^_^】

01PC端網站布局

- 前端開發環境介紹（DreamWeaver、 Notepad++、HBuilder)

- HTML基礎，CSS基礎，CSS核心屬性

- CSS樣式層疊，繼承，盒模型

- 容器，溢出及元素類型

- 瀏覽器兼容與寬高自適應

- 定位，錨點與透明

- 圖片整合

- 表格，CSS屬性與濾鏡

- CSS優化

02HTML5+CSS3基礎

- HTML5新增的元素與屬性

- 表單域增強元素

- CSS3選擇器

- 文字字體相關樣式

- CSS3位移與變形處理

- CSS3 2D轉換與過度動畫

- CSS3 3D轉換與關鍵幀動畫

[才學css，都一個多月了，學習進度有點慢，很多問題一卡就是很久，朋友有時間才能請教一下，平時也不好意思多打擾，估計學完一年就過去了，在想要不要堅持下去]

- 彈性盒模型

- 媒體查詢

- 響應式設計

03WebApp頁面布局

- 移動端頁面設計規範

- 移動端切圖

- 文字流式/控制項彈性/圖片等比例/特殊設計的100%布局

- 等比縮放布局

- viewport/meta

- rem/vw的使用

- flexbox詳解

- 移動 web特別樣式處理（reset, 1px border, 高清圖片）

04原生 JavaScript交互功能開發

基本語法

- 循環語句

- 函數與數組

- String與 Date

- BOM與 DOM

- 事件

- 拖拽效果

- cookie存儲

- 正則表達式

- Ajax

- 面向對象基礎

- 運動與遊戲開發

05面向對象進階與 ES5/ES6應用

- Promise/A+

- 設計模式（觀察者模式等）

- 原型鏈

- 構造函數

- 執行上下文棧與執行上下文

- 變數對象與活動對象

- 作用域鏈

- 閉包

- this

- ES5

- ES6

06JavaScript工具庫自主研發

- DOM庫

- 事件庫

- AJAX庫

- 原型和繼承庫

07jQuery經典交互特效開發

- jQuery框架介紹

- jQuery插件擴展原理及自定製設計

- 時間軸特效

- tab頁面切換效果

- 網頁定位導航特效

- 滑動門特效

- 焦點圖輪播特效

- 導航條菜單效果

- 瀑布流特效

- 彈出層效果

- 倒計時效果

- 抽獎效果

基礎研究學習完了可以進入項目開發：

01 PC端全棧

02 移動端項目開發

03 混合（Hybrid,ReactNative）開發

04 WebApp後端系統開發

基本這一套HTML5全棧你就完成了。

我現在還關注了公眾號，還有相關教程或是在線答疑很方便：qianfengh5

總結了以下幾點學習方法，也是很多前輩用過的，感覺還很有道理，需要堅持才行:

1、學習的方式

可以按照本文或找一些HTML5學習線路圖或全套基礎視頻、進階視頻，有規劃合理的學習。每個階段的內容都可以去搜索一些視頻來學習。現在免費的視頻很多，基礎的就更多了。公開課滿屏幕啊。如果自己在學習或上班，沒有時間跟直播，可以從一些公眾號、QQ群獲取一些網盤視頻下載下來自學。這些都是不錯選擇。

2、另外可以參考些入門的書籍。

網上搜索，很多HTML5技術交流群也會有推薦。也去技術博客和論壇看一些大牛的筆記。和自己的筆記做個對比，有什麼不足的地方去補充，完善。

3、另外學習的過程，要不斷的堅持做題和練習。

必須要敲起來把代碼。代碼孽我千百遍我待代碼如初戀。代碼不敲是記不住的。不要一門心思的往下看。如果基礎學不好，記不住，就甭想做題做項目了。所以要有耐心，不要貪心，不要太著急。除非你有更好的老師教導你。

4、另外還有個不得不提的問題，就是英語。

對於英語還ok的學習者來說，學習每一門語言的態度，就帶上你當時學習英語的耐心和毅力。如果英語差一些的初學者，正好利用敲代碼的機會也努力學習一些常用的英語單詞。這樣看來，其實是一件很互補的事情。

以上幾點學習方法相互共勉，自學真的是需要很大的動力才可以。有沒有一起自學的，能不能加我一起啊，快沒動力了。

不多說了。

任何學歷都可以學習html5，只要對設計感興趣，熱衷於它就可以。適合接觸新的知識和想法。所以只要對此專業感興趣，認真學習就可以學好

?B站搜索UP主：星月愛學習
有視頻教程
清晰明了

我是從慕課網和w3c開始的

W3school . com

如果題主以後不打算以此為職業，單單只是為了做一點推廣，並且是簡單的推廣效果頁，個人認為並不需要去專業系統的學習html，在線的H5生成平台或者使用一些比較可視化的設計軟體來實現。
第三方在線h5製作平台，比如：易企秀，epub360 等等···基本上拖拖拽拽敲敲打打就完成了。
簡單快速上手的軟體，比如：axure RP，也不是不可以,簡單而粗暴。再不濟 phtoshop 自動導出。
mac平台上的軟體，比如：Sparkle flux Hype……基本上拖拖拽拽敲敲打打就完成了。

隨著互聯網的深入發展，前端開發工程師一躍成為市場上非常搶手的人才。很多同學，包括以前做UI的、Java的、或者對於IT完全零基礎的同學都想學習前端。

本文是寫給那些想自學前端的朋友，剛開始學習前端，都不知道怎麼下手的，當然學習中有個大神指導，或者報個好的培訓班學習更快些，平時自學都很難學到的經驗等都可以從中學習到。但你如果沒有那麼好的運氣或者只想自學，那也就靠你自己的毅力和堅持了，學習前端開發有時候是很枯燥的一件事。

想要從事WEB前端的朋友，首先要想清楚自己開發的側重點，是web前端開發，還是後端開發。定位好自己的角色再有針對性的學習。web前端開發，也分三六、九等，職位有比如網頁設計師，前端工程師、前端架構師、資深前端開發工程師等等，當然，你的技術與你的薪水也是掛鉤的，有的只是普普通通的兩三千的月薪，而有的可以達到五位數甚至更高，這就是差距。

自學前端，百度是我們的最好的老師，有時候百度我們的問題也是有技巧的，搜索的方式不同，搜索的結果展現也就不盡相同，這個使用多了，也就明白了。如果百度也解決不了你的問題，可以去群里交流討論，總能從別人那裡得到經驗。

前期使用的寫代碼的開發工具，最好不要用帶有提示性的工具，例如：Dreamweaver、sublime text等，如果你使用這些工具時，當你有一天用text文本離開了提示工具寫時，你會不知道如何下手了，我前期使用的是Editplus，感覺還挺不錯的，前期主要記住些代碼就可以了，記也不要刻意的去死記硬背，只要平時寫的案例多也就不自然的就記住了，其他的一些不常用代碼只要在腦海中有這個映象，知道是做什麼的，就算不會寫，百度一下就出來了，高手平時都不記代碼。在平時學習很多人都會問：「我不會英語能學會前端嗎？」，所以常用標籤也就那麼幾個，不需要的刻意去記，所以學習的方法思維很重要。

瀏覽器開發者工具，在Web開發者中，Google Chrome是使用最廣泛的瀏覽器。滑鼠在網頁上某處點擊右鍵選擇檢查（下圖）會出現開發者工具，或者直接F12鍵，和shift+ctrl+i，方便我們查看代碼的，我們看其它網站的代碼能從中學習他們的布局思維及代碼效果。開發者工具的這些功能我就不一一說了，告訴你學習思維。自己實踐，這些使用多了也就熟練了，沒事的時候多去搗鼓搗鼓，用熟練了能幫助我們解決很大的忙，在學習js的時候，能通過console報的錯，能幫助我們找到解決問題的原因，不會再因為為什麼不顯示或者為什麼不執行而傷腦筋了。

雖然一下扯得有點多，但這些確實就是你未來將會遇到的。你並不需要全部掌握它們，但是卻多多益善；你也可以專精在某幾個方面，這已經足以讓你成為非常專業的前端工程師。