【Udemy Tailwind CSS 热门课程】Tailwind CSS From Scratch | Learn By Building Projects
使用 Tailwind CSS 实用程序类快速高效地构建美观的布局。
你将会学到的
- 学习超级快速地创建和编辑布局
- 使用代码沙箱了解 Tailwind 实用程序类
- 搭建5个小项目和6个网站项目
- 了解如何使用 Tailwind CLI 设置开发环境
- 配置您的样式以创建自定义布局
要求
- 你应该知道 CSS 的基础知识
说明
这是一门有趣的基于项目的课程,学习如何使用 Tailwind CSS 框架创建出色的布局,以及如何使用实用程序类而不是使用基于组件的类的 Bootstrap。让我们来看看这门课程的大纲……
✔️沙盒
我不想直接进入这些项目,但如果你愿意,你当然可以。所以前两个部分,我们将在编码沙箱中工作。在这些部分的每个新视频中,我们都会有一个新文件来试验和了解 Tailwind 的某个方面。例如,我们将为颜色、排版、间距、弹性类等提供页面/视频。这使我们能够以特定顺序对 Tailwind 的所有部分进行必要的接触,而不仅仅是直接进入项目。
✔️迷你项目
接下来,我们将把我们在沙盒环境中学到的东西,用它来创建一些小项目。这些东西需要 10 到 20 分钟才能完成,我们将在每个项目的一个视频中完成所有工作。小项目包括
- 电子邮件订阅卡
- 定价网格
- 产品模式
- 图片库
- 登录模式
以后我什至可能会添加更多的小项目。这些将帮助你通过创造一些东西来弄湿你的脚。
✔️网站项目
接下来,我们将开始在更大的登陆页面网站上工作。这真的会让你学到的东西经受住考验。将有6个不同的网站。它们都非常现代和干净。我们与 Frontend Mentor 合作进行设计。一些项目将有一些 javaScript 用于汉堡菜单、选项卡和一些验证等内容。让我们来看看这些项目。
剪贴板网站– 简单的软件产品登陆页面。主要关注 flexbox 和对齐。一些背景图片等。
Loopstudios – VR 公司网站,带有炫酷的图像、带有一些 JavaScript 的响应式移动菜单、渐变叠加效果。
很快– 链接缩短工具的网站。我们将有一个漂亮的响应式菜单,并添加一些 JavaScript 用于一些表单验证和使用 DOM。
Testimonial Grid – 我们专注于使用 Tailwind 的网格类的项目。
Fylo – 具有亮/暗模式功能的产品页面。我们将添加一些 JavaScript 以将颜色模式保存到本地存储。我们还将为常见问题提供一个动态选项卡组件。
书签– 书签管理器扩展登陆页面。该网站将有一些动态背景图像、一个汉堡菜单和一些将使用 JavaScript 的选项卡。
此课程面向哪些人:
- 任何想要更好地创建网站和 UI 布局的人
IT资源 - 高品质精品资源分享网站 » 【Udemy Tailwind CSS 热门课程】Tailwind CSS From Scratch | Learn By Building Projects