What you would learn in Craft Scalable, Custom-Made Interfaces with Tailwind CSS course?
Learn the basics of designing a modern web application with Tailwind CSS's utility class and also some tips and tricks to incorporate it into component-based frameworks such as React as well as Vue.
Functional CSS has seen a rise in popularity and with well-founded reasons: it lets developers create customized user interfaces without any sloppy modifications or overrides that have been a problem for existing tools such as Bootstrap for years.
In the realm of Functional CSS libraries, Tailwind is the top contender. In many ways, it's one of the most popular technology pieces currently for front-end web development. Its APIs can make developers feel highly productive. Since it's a collection of well-thought-out CSS classes, users are able to make use of it from inside the HTML designs or even render your functions without needing to learn any new tools or even open an entirely separate file.
If you're a Web designer looking to get involved in front-end design and development design, you owe it yourself to try Tailwind the chance to ensure that you don't be left out of one of the most exciting emerging trends in our field.
The Course Project
Through this course, you'll develop a Discord app that is cloned down to the hover effects, padding, and colors included in the UI of the app.
By doing this, you will gain some things:
You'll be taught the Tailwind process
How do I personalize Tailwind for an app?
Get exposed to the design decisions made by an expert team
Find patterns in design when you design an interface
You will leave with stunning components that you can apply to other applications.
Following this course, select one of the applications you like-- Gmail or Slack, for example -- and copy your UI for a test of the skills you've accumulated.
In Tailwind, you'll be taught to apply the 'tinkering' process. Since classes are easy to modify and put together, it is possible to find the layout you like. Making adjustments to colors, padding, and margins at a moment's notice is easy!
When you're comfortable with this method, you'll notice that you've duplicated classes. This is a good thing! The effort required in applying and composing classes is so minimal that it doesn't matter if there is a little duplicate code.
If you notice an increase in duplication, it is possible to abstract what is causing the duplication by removing it at the element level rather than the CSS level.
1 Intro to Styling Custom UIs with Tailwind Utility Classes
2 Scaffolding a Multi-Panel App Layout with Flexbox
3 Making Panels Scrollable with Flexbox
4 Customizing Tailwind’s Color Palette With Your Brand
5 Adding Custom Fonts to Tailwind
6 Building a Hoverable Server Selector With SVG
7 Transitioning Rounded Corners using the JIT Compiler
8 Conditionally Applying Classes Based on the Active URL
9 Building the Active Server Indicator using Group and Transform Utilities
10 Solving the Duplication Problem with Components
11 Building the Server Header using Arbitrary Values from the JIT Compiler
12 Styling the Channel List and Controlling Layout
13 Identifying Repeated Patterns while Dynamically Generating the Channel List
14 Styling the Active Channel Link with a New Dynamic URL Segment
15 Using a State Variable to Add Unread States to the Channel Nav
16 Building Collapsible Categories with Rotating Arrow Icons
17 Building the Channel Header with Flexbox Shrink and Truncating Text
18 Styling the Search Box Using the Forms Plugin
19 Using Components to Dynamically Generate the Channel's Messages
20 Dynamically Generating the Server and Channel Navs
21 Using Responsive Design to Hide the Desktop Navigation
Download Craft Scalable, Custom-Made Interfaces with Tailwind CSS from below links NOW!
Write your comment!
Access Permission Error
You do not have access to this product!
Dear User! To download this file(s) you need to purchase this product or subscribe to one of our VIP plans.