Cascading Style Sheets bring order and beauty to our applications.

Courses for Front-End Web Developers

Displaying data in tables has been notoriously hard to implement. Naive implementations of data tables will leave your app slow and janky and many table libraries out there are restricted to a few select UI frameworks they use or aren't very customizable.

Tanstack Table is a 'headless' option meaning you have complete control of the presentation while taking advantage of the data side of the equation.

You'll be able to fetch and display remote data, handle pagination, and implement row virtualization for better performance.

Once you've implemented basic functionality you can take your tables to the next level customizing cells with your own JSX components, adding features like toggling column visibility, and ensuring your table is mobile-friendly with CSS pseudo-elements.

By the end, you'll have the skills to create efficient, user-friendly tables that elevate your applications. You can take what you learn here (using React) to any of the popular modern UI frameworks that fit your project requirements.

Ian Jones

Headless, Mobile-friendly Data Tables with Tanstack Table and React

Learn to display, paginate, and virtualize data effectively in a table with Tanstack table and React 19.

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.

In this lesson, you'll discover how to style View Transitions using CSS pseudo-selectors to create custom animation effects. We'll transform the default cross-fade into a smooth slide transition by targeting the ::view-transition-old and ::view-transition-new pseudo-elements. You'll learn how these powerful selectors give you precise control over your transition animations, allowing you to create more engaging and personalized user experiences with just a few lines of CSS.

Customize View Transitions with CSS Using view-transition-old and view-transition-new

Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly.

Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components.

For the case of a button you can target the underlying HTML `<button>` tag:

```css
ion-button {
  &::part(native) {
    // This CSS affects the <button> tag.
  }
}
```

Use Native CSS Parts to Access the Shadow DOM in an Ionic Component

Working with the Shadow DOM can be tricky as it scopes styles so normal CSS classes can't target the elements within. In this tip you'll learn a few approaches to styling elements that are within the Shadow DOM.

Creating a hidden text button in Astro allows developers to conceal certain text elements, unveiling them only with user interaction.

This hidden text button feature is not just a novelty; it adds a layer of interactivity to your website. Whether it's for hiding punchlines, quiz answers, or exclusive content, this feature enhances the user experience, making your website more engaging and interactive.

The initial state of these text elements is set to invisible through CSS. They exist on the page but remain unseen, like transparent elements. 

The reveal occurs when the user hovers or clicks on them, bringing the text into view through a smooth transition.

A common challenge arises when integrating multiple hidden text buttons on a single page. Initially, standard implementation may result in only the first button being functional. However, with a bit of strategy, you can ensure each button operates independently and maintain the functionality across multiple components.

Create an Interactive Spoiler Component in Astro

Lean how to build an interactive spoiler component in Astro, enhancing web user engagement. Learn to set up, style, and script the component for hover/click reveals, ensuring smooth functionality across multiple instances. 

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Create Professional Responsive Websites using Bootstrap

Bite-size video tutorials for badass web developers.

egghead

Use native CSS parts to access the shadow DOM in an Ionic component

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

tailwind

[Tailwind](https://tailwindcss.com/) is an atomic CSS framework that makes styling an application more consistent and maintainable. In this lesson, we look at building out a similar UI to Twitter using only Tailwind classes.

Additionally, we use a heart icon from Feather Icons for our like button, and create a new `<GitHubButton />` component that displays a nicely styled GitHub logo to trigger the user authentication flow.

## Resources

- [Tailwind docs](https://tailwindcss.com/)
- [Feather Icons](https://feathericons.com/)
- [GitHub Logo](http://github.com/logos)

Style a Twitter clone with Tailwind CSS

Now that we have a project, we need a Pin input to work with. We'll create 4 inputs and style them so they look like a security code pin input that you would expect to see.

Style a Pin Input through Data Attributes in React

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.

Importing styles is going to be essential for all of our components to render properly. We will do this similarly as we do in our application - at top level. `component.ts` file is the proper file for this, as this is the one that gets loaded before running our specs. Importing our `index.css` file here will make all of our components render with the correct styles.

Setup Global CSS Properties for Cypress Component Tests

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

We'll start our project by installing all of the necessary tools to get started with Web3 development. 

This project will use SvelteKit Tailwind CSS for it's UI. We have some handy initializers that we will run to do the configuration for us. 

On the Web3 side of things we will use Hardhat, Ethers.js, and hardhat-waffle for smart contract development.

Set up an Ethereum Project using SvelteKit with Tailwind CSS and Hardhat

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

There is a plethora of options when it comes to styling your Next.js app. Global CSS, component level CSS, CSS-in-JS, or some kind of CSS framework. In this lesson, we are going to be focusing on the first three.

Creating a global CSS file is as simple as create a file called `global.css` under the root `styles` directory and importing it into your `App` component. 

CSS on the component level is accomplished using CSS modules. To do this you can create a CSS file on the same level as the component and give it the same filename but the `.module.css` extension instead of `.tsx`. Then you can import this into your component and use it as `styles`.

CSS-in-JS is done by using a `style` prop inline in your TSX and defining CSS with the object + camelCase syntax.

Style Your Next.js App with Global CSS, CSS Modules, and CSS-In-JS

Next.js is a minimalistic framework for server-rendered React applications.

Next.js is a super efficient web development framework, built on React. It handles both client-side and server-side code, making it a great tool for most web apps.

In this video, we use the `create-next-app` package to create a new Next.js application, and use the `with-tailwind` argument to configure TailwindCSS.

Additionally, we remove the boilerplate markup, and run our application in development mode with `npm run dev`.

Create a Next.js App with Tailwind CSS

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

We'll discuss the minimum set of files that are required to get up and running with Vue.

We'll add an `index.html` file as our entry point, a `main.js` file that will contain our JavaScript code and a `styles.css` that will contain all of our CSS. We also load Vue into our project with UNPKG which exposes the Vue object to us.

Set up the Minimum Files Needed to Run Vue 3

We'll see how we can add CSS classes conditionally to our HTML elements using the object syntax. We'll explore how different classes can be added atomically and that these can be built on top of a defined base class.

In this case, we'll check if our `soldOut` computed property is returning true and if it is we'll gray out the event image.

Conditionally Apply CSS Classes to Elements with v-bind in Vue

We'll see how we can add CSS classes conditionally to our HTML elements using the array syntax. We'll explore how different classes can be added atomically and that these can be build on top of a defined base class.

You'll see that we can pass in terneries that will conditionally apply a class or use the object syntax to conditionally apply a class.

Conditionally Apply an Array of CSS Classes to Elements in Vue

  Vue is a progressive framework for building UIs that allows you to incrementally integrate the technology into any existing project that you're working on. This makes it a great tool for you to learn as you can bring it anywhere.

This course is for learners just starting out in web development as well as for those who want to get up to speed on Vue 3 as fast as possible. You'll learn all the foundational skills of web development and how they are presented in Vue. 

We will start with an HTML, CSS, and JavaScript file as to not distract you with any possible tooling that goes on top of the building websites with Vue. 

You will incrementally build an app that sells comedy event tickets. In the end, you'll see how to deploy the application with Netlify Drag and Drop.

The Beginner's Guide to Vue 3

Using the open-source project ComfyJS, display a response to chat commands overlaid on the Twitch scenes. We'll use Eleventy templating to create a partial holding the initial command HTML. Then, using [the cicada principle](https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/), we'll enable visuals of each command word to appear in a seemingly random order across the scene. We'll use the `ComfyJS.onCommand` method to enable cloning the command template nodes and adding them as the commands are triggered through Twitch chat. CSS transitions will be used to apply a fade and zoom in/out effect for the added command nodes.

Respond to Twitch Chat Commands With Scene Elements and ComfyJS

To embed Twitch chat, we'll use the open-source project [ComfyJS](https://github.com/instafluff/ComfyJS) which is a JavaScript API to interface with the Twitch API. It offers features like responding to incoming chat messages and chat commands and other events like new subscriptions.

Using ComfyJS, we'll set up a section in the Twitch scenes to show incoming chat messages. This lesson covers the CSS needed to style the chat messages and make older ones scroll out of view once new ones are received. We'll take advantage of Eleventy templating to include the necessary scripts.

Embed Twitch Chat in Scenes Using ComfyJS

Add three Twitch scenes for preshow, host, and main, and style them using CSS. Learn how to include transparent background areas with CSS gradients that will mask capture areas for a webcam and desktop display.

Create Twitch Scene Templates and Style

Chrome Devtools can be really powerful, when it comes to debug JavaScript, inspect DOM nodes and their properties as well as CSS styling. in this lesson we're quickly having a look at the "CSS Overview" feature of Chrome Devtools, that allows you to debug the CSS design of a website, starting from the used color palette, fonts and much more.

CSS

Just Enough CSS to Build Modern UI

Beginner

CSS Fundamentals

Style an Application from Start to Finish

Flexbox Fundamentals

Build Modern Layouts with CSS Grid

Intermediate

CSS Selectors in Depth

Optimize User Experience for Mobile Devices and Browsers

Learn CSS Animations for a Better User Experience

CSS Tips and Tricks

Advanced

Learn Advanced CSS Layout Techniques

Build Complex Layouts with CSS Grid Layout

Use CSS to Create Art and Illustrations

Tic Tac Toe with CSS and SVG

Animation

Animating React Components with Framer Motion

Create Amazing Animations with GreenSock

Spring Animation in React with React Spring

Search Results