Tailwind CSS 项目:2 个 TailwindCSS 项目(Instagram,..)
Tailwind CSS 项目。使用 Tailwind CSS 3.0 构建 Instagram 和 Tesla 克隆。适合您投资组合的真正 Tailwind 项目
讲师:Dr. Sahand Ghavidel
口袋资源独家Udemy付费课程,独家中英文字幕,配套资料齐全!
用不到1/10的价格,即可享受同样的高品质课程,且可以完全拥有,随时随地都可以任意观看和分享。
你将会学到的
- Tailwind CSS 3.0 最佳实践
- 建立响应式网站
- 创建 Tesla 和 Instagram 克隆
- 学习核心概念,例如实用程序优先的基础知识、响应式设计、重用样式和添加自定义样式
- 了解布局、Flexbox 和网格、间距、大小、版式、效果、过渡和动画等等
- 了解如何使用Tailwind CSS官方插件,例如滚动条和表单
说明
新的 Tailwind CSS 项目。使用Tailwind CSS 3.0构建Instagram 和 Tesla 克隆。适合您投资组合的真正 Tailwind 项目
欢迎来到通过实际网站设计学习Tailwind CSS的最佳课程。
这是一门基于项目的课程,包括Instagram和Tesla克隆等实践项目。我们将使用Tailwind CSS的最佳实践来设计和构建美观且响应灵敏的网站。到目前为止,已经为本课程创建了两个项目,包括Instagram和特斯拉克隆项目,并且每个月都会添加更多项目。您可以在课程表中查看每个项目的预览。
在这个全新的课程中,您将学习实用程序优先基础知识、响应式设计、 重用样式和添加自定义样式等核心概念。您将了解布局、Flexbox和网格、间距、大小调整、版式、效果、过渡和动画等等。本课程还教你如何使用scrollbar、form等tailwindcss官方插件。您将能够使用 Tailwind CSS 最新版本构建令人惊叹的响应式网站。
我叫Sahand,拥有超过 15 年的编程经验。
我将担任您的讲师,并在问答部分回答您的任何问题。我希望在课程中见到您并开始与您一起开展项目。
- 项目1:Tesla UI 克隆:在这个项目中,我们将使用 tailwind css 创建一个 Tesla UI 克隆。我们的主页有两个部分,包括标题和主要部分。标题包括特斯拉徽标、产品和主菜单。菜单中的这些项目具有悬停效果,并且背景颜色发生变化。标题的响应方式使得当我们的屏幕较小时,我们将无法再看到产品菜单。我们将使用 tailwind css 隐藏和内联类来实现这一点。主页的标题和主要部分有一个背景图像,它是 Model 3 的图像。我们将学习如何使用 tailwind css bg 类更改背景图像。在标题下,我们有汽车名称和非接触式交付链接。该链接有一条下划线,当我们将鼠标悬停在它上面时,下划线会变粗。我们将学习如何使用 Tailwind CSS 装饰类来做到这一点。我们这里还有 2 个按钮。按钮也反应灵敏。当我们的屏幕较小时,它们彼此叠置,但在较大的屏幕中,它们彼此相邻且较小。在页面底部,我们有一个弹跳的箭头。这个图标来自 Hero-icons 网站,该网站与 tailwind css 具有相同的所有者。并且使用 tailwind css animate 类添加了边界效果。在另外 2 个页面中,我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。我们这里还有 2 个按钮。按钮也反应灵敏。当我们的屏幕较小时,它们彼此叠置,但在较大的屏幕中,它们彼此相邻且较小。在页面底部,我们有一个弹跳的箭头。这个图标来自 Hero-icons 网站,该网站与 tailwind css 具有相同的所有者。并且使用 tailwind css animate 类添加了边界效果。在另外 2 个页面中,我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。我们这里还有 2 个按钮。按钮也反应灵敏。当我们的屏幕较小时,它们彼此叠置,但在较大的屏幕中,它们彼此相邻且较小。在页面底部,我们有一个弹跳的箭头。这个图标来自 Hero-icons 网站,该网站与 tailwind css 具有相同的所有者。并且使用 tailwind css animate 类添加了边界效果。在另外 2 个页面中,我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。它们彼此相邻并且较小。在页面底部,我们有一个弹跳的箭头。这个图标来自 Hero-icons 网站,该网站与 tailwind css 具有相同的所有者。并且使用 tailwind css animate 类添加了边界效果。在另外 2 个页面中,我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。它们彼此相邻并且较小。在页面底部,我们有一个弹跳的箭头。这个图标来自 Hero-icons 网站,该网站与 tailwind css 具有相同的所有者。并且使用 tailwind css animate 类添加了边界效果。在另外 2 个页面中,我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。我们有 Model Y 和配件,最后我们还有响应式页面的页脚。所有网站的样式仅使用 tailwind css 3.0 版。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。
- 项目2:Instagram UI 克隆:在这个项目中,我们将使用 tailwind css 创建一个 Instagram UI 克隆。我们的主页有两个部分,包括标题和提要部分。标题包括 Instagram 徽标、搜索栏以及带有用户图像的菜单。这些图标使用 CSS 函数 scale() 进行动画处理。标题的响应方式是,当我们的屏幕较小时,Instagram 徽标会有所不同,并且我们将不再看到主页图标。在标题下的提要部分中,我们有故事部分,它首先是可滚动的,并且也为用户提供过渡效果。我们在 feed 部分也有 2 个帖子。每个帖子都有标题、图像、按钮、标题、评论和输入框。点赞数显示在第二条帖子中。另外,在这篇文章中,心形和书签图标充满了颜色。所有网站的样式仅使用 tailwind css 3.0 版。此外,该网站的所有图标均来自hero-icons,它与tailwind css具有相同的所有者。整个源代码可以在 github 存储库中找到,您可以在资源部分中找到。
此课程面向哪些人:
- 想要学习 Tailwind CSS 并通过实际项目构建自己的产品组合的开发人员
声明:口袋资源网(koudaizy.com)提供的所有课程、素材等资源全部来源于互联网,赞助VIP仅用于对口袋资源服务器带宽及网站运营等费用支出做支持,从本站下载资源,说明你已同意本条款。