Web前端入门：从零开始做网站

本文导读

这套 Web前端入门：从零开始做网站 是一套纯 HTML+CSS 的零基础入门课，15个视频从最基础的标签讲到完整项目实战，非常适合完全没有前端经验的新手。

课程从 HTML 入门和开发工具选择开始，讲常用文本标签，然后进入 CSS 部分：复合选择器、颜色与文本字体属性、背景属性、内边距和外边距（含综合练习）、盒子模型、定位属性、浮动属性。这些是 CSS 布局的基本功。

接下来是现代布局方式：flex 弹性布局和 grid 网格布局，然后讲响应式布局让网站适配不同屏幕。最后以「宠爱有家」宠物网站项目实战收尾，把前面学的所有知识综合运用。

✨ 资源亮点

🌱 纯零基础友好：从HTML标签和CSS属性最基础讲起，不需要任何编程经验

📐 布局体系完整：传统盒子模型+定位+浮动，再到现代flex和grid

📱 响应式设计：专门讲响应式布局，让网站在手机和电脑上都能良好显示

🐾 项目实战收尾：「宠爱有家」宠物网站项目，学完即有作品集

👥 适合人群

🆕 完全零基础、想入门前端开发的初学者

🎓 计算机相关专业学生，想补前端实践能力

💼 非技术岗位想了解前端基础，能和开发更好地沟通

🔄 想转行做前端，需要从最基础开始系统学习的人

🔗 资源获取方式

• 资源名称：22.Web前端入门：从零开始做网站

• 资源规模：共 0 个目录、15 个文件

💡 使用方法：复制上方链接，打开「夸克APP」或访问夸克网盘网页版，粘贴链接并输入提取码即可保存到自己的网盘。

📂 课程目录

📂 **22.Web前端入门：从零开始做网站**
├── 📄 09.复合选择器.mp4
├── 📄 1.HTML入门与工具选择.mp4
├── 📄 10.颜色，文本，字体属性.mp4
├── 📄 11.背景属性.mp4
├── 📄 14.内边距和外边距.mp4
├── 📄 15.内边距和外边距（综合练习）.mp4
├── 📄 16.盒子模型.mp4
├── 📄 17.定位属性.mp4
├── 📄 18.浮动属性.mp4
├── 📄 19.flex布局.mp4
├── 📄 2.常用文本标签.mp4
├── 📄 20.grid布局.mp4
├── 📄 21.响应式布局.mp4
├── 📄 22.网站设计.mp4
└── 📄 23.项目实战（宠爱有家）上.mp4

📖 学习建议

1️⃣ 每节课都跟着写：HTML/CSS 是纯动手技能，看视频不动手等于白学

2️⃣ 盒子模型是核心：内外边距、边框、内容区搞不懂，后面布局全是懵的

3️⃣ flex和grid重点练：这是现在前端布局的主流方式，要练到熟练

4️⃣ 项目自己重做一遍：看完项目后关掉视频自己重新做一遍

总结与思考

HTML 和 CSS 是前端的「识字课」，虽然简单但必须扎实。这套课的好处是路线清晰——从标签到布局再到项目，没有跳跃，新手跟着走不会迷路。

学完这套课你能做出静态网站，但这只是前端的第一步。接下来需要学 JavaScript 让页面动起来，再学框架提升开发效率。