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
Media is too big
VIEW IN TELEGRAM
4. Dynamic Import Exercise
Steve challenges the students to dynamically load another JavaScript file called "banner.js" when a certain condition is met (e.g., when the counter goes below zero or above ten). Students are encouraged to experiment with dynamically loading the "banner.js" file and observe how it gets split into separate bundles during the build process.
- https://vite-workshop.vercel.app/basic-setup
#lesson
Steve challenges the students to dynamically load another JavaScript file called "banner.js" when a certain condition is met (e.g., when the counter goes below zero or above ten). Students are encouraged to experiment with dynamically loading the "banner.js" file and observe how it gets split into separate bundles during the build process.
- https://vite-workshop.vercel.app/basic-setup
#lesson
Media is too big
VIEW IN TELEGRAM
5. Import CSS & CSS Modules
Steve discusses different options for pulling in CSS in a Vite project and how Vite resolves relative paths and bundles the CSS. They also demonstrate how to import CSS in JavaScript and explain how it can be useful for splitting out stylesheets. CSS modules and how to use them to scope styles to specific files is also covered in this segment.
- https://vite-workshop.vercel.app/css
#lesson
Steve discusses different options for pulling in CSS in a Vite project and how Vite resolves relative paths and bundles the CSS. They also demonstrate how to import CSS in JavaScript and explain how it can be useful for splitting out stylesheets. CSS modules and how to use them to scope styles to specific files is also covered in this segment.
- https://vite-workshop.vercel.app/css
#lesson
Media is too big
VIEW IN TELEGRAM
6. Build CSS Modules Exercise
Steve guides students through the process of creating a dynamically loaded banner using CSS modules. Students are encouraged to experiment with different approaches, such as using dynamic imports and different file extensions, to observe the impact on the build process and network tab. The goal is to develop an intuitive understanding of how code structure affects performance and to follow coding standards that result in performant JavaScript.
#lesson
Steve guides students through the process of creating a dynamically loaded banner using CSS modules. Students are encouraged to experiment with different approaches, such as using dynamic imports and different file extensions, to observe the impact on the build process and network tab. The goal is to develop an intuitive understanding of how code structure affects performance and to follow coding standards that result in performant JavaScript.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Configure PostCSS & CSS Preprocessors
Steve discusses various ways to process CSS using post-CSS. They demonstrate how to set up post-CSS and configure it by adding plugins such as Tailwind, CSS Nano, and Auto Prefixer. They also show how to use SASS or SCSS in a Vite project by simply installing the SASS dependency.
- https://vite-workshop.vercel.app/postcss
#lesson
Steve discusses various ways to process CSS using post-CSS. They demonstrate how to set up post-CSS and configure it by adding plugins such as Tailwind, CSS Nano, and Auto Prefixer. They also show how to use SASS or SCSS in a Vite project by simply installing the SASS dependency.
- https://vite-workshop.vercel.app/postcss
#lesson
Media is too big
VIEW IN TELEGRAM
8. Configure TypeScript
Steve explains that TypeScript is natively supported in Vite by simply changing the file extension to .ts. They also mention that Vite does not perform type checking, but tools like VS Code can handle that in the editor. They recommend running the TypeScript compiler separately before building to catch any compilation errors.
- https://vite-workshop.vercel.app/typescript
#lesson
Steve explains that TypeScript is natively supported in Vite by simply changing the file extension to .ts. They also mention that Vite does not perform type checking, but tools like VS Code can handle that in the editor. They recommend running the TypeScript compiler separately before building to catch any compilation errors.
- https://vite-workshop.vercel.app/typescript
#lesson