教你從零基礎開始做一名前端開發工程師

軟體開發工程師在行業外大眾的眼裡， 或許是一個出眾的職業，收入不低， 技術含量還挺高，就連我自己剛入行時也是這麼認為的，但事實上並不確切。任何行業中，只要是在金字塔頂端的那部分，都是令人羨慕的，然而，那是需要天賦、機緣、心血、實力的。 但如果僅僅只是想入行，就沒那麼苛刻了， 尤其是軟體開發行業，更容易。

做一件事情輕鬆還是堅難， 使用什麼樣的方法不可忽視，我以一個過來人的身份分析能如何正確快速的踏入軟體開發這個行業。

許多人認為開發軟體是一件只有聰明人才能做的事情， 這只是一個刻板印象，跟IT行業發展的速度太快有關係 。二十年前， 在中國絕大部份人可能連電腦是長什麼樣的都還不知道，僅僅幾年後，電腦飛速普及，每家必備。 然而， 要使用這部機器， 必須經過專業的培訓，連開關機時先按顯示器開關還是先按主機開關都有很深的學問，這不僅難度高，而且還很神秘。更別說裡面裝的軟體了， 不經過長期專業的指導，根本玩不來。 從正常的邏輯上的看「使用軟體都這麼難了， 那製造軟體門檻不是要高到天上去了」

事實上， 開發軟體和使用軟體之間並沒有什麼必然的關聯，更不是老子和兒子的關係 。 有時候使用某個軟體會很困難，而開發某類軟體卻很容易，還有的時候卻是相反的，因為開發軟體的工具和編程語言， 也只是一種軟體而已。至於倒底是先有軟體和還先有編程語言，那就是先有雞還是先有蛋的問題了， 這裡不作詳細討論 。

首先解釋幾個常見的疑問

編程是不是需要具備較強數學能力？

完全不用， 只需要你掌握普通的加減乘除、算絕對值、指數等最最基礎的知識， 編程的數學要求也就滿足了。 這毫不誇張， 我寫了五六年的代碼 ， 唯一一次用到上學時學到的數學公式是三角函數相關的知識，那時候需要讓一個點在網頁上轉圈，而且這並不是工作上的需要， 只是我自己沒事耍著玩而已。

英語不好能編程嗎？

理論上最低的要求是認識26個英文字母即可， 也就是說你只要上過初中英文課程就行了。 這並不是說編程並不需要會英語， 而是因為現在翻譯軟體滿天飛， 看不懂用軟體翻譯就能解決問題了。

找軟體工程師的工作有學歷要求嗎？

學歷自然是越高越好， 然而， 只要技能掌握紮實，就絕對會有公司要你。 現在這種職位行業需求大， 很多公司根本招不到人， 學歷不是他們首要考慮的入職要求。

編程職業是不是到年紀大了就不能做了？

沒有人會原地踏步， 只要你不斷努力就總會有你發揮價值的空間， 反之， 干任何工作都會丟飯碗

編程這種工作是不是需要經常加班？

在任何行業中， 總有加班現像特別嚴重的公司， 政府機關和國企也不能例外， 不想加班只要不去那樣的單位就可以了， IT行業也有工作很輕鬆的企業。 反正我做了這麼多年， 加班次數數都數的過來。

至於最重要的收入方面，這個需要看地區， 如果在一二線城市， 那絕對高於普通傳統行業。

講了一大堆廢話，接下來進入正題，聊聊如何快速成為一名前端開發工程師， 這裡的前端開發指的是網站的前端。

網頁前端開發技術是所有軟體開發技術中入門最簡單的， 沒有之一。前端開發其實並不是純粹的編程，它的的工作分為兩塊， 一塊是製作網頁， 一塊是製作網頁上的動態效果， 製作網頁是不需要編程的，製作動態效果是需要編程的。 因此， 製作網頁是非常簡單的一件事， 而稍微有點難度的是寫網頁動態效果 ，但和其它編程技術比起來還算是很簡單。

上面說過， 想在零基礎的前提下入行做一名前端開發工程師（軟體工程師），是不需要擁有很高的學歷的，也不需要很強的數學能力， 更不需要玩的很溜的英語水平。 然而， 卻需要具備

對編寫代碼有強烈的興趣，非常想自己去製作一張網頁、編寫一段特效，或者說用代碼實現一個自己想要的功能

較強的自學能力， 能不通過別人的幫助，自己尋找方法學會某一類知識、玩轉某一種技術。

養成看書的習慣， 因為看書是最好的系統的學習知識的方法。 一名前端開發工程師， 最低標準也需要看完兩本600頁的專業知識書籍。

能持之以恆，不輕言放棄，因為從零基礎到可以通過掌握的前端技能謀生， 最起碼需要經過3-6個月不間段的學習和訓練， 這也許是一個枯燥寂寞痛苦的過程

前端技術分為兩塊， html、css和JavaScript，html和css用來製作網頁頁面， JavaScript用來編寫網頁特效

html和css相對簡單， 其中內容深度較淺，易於理解，而且這兩種技術的學習過程中並不會牽扯出其它相關聯的知識，換句話說，你學好了html和css就等於學好了頁面製作的全部。 此外， 學習html和css並沒有多少需要深刻理解的知識，僅僅是花時間記憶和練習就足夠了。 大致上使用html和css編寫網頁是以如下方式工作的

在頁面的左上角放置一個方塊，將長度設置為100像素，將寬度設置為100像素，將背景設為淡藍色，將邊框設為深藍色

在頁面頂部放置一行文字 ， 將字體設置為微軟雅黑，將字體大小設置為14像素，將字體顏色設置成淡黑色

在頁面中間放置一張圖片， 圖片地址設為xxx，圖片寬為100像素，高度自適應，滑鼠移至圖片時變為手形

在頁面底部放置一個鏈接，鏈接地址為xxx，點擊鏈接跳轉至百度首頁，並且需要另起一個新窗口

試想一下， 一張網頁不就是以這種形式構成的嗎

html其實並不需要通過看書來學習，因為它非常的簡單， 內容也不多， 在網上看一些專門講解html知識的網站的內容就可以了，這裡推薦一個公認的適用於初學者學習的網站， 地址是HTML 教程。

css的學習就要複雜多了，必須要通過專門的書籍來學習，因為css的知識量相對較大，各大瀏覽器對css的支持又不盡相同， 如果不通過系統的閱讀書籍來循序漸進的學習，很難窺其全貌，在真正工作實踐使用時，也很難靈活高效正確的應用。有的同學可以會想通過看視頻來進行學習，我不是很推薦這種方法， 原因如下

css的內容很多，一般網路上的視頻很難覆蓋所有知識， 試想一下， 上學時老師給學生上一門課也需一個學期， 可見對某一類知識進行系統的學習， 信息量有多大了

視頻中講解者的水平很難保證， 導致時間精力花下去了，效果卻看不到

看書這種習慣必須要養成，學css或許可以看視頻 ， 那學JavaScript呢？ 學習知識如果依賴視頻，那在這個行業中走不遠

學習css推薦使用《css權威指南》這本書， 我當初看的就是這個， 內容很全講，而且講的通俗易懂，現在已經出到第三版了，內容質量應該勝過我之前看的地個版本

看書的過程中還需要做筆記， 不要太信任自己記憶力， 一些不常用但又很重要的知識， 如果不記下來， 隨時溫習 ， 隨著時間的推移，肯定會漸漸的忘記。 最好要把書中講解的每一個要點， 都作記錄。 在學校里， 如果不關心考試成績， 那麼完全可以左耳進右耳出， 因為學校里學的知識 ， 上了社會已後， 不一定用的上。 然而， 在學習技術過程中忘掉學過的內容就太吃虧了， 因為這些知識完全可以在工作中用的上， 說的優雅一點就是對自己的職業生涯有幫助 ， 說的現實一點就是可以升職加薪賺錢。

然而， 學習過程中， 看書只能佔百分之四十， 另外百分之六十是動手實踐。首先， 你可以參考別人網站上的網頁， 找一張覺得自己有能力可以實現的頁面， 然後照著樣子自己寫一張， 不管使用什麼方法， 查書、網上資料，或者參照目標網頁已實現的版本的做法， 總之動手去做， 把網頁做出來就可以了，然後不斷的重複這個過程，直到可以不藉助任何外部手段， 徒手能把一張網頁畫出來， 這樣就有找工作通過面試的資格了。 不要小看這一張做出來的網頁， 因為從不會到會的這一個過程中， 在尋找解決問題的方法時， 學到的不僅僅是解決方法本身， 還有因為解決這個問題而被牽扯出來的其它知識也被一併學會。 因此， 看似只是做了一張簡單的網頁， 然而做網頁的來龍去脈已經爛熟於心了。

學會製作網頁後， 就已經是一名合格前端工程師了， 但在實際工作時卻還沒有辦法獨當一面， 只會製作頁面， 肯定只能是協助人家工作， 打打下手。 只有學會使用JavaScript， 才能算的上是一位真正的前端開發工程師。

這裡說的JavaScript也叫原生JavaScript

寫JavaScript可就是正兒八經的編程了，如果想做一個優秀的前端工程師， 百分之七十的精力都需要花在這個上面。 花3-6個月成為JavaScript高手顯然不現實， 3-6年或許差不多。 然而，如果僅僅是入門和應付工作，那就足夠了。 要知道很多網頁的動態效果都是別人寫好的，我們只需要拿過來使用就可以了。常見的JavaScript應用場景如下

驗證表單輸入的內容是否符合規則

網頁中的滾圖片滾動效果

網頁中的標籤切換效果

關鍵字搜索時的嚮導提示

無刷新頁面內容更新

這些是最常見和簡單的應用。複雜的應用包括

JavaScript網頁遊戲

炫酷到能上天圖片預覽效果

網頁版Office軟體

也就是電腦有的軟體，用JavaScript在瀏覽器都能做出同樣的效果。幸好，這些你根本不需要會，只會上面說的基礎內容， 就足以讓你找到一份前端開發工程師的工作.

JavaScript基礎入門的學習一般都是先拿別人做好的東西來用， 然後照著樣子自己修改或實現一人，最後再以自己的思路，實現一個更合適或者更優秀的。現在互聯網行業內， 前端開發工程師招聘對於JavaScript的最低標準是會使用網上現成的特效完成工作，而並不要求你會自己寫。

學習JavaScript推薦的書籍是《JavaScript權威指南》，也就是鼎鼎大名的「犀牛書」

我當初看這本書時還是第四版 ，現在已經出到了第六版 。 這本書寫的非常精深， 想要一遍就看懂是不現實的。 它適合初學都也適合高手，在不同層次閱讀這本書都會有不同的領悟， 我就看過三遍，而且每一遍看後感覺都不一樣。 在初學閱讀這本書時， 可以只看很少的幾章， 其中只包括核心JavaScript中講解的一些基本語法和瀏覽器文檔對象模型這兩部分內容就可以了。 當能在前面提到的幾個簡單場景中運用這幾章中的內容完成任務時，就說明閉關修練可以結束了， 有了出關去江湖上闖蕩的資格了。

還需要說到的一個東西叫jQuery， 這個東西的介紹在這裡就不展開了。 舉個簡單的例子， 如果把JavaScript技術當成是「九陰真經」的話， 那前面講到原生JavaScript相關的東西就是「九陰真經」的前半卷，而jQuery就是後半卷， 如果沒學前半卷就去練後半卷的話， 那就會和梅超風一個下場 。 切記， 一定要學了原生JavaScript後再去學習jQuery， 這關係整個前端職業生涯的發展和成就。

最後，不能不知道，學習前端的三把利器

看書

使用搜索引擎

不懂上技術論壇提問

用好這三把武器，行走江湖將能如虎添翼。

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！