Media is too big
VIEW IN TELEGRAM
14. Form Improvements Exercise
Students are instructed to improve the form's look by adding accent colors, placeholder styles, border and ring styles, and removing the default outline.
- https://tailwind-workshop.vercel.app/form-improvements
#lesson
Students are instructed to improve the form's look by adding accent colors, placeholder styles, border and ring styles, and removing the default outline.
- https://tailwind-workshop.vercel.app/form-improvements
#lesson
Media is too big
VIEW IN TELEGRAM
15. Peer Modifiers
Steve introduces "peer" and "group" modifiers, which style elements based on their relationship to other elements. The peer modifier only works with future siblings. Namespacing peer modifiers and decoration classes are also covered in this lesson.
#lesson
Steve introduces "peer" and "group" modifiers, which style elements based on their relationship to other elements. The peer modifier only works with future siblings. Namespacing peer modifiers and decoration classes are also covered in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Group Modifiers
Steve demonstrates group modifiers and compares them with peer modifiers. Group modifiers can have different variants, such as hover, to apply specific styles to elements within the group. Data attributes can also be used with groups to create more dynamic styling effects.
#lesson
Steve demonstrates group modifiers and compares them with peer modifiers. Group modifiers can have different variants, such as hover, to apply specific styles to elements within the group. Data attributes can also be used with groups to create more dynamic styling effects.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Group Modifiers Exercise
Students are instructed to use group modifiers to add a hover style to the modal and a separate hover style to the button in the modal.
- https://tailwind-workshop.vercel.app/group-modifier
#lesson
Students are instructed to use group modifiers to add a hover style to the modal and a separate hover style to the button in the modal.
- https://tailwind-workshop.vercel.app/group-modifier
#lesson
Media is too big
VIEW IN TELEGRAM
18. Group Open Modifier
Steve demonstrates additional group modifiers. The group-open modifier can style details and summary elements based on an open or closed condition. Additional background colors and rounded corner styles are discussed as well.
#lesson
Steve demonstrates additional group modifiers. The group-open modifier can style details and summary elements based on an open or closed condition. Additional background colors and rounded corner styles are discussed as well.
#lesson
Media is too big
VIEW IN TELEGRAM
19. Before & After Pseudo Selectors
Steve demonstrates how the before and after modifiers add content before or after an element, and how they can be stacked and combined to create interactive effects.
#lesson
Steve demonstrates how the before and after modifiers add content before or after an element, and how they can be stacked and combined to create interactive effects.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Dark Mode
Steve implements dark mode using the dark variant and the Tailwind CSS configuration option for a dark parent class. By default, the variants will use the user's color preference. Other variants like selection and aspect ratio are also introduced in this lesson.
#lesson
Steve implements dark mode using the dark variant and the Tailwind CSS configuration option for a dark parent class. By default, the variants will use the user's color preference. Other variants like selection and aspect ratio are also introduced in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Responsive Breakpoints
Steve uses the breakpoint variants to apply different styling rules at the predefined breakpoints. If a custom breakpoint is required, it can be added to the configuration file.
#lesson
Steve uses the breakpoint variants to apply different styling rules at the predefined breakpoints. If a custom breakpoint is required, it can be added to the configuration file.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Columns
Steve introduces the columns property, which is helpful for masonry layouts or multi-column text layouts. Options for controlling the columns include specifying the number of columns or the width of each column. Aspect ratios for images are also discussed in this lesson.
#lesson
Steve introduces the columns property, which is helpful for masonry layouts or multi-column text layouts. Options for controlling the columns include specifying the number of columns or the width of each column. Aspect ratios for images are also discussed in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Columns Exercise
Students are instructed to use the the columns class to create a multi-column layout.
- https://tailwind-workshop.vercel.app/columns
#lesson
Students are instructed to use the the columns class to create a multi-column layout.
- https://tailwind-workshop.vercel.app/columns
#lesson
Media is too big
VIEW IN TELEGRAM
24. Flexbox
Steve introduces the Flexbox and Grid classes in Tailwind CSS and uses a playground to demonstrate the Flexbox classes. By default, the horizontal axis for layout is the main axis, and the vertical axis is the cross axis.
#lesson
Steve introduces the Flexbox and Grid classes in Tailwind CSS and uses a playground to demonstrate the Flexbox classes. By default, the horizontal axis for layout is the main axis, and the vertical axis is the cross axis.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Flexbox Exercise
Students are instructed to use the Flexbox classes in Tailwind CSS to create horizontal and vertical layouts. Breakpoints should be added to adjust the design across different viewports.
- https://tailwind-workshop.vercel.app/flex
#lesson
Students are instructed to use the Flexbox classes in Tailwind CSS to create horizontal and vertical layouts. Breakpoints should be added to adjust the design across different viewports.
- https://tailwind-workshop.vercel.app/flex
#lesson
Media is too big
VIEW IN TELEGRAM
26. Grid
Steve explores the grid classes in Tailwind CSS and compares them with the Flexbox classes. The grid playground is used to experiment with the layout classes justify, align, place, content, and items.
#lesson
Steve explores the grid classes in Tailwind CSS and compares them with the Flexbox classes. The grid playground is used to experiment with the layout classes justify, align, place, content, and items.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Creating a Page Layout
Steve demonstrates how to create a grid layout using Tailwind CSS. The HTML structure uses header, sidebar, main, and footer elements. CSS grid properties like grid-template-rows and grid-template-columns are applied, and Tailwind's responsive breakpoints are used to adjust the layout for different screen sizes.
#lesson
Steve demonstrates how to create a grid layout using Tailwind CSS. The HTML structure uses header, sidebar, main, and footer elements. CSS grid properties like grid-template-rows and grid-template-columns are applied, and Tailwind's responsive breakpoints are used to adjust the layout for different screen sizes.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Animations & Useful Tricks
Steve demonstrates the pre-defined animation classes like a pulse for creating loading indicators or notifications. The animation classes can be combined with transitions and transforms to display indicators based on an empty state. Copying content and screen reader-specific classes are also demonstrated in this lesson.
#lesson
Steve demonstrates the pre-defined animation classes like a pulse for creating loading indicators or notifications. The animation classes can be combined with transitions and transforms to display indicators based on an empty state. Copying content and screen reader-specific classes are also demonstrated in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
29. Plugins
Steve explains that plugins in Tailwind CSS are a way to package up functionality that can be added to the build system. Typography and container query plugins are demonstrated. Tailwind CSS configuration for plugins is also explained in this lesson.
#lesson
Steve explains that plugins in Tailwind CSS are a way to package up functionality that can be added to the build system. Typography and container query plugins are demonstrated. Tailwind CSS configuration for plugins is also explained in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Wrapping Up
Steve wraps up the course by answering Tailwind CSS questions, including important features, considerations for building for production, tools in the Tailwind ecosystem, building a custom design system with Tailwind CSS and Figma, using CSS variables, and handling scrolling panels within a grid container.
#lesson
Steve wraps up the course by answering Tailwind CSS questions, including important features, considerations for building for production, tools in the Tailwind ecosystem, building a custom design system with Tailwind CSS and Figma, using CSS variables, and handling scrolling panels within a grid container.
#lesson
Title: Vite
Description: Master Vite, the modern build tool for faster and leaner web development. Learn to integrate with React, optimize assets, and extend with plugins. See what it's like to actually enjoy using your build tools!
Link: https://frontendmasters.com/courses/vite/
Time: 4 hours, 10 minutes
Lessons: 27 / 27
Tags: #course #frontendmasters #720p
Description: Master Vite, the modern build tool for faster and leaner web development. Learn to integrate with React, optimize assets, and extend with plugins. See what it's like to actually enjoy using your build tools!
Link: https://frontendmasters.com/courses/vite/
Time: 4 hours, 10 minutes
Lessons: 27 / 27
Tags: #course #frontendmasters #720p
Frontendmasters
Learn Vite | The Fast Build Tool for Modern Web Projects
Master Vite, the modern build tool for faster and leaner web development. Learn to integrate with React, optimize assets, and extend with plugins. See what it's like to actually enjoy using your build tools!
Media is too big
VIEW IN TELEGRAM
2. Vite Starter
Steve introduces the Vite framework and demonstrates how to get started with a Vite app. They show how to import files and modules, and how Vite automatically bundles and optimizes the code. They also discuss the production build and how Vite handles static assets.
- https://vite-workshop.vercel.app/introduction
- https://github.com/stevekinney/vite-starter
#lesson
Steve introduces the Vite framework and demonstrates how to get started with a Vite app. They show how to import files and modules, and how Vite automatically bundles and optimizes the code. They also discuss the production build and how Vite handles static assets.
- https://vite-workshop.vercel.app/introduction
- https://github.com/stevekinney/vite-starter
#lesson
Media is too big
VIEW IN TELEGRAM
3. Dynamic Import & Code Splitting
Steve explains how to split an application into multiple chunks using ECMAScript modules. They demonstrate two ways to import files: one that immediately imports the file and one that returns a promise and dynamically fetches the module when the import statement is called. They also discuss the use of Vite Preview, a tool that spins up a web server to test the built production assets and verify the build process.
#lesson
Steve explains how to split an application into multiple chunks using ECMAScript modules. They demonstrate two ways to import files: one that immediately imports the file and one that returns a promise and dynamically fetches the module when the import statement is called. They also discuss the use of Vite Preview, a tool that spins up a web server to test the built production assets and verify the build process.
#lesson