这门课面向的是完全没有前端基础、想先做出一个能打开的网站的人。它不讲框架，也不涉及工程化工具链，主体就是 HTML、CSS、JavaScript 三件套，最后落到一个可部署的实战站点。如果你之前被各种"三个月转行前端"的说法劝退过，这门课的门槛设定更接近"先弄明白网页是怎么被写出来的"。

它解决的具体场景

很多零基础学习者的第一个卡点不是逻辑，而是打开代码编辑器之后不知道从哪一行写起。这门课从标签开始讲，列表、表格、表单、超链接、音视频和语义标签，都是你在真实页面里一定会碰到的元素。学完之后你会具备一个明确的判断力：拿到一张设计稿或一个现成网页，你知道它大致由哪些结构组成，哪些效果属于样式层，哪些需要脚本介入。这个判断力比背下多少标签更重要。

能独立做出什么

课程后半段会涉及 CSS 应用方式和伪类选择器，配合前面的标签知识，你可以独立完成一个多区块的静态页面，包含导航、图文排版、表单输入和交互状态变化。如果再往下跟一层 JavaScript，常见的效果比如点击切换、简单校验、页面动态更新也能自己写出来，而不是复制别人的代码后不知道怎么改。完成整个流程后，你会走一遍从写代码到把网站放到线上可访问的完整路径，这一步对转行者尤其关键——它意味着你手里有一个能拿给别人看的成品，而不是一堆练习片段。

资料包适合什么基础

  • 完全没写过代码：可以跟，但建议每个标签自己手敲一遍，别只看。
  • 学过一点 HTML 但样式写不顺：重点看 CSS 应用方式和伪类选择器部分，能补上短板。
  • 已经会用框架做项目：这门课对你偏基础，价值主要在查漏补缺，不必按顺序看。

需要提醒的是，视频类资料的进度完全取决于你是否动手。只看不写，两倍速刷完也做不出东西。

关于资料本身

课程以视频为主，配合文档截图，属于完结状态，不用担心中途断更。讲解顺序是先标签、后样式、再交互，节奏偏稳，适合按顺序推进。如果你是那种需要先看到成品才有动力的人，可以先跳到实战部分看一遍结果，再回头补基础。

选课之前先想清楚一件事：你是要立刻做出一个网页，还是先系统了解前端全貌。这门课更偏向后者，但落点是前者。对零基础来说，这个组合是合理的。

课程目录

【bilibili付费课程】-B站：前端入门：从零开始做网站（完结）文档.png [493.5 KB] 21.响应式布局【公众号：秘知圈】.mp4
 [197.4 MB] 6.音视频和语义标签【公众号：秘知圈】.mp4
 [181.0 MB] 23.项目实战（宠爱有家）上【公众号：秘知圈】.mp4
 [220.6 MB] 10.颜色，文本，字体属性.mp4
 [222.0 MB] 30.电商网站项目部署.mp4
 [176.6 MB] 16.盒子模型.mp4
 [188.4 MB] 29.论坛项目部署.mp4
 [248.0 MB] 3.列表和表格标签.mp4
 [173.2 MB] 18.浮动属性.mp4
 [130.9 MB] 4.表单标签.mp4
 [136.9 MB] 09.复合选择器.mp4
 [223.8 MB] 19.flex布局.mp4
 [150.6 MB] 8.伪类选择器.mp4
 [215.8 MB] 27.网站部署.mp4
 [160.3 MB] 24.CSS JS实战（宠爱有家）下.mp4
 [197.2 MB] 7.CSS应用方式.mp4
 [190.4 MB] 14.内边距和外边距.mp4
 [170.7 MB] 5.超链接标签.mp4
 [185.9 MB] 11.背景属性.mp4
 [246.7 MB] 17.定位属性.mp4
 [155.9 MB] 2.常用文本标签.mp4
 [154.0 MB] 28.博客项目部署.mp4
 [172.1 MB] 【宣导片】Web前端入门：从零开始做网站.mp4
 [28.2 MB] 15.内边距和外边距（综合练习）.mp4
 [116.0 MB] 20.grid布局.mp4
 [211.0 MB] 22.网站设计.mp4
 [115.2 MB] 1.HTML入门与工具选择.mp4
 [99.9 MB] 31.网站营销与运营.mp4
 [126.2 MB] 25.域名与服务器.mp4
 [114.4 MB] 26.linux服务器环境搭建.mp4
 [194.8 MB] 适合人群 前端开发初学者 希望提升网站制作技能的人员 学习收获 掌握HTML、CSS、JavaScript等前端技术 能够独立制作网站 提升网站设计和部署能力 祝您学习愉快！ 学有所成，前程似锦！