通过Tailwind CSS，快速实现美观、响应式的网页布局。

您将会学到

  • 快速学习创建和编辑布局
  • 使用代码沙盒学习 Tailwind 工具类
  • 构建 5 个迷你项目和 6 个网站项目
  • 使用 Tailwind CLI 设置开发环境
  • 配置样式以创建自定义布局

课程要求

你应该了解 CSS 的基础知识

课程描述

这是一个以项目为基础的课程，通过学习如何使用 Tailwind CSS 框架创建出色的布局，让你熟悉并掌握实用类（utility classes）的使用，而不是像 Bootstrap 那样使用基于组件的类。让我们看看这门课程的大纲…

✔️ The Sandbox（代码沙盒）

虽然我不想一开始就进入项目，但如果你愿意的话，当然也可以直接开始。因此，前两个部分我们将在一个代码沙盒中进行练习。在这些部分的每一个新视频中，我们都会有一个新的文件来进行实验和学习 Tailwind 的某个特定方面。例如，我们会有关于颜色、排版、间距、弹性类等的页面/视频。这使我们能够按特定顺序全面了解 Tailwind 的各个部分，而不是直接跳入项目。

✔️ 小型项目

接下来，我们将运用在沙盒环境中所学到的知识来创建一些小型项目。这些项目创建起来大约需要10到20分钟，并且我们会为每个项目制作一个视频。这些迷你项目包括：

  • 邮件订阅卡片
  • 定价网格
  • 产品模态框
  • 图片画廊
  • 登录弹窗

我甚至可能以后添加更多小项目。这些项目将帮助你通过创建实际内容来入门。

✔️ 网站项目

接下来，我们将开始构建更大的落地页网站。这将真正考验你所学到的知识。总共有 6 个不同的网站。它们都非常现代且外观整洁。我们与 Frontend Mentor 合作设计了这些网站。一些项目会包含少量的 JavaScript，用于实现如汉堡菜单、标签切换和一些表单验证等功能。让我们看看这些项目。

  • Clipboard 网站 – 一个简单的软件产品落地页。主要关注 flexbox 和对齐方式，还有一些背景图片等。
  • Loopstudios – 一家 VR 公司的网站，包含酷炫的图片，响应式的移动端菜单以及一些 JavaScript，还有渐变覆盖效果。
  • Shortly – 一个链接缩短工具的网站。我们将设计一个美观的响应式菜单，并添加一些 JavaScript 用于表单验证和 DOM 操作。
  • Testimonial Grid – 一个项目，我们专注于使用 Tailwind 的网格类。
  • Fylo – 产品页面，包含浅色/深色模式功能。我们将添加一些 JavaScript 来将颜色模式保存到本地存储中，还将有一个动态的标签组件用于常见问题解答。
  • Bookmark – 书签管理器扩展的着陆页。这个网站将包含一些动态背景图片、一个汉堡菜单和一些使用 JavaScript 的标签。

此课程面向哪些人

任何想要提高网站和 UI 布局创建能力的人

声明：本站所有资源、素材等全部来源于互联网，赞助VIP仅用于对IT资源服务器带宽等费用支出做支持，从本站下载资源，说明你已同意本条款。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。