• jQuery源碼解析（架構(gòu)與依賴模塊）：https://www.imooc.com/learn/172

• jQuery源碼解析（DOM與核心模塊）：https://www.imooc.com/learn/222

Ajax實(shí)戰(zhàn)&JSON基礎(chǔ)

本課程通過一個(gè)簡(jiǎn)單的例子，由淺入深，循序漸進(jìn)的介紹了Ajax的相關(guān)概念、原理、實(shí)現(xiàn)方式和應(yīng)用方法，了解Ajax開發(fā)模式與動(dòng)態(tài)網(wǎng)站是如何制作的。感受Ajax異步交互帶來的優(yōu)勢(shì)，學(xué)習(xí)如何提升用戶體驗(yàn)并完成復(fù)雜應(yīng)用交互。課程涉及前端、前端模板、express、JSON、axios庫等相關(guān)內(nèi)容，是非常適合Ajax學(xué)習(xí)的入門課程。

Ajax實(shí)戰(zhàn)案例之列表渲染-慕課網(wǎng)：www.imooc.com/learn/1289

現(xiàn)今JSON數(shù)據(jù)以短小、讀取方便等優(yōu)點(diǎn)，越來越受廣大開發(fā)人員喜歡。本課分為兩部分，前半部分詳細(xì)介紹JSON的基礎(chǔ)知識(shí)，后半部分通過兩個(gè)實(shí)站案例再次加深對(duì)JSON的理解，并演示JSON在各個(gè)實(shí)際場(chǎng)景的用法。

JSON基礎(chǔ)應(yīng)用與實(shí)戰(zhàn)視頻教程-慕課網(wǎng)：www.imooc.com/learn/68

電商網(wǎng)頁開發(fā)

本課程主要介紹電商網(wǎng)站基本制作流程，通過電商網(wǎng)站分步的教學(xué)讓大家了解和掌握電商網(wǎng)站制作的流程和注意事項(xiàng)。并且運(yùn)用網(wǎng)站內(nèi)學(xué)習(xí)過的知識(shí)點(diǎn)，更加快速的掌握整站的開發(fā)過程，增加開發(fā)經(jīng)驗(yàn)。

手把手從0打造電商網(wǎng)頁開發(fā)-慕課網(wǎng)：www.imooc.com/learn/1236

階段三：WebAPP開發(fā)與小程序

HTML5高級(jí) - Canvas

以下課程會(huì)讓你精進(jìn)Canvas方面的技術(shù)，Canvas顧名思義是定義在瀏覽器上畫布，但Canvas不僅僅是一個(gè)元素，它更是一套編程的接口，它的出現(xiàn)已然超過了Web基于文檔的設(shè)計(jì)初衷。利用它你可以開發(fā)出很多夢(mèng)寐以求的內(nèi)容，讓編程工作者徹底釋放自己的創(chuàng)造力！

• 炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫基礎(chǔ)：https://www.imooc.com/learn/133

• Canvas繪圖詳解：https://www.imooc.com/learn/185

• Canvas玩兒轉(zhuǎn)紅包照片：https://www.imooc.com/learn/601

• Canvas玩轉(zhuǎn)圖像處理：https://www.imooc.com/learn/476

移動(dòng)webAPP開發(fā)必備基礎(chǔ)

本階段目標(biāo)為掌握移動(dòng)端開發(fā)的必備基礎(chǔ)，包括移動(dòng)web開發(fā)入門、響應(yīng)式布局、移動(dòng)端屏幕適配、移動(dòng)端事件、移動(dòng)調(diào)試和終端檢測(cè)、移動(dòng)常見問題、移動(dòng)性能優(yōu)化、Swiper快速切換插件等。

免費(fèi)視頻課程：

1. 移動(dòng)web基礎(chǔ)：www.imooc.com/learn/494

本課程介紹移動(dòng)web的開發(fā)基礎(chǔ)，高效的排版布局，常見的移動(dòng)web問題，終端觸摸交互，各種bug坑如何解決等多方面。

2. 移動(dòng)web開發(fā)適配秘籍Rem：www.imooc.com/learn/942

3. 移動(dòng)端布局教程：www.imooc.com/wiki/mobilelayout

4. 響應(yīng)式布局：

主要學(xué)習(xí)媒體查詢、flex彈性布局及伸縮比例的計(jì)算，通過rem作為度量單位進(jìn)行彈性布局的方法

六個(gè)案例學(xué)會(huì)響應(yīng)式布局-慕課網(wǎng)：www.imooc.com/learn/1285

小程序基礎(chǔ)與實(shí)戰(zhàn)案例

1. 微信小程序開發(fā)入門：www.imooc.com/learn/974

講解微信小程序的基本知識(shí)，如何注冊(cè)，并開發(fā)一個(gè)自己的小程序，以及小程序開發(fā)過程中部分常見的問題。

2. 輕松入門微信小程序與云開發(fā)：www.imooc.com/learn/1121

本課程從小程序的基礎(chǔ)知識(shí)開始，到小程序云開發(fā)的三大基礎(chǔ)能力：云數(shù)據(jù)庫、云函數(shù)、云存儲(chǔ)，再到電影小程序案例的全棧開發(fā)，不僅有理論知識(shí)更有實(shí)戰(zhàn)項(xiàng)目，課程更加注重培養(yǎng)學(xué)生分析問題和解決問題的能力，使你成為微信小程序全棧開發(fā)達(dá)人。

階段四：Vue與React高級(jí)框架開發(fā)

該階段目標(biāo)是掌握J(rèn)S第六代語言標(biāo)準(zhǔn)，為學(xué)習(xí)技術(shù)框架打下基礎(chǔ)。學(xué)習(xí)Vue和React基礎(chǔ)知識(shí)。

ES6-10入門：

ES6-10 入門教程-慕課網(wǎng)：www.imooc.com/wiki/ES6lesson

Vue基礎(chǔ)

Vue文檔-官網(wǎng)：https://cn.vuejs.org/guide/introduction.html

Vue入門教程：http://www.imooc.com/wiki/vuelesson

Vue2.5基礎(chǔ)入門：http://www.imooc.com/learn/980

Vue3.0實(shí)現(xiàn)todolist：http://www.imooc.com/learn/1300

Vue組件庫搭建全流程：www.imooc.com/learn/1316

React基礎(chǔ)

• 基于實(shí)例的 React16 傻瓜課程：www.imooc.com/learn/1045

課程用一系列有趣的、簡(jiǎn)潔明快的實(shí)例由淺入深的闡述了 React 的特色，概念和基本使用。同時(shí)進(jìn)而引出了 React 16 新的概念和用法。讓沒有任何 React 基礎(chǔ)的人也能很快掌握核心概念并且應(yīng)用于實(shí)際工作中。

• React組件與生命周期:www.imooc.com/learn/944

本課程可以學(xué)到1、使用React輕松地創(chuàng)建用戶交互界面 2、了解JavaScript擴(kuò)展語法JSX 3、使用JSX簡(jiǎn)單快速編寫界面模板。

• React16.4快速上手：www.imooc.com/learn/1023

本課程講給大家介紹React的開發(fā)環(huán)境搭建，組件化的開發(fā)思路以及基礎(chǔ)JSX語法，也通過Todolist功能的實(shí)現(xiàn)，給大家講解了React組件間的通信方式，同時(shí)，課程中還包括了React中使用ES6對(duì)代碼進(jìn)行優(yōu)化的內(nèi)容，以及如何對(duì)React項(xiàng)目進(jìn)行樣式修飾的內(nèi)容。

• React Hooks：www.imooc.com/learn/1288

從零開始學(xué)習(xí)React Hooks，在非 class 的情況下可以使用更多的 React 特性。掌握核心理念和使用方法，掌握使用React Hooks分離頁面及邏輯，在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯以及更好的組織項(xiàng)目代碼，消除冗余提高復(fù)用性。

階段五：Node.js全棧開發(fā)

掌握Node.js全棧開發(fā)基礎(chǔ)知識(shí)，增加面試機(jī)會(huì)。

Node基礎(chǔ)：www.imooc.com/learn/1193

系統(tǒng)地學(xué)習(xí)NodeJS的基礎(chǔ)，熟練使用Node的核心API，了解node的運(yùn)行過程，學(xué)會(huì)搭建自己的服務(wù)器，并實(shí)現(xiàn)我們常見的登錄、注冊(cè)功能，揭開后端開發(fā)的神秘面紗。

Node全棧入門：www.imooc.com/learn/1199

整個(gè)項(xiàng)目重點(diǎn)分為2部分，前端通過react+redux實(shí)現(xiàn)UI界面和狀態(tài)管理，后端使用express做web框架，使用mysql作為數(shù)據(jù)存儲(chǔ)，利用 sequelize作為ORM，便于通過nodejs管理和操作mysql。

前端項(xiàng)目練習(xí)-從0到1快速構(gòu)建自己的后臺(tái)管理系統(tǒng)

本課程從實(shí)戰(zhàn)角度出發(fā)，帶領(lǐng)你使用開源框架開發(fā)后臺(tái)管理系統(tǒng)，并打通完整項(xiàng)目流程。

一個(gè)web應(yīng)用項(xiàng)目，無論規(guī)模大小，總會(huì)需要后臺(tái)管理人員對(duì)數(shù)據(jù)進(jìn)行管理，比如內(nèi)容發(fā)布、審核、等等，這時(shí)候就需要一個(gè)后臺(tái)管理系統(tǒng)。

完整的后臺(tái)管理系統(tǒng)除了需要具備自身業(yè)務(wù)管理的功能之外，還需要一些非業(yè)務(wù)性的功能，比如權(quán)限控制、日志系統(tǒng)、通用功能模塊等，開發(fā)難度大且周期長(zhǎng)，是很多web項(xiàng)目的痛點(diǎn)。本課程將通過一個(gè)開源框架提供的一系列非業(yè)務(wù)性功能機(jī)制，結(jié)合項(xiàng)目自身的業(yè)務(wù)性功能模塊來快速一個(gè)后臺(tái)管理系統(tǒng)。

本課程講帶你學(xué)習(xí)前后端分離開發(fā)，幫助你掌握前后端綜合技術(shù)棧，從而實(shí)現(xiàn)全技術(shù)棧的綜合提升。學(xué)習(xí)完本課程，你可以獨(dú)立完成一個(gè)小項(xiàng)目，是非常有用的項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)，可以為進(jìn)一步做大項(xiàng)目做好鋪墊。

0到1快速構(gòu)建自己的后臺(tái)管理系統(tǒng)-慕課網(wǎng)：www.imooc.com/learn/1247

最后

掌握了以上所有的課程、教程內(nèi)容后，你就已經(jīng)在前端世界里踏出了關(guān)鍵一步，打下了扎實(shí)的基礎(chǔ)。接下來，選擇自己喜歡方向繼續(xù)深耕吧，期待你成為大神的那一天。