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
Media is too big
VIEW IN TELEGRAM
9. Vite Templates & Setup React
Steve demonstrates how to use templates in Vite to quickly set up a project with a specific framework, such as React. They explain how to configure Vite to support React by adding the "plugin-react" plugin and also mention other available plugins and resources for using Vite with different frameworks and tools.
#lesson
Steve demonstrates how to use templates in Vite to quickly set up a project with a specific framework, such as React. They explain how to configure Vite to support React by adding the "plugin-react" plugin and also mention other available plugins and resources for using Vite with different frameworks and tools.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Static Assets
Steve discusses how to handle static assets in Vite, By default, anything in the public directory is copied over as is, while anything in the source directory can be accessed. They demonstrate how to import an image from the source directory and how Vite automatically adds a hash to the image URL to bust the cache if the image changes.
- https://vite-workshop.vercel.app/static-assets
#lesson
Steve discusses how to handle static assets in Vite, By default, anything in the public directory is copied over as is, while anything in the source directory can be accessed. They demonstrate how to import an image from the source directory and how Vite automatically adds a hash to the image URL to bust the cache if the image changes.
- https://vite-workshop.vercel.app/static-assets
#lesson
Media is too big
VIEW IN TELEGRAM
11. Image Loading Exercise
Steve asks students to grab a small image (favicon) and a large image and import them into their project. The learner is then asked to observe the differences in how Vite handles the two images. Vite will inline the small image, converting it into a base64 encoded image and including it directly in the file, while the large image will be split, hashed, and cached automatically.
#lesson
Steve asks students to grab a small image (favicon) and a large image and import them into their project. The learner is then asked to observe the differences in how Vite handles the two images. Vite will inline the small image, converting it into a base64 encoded image and including it directly in the file, while the large image will be split, hashed, and cached automatically.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Vite Image Tools
Steve introduces Vite Image Tools and guides the students through the initial setup process, including installing the Vite Image Tools plugin and creating a configuration file. They also mention that there might be some issues with M1 MacBook users and provide a command to fix it if necessary.
- https://vite-workshop.vercel.app/image-tools
#lesson
Steve introduces Vite Image Tools and guides the students through the initial setup process, including installing the Vite Image Tools plugin and creating a configuration file. They also mention that there might be some issues with M1 MacBook users and provide a command to fix it if necessary.
- https://vite-workshop.vercel.app/image-tools
#lesson
Media is too big
VIEW IN TELEGRAM
13. Directives
Steve demonstrates the ability to resize images, change file formats, and access image metadata using various image tool directives. They also mention other query parameters available in Vite, such as importing raw text or CSS files. The lesson concludes by discussing the limitations of dynamic sources in Vite and mentioning a plugin that can provide more flexibility.
#lesson
Steve demonstrates the ability to resize images, change file formats, and access image metadata using various image tool directives. They also mention other query parameters available in Vite, such as importing raw text or CSS files. The lesson concludes by discussing the limitations of dynamic sources in Vite and mentioning a plugin that can provide more flexibility.
#lesson