第1章 前期準備
介紹了課程內(nèi)容、背景和案例展示、什么是響應式網(wǎng)站、怎樣分析設計圖、響應式網(wǎng)站設計實踐原則
第2章 如何組織項目目錄結(jié)構(gòu)
介紹了約定優(yōu)于配置的思想,常見的項目目錄和文件的組織方式,一些基本文件的作用等知識,為編碼開始做準備。
第3章 開始編寫HTML代碼
根據(jù)設計圖一步一步實現(xiàn)基本的HTML結(jié)構(gòu),介紹了文檔類型、meta聲明、IE條件表達式、html5新標簽、語義化選擇、大綱等知識。
第4章 如何實現(xiàn)PC端的樣式
一步一步實現(xiàn)PC端的樣式,介紹了CSS Resets和Normalize,相對單位和其中的一些坑,清除浮動的幾種方式,塊級格式化上下文(BFC),inline-block的空白問題,CSS Sprites,盒模型計算,自動前綴(autoprefixer)等知識。
第5章 如何實現(xiàn)移動端的樣式
一步一步實現(xiàn)移動端的樣式,介紹了Chrome的響應式調(diào)試工具,媒體查詢中使用相對單位,CSS3選擇器,CSS打印相關屬性等知識。
第6章 如何實現(xiàn)響應式廣告及響應式圖片
一步一步實現(xiàn)響應式滾動廣告,介紹了如何選擇第三方組件,OwlCarousel2的使用等知識。介紹了響應式圖片實現(xiàn)的幾種方式,picture/srcset/size標簽如何使用,svg原理和制作方式,polyfill原理,picturefill的使用,圖片壓縮等知識。
第7章 Node.js簡介
介紹了Node.js的基本知識,同步異步編程方式的區(qū)別,包管理器NPM的使用,package.json如何配置,簡單httpserver的使用等知識。
第8章 如何處理兼容性及在多個設備上進行調(diào)試
介紹了處理兼容性的主要技術,包含調(diào)試的方法,虛擬機的使用,CSS hacks,polyfill和shim,Modernizr,兼容性查詢等知識。
第9章 如何打包發(fā)布
介紹了前端自動化的概念,grunt/gulp/webpack,如何使用Gulp進行自動化打包發(fā)布等知識。
第10章 課程擴展1 -- 選擇一個趁手的IDE
選擇一個趁手的IDE,WebStorm。介紹了使用框架的注意事項,Bootstrap、SemanticUI、Foundation、PureCSS等響應式框架的特點和優(yōu)缺點等。
第11章 課程擴展2 -- 聊聊原型設計和切圖
介紹了原型設計的概念和工具,Axure等工具的使用,如何切圖,Photoshop的使用,Sketch的使用等知識。
第12章 課程大作業(yè)
根據(jù)講師所講知識,獨立做出與課程相似的響應式頁面。