零基礎怎么學習前端

前端開發是創建 Web 頁面或 app 等前端界面呈現給用戶的過程，通過 HTML，CSS 及 JavaScript 以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是 Web1.0 時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨着互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。

移動互聯網帶來了大量高性能的移動終端設備以及快速的無線網絡、HTML5、node.js 的廣泛應用，各類框架類庫層出不窮。

隨着時代的發展，前端開發也越來越受到大家的歡迎，其中不乏轉行來做前端開發的，通過與這些人的接觸發現，很多人在入行前或多或少的存在顧慮。那么轉行來做前端到底可以走多遠，轉行來做前端會不會為時已晚？我們可以看看這個視頻：Web前端技術精講：轉行做編程必看視頻

在開始我們的教程之前，先讓我們來了解一下 Web 前端技術，看一個視頻讓我們快速的了解web 開發：Web前端技術精講：零基礎學習web前端必看

根據我長期的總結並結合時下的技術棧，我把前端的學習大致分為如下五個階段，以及羅列了各個階段需要掌握的知識點。

階段一

一、常用開發工具介紹

在學習前端之前，我們先把工具准備好，沒有金剛鑽怎么攬瓷器活？所以准備了如下的一些開發工具，這里推薦使用 VSCode。
1. WebStorm
2. Dreamweaver
3. HbuilderX
4. Sublime Text
5. Vim（高手使用較多）
6. VSCode

思維導圖

 

二、HTML+CSS 部分

HTML

掌握 HTML 是網頁的核心，是一種制作萬維網頁面的標准語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。因此，它是網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，學好 HTML 是成為 Web 開發人員的基本條件。

HTML 是一種標記語言，能夠實現 Web 頁面並在瀏覽器中顯示。

HTML 需要掌握的知識點如下所示：

1. 屬性
2. 事件
3. 標簽
4. 字符集

CSS

學好 CSS 是網頁外觀的重要一點，CSS 可以幫助把網頁外觀做得更加美觀。CSS 需要我們學習如下部分：

1. CSS基礎教程

2. CSS樣式

• 背景
• 文本
• 字體
• 鏈接
• 列表
• 表格
• 輪廓

3. CSS框模型

• 內邊距
• 邊框
• 外邊距

4. CSS定位

• 相對定位
• 絕對定位
• 浮動

5. CSS選擇器

• 元素選擇器
• 選擇器分組
• 類選擇器
• ID選擇器
• 屬性選擇器
• 后代選擇器
• 子元素選擇器
• 相鄰兄弟選擇器
• 偽類
• 偽元素

6. CSS高級

• 對齊
• 尺寸
• 分類
• 導航欄
• 圖片庫
• 圖片透明
• 盒子模型
• 媒體布局

 web 前端開發特輯

Web前端技術特輯：HTML樣式

思維導圖

三、HTML5+CSS3

HTML5

HTML5 作為 HTML 的最新版本，引入了多項新技術，大大增強了對於應用的支持能力，使得Web技術不再局限於呈現網頁內容。

1. HTML5視頻
2. HTML5音頻
3. HTML5拖放
4. HTML5畫布
5. HTML5 SVG
6. HTML5地理定位
7. HTML5 Web存儲
8. HTML5 應用緩存
9. HTML5表單

 

HTML5 可以使開發者的工作大大簡化，理論上單次開發就可以在不同平台借助瀏覽器運行，降低開發的成本，這也是產業界普遍認為 HTML5 技術的主要優點之一。

CSS3

CSS3使用了層疊樣式表技術，可以對網頁布局、字體、顏色、背景燈效果做出控制。css3作為css的進階版，拆分和增加了盒子模型、列表模塊、語言模塊 、背景邊框 、文字特效 、多欄布局等等。

CSS3的改變有很多，增加了文字特效，豐富了下划線樣式，加入了圈重點的功能。在邊框方面，有了更多的靈活性，可以更加輕松地操控漸變效果和動態效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，並且網絡瀏覽器也還將繼續支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕松。

1. CSS3邊框
2. CSS3背景
3. CSS3文本效果
4. CSS3字體
5. CSS3 2D轉換
6. CSS3 3D 轉換
7. CSS3 過渡
8. CSS3 動畫
9. CSS3 多列

思維導圖

 

四、JavaScript

JavaScript 是 web 開發者必學的三種語言之一，這里我們需要區別 JavaScript 和 Java 他們是完全不同的語言，不論是概念還是設計。javascript 部分需要我們學習的知識點如下所示：

1. 認識JavaScript
2. 基本語法
3. 變量
4. 數據類型

• 字符串
• 數字
• 布爾
• 數組
• 對象
• Null
• Undefined

5. 函數

• 內置函數
• 自定義哈數

6. 運算符

7. 流程控制

8. DOM對象

• String
• Array
• Date
• Boolean
• Math
• Number

9. BOM對象

• WIndow
• Navigator
• Screen
• History
• Location

10. 綜合實例

思維導圖

 

Web前端技術特輯：BFC講解

階段二

一、JavaScript進階

JS 進階主要學習構造函數，原型對象，繼承的多種實現方式，原型鏈，函數的本質，閉包，沙箱等。

二、DOM+BOM綜合演練

三、網頁特效

四、 Jquery學習

1. 基礎語法
2. 選擇器

• 基本選擇器
• 層次選擇器
• 過濾選擇器
• 表單選擇器

3. DOM操作

• 查找節點
• 創建節點
• 插入節點
• 刪除節點
• 復制節點
• 替換節點
• 包裹節點
• 屬性操作
• 樣式操作

4. 事件

• 事件綁定
• 事件冒泡

5. 動畫

• show、hide
• fadeIn、fadeOut
• slideUp、slideDown
• 自定義動畫animate
• 動畫回調以及停止動畫

6. 常用工具

• 瀏覽器及特性檢測
• 數組和對象操作
• Layer UI，主要學習柵格布局，圖標，動畫，按鈕，表單，導航，選項卡，進度條，面板，表格，時間線等

7. Ajax

8. Jquery插件編寫

思維導圖

五、ES6進階

六、Bootstrap

七、其他

1. animate.css學習（擴展）
2. PS切圖學習

思維導圖

階段三

一、Vue

1. Vue基礎

• 模版語法
• 計算屬性偵聽器
• Class與Style綁定
• 條件/列表渲染
• 事件處理
• 表單輸入綁定
• 組件基礎、注冊
• Prop
• 自定義事件

2. Vuex

• State
• Getter
• Mutation
• Action
• Module

3. Vue-router

• 認識路由
• 動態路由
• 嵌套路由
• 編程式導航
• 路由組件傳參

4. axios

• 認識axios
• 全局配置
• 發送POST、GET請求等

思維導圖

二、React

1. 認識React
2. React元素渲染
3. JSX
4. 組件
5. State
6. Props
7. 事件處理
8. 條件渲染
9. 列表
10. 組件API
11. 組件聲明周期

思維導圖

三、Node

1. 基礎

• console（控制台）
• crypto（加密）
• debugger（調試器）
• fs（文件系統）
• http（網絡）
• os（操作系統）
• path（路徑）

2. 高級

• NPM介紹及使用
• MVC模式簡介
• Express框架學習
• 鏈接Mysql
• 鏈接Redis
• 項目實戰

思維導圖

四、webpack

 

1. 概念

主要講什么是入口，出口，loader，插件等

2. 入口

• 單個入口語法
• 對象語法
• 常見場景

3. 輸出

• 用法
• 多個入口起點
• 高級進階

4. 模式

• development
• production

5. loader

• 實例
• 配置

6. 插件

• 剖析
• 用法
• 配置

7. 配置

• 基本配置
• 多個Target
• 使用其他語言配置

8. 模塊

思維導圖

階段四（擴展部分，了解即可）

一、Mysql

1. 階段一

• 認識mysql
• 安裝mysql
• 創建數據庫、數據表
• 學習常用的SQL命令，完成增刪查改

2. 階段二

• 學習Mysql關聯查詢，子查詢等
• 學習Mysql常用函數
• 學習Mysql分組、分頁、排序等

3. 階段三

• 學習Mysql高級查詢
• 了解存儲過程，自定義函數等
• 了解Mysql配置文件

二、Redis

1. 認識Redis
2. 學習redis的數據類型
3. redis常用操作
4. redis事務

思維導圖

 

階段五

一、項目管理篇

1. SVN使用

• 認識svn
• 安裝
• 生命周期
• 啟動模式
• 創建版本庫
• 檢出操作
• 解決沖突
• 提交操作
• 版本回退
• 查看歷史
• 分支
• 標簽

2. GIT使用

• 認識git
• 安裝配置
• 工作流程
• 工作區、暫存區和版本庫
• 創建倉庫
• 基本操作
• 分支管理
• 查看歷史等
• 標簽
• github

二、擴展部分

小程序

1. 了解小程序開發流程

2. 視圖容器

• view
• scroll-view
• movable-view
• cover-view
• cover-image

3. 基礎內容

• icon
• text
• rich-text
• progress

4. 表單組件

• button
• checkbox
• form
• input
• label
• picker
• picker-view
• radio
• slider
• switch
• textarea

5. 導航

• navigator
• function-page-navigator

6. 媒體組件

• audio
• image
• video
• camera
• live-player
• live-pusher

7. 地圖（map）

8. 畫布（canvas）

9. 開放能力

• open-data
• web-view
• ad
• official-account

apicloud（移動app開發）

1. 認識apicloud

2. 開發工具講解

3. 端API

• API對象
• 設備訪問
• 功能擴展
• 界面布局
• 導航菜單
• 小程序模塊
• 雲服務對接

4. 雲API

• 數據雲API
• 統計雲API
• 推送雲API
• 雲API SDK

5. 小程序模塊使用

三、常用框架使用篇

1. iview （vue框架）
2. element ui （vue框架）
3. echarts (百度圖標庫)
4. 阿里巴巴開源圖標使用
5. Sass學習
6. Swiper學習
7. zoom.js 學習

四、綜合項目實戰

教務管理系統（node+express+mysql）實現

思維導圖