Modern CSS for Backend Developers
I know too many backend developers who are stifled by one glaring phobia: CSS. How do you construct a layout when nothing lines up? Every browser renders your code differently. Floats constantly break. Nothing works!
If you agree, your thinking might be a bit out of date. You'll be happy to hear that the ecosystem is vastly better than fifteen years ago. This series is specifically for backend developers who understand the basics, but need a fast primer on modern CSS that they'll actually use in their day-to-day workflow.
Series episodes
Piece By Piece - Structure, Resets, and Flexbox
19m 9sLearn to build a clean navigation layout step-by-step using HTML, CSS resets, and flexbox—the essential CSS tool for modern responsive design.
Flex Your Grids
11m 17sSimplify your CSS grids with flexbox! Learn how to create reliable, flexible layouts quickly without complex calculations or fragile designs.
Workshop - Card Design
19m 30sBuild a sleek card design from scratch using HTML, CSS, and flexbox. Follow this hands-on workshop to create responsive, modern layouts step-by-step!
Refactoring to Utility Classes and Tailwind
16m 18sRefactor your card component using Tailwind utility classes to drastically shrink CSS size. Learn a modern, efficient approach to styling with Tailwind!
Easy Flexbox Wins
11m 38sMaster five common CSS challenges with easy Flexbox solutions. Boost your layout skills and create responsive designs quickly and confidently!
Workshop - FAQs
19m 21sRedesign a dynamic FAQ page from a mockup using Vue and CSS. Follow along to build interactive, user-friendly components step-by-step in this hands-on workshop!
Pricing Selection Design
17m 8sBuild a clean, responsive pricing page from scratch using HTML and CSS. Follow along as we convert a prototype into a polished, user-friendly design.
Tailwind Customization
12m 30sUnlock Tailwind’s full potential by creating and customizing your tailwind.js config file. Learn to tweak styles for a perfect fit in your project!
Call to Action Banner Design
14m 10sJoin me as we redesign Laracasts’ call-to-action banner, building clean HTML and CSS from a prototype for a fresh, engaging user experience.
Mobile-First Design
13m 12sMaster mobile-first design by combining media queries, Tailwind’s responsive helpers, and flexbox to build layouts that adapt smoothly to any screen size.
Mobile-First Layouts
12m 54sBuild a solid mobile-first layout from scratch and master responsive design basics. Learn key techniques to create flexible, user-friendly web pages every time.
Piece By Piece Mobile Tweaking
9m 54sDiscover how to tackle mobile-first design challenges when only desktop layouts exist. Learn practical tips to optimize your pages piece by piece for mobile users.
Better Sizing and Spacing With rems
11m 55sDiscover how using rems for sizing and spacing creates flexible, scalable layouts that adapt smoothly from mobile to widescreen devices. Boost your CSS skills today!
Reverse the Order
4m 22sEasily reverse element order on mobile with flexbox. Learn how to prioritize main content over sidebars for a cleaner, user-friendly responsive layout!
Make It Sticky
4m 30sLearn how to create sticky headers using just two simple CSS properties—no JavaScript needed. Keep your headings fixed and enhance your page’s user experience!
Wield Complete Control Over the Order
8m 11sMaster flexbox ordering to easily control element order on mobile layouts. Learn how to fix layout issues and create responsive designs with confidence!
Modals with Zero JavaScript
9m 24sLearn how to create CSS-only modals using the :target pseudo-class and Blade components for clean, JavaScript-free modal windows in this Laracasts episode. This is 158 characters and fits your criteria. Let me know if you'd like it refined!
