嘿，大家好。

又和大家見面了，今天給大家盤點一下對於自學web前端程式設計的小夥伴來說，我們所需要準備的工具有哪些。士兵打仗前準備好自己的裝備，才能夠在戰場上更勇猛的發揮。

同樣對於我們學習一樣，工具的好壞或者工具準備的充分與否，直接關係到我們後面學習的效率。

好了，話不多講。讓我們直接進入今天的正題--自學web前端之工具盤點。

對於工具小編想到了以下幾個方面：1.編譯器 2.書籍 3.自學網站

1.編譯器

我們常用的電腦，大概分為win端和Mac版本了。

HTML的編譯器有很多，現在主要介紹一下幾種：

Adobe dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是

美國MACROMEDIA公司開發的集網頁製作和管理網站於一身的所見即所得網頁編輯器，DW是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地製作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。

Sublime Text 是一個程式碼編輯器，也是HTML和散文先進的文字編輯器。Sublime Text是由程式設計師Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴充套件功能的Vim。目前更新到Sublime Text3

Sublime Text3具有漂亮的使用者介面和強大的功能，（本人就是使用的Sublime Text3 Mac版本哦，網站下載也很簡單）。例如程式碼縮圖，

Python的外掛，程式碼段等。還可自定義鍵繫結，選單和工具欄。Sublime Text 3的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時專案切換，多選擇，多視窗等等。Sublime Text 是一個跨平臺的編輯器，同時支援Windows、Linux、Mac OS X等作業系統。

3、HBuilder

HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE,HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，它基於Eclipse，所以順其自然地相容了Eclipse的外掛。快，是HBuilder的最大優勢，通過完整的語法提示和程式碼

輸入法、程式碼塊等，大幅提升HTML、js、css的開發效率。

2.書籍

如果確實想好好學習的話，其實看的書還是蠻多的。在這裡推薦四本必看的書籍，這四本看完了，基本上就已經相當於進入網際網路行業了~

HTML+CSS基礎教程

JavaScriptDOM程式設計藝術

JavaScript高階程式設計（建議：第三版）

（小編有話說：看書自學是小編的一大弱點，畢竟程式碼這個東西還是得自己親手敲的，看視訊可以理解可以多敲幾遍，書上講的太籠統了，當然這只是小編個人意見，勿噴！要是有大牛帶你就更好了~膜拜大佬）

3.自學網站

看完視訊，基本上你已經學會了搭建自己的第一個網頁了

自學網站基本上分為2大類

一類就是視訊資源的網站：愛，奇，藝，網，易，雲，騰，訊，課，堂都很不錯，裡面的視訊講解也很清楚。

另一類就是自學網站，比如慕，課，網，w3c ，school，裡面的課件很多，裡面有一些很有意思的闖關功能和學習的路徑以及實戰專案，讓你的自學變得更加有動力。

看懂了知識框架和基本概念，這個時候就可以去視訊網站看看相關視訊，相信圖書+視訊講解會讓你的基本知識更加過關。

好了，今天的盤點就到這裡了，希望對各位小夥伴有更好的幫助。另外 如果有更好的建議可以在下方評論區留言。

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群：733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊