使用 HTML5、CSS3、JavaScript 的响应式作品集网站
使用 HTML5、CSS3、SASS、Bootstrap5 和 JavaScript 将 Figma 作品集模板转换为响应式 HTML 网站
讲师：Cheetah Academy
口袋资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
你将学到什么
- 提高 HTML5 和 CSS3 技能
- 提高 SCSS 技能
- 提高Bootstrap5技能
- 提高 JavaScript 技能
- 如何开发响应式网站以在移动设备、平板电脑、笔记本电脑和其他设备上良好呈现
- HTML5、CSS3、SCSS、Bootstrap5 和 JavaScript 如何结合在一起
- 如何使用 CSS3 和 JavaScript 创建动画和过渡
- 如何使用纯 JavaScript 而不是 jQuery 和 jQuery 插件
- 如何使用 HTML5、CSS3、SCSS、Bootstrap5 和 JavaScript 构建作品集网站
- 熟悉 Emmet 插件等工具来提高编码速度
- 使用 JavaScript 开发具有深色和浅色模式的网站
要求
- 需要具备 HTML5、CSS3、SCSS、Bootstrap5 和 JavaScript 的基本知识
描述
欢迎来到猎豹学院培训课程。我希望这对您来说是一门有益的课程，您将从中学到很多东西，从而提高您的编程技能。本课程旨在帮助那些 Web 前端开发的初学者、没有可接受的产品组合或无法创建最终产品的人。在本次培训课程中，我们打算教您以下内容：
- 提高您的技能并采取一些步骤变得专业。
- 帮助您学习创造有价值产品的基本技能。
- 帮助您创建良好且美观的作品集。
如果您了解 HTML5、CSS3、SASS、Bootstrap5 和 JavaScript 的基础知识，但不知道如何使用它们创建个人网站，本课程将为您提供帮助。本课程将教您如何使用 HTML5、CSS3、SASS、Bootstrap5 和 JavaScript 创建个人网站。以下是每个工具、库、编程语言和框架的作用：
Figma 在本教程中的作用是什么？
首先，应使用 Photoshop、Sketch、Adobe xd 和 Figma 等图形应用程序创建网站。然后，前端 Web 开发人员将使用 HTML5、CSS3、SASS、Bootstrap5、JavaScript、jQuery、Vue.js、React 和 Angular 等语言、库和 Web 框架对其进行编码，成为静态网站。所有组件、颜色、字体大小、边距、填充等均由 Figma 确定，您必须从 Figma 文件中提取这些值并将其转换为代码。在本课程中，我们将把 Figma 中实现的模板变成一个漂亮的网站，您将学习如何从 Figma 中提取照片、颜色、字体大小等。
HTML5 在本教程中的作用是什么？
现在大多数网站都是基于 HTML 的，它是当今网站和 Web 应用程序的基础。该语言的最新版本中添加了 MAIN、SECTION、HEADER、FOOTER 和 ASIDE 等语义标签，以区分网站的各个部分，称为 HTML5。已经通过DIV标签完成了，网站的页面被划分为不同的部分，这些DIV标签使用CLASS和ID来区分。
CSS3 在本教程中的作用是什么？
没有CSS的HTML没有视觉吸引力，你应该使用CSS来赋予网站色彩、光泽和美感。在本教程中，我们将使用 CSS 的第三个版本，称为 CSS3。在此版本中，添加了许多吸引人的功能，例如过渡、动画、嵌入字体和阴影，通过它们可以使网站更具吸引力。本课程广泛使用 CSS3 功能来提高您的 CSS3 知识。
SASS 在本教程中的作用是什么？
当我们使用 CSS 时，我们可以使用名为 SASS 的特殊工具更快地编写 CSS 代码。SASS 是 CSS 的预处理器，包含变量、嵌套和继承等功能，可加快 CSS 代码的编写速度。浏览器无法理解SASS代码，因此当我们编写这些代码时，它们会被编译器转换为CSS，以便浏览器可以理解。在本课程中，您将学习实际使用 SASS，提高您的 SASS 技能。如今，前端 Web 开发人员应该能够在其列表技能中使用 CSS 预处理器。
Bootstrap5 在本教程中的作用是什么？
当您使用 HTML 和 CSS 创建网站时，您应该将其创建为响应式网站，以使其在各种设备（例如手机、平板电脑、笔记本电脑和不同尺寸的显示器）上正确可见。您可以使用媒体查询来执行此操作，但更简单的方法是使用 Bootstrap，如果您遵循 Bootstrap 规则，它会内置一个预制的网格结构。因此，您将拥有一个响应式网站，可以在不同尺寸的不同设备上良好地显示。当我们录制本教程时，Bootstrap的最新版本是第五个版本，Bootstrap5。在这个版本中，和之前的版本一样，使用flex来创建网格，它的功能与Bootstrap4几乎相同，只有很小的变化。最显着的变化是删除了 jQuery；相比之下，使用了原始 JavaScript。
JavaScript 在本教程中的作用是什么？
全球最流行的编程语言是 JavaScript，在本课程中，我们将使用 JavaScript。我们希望提高您的 JavaScript 技能；您观看和练习本课程的次数越多，您学到的 JavaScript 技能就越多。在本课程中我们不会使用 jQuery 及其插件，因为我们希望您学习原始 JavaScript。如您所知，JavaScript 是 jQuery、React、Vue.js、Angular 和 Svelte 等所有 JavaScript 库和框架的基础，因此如果您想学习这些库和框架中的任何一个，您应该首先充分学习 JavaScript。我们希望提高您的 JavaScript 技能，因为我们相信 JavaScript 是前端的核心！
这个网站有什么特点？
- 该网站有深色和浅色两种模式；通过单击按钮，网站主题可以使用 JavaScript 从深色变为浅色，反之亦然。
- 该网站包含流星雨动画。
- 存在传记部分，用于显示关键技能、外语、编程技能、每个领域的多年经验以及其他信息。
- 能够在简历部分显示教育背景和工作经验。
- 在投资组合部分查看投资组合和每个投资组合的详细信息
- 在推荐部分显示客户反馈
- 个人简历下载链接
- 个人社交网络链接
本课程适合谁：
- 见习前端 Web 开发人员
- 初级前端 Web 开发人员
- 中级前端 Web 开发人员
