Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Code-Breaking Workshop

When I finish up work for the day, and switch back to dad mode, my kids love to do these little "code-breaking" worksheets where each letter in a secret message is represented as a symbol. They then refer to an alphabet lookup table, and perform the translation.

There's only one problem... they take me a long time to manually create from scratch on paper. So let's build a kid-friendly web app to automate the entire process!

Progress

Series Info

Episodes
7
Run Time
1h 10m
Difficulty
Intermediate
Last Updated
Nov 3, 2023
Version
Latest
Play Series

Series Episodes

  1. Episodes (7)

    1. What Are We Building?

      In this mini-series, we will automate the process of creating secret messages using symbols. We will build a web app using Livewire, Laravel, and Tailwind that allows us to type a message and instantly generate the corresponding symbols.

    2. Set Up Laravel, Livewire, and Tailwind

      In this lesson, we begin our project by installing Laravel, Livewire, and Tailwind CSS from the terminal. We then create a layout file, update our Tailwind configuration file, and start our build process. Finally, we create an initial Livewire component, CreateCode, and demonstrate how to increment a value within this component without triggering a full page refresh.

    3. Translate User Input to Symbols

      Let's now add a textarea where users can input their code and have it instantly converted into various symbols. We discuss the need for randomizing the symbols to prevent kids from memorizing the mappings.

    4. Use an Icon Font to Display Text Symbols

      In this lesson, we explore using an icon font to replace letters in a message with corresponding symbols. We learn how to reference the font and dynamically map each letter to a symbol.

    5. Create the Code Legend

      In this episode, we'll create a legend Blade component that provides a lookup-table, of sorts, for the kids. Each letter will map to a symbol.

    6. Prepare a Print-Friendly Layout With CSS

      In this lesson, we will review how to improve the print-specific layout using CSS. At the conclusion, we will print and review our first code-breaking worksheet.

    7. Deploy to Production and Configure DNS

      In this lesson, we make some final layout adjustments to our project and push it up to GitHub to make it available to the world. We also set up a Laracasts subdomain and configure the DNS.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes