【Udemy中英字幕】Build 8+ Modern Websites: TailwindCSS, React, Motion, Nextjs

构建 8 个以上现代网站：TailwindCSS、React、Motion、Nextjs

使用 React、TailwindCSS、Framer Motion 或 Nextjs 构建响应式、动画化和现代化的作品集网站

讲师：Czero Courses

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

反应
TailwindCSS
建立网站
网页设计

探索相关主题

要求

HTML
VSCode 或其他 IDE 初学者知识

描述

您是否曾经想创建一个网站，但是在完成导航栏和登录页面上的两段内容后，它开始变得有点困难，并且不再像在脑海中想象完成的网站那么有趣？

您是否有一些想要创建网站的想法，但是当您开始编写代码时，却发现麻烦比您想象的要大得多？

您是否有时在浏览网站时认为自己可以做得更好，但开始编写代码时却意识到这并不是那么容易？

我将帮助您不再仅仅依赖 ChatGPT 输出或复制粘贴代码——您将自行构建。您将能够直接使用代码重新创建您看到的网站或将自己的想法变为现实。您会享受这个过程。

前段时间，我坐在电脑前，打开 IDE，脑子里浮现出网站的想法，然后开始写几行代码。但过了一段时间，事情就没那么愉快了，我拼命想把那个位置往左边移一点，把那个元素精确地对齐到我想要的位置，还想知道为什么当我试图把尺寸改成移动屏幕时，页面看起来就像意大利面条一样。我给我的开发人员朋友发短信，问我的方法是否可行，或者他们是否能帮我重构代码。

我知道一定有一种方法可以带来更多乐趣，即以一种令人愉快的方式学习创建网站，然后我开始使用 TailwindCSS。我开始在 React 和 Tailwind 中重新创建我的 HTML 和 CSS 网站。我开始创建可以在其他项目中重复使用的组件，添加动画，思考如何让导航栏变得更好，如何改进该部分，哪种动画最适合添加到此布局中，以及如何创建交互式部分以便用户享受在网站上的乐趣。现在，每次打开 IDE，我都知道我可以创建任何我想要的东西。你也可以做到！

我们将介绍使用 React 和 TailwindCSS 创建的基本、高级和动画作品集网站，这是一个可重复使用的组件部分（创建导航栏、联系人、作品集部分等），我们将在其中构建可在其他项目中重复使用的构建块。为什么是作品集？因为最终我们将介绍多种布局和部分，它们也可以重复用于不同类型的网站，因此无论我们创建作品集还是 SaaS 的登录页面，调整都不会有太大不同。当然，您可以保留作品集网站——作为您的作品集、您自己的作品集网站的一部分，或将其保存为未来项目的网站模板。

我将解释如何为您的网站制作动画。正如我之前提到的，我们将使用 Motion（又名 Framer Motion）来添加流畅且引人入胜的交互。想知道如何让元素在页面上稍有延迟地出现，然后平滑地过渡到其位置吗？或者如何让另一个元素上下浮动？

完成所有这些之后，我们竟然不向世界展示我们的网站？绝对不行！我们将介绍如何部署网站并修复常见错误，以防出现任何问题。

课堂上见！