|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/tailwind-from-scratch/
课程评论：没有评论
课程名称：从零开始的Tailwind CSS：通过项目学习 课程概述：这是一个有趣的项目基础课程，旨在通过使用Tailwind CSS框架创建出色的布局，帮助学员熟练使用工具类，而非像Bootstrap那样使用基于组件的类。下面是课程的结构概览： ✔️ **沙盒** 在开始项目之前，我们将先在编码沙盒中进行练习。在前两个部分中，每个新视频将会有一个新的文件，用于实验和学习Tailwind的某个特定方面。例如，我们将讨论颜色、排版、间距、Flex类等。这种方式可以让我们按照特定的顺序涵盖Tailwind的所有部分，而不是直接进入项目。 ✔️ **迷你项目** 接下来，我们将利用在沙盒环境中学到的知识创建一些小项目。这些小项目的完成时间在10到20分钟之间，每个项目将会包含一个视频进行演示。迷你项目包括：电子邮件订阅卡、定价网格、产品模态框、图像画廊、登录模态框。可能会之后添加更多迷你项目，以帮助你通过创造一些东西来入门。 ✔️ **网站项目** 之后，我们将开始制作更大规模的落地页网站，这将真正考验你所学的内容。共有六个现代化、简洁的网站项目，设计与Frontend Mentor合作。一些项目将包含JavaScript功能，例如汉堡菜单、选项卡和表单验证。项目包括： - **Clipboard 网站**：简单的软件产品落地页，主要关注Flexbox和对齐，同时使用一些背景图像。 - **Loopstudios**：虚拟现实公司网站，包含酷炫图像，响应式手机菜单以及一些JavaScript，带有渐变叠加效果。 - **Shortly**：链接缩短工具网站，包含一个漂亮的响应式菜单，并添加少量JavaScript进行表单验证和DOM操作。 - **Testimonial Grid**：一个专注于使用Tailwind网格类的项目。 - **Fylo**：具有明暗模式功能的产品页面，添加JavaScript以将颜色模式保存到本地存储，包含动态选项卡组件供FAQ使用。 - **Bookmark**：书签管理扩展落地页，包含动态背景图像、汉堡菜单，以及使用JavaScript的选项卡。 通过这些项目的学习，学员将逐步掌握Tailwind CSS的应用，提升前端开发技能。
This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Let's take a look at the outline for this course...✔️ The SandboxI don't want to jump right into the projects, though you certainly could if you want. So the first two sections, we will be working in a coding sandbox. In every new video in these sections, we will have a new file to experiment with and learn all about a certain aspect of Tailwind. For example, we will have pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to essential touch on all parts of Tailwind in a specific order, rather than just jumping right into projects.✔️ Mini-ProjectsNext, we will take what we learn in the sandbox environment and use it to create some small projects. These are things that will take 10 - 20 minutes to create and we will do it all in one video per project. The mini-projects includeEmail Subscribe CardPricing GridsProduct ModalImage GalleryLogin ModalI may even add more mini-projects later. These will help you get your feet wet by creating something.✔️ Website ProjectsNext, we will start to work on larger landing-page websites. This will really put what you learned to the test. There will be 6 different websites. They are all very modern and clean-looking. We partnered with Frontend Mentor for the designs. Some projects will have a bit of javaScript for things like hamburger menus, tabs, and some validation. Let's take a look at the projects.Clipboard Website - Simple software product landing page. Focusing mostly on flexbox and alignment. Some background images, etc.Loopstudios - VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects.Shortly - Website for a link shortening tool. We will have a nice-looking responsive menu and add a little JavaScript for some form validation and working with the DOM.Testimonial Grid - A project where we focus on using Tailwind's grid classes.Fylo - Product page with a light/dark mode feature. We will add some JavaScript to save the color mode to local storage. We will also have a dynamic tab component for the FAQ.Bookmark - Bookmark manager extension landing page. This website will have some dynamic background images, a hamburger menu and some tabs that will use JavaScript.
