使用 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 开发人员