零基礎前端攻城獅養成計劃

本喵至今已經作了一年半的前端了，還不能自封前端大牛，可是也算是入門了~這段時間裏，從一個測試實習生到寫文案，到成爲一枚前端實習併入職正式工做一年。對於前端知識來說能夠說是從0開始了~獲得過大牛們指點，踩過不少坑，本身也在不斷的摸索着，學習着，成長着。

 

先說說本身目前的技術能力，給想要入門前端的小白們一顆定心丸~

 

如今本身差很少3個小時能夠切出一個兼容PC端和移動端的活動頁面；一個和後端有交互並有表單驗證的功能基本上1天就能夠完成；一個沒有見過的插件，看看文檔就能夠愉快的使用了；本身親手寫過兩個插件；兼容過ie6；處理過xss漏洞；懂一些seo和性能優化；和小夥伴一塊兒用html5作過手機軟件~

 

一年半成長到這裏，是否是有點慢啊~~但是我麼有參加過培訓班呀~~4個月包教包會包分配的培訓班，沒有時間參加的說~

也可能我挺笨的吧~~因此，乃們必定比我學的快~~~必定要有信心哦~~

 

說了那麼多，講講我是怎麼一步步變成了我曾經黑他們到吐血的大（gong）猴（cheng）子（shi）的吧~~~

 

1.看w3cshool的html，css，js相關知識。

 

本喵花了一週的時間看並記住了這裏面的知識，是的一週時間，認真記住了相應標籤的含義，各個css表明的樣式，js的一些字符串處理函數、dom操做。但是記住有什麼用呢，不用會忘啊~~

但是，用的時候，我怎麼知道這樣寫是符合正常前端大猴子們的思惟和規範的呢？這個時候，咱們要作一件事，就是——抄~找一個簡單的頁面，本身仿照着它的樣式，先寫一遍，你會發現，並無你想像的那麼簡單。單單是css的盒模型，元素的文檔流問題就把本身搞瘋了~~  

一個左邊是圖片，右邊是兩行文字的logo，以下圖，怎麼切才最優雅？

由於是抄的，因此能夠隨時去看別人是怎麼實現的，爲何要這麼實現？

 

2.多練，多練，多練！重要的事情說三遍~

剛開始，喵君切一個帶交互的頁面要一成天~要隨時去查某個css樣式怎麼用，某個奇怪的樣式怎麼寫~後來作的多了，掌握了基本的原理，瞭解了各個標籤的語義，css樣式合適的場景，天然寫的就快了~

因此在初學一段時間以後，必定要勤加練習，不能只看~ 徒手去作，才能知道問題在哪裏，而後去尋找答案~

 

ps：切頁面的意思是把設計師給你的psd文件，經過css，html和圖片變成一毛同樣的html文件，能夠在瀏覽器中看~

 

3.深刻理解css。

通過上述兩個步驟，相信通常的網頁已經難不到你了，這個時候，要深刻理解一下css了，好比vertical-align和line-height之間的基情，不懂的去百度張鑫旭老師~~對，這個時候須要多看一些博客，看看大牛們在編碼過程當中遇到的坑，以及他們的解決方法~喵君看的比較多的就是張鑫旭、阮一峯的博客了~固然還有我司大牛們的~這個時候還能夠看看視頻課，好比幕課網，極客學院等等~~增加一下見聞。

 

喜歡新技術的孩子們，也能夠看看html5，css3動畫了~徒手作一作，發揮一下想象力~

 

4.關於javaScript和jQuery。

喵君看過js的一些基礎後，就開始根據文檔使用jQuery了。由於jQuery不用考慮文檔的兼容性，而且我手中的項目就是jQuery啊~爲了更快的接手，必須儘快掌握它的使用方法~

 

索性jQuery好用多了~大家用過就知道~~這裏主要要說的是：

1.jQuery有不少插件，能夠很是快速的幫助你完成特別的效果。

2.記住常用的字符串處理函數，可以很大的提升效率。

3.別太依賴它~

 

主要說第三點，喵君其實特別不愛用插件，緣由就是沒有任何一款插件可以適應全部的場景，若是有一些無法實現的效果，那麼這個時候要麼附加一些強制實現的代碼，要麼看源碼改插件~都是很不優雅的事情，並且對於初學者，不要那麼懶~~能本身搞定的，就練練手唄~~

 

喵君使用過輪播圖的插件，可是前提是在以前，喵君已經親手寫過一個自動輪播的。講真，使用插件快多了，不用本身計算滾動時間和綁定相應標籤的事件，但是對於本身的收穫，後者但是大多了~~

 

別太依賴，由於不是全部的場景均可以使用jQuery，好比移動端，引入一個jQuery仍是太耗流量了~並且萬變不離其宗，javaScript纔是始祖~

 

5.瞭解性能和安全問題

在通過一段時間的鍛鍊，相信此刻的你對切頁面和各類刁鑽的效果已是手到擒來了。這個時候，奇怪的問題也會涌來，好比網站的安全問題，你引入的插件可能會含有漏洞，要隨時更新~你寫的代碼裏，可能會有xss攻擊的隱患~~這個時候，有必要去了解一下簡單的網站安全知識，至少要知道怎麼改~

 

有時候，作的網頁打開可能會特別慢，這個時候就須要咱們去了解一下瀏覽器在輸入網址以後都作了什麼，哪裏能夠改進，優化，加速首屏的展現效果 。

 

還有，怎樣佈局整個頁面才能減小瀏覽器的重繪；怎樣才能使動畫更加流暢。

 

6.提升編程效率。

此刻，咱們對前端的知識已經有了更爲深入的瞭解，咱們要去作偉大的事情了，怎麼還能在一點點寫css，重複調試修改依賴的css類上，花費太多時間呢？

 

這個時候咱們能夠看看less、sass的css預編譯系統，加快咱們對頁面美化和製做效率。

 

若是你本身想建個網站，或者有人想請你幫忙寫個頁面，而那我的又徹底不懂，沒有設計師而你又特別忙的時候，bootstrap能夠優雅的幫助你工做、人情兩不誤~~

 

7.瞭解node.js和mvc模式。

node.js是一種能夠在服務端運行的語言，能夠鏈接數據庫，因此看到這裏，你應該知道我想說什麼了，喵君不會講高大上的名詞，什麼服務端語言之類的，就是想說一句，只要能鏈接數據庫，還要後端幹什麼~~

 

爲了咱們的終極理想，咱們須要學的東西就太多了，mvvm模式，mvc模式 等等~喵君還沒到那一步~~唱不出大家想聽的曲子~~~

 

咱們一塊兒學習吧~~~

 

ps：在後幾篇中，喵君會把上面提到的知識，總結一下發出來~

        請高手指教，小白學習~~