如何快速入門前端？附資料下載

買了一些前端入門書籍，好像也看不太明白？
看了好多視頻教程彷佛也是似懂非懂？
若是你如今是初學前端，入門的話，能夠看看下面內容……或者有一點幫助

學習前端，前端就比如如蓋房子~
html就充當了房子結構這部分，也是房子的基礎。
css呢，就比如我們房子的裝修，牆面什麼顏色，什麼風格，什麼地板...這些給房子改變風格，樣式的就是css
javascript呢，就比如這個房子的功能，房子須要製冷吧，須要暖氣吧，也須要上下水吧。這些功能性的就至關因而javascript

例子可能不是很恰當，只是幫助你們有個初步的認識~

---

 

一、前端工具（dreamwear/sublime/Photoshop/SVN等）

 

二、零基礎入門（html，CSS）

前端開發概況、代碼入門
頁面基本結構、文檔聲明、編碼聲明、css語法、style屬性、link和style標籤、id屬性、基本樣式、Border 、Background、 Font、盒模型、文本設置...

經常使用標籤集合
header、article、aside、section、footer、nav、h1-h六、p、ul、ol、li、img、dl、dt、dd...絕對路徑、相對路徑、標籤語義化、標籤嵌套規範、SEO...

經常使用選擇器&標籤類型劃分
d、class、類型選擇、包含選擇、羣組選擇、通配符、選擇器優先級、標籤樣式初始化訂製方案、超連接及僞類劃分、標籤類型劃分及特性、inline、inline-block、block..

浮動進階
浮動的做用、浮動的特性、文檔流、浮動的各類問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件...

定位
relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、默認值、zIndex層級問題、margin負值、透明度...

表格和表單
表格標籤、表格樣式重置、單元格合併、表單元素、表單相關的屬性操做、表單默認樣式初始...

兼容性問題處理
兼容性問題總結、浮動在IE6，7下的各類問題、表單在低版本IE的問題、處理低版本IE對新增標籤的支持、CssHack、條件註釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式...

整站進階
樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高佈局、三列布局、未知寬高圖片在容器內水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...

css3入門
transition、屬性選擇器、nth-of-type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高級、H5表單新增屬性、E:not(s)、E:target、E::selection、background-clip...

移動端佈局
測試環境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移動端佈局相關問題、window.deviceorientationevent、橫豎屏判斷...

Animation和Transform
瀏覽器前綴、keyFrames、Animation調用、播放次數設置、動畫偶數次調用順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮放、translate位移、transform-origin、transform的執行順序問題...

Bootstrap前端開發框架
Html語法規範、CSS語法規範、Less 和 Sass 中的嵌套、class 命名、選擇器、Normalize.css、柵格系統、排版、代碼、響應式工具...

3.項目實戰

PC端的企業網站佈局（例：sony官網）
PC端的電商類網站佈局（例：京東商城）
移動端常見頁面佈局（例：微信活動頁/商城）

推薦圖書：

學習前端書籍天然不可少，這裏給你們推薦《html 5與css 3權威指南》，雖然主要是講解html5+css3，但倒也是一本好的入門書籍。該書比較系統，覆蓋面也比較廣。技術新穎，全部知識點都緊跟html 5與css 3的最新發展動態（html 5和css 3仍在不斷完善之中）；也有比較強的實戰性（包含246個示例頁面），不只每一個知識點都配有精心設計的小案例（便於動手實踐），配合案例，也比較生動有趣。該書不只能知足你全面而系統地學習理論知識的需求，還能知足你須要充分實踐的需求。

 

本次還收集了一些視頻資料，給你們入門學習

 

下載連接： http://pan.baidu.com/s/1kUlwT19 （百度雲盤）

---

 

我的認爲學習前端可能又分爲下面幾個階段；

　　第一階段——HTML標籤的學習

　 　超文本標記語言(HyperText Mark-up Language 簡稱HTML)，「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
html是一個網頁的骨架，就比如是蓋房子的結構~這也是前端頁面的基礎。試着想一下，若是一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？因此咱們必須徹底掌握HTML的基本結構和常見的標籤，屬性。有了一個好的開始，距離成功已經一小半啦~

關於HTML怎麼記憶、學習？可能一上來死記硬背，也不會有太好的預期。並且還有可能被嚇到？
「我去！這麼多標籤！怎麼記得玩？」

我的感受有兩點能夠嘗試：
1，語義化的去記憶。好比ul li這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標籤。
2，試着寫一個一個小的demo，也許就只是一個列表，一個表格，或者一個按鈕。也許寫着寫着你就懂了呢？

學習HTML就是要本身不斷的去寫，去嘗試。看着本身的代碼能跑起來，有了心目中的效果，這種心情仍是很開心的！給你們推薦一個網站，w3cSchool，這裏面有在線的代碼編輯器。能夠邊寫邊看到效果~

　　ok~學習完成html後，咱們來到第二階段——css
　　去給咱們的房子裝修一番吧~

 

---

 

　　第二階段——CSS的學習

　　CSS，層疊樣式表——（Cascading Style Sheets），是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS可以對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並可以進行初步交互設計，是目前基於文本展現最優秀的表現設計語言。CSS可以根據不一樣使用者的理解能力，簡化或者優化寫法，針對各種人羣，有較強的易讀性。

　　CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面佈局，就基本上掌握了大半啦~這時咱們就以及可以對網頁中各個元素進行精準的排版，作出符合咱們意願的網頁啦！

關於CSS的各類屬性，咱們仍是能夠參考學習HTML那樣。能夠說CSS的屬性幾乎徹底是語義化的。咱們須要改變邊框，那就是「border」，那咱們須要右側邊框作一些改變，那就是「border-right」。很明顯，接下來按照咱們的需求還有「右邊框的寬度——border-right-with」，」右邊框顏色——border-right-color」等等等，諸如此類~

徹底就是咱們須要什麼，只要憑着需求去尋找。

　　說完裝修，咱們終於要給房子打造一些功能啦~follow me~

 

---

 

　　第三階段——JavaScript

　　JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。

簡單來講，javascript是一個能夠運行在瀏覽器上面的語言（固然如今基於一些庫/框架已經遠不僅是在瀏覽器上了），它能夠操控瀏覽器，讓瀏覽器遵從咱們的命令。這有點像一個電視劇和遙控器，而javascript就是咱們的遙控器。瀏覽器根據javascript的指令，作出相應的反饋。好比操做DOM（也能夠理解成爲操做HTML），能夠操做CSS。有了javascript就可讓我更加靈活&動態的操控HTML,CSS.

嚴格來講、HTML和CSS還算不上真正的「語言」，而javascript倒是如假包換的腳本型語言，既然是語言，那就會有字符串，數組，對象等等。而咱們的javascript能夠處理這些與數據有關的工做，好比給數組排個序，去個重等等。

而咱們依靠javascript能夠作些什麼呢？網頁上常見的輪播圖，網站的註冊功能，提交咱們的留言，刷新獲取新聞等等。固然，咱們強大的javascript遠不止此啦~之後再爲你們深刻介紹~

然而由於歷史緣由，好比咱們灰常「尊敬」的 IE 瀏覽器~出了一套本身的javascript標準，沒有和主流javascript標準兼容啊！！做爲一個前端er是否是應該把更多精力用在有意義的地方呢，而不是解決兼容。。。

因此，彷佛咱們還須要一個利器，來讓咱們更快速的開發~沒有錯，這就是咱們的——jQuery！

 

---

 

　　第四個階段——jQuery

　 　jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,作得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發佈，吸引了來自世界各地的衆多JavaScript高手加入，由Dave Methvin率領團隊進行開發。現在，jQuery已經成爲最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

若是繼續用蓋房子作例子，jQuery更像是一個裝修隊。咱們只須要關注咱們的房子設計自己，把個人想法，理念告知這個裝修隊，讓它來給咱們處理那些雜七雜八的事情。好比會不會吵到鄰居？怎麼協調物業？幹活總得有人手的，對吧...

　　jQuery的優勢我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是咱們前端er一大利器！

 

---

 

　　Web前端學習小建議

這裏跟你們扯一扯學習前端的小方法，是我本身的學習方法，你們湊合看看，倒也不必定對~

在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁以前，建議先琢磨幾分鐘，不要上來就寫。多去看看別人是怎麼寫的，而後結合本身的項目，心中有一個大體規劃。能夠先把最外層輪廓寫好，先不着急去寫某一個具體的部分。

這裏給你們分享一些小技巧：

一、使用reset.css
火狐和IE這兩種不一樣的瀏覽器，在繪製CSS樣式方法上大相徑庭。這種狀況下，使用reset.css重置全部的基本樣式會讓你獲得一個全新的空樣式表。（能夠去網上找一下，不少的）

二、CSS縮寫
CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。
不是像這樣建立CSS
.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
 
}
而是像這樣建立CSS
.header {
  background: #fff url(image.gif) no-repeat top left 
}

三、理解class和id
這兩個選擇器老是讓初學者感到迷惑。在CSS中，Class和ID分別用點「.」和井號「#」來標識。簡單來講id就是用來標識那些單獨不重複的樣式，而class是能夠重複使用的。

四、實用的<li>
<li>也叫連接列表，在與<ol>或<ul>正確搭配的時候很是好用，尤爲是用在導航菜單樣式上。

五、少用<table>多用<div>
CSS最大的優點之一是使用<div>達到樣式上的靈活多變。不一樣於<table>，<div>裏的內容不會 被鎖在單元格<td>中。能夠說幾乎全部的表格佈局均可以在<div>和樣式的正確使用下完成。固然，有大量表格內容時，仍是用 <table>吧。

六、CSS調試工具
在設計CSS時，可以獲得頁面佈局的預覽對於優化CSS樣式和糾錯是頗有幫助的。這裏有一些免費的CSS調試工具推薦給你，你能夠把它裝在瀏覽器上：好比FireFox Web Developer、DOM Inspector、Firebug等

七、!Important
全部被!important 標記的樣式，即便它後來被重寫，瀏覽器也只會採用被標記的那條。
.page {
  background-color:blue !important;
  background-color:red;
}
好比上面的例子，由於background-color:blue 被標記爲!important ，即便後來有把背景改爲紅色的語句，也只採用被標記的那條。!important 用來強制使一個樣式避免在以後的編碼中被修改，遺憾的是IE不支持。

牢記以上小技巧，也許你的css技能忽然就起飛了呢？關於javascript的一些小技巧，下次我再整理給你們~一次性看太多，你們是否是也有點暈？

學習前端須要方法，更須要一顆日常心，不要把前端想的多難，須要吃什麼苦。。。既然學習這麼痛苦，爲何不快樂一點學呢？anyway~但願你們能夠成爲一個優秀的前端er！