这门课的名字很直白:教你用 HTML、CSS 加一点 JavaScript 和 jQuery,做出一个企业官网的静态页面。它不涉及后端、不碰框架,也不是那种「三个月转型前端工程师」的速成方案。所以先回答最实际的问题——它值不值得你花时间。
它解决的是哪个具体场景
工作中有一类需求反复出现:公司要做一个官网、一个活动落地页、一个产品介绍页,设计稿给到你了,需要有人把它变成能在浏览器里正常打开、能点击、能适配手机屏幕的页面。这类活儿不复杂,但要求你手上有基本功:盒子怎么摆、间距怎么调、图片和文字怎么排、不同屏幕宽度下怎么不乱。
这门课瞄准的就是这个场景。学完你能独立把一张设计稿还原成静态页面,而不是只会照着教程敲一遍、换个内容就不知道从哪下手。对于在中小企业做运营、行政、市场,或者自己接点小活的自由职业者,这个能力足够应付大部分「做个官网」的需求。
学完能独立做什么,做不到什么
能做的:从空白文件夹开始,搭建多页面的企业官网结构;用 CSS 控制布局和视觉样式;给导航、轮播、下拉菜单这类常见模块加上交互效果;用浏览器开发者工具排查「为什么这个元素跑到下面去了」这类问题。这些是静态页面的核心动作,课程围绕一个完整的企业官网项目串起来,不是零散知识点堆砌。
做不到的:不要让这门课承担「学完就能找前端开发工作」的期待。它不覆盖前端工程化、组件化框架、接口联调、性能优化这些招聘要求里的硬项。如果你的目标是进互联网公司做前端,这只是起点,后面还得补很多东西。如果你的目标是把页面做出来、能交付,那它是对口的。
资料适合什么基础的人
课程定位是零基础,HTML 和 CSS 从最基本的标签和选择器讲起,JavaScript 和 jQuery 部分也是从语法和常见效果切入,不要求你先会编程。适合的人:完全没接触过网页代码、但愿意跟着动手敲的人;学过一点 HTML 但 CSS 布局总是摆不明白的人;能用可视化工具拖页面、但想搞懂底层怎么回事的人。
不太适合的人:已经有前端工作经验、想系统补框架或工程化的;想学 Vue、React 的;指望课程里讲设计理论、配色审美的。这几类人看这门课会觉得节奏偏慢、内容偏基础。
怎么用这份资料效率更高
- 不要只看视频。静态页面是手上功夫,每一节的代码都自己敲一遍,报错了自己查,比看十遍讲解管用。
- HTML 和 CSS 部分可以快过,重点放在布局和盒模型上,这是后面所有页面的地基。
- JavaScript 和 jQuery 部分,先理解「这段代码让页面发生了什么变化」,不必一开始就深究语言细节,够用就行。
- 企业官网项目那一章放慢速度,尝试不看讲解自己先做一遍,再对照课程的实现方式,差距就是你要补的地方。
- 学完后找一张真实的设计稿(网上很多免费素材)自己还原一次,这是检验有没有真学会的最直接方式。
一句实在话
这是一门手艺课,教的是「怎么把页面做出来」这件事本身。它不会让你变成前端工程师,但能让你在需要一个人把官网落地的时候,不用求人。判断要不要学,就看你现在的工作里有没有这类需求——有,它值得;没有,先想清楚学了打算用在哪。
课程目录
第一章 Html课程 第一节:Html基础01216 条
- 01 代码作用和WEB前端技术
- 02 html发展历史和定义 03 体验新闻案例01 04 体验新闻案例02
- 05 DW相关设置
- 06 DW默认代码作用
- 07 常用小标签 08 插入图01 09 插入图02
- 10 路径--相对路径平级、下级查找
- 11 路径--相对路径上级查找绝对路径 12 超链接01 13 超链接02
- 14 特殊符号 第二节:Html基础02
- 01 无序列表
- 02 体育新闻
- 03 有序列表
- 04 项目列表
- 05 表格 06 input表单控件01 07 input表单控件02
- 08 下拉菜单
- 09 文本域
- 10 表单域
- 11 base标签
- 12 锚点链接
- 13 热区链接 第二章 CSS课程 第一节:Css选择器和书写方式
- 01 体验css-css键值对规则
- 03 实体化三属性
- 04 显示模式
- 02 体验css
- 05 显示模式之间的相互转换
- 06 类选择器
- 07 google案例
- 08 id选择器
- 09 易起贷企业介绍
- 10 CSS书写方式:行内式
- 11 CSS书写方式:外链式
- 12 CSS书写方式:导入式
- 13 选择器的权重
- 14 通配符选择器 第二节:Css属性和易起贷项目导航
- 01 后代选择器
- 02 并集选择器
- 03 指定标签选择器
- 04 CSS的层叠性
- 05 CSS的继承性
- 06 引入方式之间的权重对比
- 07 复合选择器权重对比
- 08 常用文字控制属性
- 09 行高属性
- 10 超链接的伪类
- 11 水平导航和垂直导航
- 12 复合属性font
- 13 复合属性border
- 14 复合属性background
- 15 背景图固定属性
- 16 易起贷导航 第三节:Css盒子模型和易起贷项目公司新闻
- 01 盒子模型的组成部分
- 02 盒子模型在浏览器中的显示 03 剖析border和padding01 04 padding的复合写法02
- 05 版心居中
- 06 padding撑大盒子问题
- 07 CSS初始化 08 成交金额案例01-文字区域完成 09 成交金额案例02-完成 10 外边距合并问题01 11 外边距合并问题02
- 12 行内标签的垂直内外边距 13 侧导航01 14 侧导航02
- 15 公司新闻案例 第四节:CSS布局和易起贷项目header分区 01 浮动的作用01 02 浮动的属性以及工作原理02
- 03 overflow属性
- 04 常见布局:上中下
- 05 常见布局:上下+左右
- 06 清除浮动:额外标签法
- 07 清除浮动:overflow方法
- 08 清除浮动:伪元素
- 09 公司新闻案例title部分
- 10 公司新闻案例列表完成
- 11 网页准备工作
- 12 siteNav分区左边完成
- 13 siteNav分区完成
- 14 header分区实体化布局、logo完成
- 15 header分区完成 第五节:盒子定位和易起贷项目banner
- 01 相对定位
- 02 绝对定位
- 03 子绝父相和z-index
- 04 固定定位
- 05 定位盒子居中做法
- 06 轮播图按钮垂直居中
- 07 易起贷banner图居中
- 08 易起贷banner分区箭头完成
- 09 易起贷圆点完成
- 10 易起贷注册分区完成
- 11 易起贷热点新闻分区完成
- 12 易起贷icon分区完成 第六节:CSS精灵
- 01 css半透明文字背景同时透明
- 02 css半透明只有背景透明
- 03 易起贷的半透明
- 04 css精灵基础
- 05 CSS精灵应用-布局文字效果完成
- 06 CSS精灵应用效果完成
- 07 CSS精灵制作易起贷企业标语
- 08 CSS滑动门
- 09 CSS精灵和滑动门综合运用
- 10 DW代码片段 第三章 DW项目实战课程 第一节:传智播客专题页项目01
- 01 头部实体化完成
- 02 logo分区完成
- 03 header右分区完成
- 04 banner完成 05 完美蜕变分区01 06 完美蜕变分区02
- 07 完美蜕变分区完成
- 08 最高年薪分区完成
- 09 课程分区完成
- 10 火热报名分区完成
- 11 优点分区实体化完成
- 12 优点分区完成 13 超值分区01
- 14 超值分区完成 第二节:传智播客专题页项目02
- 01 课程体系-左侧图片完成
- 02 课程体系右侧dl分区完成
- 03 软件基础和平面设计分区完成
- 04 课程体系分区完成
- 05 师资文字分区完成
- 06 师资头像分区完成
- 07 学员作品分区文字部分完成
- 08 学员作品分区完成
- 09 学员人数分区完成(img大图居中方法)
- 10 人脉分区完成
- 11 选择武汉的理由分区完成
- 12 品牌分区完成
- 13 教学环境分区完成
- 14 报名分区表单完成
- 15 报名分区完成
- 16 助学金、版权分区右侧完成
- 17 版权分区完成 第三节:易起贷项目实战01
- 01 网站准备工作
- 02 zencoding使用
- 03 站点导航左侧分区完成
- 04 站点导航右侧分区完成
- 05 head部分实体化完成 06 logo背景图做法1 07 logo背景图做法2
- 08 导航分区完成
- 09 banner分区圆点和箭头完成
- 10 免费注册分区完成
- 11 热点新闻分区完成
- 12 icon分区完成
- 13 投资项目tab栏完成
- 14 投资项目表格th完成 第四节:易起贷项目实战02
- 01 首页表格单元格-文字完成
- 02 首页表格单元格-icon完成
- 03 project分区完成
- 04 新闻分区左右布局完成
- 05 新闻分区左侧标题完成
- 06 新闻分区完成
- 07 合作伙伴分区完成
- 08 版权分区实体化完成
- 09 版权dl分区完成
- 10 版权微信微博实体化-精灵图完成
- 11 版权微信微博分区完成
- 12 版权分区完成 第五节:易起贷项目实战03
- 01 列表页准备工作
- 02 列表页搜索分区实体化完成
- 03 列表页搜索分区完成
- 04 列表页完成
- 05 注册页面head头部完成
- 06 注册页面注册步骤完成 07 注册页面01
- 08 注册页面完成 第四章 JavaScript课程 第一节:体验JavaScript
- 01 体验js
- 02 js实体化盒子
- 03 变量
- 04 js控制html
- 05 js事件
- 06 事件实体化盒子
- 07 事件类型
- 08 显示隐藏盒子 09 淘宝下拉01 10 淘宝下拉
- 02 第二节:Js书写方式和数据类型
- 01 js书写位置
- 02 js搬家
- 03 动态添加删除文本
- 04 数据类型
- 05 自定义函数
- 06 自定义函数简化代码
- 07 淘宝图片切换css布局完成
- 08 淘宝图片切换JS部分完成
- 09 下拉导航css布局
- 10 下拉导航JS完成 第三节:循环判断和数组
- 01 条件判断语句
- 02 星座
- 03 分数判断
- 04 逻辑运算符
- 05 循环的结构
- 06 循环和多项判断
- 07 标签名获取元素 08 全选01 09 全选02
- 10 数组
- 11 数学公式
- 12 随机点名 第五章 Jquery课程 第一节:体验Jquery 01体验jq
- 02 入口函数区别
- 03 jq控制css
- 04 jq控制html标签属性
- 05 jq控制html内容
- 06 jq动画
- 07 jq基本选择器
- 08 过滤选择器
- 09 父选择器
- 10 下拉(排队机制)
- 11 hover事件
- 12 排他思想 第二节:自定义菜单
- 01 jq索引值 02 淘宝tab切换01 03 淘宝tab切换02
- 04 链式编程 05 淘宝商品展示01 06 淘宝商品展示02
- 07 自定义单选
- 08 自定义多选 09 自定义下拉菜单01 10 自定义下拉菜单02 11 自定义下拉菜单
- 03 第三节:自定义动画
- 01 节点操作
- 02 节点操作记笔记
- 03 新闻发布 04 微博01 05 微博02 06 微博03
- 07 淡入、淡出
- 08 突出展示
- 09 自定义动画 10 360开机效果 第四节:跟随事件
- 01 模态窗口
- 02 手风琴
- 03 京东突出展示
- 04 列表展示
- 05 each遍历函数
- 06 事件坐标
- 07 鼠标跟随
- 08 滚动跟随
- 09 导航跟随
- 10 返回顶部 第五节:定时器和呼吸灯
- 01 变量作用域
- 02 定时器
- 03 定时器动画
- 04 系统时间
- 05 淘宝定时器 06 呼吸焦点图01 07 呼吸焦点图02 08 呼吸焦点图03 09 有缝滚动






