新建一個網頁文檔系統就會自動創建css文檔和js文檔，在側邊欄就能看到css文件。 1、建議新手不要使用hbuilder，這個編輯器是開發網站前臺頁面比較專業的集成開發環境，建議使用比較基礎的editplus或者Dreamweaver等。

2、uilder 是DCloud ）推出一款支持HTML5的Web開發IDE。“快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML、js、css的開發效率。

從2010年1月底開始接觸前端，干到現在快8年前端了。跟你分享下我的經驗。

要說快的話肯定是使用一鍵建站、或者某些CMS提供的拖拽功能來做頁面。但是一鍵建站是外部產品，而支持拖拽功能的CMS報價不菲，印象中是幾萬起步。或者有些網絡公司結合自身系統開發出的快速專題功能。但是這些不太適合小公司使用。

在零存貨的情況下，肯定是技術、經驗越豐富，前端頁面做的越快。比如我開足馬力的情況下做完好幾個頁面，新同事可能一個頁面都沒做完，而且我做的比他還漂亮。一個效果圖掃幾眼，心里大概就有譜了。

但是批量操作的話，我覺得快的應該是直接用現成模板。需要什么模塊，直接從舊模板上copy過來就完事了，最多改改細節。根據我多年的經驗，一個公司里面，需要開發的頁面很多都是可以復用的。

不管效果圖多復雜，其實拆開了無非就那些個小模塊。可以在日常工作中將每一小塊整理出來以備到時候復制黏貼。

比如一些模塊是一行行的標題，有些是標題加圖片，有些是圖片加介紹，有登錄模塊，有查詢功能等等，經常用到的其實也就幾十種小塊而已，可能多的話上百種。拖拖拽拽就生成頁面的功能也是以此為基礎來做的。

有同學說用框架可能會更快。我認為這是片面的。我承認用框架絕對會快，我有些項目也是用框架做的，但是前提是你得懂框架。而學現在互聯網上的框架的時間成本絕對不低。你要是有基礎還好，沒基礎的話，光看說明文檔得煩死你。

不管用dw還是sublime還是其他種種軟件，都只是軟件而已，最終看的全是后面的人。

給我個文本文檔我都能寫出來前端頁面。

關于通用的CSS，我有話要說。

我在2012年左右的時候曾做過整站通用的CSS，后面發現坑了。原因如下：

我當年放的是一些通用樣式（我以為的通用樣式），包括頁面頭尾、各種fix等，后來發現頁面由于那時候的水平不高，代碼寫的并不好。而且因為數次改版，那個CSS變得很臃腫。但是由于用了很久，即使有注釋有些地方我也忘了到底是干什么用的……而且這個css覆蓋網站百萬以上網頁，我也怕改錯了造成不可彌補的錯誤。（感謝網站領導給我的試錯機會）

所以在某一個時間點之后，我慢慢拋棄了這種總的css。但是我現在也在做內部使用的小框架，準備再次將CSS搞成一個文件供公司通用，相信現在做的這個CSS應該會幾年前做的那個好一些了。經過培訓，在我這個框架基礎上，公司內部的前端頁面開發速度應該會有所提升。因為現在我們公司的前端基本都在公司呆了2年以上了。而我做的這個框架會盡可能貼近大家日常工作涉及到的工作，所以比較接地氣，比學那些網站巨型框架要容易入手的多。

個人淺見，不吝賜教。同時歡迎關注我的頭條號，我會不定時更新一些前端方面的東東。

前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。

Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！ 它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。 隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的因特網應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和服務器端語言（PHP、ASP.NET，JSP、Python）等語言，前端開發工程師也需要掌握。

前端開發的入門門檻其實很低，與服務器端語言先慢后快的學習曲線相比，前端開發的學習曲線是先快后慢。

HTML 甚至不是一門語言，他僅僅是簡單的標記語言！

CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。

Javascript 的基礎部分相對來說不難，入手還算快。

也正因為如此，前端開發領域有很多自學成“才”的同行，但大多數人都停留在會用的階段，因為后面的學習曲線越來越陡峭，每前進一步都很難。 Web前端技術有一些江湖氣，知識點過于瑣碎，技術價值觀的博弈也難分伯仲，即全局的系統的知識結構并未成體系，這些因素也客觀上影響了“正統“前端技術的沉淀！而且各種“奇技淫巧”被濫用，前端技術知識的傳承也過于泛泛，新人難看清時局把握主次。因此，前端技術領域，為自己覓得一個靠譜的師兄，重要性要蓋過項目、團隊、公司、甚至薪水。

另一方面，正如前面所說，前端開發是個非常新的職業，對一些規范和最佳實踐的研究都處于探索階段。

總有新的靈感和技術不時閃現出來，例如CSS sprite、負邊距布局、柵格布局等； 各種JavaScript框架層出不窮，為整個前端開發領域注入了巨大的活力； 瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。

為了滿足“高可維護性”的需要，需要更深入、更系統地去掌握前端知識，這樣才可能創建一個好的前端架構，保證代碼的質量。

隨著手持設備的迅猛發展，帶動了 HTML5行業標準的快速發展。web領域的技術，大概有10年都沒有大的更新了！ 現在市場很需要優秀的、高級的前端工程師。

一方面是因為這是一個比較新的細分行業，而且前端程序員大都自學一部分，知識結構不系統；另一方面，大學里面沒有這種課程，最最重要的是：北大青鳥這類培訓機構也沒有專門的前端工程師的培訓課程！！ 吳亮在《JavaScript 王者歸來》第一張的序里面說：大多數程序員認為 Javascript 過于簡陋，只適合一些網頁上面花哨的表現，所以不愿花費精力去學習，或者以為不學習就能掌握。 實際上，一門語言是否腳本語言，往往是她的設計目標決定，簡單與復雜并不是區分腳本語言和非腳本語言的標準。

事實上，在腳本語言里面，Javascript 屬于相當復雜的一門語言，他的復雜度即使放在非腳本語言中來衡量，也是一門相當復雜的語言！ Javascript 的復雜度不遜色于 Perl 和 Python！

我們生活在一個充滿規則的宇宙里面。社會秩序按照規則運行，計算機語言幾乎全部是規則的集合。計算機前輩們定義規則，規則約束我們，我們用規則控制數據。大部分時候，對數據的合理控制，來自于你對規則的掌握。

學習 HTML，CSS 應該先跟著書仔細、扎實的學一遍。然后就需要做大量的練習，做各種常規的、奇怪的、大量的布局練習來捆固、理解自己的知識。

而學習 Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么！ 如果你只想當一個普通的前端程序員，你只需要記住大部分 Javascript 函數，做一些練習就可以了。

如果你想當深入了解Javascript，你需要了解 Javascript 的原理，機制。需要知道他們的本源，需要深刻了解 Javascript 基于對象的本質。

還需要 深刻了解 瀏覽器宿主 下 的 Javascript 的行為、特性。

因為歷史原因，Javascript一直不被重視，有點像被收養的一般！ 所以他有很多缺點，各個宿主環境下的行為不統一、內存溢出問題、執行效率低下等問題。

作為一個優秀的前端工程師還需要深入了解、以及學會處理 Javascript 的這些缺陷。 那么一名優秀的、甚至卓越的前端開發工程師的具備什么條件？

首先，優秀的Web前端開發工程師要在知識體系上既要有廣度和深度！做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白，只有對和錯，而技巧則見仁見智。

在以前，會一點Photoshop和Dreamweaver的操作，就可以制作網頁。 現在，只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁制作都更接近傳統的網站后臺開發，所以現在不再叫網頁制作，而是叫Web前端開發。

Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好。

Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。

簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。 其次，優秀的Web前端開發工程師應該具備快速學習能力。

Web發展的很快，甚至可以說這些技術幾乎每天都在變化！如果沒有快速學習能力，就跟不上Web發展的步伐。前端工程師必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。

Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。

說到這里，我想起了一個大師說過的一句話：對于新手來說，新技術就是新技術。 對于一個高手來說，新技術不過是就技術的延伸。 再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。

1、產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現的應用。一般來說，產品經理都追求豐富的功能。

2、UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師于流暢靚麗、但并不容易實現的用戶界面，而且他們經常不滿前端工程師造成 1px 的誤差。

3、項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。

4、最終用戶。指的是應用程序的主要消費者。盡管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

Yahoo 公司 ，YUI 的開發工程師 Nicholas C. Zakas 認為： 前端工程師是計算機科學職業領域中最復雜的一個工種。絕大多數傳統的編程思想已經不適用了，為了在多種平臺中使用，多種技術都借鑒了大量軟科學的知識和理念。成為優秀前端工程師所要具備的專業技術，涉及到廣闊而復雜的領域，這些領域又會因為你最終必須服務的各方的介入而變得更加復雜。專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人并肩協同的能力，才會真正讓你變得優秀。

關于書籍： HTML、CSS 類別書籍，都是大同小異，在當當網、卓越網搜索一下很多推薦。如果感覺學的差不多了，可以關注一下《CSS禪意花園》，這個很有影響力。Javascript 的書籍 推薦看老外寫的，國內很多 Javascript 書籍的作者對 Javascript 語言了解的都不是很透徹。

這里推薦幾本 Javascript 書籍： 初級讀物：

《JavaScript高級程序設計》：一本非常完整的經典入門書籍，被譽為JavaScript圣經之一，詳解的非常詳細，最新版第三版已經發布了，建議購買。

《JavaScript王者歸來》: 百度的一個Web開發項目經理寫的，作為初學者準備的入門級教程也不錯。 中級讀物：

《JavaScript權威指南》：另外一本JavaScript圣經，講解的也非常詳細，屬于中級讀物，建議購買。

《JavaScript語言精粹》： Yahoo大牛，JavaScript精神領袖Douglas Crockford的大作，雖然才100多頁，但是字字珠璣啊！強烈建議閱讀。

《高性能JavaScript》：《JavaScript高級程序設計》作者Nicholas C. Zakas的又一大作。

《Eloquent JavaScript》：這本書才200多頁，非常短小，通過幾個非常經典的例子（艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子游戲等等）來介紹JavaScript方方面面的知識和應用方法。

高級讀物： 《JavaScript Patterns 》：書中介紹到了各種經典的模式，如構造函數、單例、工廠等等，值得學習。

《Pro.JavaScript.Design.Patterns》： Apress出版社講解JavaScript設計模式的書，非常不錯。

《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較為深入的講解，同時也對一些流程的庫進行了講解。

《Developing Large Web Applications |開發大規模Web應用》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內容卻都非常不錯，真正考慮到了一個大型的Web程序下，如何進行JavaScript架構設計，值得一讀。 要做優秀的前端工程師，還需要繼續努力：

《高性能網站建設指南》、《Yahoo工程師的網站性能優化的建議》、“YSLOW”性能優化建議、《網站重構》、《Web開發敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3”…… 這些都要深入研究！

萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。

人們常說：不想當裁縫的司機，不是個好廚師。

如果單純只是學習前端編程語言、而不懂后端編程語言（PHP、ASP.NET，JSP、Python），也不能算作是優秀的前端工程師。

在成為一個優秀的前端工程師的道路上，充滿了汗水和辛勞。