Intermediate

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.

Start Series

Share this series on:

  • 01

    Episode 1 Run Time 19:09

    Piece By Piece - Structure, Resets, and Flexbox Free

    Let's begin by reproducing a common navigation layout. We'll first visualize the underlying HTML structure, and will then move on to writing CSS piece by piece. This will provide us with an opportunity to review browser resets, and the greatest addition to CSS in the last decade: flexbox.

  • 02

    Episode 2 Run Time 11:17

    Flex Your Grids

    Creating a reliable CSS grid used to require hours of work with meticulous percentage calculations to protect your layout from breaking entirely. Luckily, life is much easier these days. Add a few selectors and you're off to the races, all thanks to flexbox.

  • 03

    Episode 3 Run Time 19:30

    Workshop - Card Design

    Workshop time. We've been given a card design that needs to be converted to HTML and CSS. Piece by piece, let's construct it from scratch. As you'll find, yet again, flexbox comes to the rescue over and over.

  • 04

    Episode 4 Run Time 16:18

    Refactoring to Utility Classes and Tailwind Free

    In the previous lesson, we constructed a card component in a fairly traditional fashion. Let's try a different approach in this episode. Using the completed design, we'll drastically reduce the size of our CSS file by refactoring to utility classes and Tailwind.

  • 05

    Episode 5 Run Time 11:38

    Easy Flexbox Wins

    Before moving on, let's review five examples of every-day CSS requirements that can instantly be solved with flexbox.

  • 06

    Episode 6 Run Time 19:21

    Workshop - FAQs

    In this next hands-on workshop, we'll redo the layout for a common FAQ page. Using a mockup as our base, piece by piece, we'll construct the new design, while adding the necessary interactivity (with Vue) that you would expect from such a page.

    View the completed Vue component, CSS, and design on GitHub.

  • 07

    Episode 7 Run Time 17:08

    Pricing Selection Design

    Most sites like Laracasts include a pricing page that lists all available plans. Using a prototype design, let's, from scratch, convert it to HTML and CSS.

  • 08

    Episode 8 Run Time 12:30

    Tailwind Customization Free

    We began this series by referencing Tailwind through a CDN; however, you'll quickly find that this greatly limits yours ability to customize the compiled CSS. In this lesson, we'll generate a tailwind.js configuration file, and learn how to read and tweak it to fit the needs of our project.

  • 09

    Episode 9 Run Time 14:10

    Call to Action Banner Design

    I need to redesign the Laracasts call-to-action banner for visiting users. If you'd like to come along, we'll use use an existing prototype to construct the HTML and CSS from scratch.

  • 10

    Episode 10 Run Time 13:12

    Mobile-First Design

    So you've become a bit more comfortable at this point. You've realized that flexbox solves so many of the layout problems we used to encounter in the early 2000s. But now you've hit a new snag: resize the browser width, and suddenly your layout becomes a wreck! Yikes. In this lesson, we'll review media queries, Tailwind's responsive helpers, and mobile-first design.

  • 11

    Episode 11 Run Time 12:54

    Mobile-First Layouts

    To ensure that you have a solid understanding of responsive design, let's construct a typical bread-and-butter-layout from scratch, using a mobile-first perspective. As you'll find, the basic building blocks we use in this episode are the same ones you'll use for every layout-based decision you'll make.

  • 12

    Episode 12 Run Time 9:54

    Piece By Piece Mobile Tweaking

    The dream is that, as you construct a page, you follow a mobile-first cycle: make it look nice on mobile devices, and then build out from there. The truth, sadly, is that this isn't always so easy. What happens when you have a Photoshop design that only illustrates the desktop view for a particular page? How do you follow mobile-first-design when you don't yet know how it should appear on those devices? This is the reality for countless businesses.

    In this lesson, we'll review a section of the new Laracasts design that hasn't yet been optimized for mobile users. We'll review where things went wrong, while making mental notes for how to protect against this in the future.

  • 13

    Episode 13 Run Time 11:55

    Better Sizing and Spacing With rems

    While pixels have long been the go-to unit for declaring font-sizes, the truth is that, these days, it's not the best choice. What if, instead, we could declare our sizes and spacing dynamically, based upon the font-size of the root HTML element? Think about the possibilities. Your layout could scale seamlessly, from mobile to widescreen devices.

  • 14

    Episode 14 Run Time 4:22

    Reverse the Order

    You many find yourself wanting to reverse the order of certain elements on the page, when viewed on a mobile device. The most common illustration of this is the typical "sidebar on the left, main content on the right" layout. For mobile devices, you'll likely want to see the main content before the sidebar. Luckily, flexbox has our backs.

  • 15

    Episode 15 Run Time 4:30

    Make It Sticky

    Consider the common example of a heading that should remain fixed to the top of the page until the next section becomes visible. Traditionally, developers have resorted to JavaScript to allow for this. However, these days, we can tackle it with basic CSS. And when I say basic, I mean two properties and you're done.

  • 16

    Episode 16 Run Time 8:11

    Wield Complete Control Over the Order

    You may encounter situations when the order that the elements occur naturally in your HTML is interfering with your desired layout for mobile devices. Have no fear: we can use flexbox ordering to solve this problem.

*Series still in development. Check back often for updates.