CSS Layout Challenge

“How can I turn a design into working code?”

As a UI developer, it’s essential to be able to take a design – whether that’s a pretty mockup, a quick wireframe, or a rough sketch – and turn it into working code.

No matter whether you’re using React or Vue or Angular or Svelte or Ember or anything else… it all comes back to HTML and CSS.

The best way to get better at this skill? Practice.

During March 23-26 I ran a “challenge” of sorts where myself and a handful of others worked through turning this design into HTML and CSS:

The awesome design is by Imran🏀 on Dribbble, check out his other work!

Live coding

On Wednesday March 25th I did a livestream on YouTube and worked through building the HTML and CSS myself. You missed the live event but it was recorded!

Learn by doing

I remember the terror I felt the first time I got handed a shiny design mockup to build. “How long do you think it’ll take?”

Uhh…

How long does it take to read all of StackOverflow?

I’d had very little actual CSS practice up to that point.

The best way to get better is to do some work. Join the challenge and stumble through. You’re guaranteed to learn something!

The live challenge is over, but you can still access the code, community, past questions & answers, and the recording of the live stream. Drop your email in the box and I’ll send you the details! (all of this is free, btw!)

Who’s behind this?

👋 Hi, I’m Dave Ceddia. I write about front end development here at daveceddia.com, I’m an instructor at egghead, and the author of the Pure React book and the self-paced video workshop. I’ve been a developer for about 10 years and writing educational content since 2015.