 Resources from Simon Vrachliotis in 2024

In this course, you'll create a blog that runs without a database. You'll be able to edit your content from your local file system or from GitHub.

You'll deploy your blog to Vercel and set up real-time previews with Next.js' draft mode!



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

Create a GitHub-Powered Blog With Keystatic and Next.js

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

In this beginner friendly series on React, we'll start a new project from scratch
with Create React App, and step by step, build a functional and relatively useful React app
that lets you find inspiration on "baby names", with search and shortlisting functionality.

Through the lessons, we'll cover an introduction to JSX, approach concepts like props, state,
React hooks, "thinking in components", and embrace a progressive refactoring mindset.

Once the app is complete, we'll look at how to reduce prop drilling with the use of the Context API,
and we'll even create our own custom React hook!

Build a "Name Picker" app -  Intro to React, Hooks & Context API

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!

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

tailwind

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Supercharge your HTML with a powerful templating language. Variables, loops, conditionals.. Twig brings programming concepts to your HTML workflow!

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

HTML Templates With Twig

In this lesson, we take a repeating block of HTML and turn it into a dynamic, reusable TwigJS component. The "include" tag allows us to generate multiple instances of the component, each with their own custom content.

Create reusable HTML components with the "include" tag in TwigJS

In this lesson, we make TwigJS components output custom content via the "with" keyword of the "include" tag. We also set up fallback values to make our component work in a variety of scenarios.

Make your HTML components dynamic with the "with" keyword in TwigJS

In this lesson, we transform a series of TwigJS "includes" into a clean "for loop". We store our content into an array and let the loop generate one HTML component for each entry.

Generate multiple HTML components from an array with the "for loop" in TwigJS

In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simple gulp task that runs that file through PostCSS to generate the desired CSS output.

file through PostCSS via gulp.

Compile Tailwind to CSS with gulp

When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility classes into a component classname. We create a Blocks Elements and Modifier (BEM) button component with a few style modifiers, that can be used everywhere in our project.

Abstract Utility Classes to BEM Components in Tailwind

In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs.

Create Custom Utility Classes in Tailwind

In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also discover a couple of ways we can define custom media queries in the config file.

Apply mobile-first Responsive Classes in Tailwind

In this lesson, we use utility class composition to put together a responsive card component. With this approach, we don't write any additional CSS. We never stop to come up with class names. Our workflow is very productive and free of constant context switching. 

Create a Responsive Card Component by Composing Tailwind's Utility Classes

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

Style Elements on hover and focus with Tailwind’s State Variants

Sometimes, you want to update styles for multiple children elements when hovering over a parent. The `group-hover` class in Tailwind lets you do just that in a very elegant way!

Change Styles on Multiple Elements with Tailwinds group-hover

In this lesson, we learn how to control what utility classes are generated for each utility class module. We look at how we can “opt-in” for responsive variations, as well as different states like hover and focus.

Control What Variations are Generated for Each Utility Class Module in Tailwind

In this lesson, we learn different ways to handle specificity in Tailwind, depending on the context of your project. We look at how your should order your CSS declarations in your stylesheet, discover the “important” config option for a “utility-last” approach.

Keep Specificity in Check when Working with Tailwind

In this lesson, we discover how to generate custom utility classes that follow Tailwind’s mobile-first, responsive naming convention pattern, using the 'variants' PostCSS directive.

Extending Tailwind with Responsive Custom Utility Classes

In this lesson, we look at the “prefix” and “separator” options, that let you customise the naming convention for your utility classes, which can be useful to avoid naming collisions or incompatibilities with specific templating languages.

Customize Tailwind’s Naming Convention for Generated Utility Classes

When you create new utilities, variants, breakpoints in Tailwind, the file size of your generated CSS bundle can become quite large. Adding PurgeCSS as a build step makes this worry go away and shrinks your CSS down by removing any class that is never used.

Removing Unused CSS in Tailwind with PurgeCSS

In this course, you'll learn to build custom user interfaces with Tailwind, a utility-first CSS framework.

Throughout the lessons, you'll discover how to use Tailwind and compose utility classes together like lego blocks. You'll also learn to customise the JavaScript configuration file to make your own, tailor-made version of Tailwind.

We'll touch on topics such as 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. 

You'll also discover how you can extract repetitive utility classes into BEM-like UI components.

By the end of this course, you should feel very confident starting a new project (or refactoring an existing one!) with Tailwind.

Topics

Instructors

Content Type

Simon Vrachliotis