逐步学习使用 TailwindCSS 3.0 和示例构建现代网站 | 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资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
TheItzy » 逐步学习使用 TailwindCSS 3.0 和示例构建现代网站 | Tailwind CSS 3.0: Fundamentals
TheItzy » 逐步学习使用 TailwindCSS 3.0 和示例构建现代网站 | Tailwind CSS 3.0: Fundamentals