Learn Rust, Tailwind and Webstorm

Meet Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Tailwind provides us with highly compassable utility classes but leaves the design specification completely up to the user to maintain that custom look and feel to your app. 

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Introduction to Tailwind and the Utility First Workflow

Rust is a modern language that is close to the metal. It's got the performance of C, but with a more friendly syntax and community.

It's also memory safe, and ensures your applications are bug free by catching errors at compile time instead of runtime.

These features make Rust a great choice for developing code for embedded systems, web servers, and CLI apps. You can even compile Rust into WebAssembly in order to run it in-browser!

But as the saying goes, "before you learn to run, you must learn to walk".

In this course, you will write your first Rust application.

Starting from “Hello World” you’ll quickly move on to learning about Rust’s types, configuration files, and the `cargo` package manager along with classics like functions, loops, and handling user input.

More Rust-specific concepts like macros and pattern matching will also be introduced.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/write-your-first-program-with-the-rust-language).

Next Steps: [Basic Types in Rust](https://egghead.io/playlists/data-types-in-rust-ab72)

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rust

Write Your First Program with the Rust Language

Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild. 

We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.


Design and Implement Common Tailwind Components

[Rustlings](https://github.com/rust-lang/rustlings) is a set of exercises that serves as a great introduction to the Rust language. It covers many concepts from the [Rust book](https://doc.rust-lang.org/book/) by asking you to work through sets of exercises.

This collection walks you through Rustlings in a way that explains what's going on in each exercise. We cover everything from basic types to generics and threading.

Learning Rust by Working Through the Rustlings Exercises

The Navbar is a common component you will find yourself styling in almost any application. 

In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

Build a Responsive Navbar with Tailwind

A menu dropdown is a common component that you will build and style in any application.

In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework. 

After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

Build and Style a Dropdown in Tailwind

This collection contains videos that explore the basic types in Rust, including **Fixed size Integer**, **Pointer sized Integer**, **Boolean**, **Strings**, **Characters**, **Arrays**, **Tuples** and more.

If you're just starting out learning Rust and [wrote your first program](https://egghead.io/courses/write-your-first-program-with-the-rust-language), this collection is the right place to get more familiar with the language!

Basic Types in Rust

Many languages work on a compilation story to WebAssembly, but Rust is already ready for primetime. Why?


- Rust is a stable language and great replacement for C and C++. 
- Due to the reference and borrowing concept, Rust doesn’t need a Garbage Collector and can be used for a production-ready WebAssembly project. 
- The Rust/Wasm team has built some sophisticated tooling for straightforward interoperability between Rust and JavaScript.

This course gives you the tools to compile to WebAssembly with Rust. Over 11 lessons, we’ll set up a project and explore various paths of communication and interoperability between Rust and JavaScript.

Using WebAssembly with Rust

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.

In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.

By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."

So if you want a fully custom design, you are back at step 1.

There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.


Design with Tailwind CSS Masterclass

Migrate from Create-React-App to Gatsby - Start Project

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Theming using TailwindCSS and CSS Variables

In this lesson we'll introduce Tailwind to a basic HTML project and see how it compiles into CSS with PostCSS. Tailwind can be configured in the tailwind.config.js file where you will define plugins for PostCSS to compile.

After that, we'll spin the project up with live-server and introduce styling with Tailwind utility classes. 

Set up Tailwind and PostCSS

Tailwind has variants that you can use when you want to apply styles conditionally to elements. We will start off with the `hover` and `focus` variants.

One thing to note is that not all variants are available to you out of the box (e.g. the `active` variant) to save on file size when you get started with Tailwind. Additional variants can be configured to add functionality.

We'll finish the lesson by combining and adding custom Tailwind Variants.

Conditionally Style Elements with Tailwind Variants on Hover and Focus 

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

The styles aren't the only thing that can be duplicated - often times HTML structure is repeated in our applications. You don't want to just pull out the styles in a @apply directive.

This is where JavaScript comes in handy. We have the data available to us so we'll loop through that data and build repeated card components with Tailwind

Extract Reusable Tailwind Components

Learn how to style HTML elements with Tailwinds utility classes.

We'll adjust size and positioning with padding, margin, and height as well as style text elements color, weight, and spacing through more utility classes

The Tailwind Utility-First Workflow

The @apply directive lets you compose utility classes so you can re-use common styles and not litter your html with a ton of repetitive styles.

Even when using @apply directives, it's still easy to start repeating yourself in your code. We'll use the multi-class component pattern to extract the common styles into a base class and then styling (e.g. color) can be additionally applied as another class.

Compose Tailwind Utilities with @apply

Tailwind has a set of Responsive breakpoints that you can add to any utility class. We'll see in this lesson how to apply `sm`, `md`, `lg`, and `xl` breakpoints to style according to the screen that you are targetting.

Make Styles Responsive in Tailwind

Out of the box, tailwind generates a lot of css. For example, every background color, text color, and border color needs an object generated for it with each gradient available. In addition, more classes need to be generated for each breakpoint defined within tailwind as well as any variant that is available. Thousands and thousands of utility classes are generated.

Learn how Purgecss can remove all unused classes in your project.

Remove unused CSS with Purgecss

Sometimes you'll need to customize things for the exact look and feel you need within your application. This can range from any number of things like: breakpoints, color palette, and custom fonts.

The tailwind config file, you can customize all the values that tailwind uses for it's utility classes so that Tailwind works for you and your needs.

Customize the Tailwind Design System

In this lesson, we'll be replacing the text-based rating in our card to use SVG icons to signal how the property is rated.

To do this, we'll start with a custom, raw SVG icon that was exported from sketch (best to export as a square SVG for easier styling). One thing to note is that this file is much bigger than you need it to be when it's exported. To clean it up, you can run it through a service like [SVGOMG](https://jakearchibald.github.io/svgomg) that will reduce the file size drastically. After this, we'll remove the SVG color and sizing and use Tailwind utility classes to style these icons how we'd like them, with `h-` / `w-` utilities for size and `fill-current` for color. 

Lastly, the positioning of the icons will be adjusted with Tailwind's flexbox utility classes.

Topics

Instructors

Content Type