Level2 小试牛刀传送门
这个阶段你将接触到传统的前端,也就是HTML/CSS,通过这两种语言你将很容易在浏览器窗口中,设计你想展现的内容,我们在最后准备一个页面,当切完这个页面,那么你将正式进入前端学习的大门,是不是很激动?但是别被满足,更精彩的在后面
TASK 000 如何优雅的提问
任务描述:学会优雅的提问,在学习前端的过程中,你可能遇见奇奇怪怪的问题,那么如果你提前掌握提问的技巧,那绝对能够在整个学习过程中节省下不少的时间和精力
TASK 000 注册coding
在准备开始学习前端的时候,首先注册一个内部的coding账号,现在你只需要知道coding这个平台类似于备份,可以将本地的代码传到coding上进行备份
TASK 000 安装前端开发环境
工欲善其事,必先利其器,选择你的前端武器吧
- Git(版本控制工具)
- VS Code(编辑器)
- Markdown(文档编写)
- Chrome浏览器(调试环境)
TASK 001 HTML、CSS基础
任务描述:前端三大剑客中两个 HTML 、CSS
- 掌握
HTML
、CSS
基础知识,能够较为熟练的使用HTML
、CSS
编写页面
- 学习
HTML
常用标签的使用,明白每个标签的用途.
- 认识
CSS
样式,理解CSS
选择器的权值计算、布局模型、盒模型等,掌握基本的网页布局基础
1、HTML + CS
2、前端切图-综合练习
- 3.1 综合切图训练1:电商网站 [Deadline:2017/1/17 24:00]
- 3.2 综合切图训练2:新浪首页 [Deadline:2017/1/19 24:00]
- 3.3 综合切图训练3:优酷首页 [Deadline:2017/1/21 24:00]
- 3.4 练习的描述
- 注意事项:编码过程中请尽可能遵守勤奋蜂HTML、CSS编码规范
- 暂时不要使用less,sass等,那是后面的任务
- 不要使用任何样式框架
- 不需要写任何JavaScript,只需要关注HTML,CSS。当然你要控制不了自己,可以写一下。
- 任务关键步骤执行:
- 编码的同时,记录遇到的技术问题和疑惑;
- 开始重(Chong)构(Xie),让自己的代码比第一次要有提升,尽可能让第一次遇到的问题和疑惑不再存在
- 在博客上写上一到两篇的学习心得或者你觉得研究的还不错的知识点
- 期望达成
- 学会能够基于设计稿来合理规划HTML结构
- 理解语义化,合理地使用HTML标签来构建页面
- 能够较为熟练地使用HTML、CSS创建一个静态页面
- 大概了解并实践企业中对于HTML及CSS的编码规范
- 编写复用性高、可读性、可维护性好的代码
TASK 005 提交代码到
现在我们要将代码提交到coding上,这可能有一定的理解难度,挑战开始了
TASK 006 深入知识点
资料汇总
是不是感觉跟着上面的教程来走是不是感觉没有成一套体系,那么现在机会来了,我们为你整理了前端成体系的资料,通过这些知识希望你能更深刻的理解前端
- HTML
- CSS
自我验证
HTML、CSS学完了,自己学的怎么样,来自己检测一下吧
- HTML
- 了解什么是
Web
- 了解什么是
HTML
- 了解一些基本的
HTML
语法及标签
- 能够写出自己的第一个
HTML
- doctype是什么,它是干啥用的
- ul、ol、dl都适合用在什么地方
- 能够娓娓道来你是怎么理解HTML语义化的
- CSS
CSS
选择器类型、优先级
CSS
继承,层叠,样式优先级机制
- 文本,边框,背景,行高等相关属性
- 块状元素,内联元素和内联块状元素的概念
- 盒模型的所有概念,学习如何计算各种盒模型
position
的相关知识
float
的相关知识
- 基本的布局方式
Grid
,Flexbox
等布局方式
- CSS选择器都有哪些
- position都有什么值,区别是什么
- 经典的清除浮动代码中每一行语句都是干什么用的,为什么少了它不行
- 让一个HTML节点居中的各种实现方式
- 神马圣杯布局、双飞翼布局都是些什么东西
- 强大的负外边距都能干嘛
- position有几种,absolute和relative的区别
- display的几个属性,及其区别
- display:none与visibility:hidden的区别
- 浏览器清除浮动的方式及其原理
- 元素垂直居中和水平居中的方法
- CSS盒子模型
- BFC
- src与href的区别
- CSS选择器的优先级
- 几种常见的布局的方式及其实现
- flex布局
- px、em、rem的区别
- 为什么要使用css sprites