【Udemy Tailwind CSS 高分课程】Tailwind CSS 3.0: Fundamentals

逐步学习使用 TailwindCSS 3.0 和示例构建现代网站。

你将会学到的

  • 安装和配置使用 Tailwind CSS 的理想环境
  • 遵循最新的 Web 开发标准,从头开始构建登录页面
  • 使页面适应不同的屏幕尺寸(响应式设计)
  • 应用 CSS 状态
  • 实现自动暗模式
  • 重用类(不要重复自己的原则)
  • 学习使用 4 个第一方 Tailwind CSS 插件
  • 配置和使用新的即时引擎

要求

  • 基本 HTML 和 CSS
  • 使用代码编辑器

说明

您将了解 Tailwind CSS,这是一个改变您使用 CSS 的方式的 CSS 框架。您将发现并体验它与其他人的不同之处。

本课程将为您节省学习和研究工作,您将从头开始学习基础知识,以构建您下定决心的任何网站。

在这门综合课程中了解如何使用 Tailwind CSS。

  • 使页面适应不同的屏幕尺寸(响应式设计)
  • 应用 CSS 状态
  • 设计暗模式
  • 重用你的风格(不要重复自己的原则)
  • 了解如何安装和使用插件

Tailwind CSS 是目前最流行的 CSS 框架,它采用与标准 CSS 截然不同的方法。

通常,当您想要设置网页样式时,您已经编写了 CSS。Tailwind CSS 为您提供了可直接包含在 HTML 中的预定义类。

该框架涵盖了您可能需要的所有内容:颜色、大小、字体类型、边距、间距、弹性框、圆角、阴影等。因此您可以编写完全自定义的设计,而无需编写任何 CSS。

这种工作方式为您提供了几个优势。例如:

  • 您不会花费精力选择班级名称。
  • 您没有要维护的 CSS 文件。
  • 样式是每个页面的本地样式。

基于实用程序类的框架,例如 Tailwind CSS,已经被 GitHub、Heroku、Twitch 或 Kickstarter 等知名公司使用。Netflix 已经在其收视率最高的 10 大电视和电影列表中使用了 Tailwind CSS。市场上的使用趋势正在增长。

您将使用 Tailwind CSS 实用程序类作为课程项目为类似 Netflix 的网站构建登录页面。你会一点一点地改进和完成它。

课程大纲:

  • 安装节点。它是安装必要软件包的基础。
  • 配置 Visual Studio Code,我将向您展示我用来舒适工作的插件。
  • 安装 Tailwind CSS 及其依赖项,让一切准备好开始工作。
  • 使用移动优先的方法构建类似 Netflix 的登录页面。
  • 使页面适应不同的屏幕尺寸,称为响应式设计。
  • 添加 CSS 状态,例如当您将鼠标悬停在按钮上时。
  • 使用自动暗模式配置您的页面。
  • 创建可以重用的自定义类,以避免重复代码。

您还将控制 4 个官方 Tailwind CSS 插件:

  • 排版:设置文本样式(例如,来自数据库的文本)。
  • 表格:用于样式表格
  • Aspect-Ratio :控制图像的纵横比
  • Line-Clamp : 限制文字,达到视觉和谐

此外:

  • 在每个课程模块之后,您将进行一次测验,以检查您是否错过了任何重要的事情。
  • 该课程还活着,我将随着 Tailwind CSS 的发展对其进行更新。您还可以访问我发布页面源代码的存储库。

通过本课程,我可以让您轻松实用地建立良好的基础并构建您想要的任何页面,并提供清晰实用的课程。

如果您还没有决定,您可以免费观看我们从头开始构建页面的课程。所以你可以看到整个过程。

当然,如果您有任何问题,您可以将它们发布在问题和答案部分,我会在那里回答。

里面见!

此课程面向哪些人:

  • 想要提高前端技能的网页设计师和开发人员
  • 具有 HTML 和 CSS 知识并希望学习新的工作方式的学生
  • 谁想学习Web开发中的新技术
声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
IT资源 - 高品质精品资源分享网站 » 【Udemy Tailwind CSS 高分课程】Tailwind CSS 3.0: Fundamentals