👩🏽‍💻 May 16-17: Practical CSS Layouts 🆕

Build mind-blowing layouts with me at Frontend Masters

Hello HTML and CSS fans!

As many of you know, I’ve created courses on CSS layouts at Frontend Masters for many years now.

CSS Grid & Flexbox for Responsive Layouts, v2 is all about the mechanics of Flexbox and Grid. How should we structure our HTML? What’s possible with each type of layout method? Great for developers who need to catch up on this part of CSS.

🆓 Getting Started with CSS (FREE COURSE with registration!) is all about thinking through a site design. How do we break a design comp into smaller, codable sections? How do we work through a problem, solving for each section, and then assembling those sections into a final product? Good for both newbies and experienced devs.

What happens when you hit a more challenging design, though? How might you apply concepts learned in these two courses to something you might encounter at work?

The mobile version shows four reviews. Yawn.

The tablet version shows those reviews plus images — and a box around the whole thing with the images hanging out. What???

And on desktop, the thing moves to one column of the layout, with the images and quotes stacked on top of each other, more like a mobile layout.

🎉 Introducing… Practical CSS Layouts 🤘🏽

For the last 2 months I have been working many hours each week on my upcoming Frontend Masters workshop and course, Practical CSS Layouts. It’s coming up May 16-17, in person in Minneapolis at Frontend Masters, or online from anywhere in the world.

We’ll be building three websites in two days for the fictional band, Magenta Lime. Here’s some screenshots of the desktop version of each responsive site.

The easy website gets our centralized styling set, plus we learn to work in smaller pieces with assembly of the page at the end.

The medium site includes styling an audio player, a tracklist, and the whacked-out reviews and images shown earlier.

Did you see those diamond images? Yeah, we’ll do that with CSS Grid. Seriously!

There’s an inside tour page too. How did we get a diagonal line through those buttons? How do we make them not clickable… without JavaScript?

🎁 What’s included??? 🌹

• All of the files - HTML, CSS, images, additional reading and references, everything.

• Follow along with all of the code as you watch. (And if you watch the recording, rewind me as many times as you like!)

• If you watch the live stream, ask questions! I’ll answer as many as I can.

💰 Pricing

This workshop isn’t free, but there are several ways you may access it.

• Frontend Masters pricing - note you could pay for one month and then cancel. However, I hope you’ll find this a valuable learning resource and keep your subscription longer! Team packages are also available.

• Frontend Masters free 30 day trial - check it out for a month for free.

• Github Student Developer Pack - if you qualify, you can get a free 6 month free subscription to Frontend Masters through this offer.

• You may inquire about international, low purchasing power rates by emailing support@frontendmasters.com.

• Other questions addressed on their FAQ.

😭 I can’t make it but I still want to watch!!! 👀

As with all Frontend Masters workshops, this one will be live-streamed May 16-17. It will be recorded, edited, and released as a full course sometime after. You may watch the workshop live or on demand with your Frontend Masters subscription. When the course is released, you can watch it with your subscription as well.

Hope to see you all in 2 weeks! 💖
Jen