 Courses from Adam Wathan

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.


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

tailwind

Design with Tailwind CSS Masterclass

The dropdown looks great on desktop sized screens but is kind of a mess on mobile. To fix that we'll need to rethink the design of the drop down for the mobile space.

In this lesson, we'll create a duplicate acount link list and remove the dropdown functionality in preference of showing the account links inline with the other navbar links on mobile with clear separation between the two lists.

Redesign a Dropdown List for Mobile with Tailwind

The dropdown looks great but right now it's completely static - it's stuck in an open position. For it to be complete, we'll want to be able to toggle it open and closed.

To do that, we'll add some Vue specific that will track an `isOpen` variable in the component state that we'll use to open and close the dropdown. After that we'll hook up a click handler to the button to do just that, close and open the dropdown. 

Once that is done, we'll handle the case where a user clicks outside of the dropdown to close it as well as add a keyboard accessible variant to close the dropdown

Make a Tailwind Styled Dropdown Interactive

In [Build a Responsive Navbar with Tailwind](https://egghead.io/playlists/build-a-responsive-navbar-with-tailwind-4d328a35), we built a navbar that we'll use to start out this lesson and drop our account info button and dropdown.

We'll see that adding the dropdown to the navbar won't just work - the positioning is a little off and the navbar is expanding to contain the dropdown as well. We'll see how `absolute` positioning solves this issue for us when we anchor it's position to the button it's associated with (by making that button a "positioned" element with `relative`)

Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar

A menu dropdown is a common component that you will build and style in any application. In this lesson, we'll start by building a dropdown defining the HTML structure with a profile picture image as a button and links that one would likely find in a dropdown.

After the structure is defined, we'll style the the image to be a round button with a nice border outline. The links will be displayed below stacked atop eachother with a fixed width and nice hover effect.

Style the Basic Dropdown Elements with Tailwind

We started by building just the mobile layout of the navbar which looks great but wont on larger screens. We'll want to handle each screen size and adjust the style on each breakpoint. When the navbar is big enough, we can fit the links within the navbar instead of dropping them down below.

In this lesson, we will use the `sm` breakpoint to start styling the navbar for screens that are larger than mobile.

Prefix Tailwind Utility Classes with Breakpoints to Make a Responsive Navbar

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.

Now that we have the navbar set up in a static fashion, we want to make the button that was added to drop down into a menu on click.

We'll start by adding the markup and then style that. The mark up will need to be refactored a bit so that flexbox is only affecting the navbar and not the menu that is generated. After the refactor, we'll color and size the menu with Tailwind Utility classes. 

Finally, to get the menu to show and hide on click, we'll add a Vue `@click` directive that will toggle component state which in turn controls Tailwind classes that control whether the menu is hidden or shown.

Toggle Navar Menu Links in Tailwind with Vue

The navbar is a common component that you'll find yourself styling in almost any application. In this lesson we'll start with the HTML structure of the navbar and end with styling it to look good.

We'll import an image to use as a logo in the navbar as well as a hamburger svg that we'll use for a menu button. Both these items need to be positioned within the navbar so we will add flexbox and see how easy it is to align these items vertically and horizontally

Build a Navbar Layout using Tailwind and Flexbox

The card is designed with a pretty flat. We can add depth through shadows and layers to make it look even better. This will make it look like some elements are closer and some farther away.

To do this, we'll make the images containing div `relative` so that we can pull the text content on top of the image with a negative margin (`-mt-4`). We'll adjust the style of the image and content to look great in a layered fashion with adjusting the shadow of each section of the component.

Create Depth in a Tailwind Component with Shadows and Layers

Right now the card looks great at this screensize but when that is adjusted (and gets larger) you'll notice that the image resolution will stretch to fit the screen. We will want to respect the original aspect ratio of the image so as the image gets wider, it gets proportionally taller.

To respect the original aspect ratio of the image, we'll need to position the image `absolute`ly in a containing div that has its bottom padding set to a percentage. This will fix that div's aspect ratio which in turn will keep the images aspect ratio fixed as well.

Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind

The intrinsic aspect ratio has been controlling the look of the image in our card. If we wanted to adjust the styling of the image it could scale and distort in ways that wouldn't look good.

We need to tell the browser how to render the object regardless of the size. In Tailwind, we use the `object-fit` utilities which will let us crop and size an image in a way that works for our use-case. 

Note: IE11 doesn't support this feature so we'll see how we can get around this with setting the image as a `backgroundImage` style. This accessible so should be avoided whenever possible.

Crop and Position Images with Tailwind object-fit Utilities

In this lesson, we'd like to highlight that this listing is new. To do this we'll need to build a badge that will do just that.

The badge will be an inline element with the text right above the title as a span. We'll see how to color, position, and size it with Tailwind utility classes. 

Some classes we will use: 

- `inline-block` for correct padding behavior in the span
- `bg-teal-200` and `text-teal-800` to adjust color
- `uppercase` `font-semibold` `tracking-wide` to adjust the look of the badge text
- `flex` and`items-baseline` to adjust the positioning

Use Tailwind to Design a span that Looks like a Badge

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.

Style SVG Icons with Tailwind Utility Classes 

The content in our card is currently pretty bland with the browser defaults. In this lesson we'll work through how to apply style to the text content to make it catch the eye.

We'll start by adjusting the browser default color as well as the antialiasing (which will make our cards look better on high res displays). Then we'll work through the text content to highlight the important parts, with bold, dark text and de-emphasizing the less important content by making it lighter and smaller.

Design Text in a Tailwind Card to Emphasize Important Content

Before styling, we'll check out what data we're dealing with by dumping it into the browser to see how it fits with some initial HTML structure.

Once the structure is in place we'll start applying style to the card at the root level. The way I like to think of the root level is the styles that affect the edges of the card and only apply those styles to it. For example, we'll add a background color and border-radius to the card we are styling. If we want to add padding or style to the content of the card, we will group that content and apply the necessary styling directly which won't affect the root level styles.

Structure a Basic Card 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

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

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 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 

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

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Adam Wathan

Search Results