课程主题与工作场景应用

这门课通过构建5个不同类型的响应式网站（如个人作品集、家具展示、建筑项目等），教授学员如何使用HTML、CSS和JavaScript实现前端开发。适合需要提升静态网站构建能力，或希望在作品集中增加实战案例的前端初学者和转行者。课程重点在于响应式设计，即确保网站在不同设备（桌面、平板、手机）上的适配性，这是现代网页开发的基本要求，尤其适用于个人开发者、初创公司或需要快速搭建展示型网站的场景。

适合基础与核心内容

课程要求学员具备基础的HTML标签认知和简单的CSS布局经验，无需JavaScript前置知识，会从基础语法讲起。资料通过5个项目逐步深入，建议先看个人作品集网站模块，因为它涵盖了基础布局和交互逻辑，后续的家具和建筑网站会在此基础上扩展新的CSS技巧（如弹性盒模型、媒体查询）。核心内容围绕响应式设计的三大支柱展开：1）HTML结构化，如语义化标签的运用；2）CSS自适应，包括网格布局、视口单位（vw/vh）和流式布局；3）JavaScript增强，如滚动动画、图片懒加载等。每个项目都会提供完整代码和设计思路拆解，资料包含源码和演示视频，可直接复制修改用于练习。

实践与独立产出

学完后能独立完成类似个人作品集、电商首页等5种常见响应式网站的搭建，并掌握动态交互的实现方法。资料包中的项目文件会分模块提供素材和标注，配合视频讲解逐步实践。建议结合项目需求查阅MDN文档补充CSS新特性（如CSS变量、动画属性），并通过修改参数测试不同分辨率下的显示效果。例如，在个人作品集项目中，可以尝试调整导航栏的折叠逻辑，或为项目展示区添加悬停效果。这种边学边改的方式能巩固响应式设计的核心要点，最终产出可用于求职或客户展示的成品。

课程目录

3. Project 2 - Personal Portfolio Website57 集
  • 1. Project Preview.mp4
  • [14.9 MB] 2. Create and Style the Header of the Website_en.srt [31.2 KB] 7. Create and Customize the Footer of the Website_en.srt [5.3 KB] 5. Build Projects Section.srt [14.8 KB] 3. Style and Make the Navigation Work_en.srt [9.7 KB] 6. Create and Style Contact Section.srt [20.0 KB] 1.2 Portfolio Website - Starter Files.zip
  • [5.1 MB] 1. Project Preview_en.srt [2.5 KB] 4. Create and Customize Skills Section.mp4
  • [157.0 MB] 5. Build Projects Section.mp4
  • [172.4 MB] 7. Create and Customize the Footer of the Website.mp4
  • [48.1 MB] 1. Project Preview.srt [2.5 KB] 2. Create and Style the Header of the Website.srt [31.0 KB] 5. Build Projects Section_en.srt [14.7 KB] 8. Make the Project Responsive.srt [12.9 KB] 4. Create and Customize Skills Section.srt [14.3 KB] 4. Create and Customize Skills Section_en.srt [14.7 KB] 8. Make the Project Responsive.mp4
  • [154.5 MB] 6. Create and Style Contact Section.mp4
  • [189.8 MB] 6. Create and Style Contact Section_en.srt [20.3 KB] 3. Style and Make the Navigation Work.srt [9.6 KB] 7. Create and Customize the Footer of the Website.srt [5.3 KB] 3. Style and Make the Navigation Work.mp4
  • [94.8 MB] 1.1 Portfolio Website - Final.zip
  • [5.1 MB] 8. Make the Project Responsive_en.srt [13.1 KB] 2. Create and Style the Header of the Website.mp4
  • [313.8 MB] 📁 2. Project 1 - Furniture Website 9. Make the Project Responsive.mp4
  • [234.0 MB] 7. Create Contact Section【整理不易‖记得关注：CunWorKNotes】.mp4
  • [83.7 MB] 8. Create and Style the Footer of the Website【资源精选‖更多关注：CunworkNotes】.mp4
  • [41.0 MB] 3. Build Header of the Website.mp4
  • [87.8 MB] 6. Build Blog Section.mp4
  • [77.6 MB] 2. Create and Style the Navigation of the Website_en.srt [17.9 KB] 4. Create Products Section.srt [8.5 KB] 1. Project Preview.mp4
  • [20.4 MB] 6. Build Blog Section_en.srt [8.1 KB] 6. Build Blog Section.srt [7.9 KB] 2. Create and Style the Navigation of the Website.mp4
  • [161.6 MB] 4. Create Products Section.mp4
  • [92.4 MB] 5. Create and Style Pricing Section.mp4
  • [180.7 MB] 8. Create and Style the Footer of the Website.srt [4.3 KB] 8. Create and Style the Footer of the Website_en.srt [4.3 KB] 9. Make the Project Responsive_en.srt [21.2 KB] 1. Project Preview.srt [3.2 KB] 5. Create and Style Pricing Section_en.srt [17.5 KB] 1. Project Preview_en.srt [3.3 KB] 9. Make the Project Responsive.srt [20.9 KB] 7. Create Contact Section_en.srt [8.9 KB] 4. Create Products Section_en.srt [8.7 KB] 7. Create Contact Section.srt [8.6 KB] 1.2 Furniture Website - Starter Files.zip
  • [956.7 KB] 1.1 Furniture Website - Final.zip
  • [960.7 KB] 3. Build Header of the Website_en.srt [9.6 KB] 3. Build Header of the Website.srt [9.2 KB] 5. Create and Style Pricing Section.srt [17.3 KB] 2. Create and Style the Navigation of the Website.srt [17.6 KB] 📁 4. Project 3 - Architectural Website 1.1 Architectural Website - Final【公重号：CunWorkNotes】.zip
  • [15.3 MB] 9. Create and Customize the Footer of the Website.mp4
  • [55.7 MB] 3. Create and Style the Navigation - Part 2【持续更新‖免费提供：CunworknoteS】.mp4
  • [128.4 MB] 8. Build Contact Section【持续更新‖免费提供：CunworknoteS】.mp4
  • [58.9 MB] 10. Make the Project Responsive【持续更新‖免费提供：CunworknoteS】.mp4
  • [203.3 MB] 5. Build About Section.mp4
  • [105.5 MB] 1. Project Preview【持续更新‖免费提供：CunworknoteS】.mp4
  • [24.0 MB] 9. Create and Customize the Footer of the Website.srt [6.0 KB] 6. Create and Customize Projects Section.mp4
  • [123.6 MB] 1. Project Preview.srt [2.9 KB] 8. Build Contact Section.srt [6.4 KB] 2. Create and Style the Navigation - Part 1_en.srt [13.8 KB] 1. Project Preview_en.srt [3.0 KB] 4. Create and Style the Header of the Website.mp4
  • [65.5 MB] 2. Create and Style the Navigation - Part 1.srt [13.5 KB] 5. Build About Section_en.srt [9.7 KB] 8. Build Contact Section_en.srt [6.6 KB] 4. Create and Style the Header of the Website_en.srt [6.9 KB] 2. Create and Style the Navigation - Part 1.mp4
  • [122.4 MB] 7. Create and Style Customers Section.mp4
  • [86.0 MB] 7. Create and Style Customers Section_en.srt [9.6 KB] 10. Make the Project Responsive_en.srt [18.4 KB] 6. Create and Customize Projects Section.srt [11.6 KB] 5. Build About Section.srt [9.5 KB] 1.2 Architecture Website - Starter Files.zip
  • [15.3 MB] 3. Create and Style the Navigation - Part 2.srt [14.2 KB] 9. Create and Customize the Footer of the Website_en.srt [6.1 KB] 6. Create and Customize Projects Section_en.srt [11.7 KB] 7. Create and Style Customers Section.srt [9.5 KB] 10. Make the Project Responsive.srt [18.1 KB] 4. Create and Style the Header of the Website.srt [6.7 KB] 3. Create and Style the Navigation - Part 2_en.srt [14.3 KB] 📁 1. Welcome 2. Setup.mp4
  • [12.2 MB] 2. Setup_en.srt [2.6 KB] 2. Setup.srt [2.5 KB] 1. Introduction_en.srt [10.4 KB] 1. Introduction.mp4
  • [73.1 MB] 1. Introduction.srt [10.0 KB] 📁 6. Project 5 - Coffee House Website 8. Create and Style Contact Section and Footer of the Website.mp4
  • [119.5 MB] 8. Create and Style Contact Section and Footer of the Website.srt [10.3 KB] 2. Create and Style Navigation.mp4
  • [174.0 MB] 5. Build Menu Section_en.srt [10.0 KB] 1. Project Preview.mp4
  • [31.9 MB] 4. Create and Customize About Section.mp4
  • [57.9 MB] 9. Make the Project Responsive.mp4
  • [151.6 MB] 5. Build Menu Section.srt [9.8 KB] 6. Create and Style Data Section with Animated Counters_en.srt [13.8 KB] 1. Project Preview_en.srt [2.9 KB] 3. Create Slideshow with Swiper.js.mp4
  • [158.4 MB] 3. Create Slideshow with Swiper.js_en.srt [15.1 KB] 1. Project Preview.srt [2.8 KB] 1.2 Coffee House Website - Starter Files.zip
  • [2.8 MB] 4. Create and Customize About Section_en.srt [5.8 KB] 9. Make the Project Responsive.srt [12.8 KB] 5. Build Menu Section.mp4
  • [117.1 MB] 7. Build Customers Section.srt [10.7 KB] 7. Build Customers Section_en.srt [10.9 KB] 7. Build Customers Section.mp4
  • [126.0 MB] 2. Create and Style Navigation.srt [17.7 KB] 2. Create and Style Navigation_en.srt [18.1 KB] 9. Make the Project Responsive_en.srt [12.8 KB] 3. Create Slideshow with Swiper.js.srt [14.9 KB] 4. Create and Customize About Section.srt [5.7 KB] 1.1 Coffee House Website - Final.zip
  • [2.8 MB] 6. Create and Style Data Section with Animated Counters.mp4
  • [143.1 MB] 8. Create and Style Contact Section and Footer of the Website_en.srt [10.5 KB] 6. Create and Style Data Section with Animated Counters.srt [13.6 KB] 📁 5. Project 4 - Interior Designer Website 6. Create and Style Portfolio Section_en.srt [10.3 KB] 3. Create an Animated Banner_en.srt [6.7 KB] 8. Create and Customize the Footer of the Website.srt [6.5 KB] 9. Make the Project Responsive_en.srt [14.1 KB] 3. Create an Animated Banner.srt [6.7 KB] 4. Build About Section_en.srt [14.4 KB] 6. Create and Style Portfolio Section.mp4
  • [113.2 MB] 6. Create and Style Portfolio Section.srt [10.3 KB] 4. Build About Section.mp4
  • [151.7 MB] 7. Build Data Section with Counters.srt [10.6 KB] 8. Create and Customize the Footer of the Website.mp4
  • [62.0 MB] 3. Create an Animated Banner.mp4
  • [62.7 MB] 8. Create and Customize the Footer of the Website_en.srt [6.6 KB] 5. Create and Customize Services Section_en.srt [9.6 KB] 1. Project Preview_en.srt [3.0 KB] 1. Project Preview.mp4
  • [14.0 MB] 2. Create and Make the Navigation Work.srt [24.9 KB] 2. Create and Make the Navigation Work.mp4
  • [219.2 MB] 4. Build About Section.srt [14.2 KB] 5. Create and Customize Services Section.srt [9.4 KB] 9. Make the Project Responsive.srt [14.2 KB] 7. Build Data Section with Counters_en.srt [10.8 KB] 2. Create and Make the Navigation Work_en.srt [25.7 KB] 5. Create and Customize Services Section.mp4
  • [100.2 MB] 1.2 Interior Designer Website - Starter Files.zip
  • [708.8 KB] 9. Make the Project Responsive.mp4
  • [151.1 MB] 1. Project Preview.srt [3.0 KB] 7. Build Data Section with Counters.mp4
  • [113.0 MB] 适合人群 前端开发初学者 希望提升网站构建技能的开发者 学习收获 掌握HTML/CSS/JS基础 学会响应式网站设计 完成个人作品集 祝您学习愉快！ 学有所成，前程似锦！