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!
Series episodes
What Are We Building?
2m 9sBuild a fun web app with Laravel, Livewire, and Tailwind that instantly turns your messages into secret symbol codes. Learn step-by-step in this mini-series.
Set Up Laravel, Livewire, and Tailwind
8m 23sKickstart your project by installing Laravel, Livewire, and Tailwind. Build layouts, configure Tailwind, and create dynamic components with seamless updates.
Translate User Input to Symbols
8m 12sAdd a textarea that instantly translates user input into symbols with randomized mappings, creating a fun, dynamic experience that keeps kids engaged and learning.
Use an Icon Font to Display Text Symbols
18m 22sLearn how to use icon fonts to replace letters with symbols dynamically, enhancing your messages with stylish visuals in your Laravel applications.
Create the Code Legend
10m 2sBuild a Blade legend component that maps letters to symbols, creating an easy-to-use lookup table to enhance your Laravel app’s interactivity and clarity.
Prepare a Print-Friendly Layout With CSS
13m 15sLearn how to create print-friendly layouts with CSS, enhancing your designs for printing. Follow along as we print and review a code-breaking worksheet.
Deploy to Production and Configure DNS
10m 12sLearn how to finalize your project layout, deploy to GitHub, and set up a Laracasts subdomain with DNS configuration for a smooth production launch.
