使用 HTML 和 CSS 构建现代响应式网站

本课程提供学习模块、迷你项目及三大完整网站,让你全面掌握 HTML 和 CSS,构建出令人惊艳的现代响应式网站。

你将会学到的

  • 与迷你项目一起构建三个高质量网站。
  • 提供沙盒环境,用于学习标签、CSS 属性、无障碍设计及其他概念。
  • 涵盖语义元素、盒子模型、过渡效果、关键帧、伪选择器等更多内容。
  • 使用 Flexbox 与 CSS Grid 创建灵活布局。
  • 运用媒体查询、相对单位和灵活布局,构建响应式网站。
  • 学习 Git、GitHub 和网站部署的基础知识。
  • 掌握 BEM(Block Element Modifier)方法论。

适合所有技能水平

本课程适合任何水平的开发者,从初学者到高级用户。无论你是打算使用 React 构建前端应用,还是投身于全栈 Node.js、PHP、Python 等技术,总会在某种程度上需要用到 HTML 和 CSS。

课程覆盖内容

  • 网站工作原理。
  • Visual Studio Code 设置:快捷键、Live Server、Emmet 插件使用。
  • HTML5 语义元素与布局。
  • CSS 基础:颜色、字体、对齐等。
  • 盒子模型:边距、填充、边框。
  • 响应式设计:媒体查询、容器查询。
  • CSS 单位:rem、em、vh、vw 等。
  • Flexbox 布局模型。
  • CSS Grid。
  • 动画:关键帧与过渡效果。
  • JavaScript:切换类与样式。
  • CSS 自定义属性。
  • Git 与 GitHub。
  • 网站部署:Netlify 和 Vercel 平台。

迷你项目与挑战

  • 项目 1:Lumina 创意机构网站。
  • 项目 2:Tutor 课程网站。
  • 项目 3:Leno 移动应用网站(采用 BEM 方法论)。

此课程面向哪些人

从绝对初学者到资深开发者。

通过本课程,您将不仅掌握 HTML 和 CSS 的深度知识,还将通过实际项目应用这些技能,从概念设计到成品网站,全程参与其中。无论您的目标是成为一名前端开发者,还是希望提升现有技能,本课程都将提供宝贵的资源和实践机会,助您达成梦想。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。