更新时间:2023-04-04 来源:黑马程序员 浏览量:
黑马前端大佬说:数字产业在,前端就在!大家最应该做的是不断提升自己的技术!技术是不断发展,唯有不断变强,才能让自己不被拍在沙滩上!
为了让零基础的同学更高起点的掌握前端技术,黑马重磅推出《从0到1学前端》教程,让大家 15天便能轻松入门!给足大家应对风浪的底气,用更全面、更实用的技术,护你们周全!
先问大家一个问题:学IT最有效的途径是什么?
答案:项目实战!没有项目实战的教程一律按"假教程"判定!
本课程从前端开发环境开始讲解,课程内容既包含企业中制作网页的基础知识,又包含企业PC端网页和移动端网页的制作流程,通过每日案例、学成在线和小兔鲜儿、极速问诊、酷我手机网页、腾讯全端等多个项目掌握多端网页制作技巧,轻松学习HTML5和CSS3。妥妥的真教程!
1.内容更全面:全网更全面、实用的前端基础课教程,包括PC端页面布局、移动端页面布局、响应式网页布局;
2. 实战式教学:课程全程实战教学,让学生学以致用。课程中的项目均来自一线大厂,类型丰富,包含教育、电商、医疗、娱乐等类型项目;
3. 贴近企业开发:企业讲啥,我们教啥!用流行布局方案 Flex,弱化过旧知识浮动;讲解开发最常用的移动端适配方案,rem和vw/vh;使用LESS预处理器开发页面; 使用 PxCook 测量工具,100%还原设计稿;
4. 每日课后作业:让学生不只是纸上谈兵,真正做到既能学到又能练到;
5. 丰富配套资料:代码、讲义、笔记、大纲等全部已打包,一键领取,轻松学习!
>初学者:在校生及应届毕业生;
>进阶者:对目前职业有进一步提升需求的在职人员;
>感兴趣者:希望快速入门前端开发的相关人员。
√ 掌握PC端网页布局能力
- 网站开发流程
- 布局思路
√ 掌握移动端网页适配能力
- rem+flexible.js 适配方案
- vw 适配方案
√ 掌握响应式网页布局能力
- 媒体查询
- Bootstrap UI 框架
√ 网页性能优化能力
- Logo优化
- TDK优化
- 代码开发规范
- 布局技巧优化最佳选择
一、HTML5基础
1. 掌握标签语法
2. 标题标签
3. 图像标签与路径
4. 超链接标签
5. 多媒体标签(音频、视频)
6.综合案例-个人简介内容排版
7.综合案例-Vue简介内容排版
二、HTML5进阶
1. 列表
2. 表格
3. 表单
4.综合案例-腾讯体育新闻区域布局
5.综合案例-智联注册页面制作
三、CSS3基础
1.CSS引入方式
2.基础选择器
3.文字控制属性
4.综合案例-新浪新闻详情内容美化
5.综合案例-mdn官方CSS简介内容美化
四、CSS3进阶
1.复合选择器
2.CSS三大特性
3.background属性
4.显示模式
5.综合案例-新浪搜索热词区域制作
6.综合案例-微信banner效果制作
五、CSS3盒子模型
1.结构伪类选择器
2.伪元素选择器
3.CSS3盒子模型详解
4.圆角、阴影属性
5.综合案例-抖音产品卡片区域制作
6.综合案例-新浪新闻区域制作
六、Flex布局
1.标准流
2.浮动
3.Flex布局
4.综合案例-小米产品区域布局
5.综合案例-抖音解决方案区域制作
七、Flex实战项目-学成在线
八、高级技巧
1.定位 position
2.CSS精灵技术
3.字体图标
4.综合案例-京东服务区域制作
5.综合案例-淘宝轮播图区域制作
九、综合实战项目-小兔鲜儿
1.TDK优化
2.小兔鲜儿公共模块
十、综合实战项目-小兔鲜儿
十一、CSS3高级技巧
1.2D平面转换 transform
2.渐变 linear-gradient
3.综合实战项目-喜马拉雅官网
十二、CSS3高级技巧
1.3D空间转换
2.动画 animation
3.综合案例-制作走马灯动画
4.综合实战项目-全民出游网页布局
十三、移动端网页布局
1.屏幕分辨率
2.常见移动端适配方案
3.rem适配方案
4.媒体查询
5.less语法
6.综合实战项目-极速问诊手机端网页布局
十四、移动端网页布局
1.vw/vh适配方案
2.综合实战项目-酷我手机端网页布局
十五、 响应式网页布局
1.媒体查询 mediaQuery
2.Bootstrap UI框架使用
3.综合实战项目-腾讯全端响应式网页布局