2018年爱创Web前端基础之Html+Css+Js人门实练视频教程

从静态页面到交互逻辑：这套基础课讲透了什么

很多初学者在Web前端入门时，最容易踩的坑就是HTML、CSS和JavaScript三者割裂学习。HTML只会被堆标签，CSS只会调颜色，JS一写就乱。这套课程的核心价值，在于它严格遵循了“结构先行、样式殿后、行为收尾”的工程化思维。它不是零散的知识点拼凑，而是用六天CSS强化训练来弥补大多数速成班对盒子模型、定位机制讲解不足的短板，再用JavaScript的八天阶梯式练习，把DOM操作从理论落实到肌肉记忆。对于想真正理解网页是如何“搭建”起来的人，这种分阶段、重基础的架构比跟风学框架更务实。

课纲含金量拆解：哪些章节值得精看，哪些可以略读

从资料线索看，课程分为HTML基础、CSS系统训练、JavaScript实战三个模块。建议重点精看的有三处：一是**CSS第一天到第六天**的完整序列。这部分通常涵盖选择器优先级、盒模型、浮动与清除、定位、Flex布局基础等核心概念。很多新手觉得CSS难，是因为前期对“文档流”理解不深，这里的系统性讲解能帮你建立正确的布局思维。二是**JavaScript第二天到第四天**，这通常是变量、函数、事件绑定的关键期，代码量大、逻辑密，必须动手敲，不能只看。三是**项目实战**部分，这是检验前两项是否融会贯通的唯一标准。

相对可以略读的是**HTML第二天**（通常重复第一天内容）和**编程软件安装配置**（工具问题现查现解决即可）。至于《锋利的jQuery》电子书，属于时代产物，可作为补充阅读理解封装思想，但勿沉迷于旧版API，重心仍应放在原生JS上。

适合谁学，以及资料如何配合练习

本课程适合**零代码基础或仅有简单标签认知**的学习者，不适合已经掌握Vue/React等现代框架的人。 prerequisites仅为：能熟练使用电脑文件管理，有耐心跟随视频逐行敲代码。

资料包中除了视频，还附带了**Sublime Text 2.3**和**Adobe Photoshop/Fireworks**的使用说明。编辑建议：别被这些软件吓住，Sublime Text只需学会创建、保存、预览（配合浏览器）三步即可，无需深入配置插件。Photoshop部分仅用于理解切图尺寸和视觉稿读取，不必深钻。

练习方法论：每节视频暂停后，务必**先不看了原码，自己凭记忆重写一遍**，再对比源码找差异。CSS部分必须用开发者工具（F12）实时调试布局；JS部分要逐个修改参数观察行为变化。学完后，你应该能独立手写一个包含响应式导航栏、图文混排、点击交互效果的单页网站——这才是这套课真正的交付目标。