这门课解决什么工作场景

很多转行者买前端课，最怕的是看完一堆概念，打开编辑器依然写不出一个完整页面。这门课的切入点很务实：它不承诺让你七天变成工程师，而是用一周时间，带你走通“写一个能运行的网页”这条最小闭环。课程主线是 HTML 骨架、CSS 排版，再到 JavaScript 基础，最终落在像素鸟案例上。它的真实价值在于：让你在投入大量时间学前之前，先确认自己能不能适应这种“写标签、调样式、查报错”的工作节奏。如果你正在犹豫要不要转行，或者平时工作中需要偶尔改改活动页、改文案、调样式，这一周的低成本验证比任何宣发都有用。

适合什么基础与建议先看哪几块

资料默认你是零基础，连“网页是怎么在浏览器里跑起来的”都不需要提前懂。第一天的预习从认识网页、浏览器内核、web 标准讲起，这部分别跳。建议先重点啃两块：一是 HTML 标签的分类与嵌套关系，尤其是路径那几节，相对路径和绝对路径是新手最容易卡住的地方，后面写图片和跳转全靠它；二是 CSS 基础，重点看选择器怎么写、盒子模型怎么算。猪八戒骨架记忆法听起来有点土，但对应新手记住初始结构是有效的，别因为名字土就略过。开发工具部分跟着装好编辑器，后面每天都在用。

学完能独立做什么与资料怎么配合练习

走完这七天，你能独立完成一个结构清晰的静态新闻页，知道怎么排版、插图、做锚点跳转，最后用 JavaScript 把像素鸟跑起来。这不算能去接外包，但足够让你判断自己适不适合继续往下学。练习方法上，别只看视频：每一节讲完标签，就自己在编辑器里敲一遍，改改属性看效果。新闻页面制作和像素鸟是两个检验点，前者验证你 HTML+CSS 的熟练度，后者验证你能不能看懂基础逻辑。遇到样式不对，先自己查文档，再回去看对应章节，这比反复拖进度条有效得多。资料配合的顺序就是：先看概念，立刻动手写，写不动再回看，别囤着不动手。


前端 七天入门计划，掌握JavaScript基础知识，实现像素鸟案例

课程目录

*   第一章 HTML+CSS 【前端七天入门计划】/

  *   【预习】HTML基础/

    *   认识网页

    *   常见浏览器

    *   浏览器内核

    *   web标准

    *   HTML初识

    *   HTML骨架

    *   我的第一个页面及其标签简介

    *   猪八戒版骨架记忆法

    *   什么是标签及其分类

    *   标签嵌套和并列关系

    *   新闻页面制作

    *   简单小测验

    *   开发工具sublime

    *   doctype和XHTML

    *   字符集

    *   标题段落和水平线标签

    *   换行标签

    *   文本格式化标签

    *   标签的属性

    *   图像标签

    *   链接标签

    *   链接target使用

    *   锚点定位

    *   不同页面的锚点定位

    *   base和nofollow标签

    *   特殊符号

    *   注释标签

    *   相对路径（一）

    *   相对路径（二）

    *   绝对路径及其总结

  *   【预习】CSS基础上/

    *   CSS是网页的美容师

    *   CSS 初识

    *   CSS体验语法规则

    *   语法补充及其常见错误

    *   chrome开发者工具

    *   标签选择器

    *   体验类选择器

    *   类选择器练习Google案例

    *   类选择器常见错误及其命名规范

    *   多类名选择器（1）

    *   多类名选择器（2）

    *   体验ID选择器

    *   类选择器和id选择器区别

    *   通配符选择器

    *   CSS注释

    *   标签的语义化（理论）

    *   交集选择器

    *   并集选择器

    *   后代选择器

    *   子元素选择器

    *   复合选择器测试题

    *   体验块级元素

    *   体验行内元素

    *   行内元素和和块级元素区别

    *   体验行内块元素

    *   三种显示模式转换

    *   行内样式表

    *   内部样式表

    *   外部样式表

    *   样式表总结

    *   导入式样式表

    *   CSS层叠性

    *   CSS继承性

    *   CSS权重特殊性

    *   a和h标题特殊性

    *   6个经典权重练习题

  *   CSS基础下/

    *   背景图片及其平铺

    *   背景位置

    *   英雄联盟背景做法

    *   背景附着（背景固定）

    *   背景简写

    *   购物车案例

    *   看透网页布局的本质

    *   认识盒子模型

    *   体会边框

    *   为什么要用定位

    *   元素定位属性

    *   静态定位

    *   相对定位详解

    *   父级没有定位子级以浏览器可视区对齐

    *   父级有定位则以父级对齐

    *   绝对定位不添加边偏移

    *   子绝父相的由来

*   第二章 Javascript【前端七天入门计划】/

  *   JavaScript基础进阶/

    *   阶段概述和JS简介

    *   浏览器原理简介

    *   基本输出语句

    *   代码注释

    *   JS的书写位置

    *   script标签的属性

    *   变量的命名

    *   变量的声明赋值和使用

    *   变量在内存中的存储

    *   交换变量练习

    *   数据类型

    *   number类型

    *   数值范围

    *   数值检测

    *   string类型

    *   字符串的不可变性

    *   字符串的拼接

    *   boolean类型

    *   undefined类型

    *   其他类型值转string

    *   其他类型值转number

    *   其他类型值转boolean

    *   算术运算符

    *   一元运算符

    *   逻辑运算符1

    *   逻辑运算符2

    *   其他运算符

    *   练习

    *   选择语句if

    *   三元运算符01

    *   三元练习

    *   选择语句switch

    *   选择语句switch练习

    *   循环语句for

    *   for循环的简单练习

    *   for循环的中等练习

    *   for循环的困难练习

    *   break和continue

    *   循环语句while

    *   循环语句while练习

    *   数组的声明

    *   数组的基本属性

    *   数组的遍历

    *   length属性的应用

    *   length属性详解

    *   数组练习1

    *   数组练习2

    *   数组练习3

    *   函数介绍

    *   函数的参数

    *   函数的返回值

    *   函数练习1

    *   函数练习2

    *   函数练习3

    *   函数练习4

    *   函数的调试

    *   参数详解

    *   函数的返回值

    *   函数的两种定义方式

    *   全局变量和局部变量

    *   递归

    *   回调

    *   键值对

    *   英雄对象

    *   学生对象

    *   对象字面量

    *   for循环的两种方式

    *   批量创建对象

    *   this关键字

    *   访问属性的两种方式

    *   选择语句if练习

  *   Javascript-DOM/

    *   DOM简介

    *   DOM初体验

    *   标签位置

    *   小猫发威

    *   京东商品展示1

    *   京东商品展示2

    *   阻止a标签的默认行为1

    *   相册案例

    *   事件三要素

    *   批量获取元素

    *   批量注册事件

    *   限定范围

    *   京东商品展示升级1

    *   京东商品展示升级2

    *   设置类名

    *   显示隐藏切换1

    *   显示隐藏切换2

    *   显示隐藏二维码

    *   替换类名

    *   方法封装

    *   获取样式属性

    *   设置样式属性

    *   动态创建页面结构

    *   效率问题（一）

    *   效率问题（二）

    *   createElement

    *   动态创建文本框

    *   动态创建列表

    *   延时定时器

    *   间歇定时器

    *   阻止a标签的默认行为2

    *   相册案例升级

    *   节点的插入移除和克隆

    *   offsetHeight和style.height的区别

    *   offsetHeight和offsetWdith的构成

    *   offsetParent

    *   offsetLeft的构成

    *   offsetLeft和style.left的不同

    *   【像素鸟游戏】案例分析和布局

    *   【像素鸟游戏】小鸟的运动

    *   【像素鸟游戏】创建管道

    *   【像素鸟游戏】管道的运动