打印 上一主题 下一主题

[百度网盘]所向披靡的响应式开发-某课网

[复制链接]
跳转到指定楼层
楼主
admin 发表于 2017-10-2 21:11:19
10406 7

所向披靡的响应式开发

移动互联网时代前端攻城狮必会技能产品

产品

原型设计

交互设计

设计技巧和原则响应式

网站设计实践原则

渐进增强 or 优雅降级

先针对小屏幕 or 大屏幕进行设计

确定支持的浏览器

断点选取原则

响应式布局基础

媒体查询

CSS3选择器

视口(Viewport)

Resets与Normalize

Rem布局网页

清除浮动和BFC

响应式技术

如何确定响应式断点

响应式滚动广告

响应式图片

代码优化及调试

处理兼容性的技术

多个设备上同步调试

打包发布

Nodejs和NPM

gulp使用

课程目录:

第1章 前期准备

介绍了课程内容、背景和案例展示、什么是响应式网站、怎样分析设计图、响应式网站设计实践原则

第2章 如何组织项目目录结构

介绍了约定优于配置的思想,常见的项目目录和文件的组织方式,一些基本文件的作用等知识,为编码开始做准备。

第3章 开始编写HTML代码

根据设计图一步一步实现基本的HTML结构,介绍了文档类型、meta声明、IE条件表达式、html5新标签、语义化选择、大纲等知识。

第4章 如何实现PC端的样式

一步一步实现PC端的样式,介绍了CSS Resets和Normalize,相对单位和其中的一些坑,清除浮动的几种方式,块级格式化上下文(BFC),inline-block的空白问题,CSS Sprites,盒模型计算,自动前缀(autoprefixer)等知识。

第5章 如何实现移动端的样式

一步一步实现移动端的样式,介绍了Chrome的响应式调试工具,媒体查询中使用相对单位,CSS3选择器,CSS打印相关属性等知识。

第6章 如何实现响应式广告及响应式图片

一步一步实现响应式滚动广告,介绍了如何选择第三方组件,OwlCarousel2的使用等知识。介绍了响应式图片实现的几种方式,picture/srcset/size标签如何使用,svg原理和制作方式,polyfill原理,picturefill的使用,图片压缩等知识。

第7章 Node.js简介

介绍了Node.js的基本知识,同步异步编程方式的区别,包管理器NPM的使用,package.json如何配置,简单httpserver的使用等知识。

第8章 如何处理兼容性及在多个设备上进行调试

介绍了处理兼容性的主要技术,包含调试的方法,虚拟机的使用,CSS hacks,polyfill和shim,Modernizr,兼容性查询等知识。

第9章 如何打包发布

介绍了前端自动化的概念,grunt/gulp/webpack,如何使用Gulp进行自动化打包发布等知识。

第10章 课程扩展1 -- 选择一个趁手的IDE

选择一个趁手的IDE,WebStorm。介绍了使用框架的注意事项,Bootstrap、SemanticUI、Foundation、PureCSS等响应式框架的特点和优缺点等。

第11章 课程扩展2 -- 聊聊原型设计和切图

介绍了原型设计的概念和工具,Axure等工具的使用,如何切图,Photoshop的使用,Sketch的使用等知识。

第12章 课程大作业

根据讲师所讲知识,独立做出与课程相似的响应式页面。

课程下载:

游客,如果您要查看本帖隐藏内容请回复


吾爱编程网 - 免责声明
1、吾爱编程网为非营利性网站,全站所有资料仅供网友个人学习使用,禁止商用
2、本站所有文档、视频、书籍等资料均由网友分享,本站只负责收集不承担任何技术及版权问题
3、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除下载链接并致以最深的歉意
4、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
5、一经注册为本站会员,一律视为同意网站规定,本站管理员及版主有权禁止违规用户
6、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和吾爱编程网的同意
7、吾爱编程网管理员和版主有权不事先通知发贴者而删除本文




上一篇:webApp阅读器实战项目视频教程
下一篇:彻底征服React.js + Flux + Redux
收藏
收藏
支持
支持
反对
反对
回复

使用道具 举报

沙发
yuwenfang 发表于 2017-10-20 08:14:04
11111111111111111111111111111
回复

使用道具 举报

板凳
as1102511 发表于 2018-1-19 09:57:20
111111111111111
回复

使用道具 举报

地板
nicky_hb 发表于 2018-5-30 20:26:53
1111111111111111111
回复

使用道具 举报

5#
benberg 发表于 2018-9-8 11:53:09
看了LZ的帖子,我只想说一句很好很强大!支持吾爱编程网!
回复

使用道具 举报

6#
保持简单丶 发表于 2018-9-8 23:36:17
看了LZ的帖子,我只想说一句很好很强大!支持吾爱编程网!
回复

使用道具 举报

7#
旧人梦 发表于 2018-10-7 19:01:56
看了LZ的帖子,我只想说一句很好很强大!支持吾爱编程网!
回复

使用道具 举报

8#
369987023 发表于 2021-10-30 00:00:53
不管你信不信,反正我是信了。支持吾爱编程网!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

返回顶部 返回列表

平台简介

吾爱编程网:http://www.52pg.net/是IT技能学习交流平台,我们提供了丰富的移动端开发、php开发、web前端开发、android开发、Java开发、Python开发、大数据开发、区块链开发、人工智能开发以及html5等大量的实战视频教程资源。(如果我们有侵犯了您权益的资源请联系我们删除)

点击这里给我发消息|Archiver|手机版|小黑屋|站点地图|吾爱编程  |网站地图

Powered by Discuz! X3.2??? 2017-2020 Comsenz Inc.??吾爱编程网