As an active CodePen user, I've been wanting to host a CodePen meetup in my area for a while. In the spring of 2016, I decided to bite the bullet and enlist the help of my pals Justin Lobaito and Ryan Young to plan Iowa's first CodePen meetup! Spoiler alert: It was really great.

Ryan and Justin do intros

We decided to split the night into three parts:

  1. Introduction to CodePen
  2. Pub-Style Quiz
  3. Show and Tell

You can view our presentation in its entirety here.

Introduction to CodePen

During our Introduction to CodePen, we focused on some of the coolest parts about the CodePen editor, like including third-party scripts and creating template pens.

Pub-Style Quiz

Quiz time!

A few years ago, Justin and I attended a workshop at SXSW where the presenters used CodePen as a platform for HTML, CSS and JS puzzles. We followed closely in their footsteps with this exercise

Another quiz shot

Before the event, we prepared nine questions to share with the group. Here they are!

1. Flexbox Fun

Using CSS, align the box in the middle vertically and horizontally. Hint: Use Flexbox!

Here's a solution from Andrew Meyer:

2. Such Great Heights

Using CSS, make these boxes in the grid the same height. If there are multiple rows, make sure the boxes are only the height of the tallest box in that row. Hint: Use Flexbox!

Here's a solution from Kyle Brumm:

3. I Literally Love Parks and Rec

Using template literals, a new feature in JS ES2015, change “ADVERB” to “LITRALLY” in each phrase.

Here's a solution:

4. Advanced CSS Animations

Our Pong game is frozen! Using CSS keyframes, animate the “.box” div so it bounces off the right pong paddle, then hits the left paddle and stops.

Here's a solution from Andrew Meyer:

5. Spotify Duotone

Using CSS blend modes, recreate the Spotify error page featuring Justin Bieber. The colors have already been provided to you as SASS variables. You do not need to add any of the text.

This was a tough one! Here's a solution from Neil Ward:

6. Responsive Video

We’ve embedded a YouTube video within a container div, but the video isn’t filling it’s container. Make the video responsive.

Here's a solution from Kyle Brumm:

7. Turn on the Lights

Turn on the lights! We’ve set up the checkbox input to change the background color, but it’s not very intuitive. Turn the checkbox into a light switch.

Here's a solution from Andrew Meyer:

8. Form Inputs

We’ve setup a form, but it isn’t very useful for mobile users to have to use a full keyboard just for a phone number. Change the input types to create a better user experience for mobile users.

Here's a solution:

9. Nobody $%$* With Background Videos

The Jesus is a pretty snazzy guy (and a hell of a bowler), but he’s even snazzier as a background video in the hero. Style the HTML elements to create a full-width responsive background video for the Jesus. It’s a background video so there should be no sound and it should be continuously playing.

Here's a solution:

Here's a collection of all the questions/answers!

Show and Tell

At the end of the night, we encouraged folks to get up and show off something cool they've seen on the web (it didn't have to be on CodePen, per say). Here are some cool things we saw!

Button Hovers

Kyle Brumm shared his pen "Button Hovers" with custom button hover effects:

Wavy Loading Animations

Kyle also shared his wavy loading animations pen. CSS and HTML only - wow!

SVG Checkbox Animation

Ryan Young showed off an animated SVG checkbox he made, inspired by MSNBC:

Mosaic CSS

Steven Radig showed us a cool mosaic tile layout made with CSS and Flexbox. Pretty cool!

Dave Matthews

I showed off my troll-y Dave Matthews/Flexbox pen:

Other Cool Things

The Future

We think people had a great time at CodePen Des Moines. We'd really like to do it again sometime soon, either in the form of an official CodePen meetup, or maybe more generalized for front-end and designer folks.

Thank You

A special thank you to the CodePen team for sending us #swag, Marie at CodePen for helping us get organized, Sandbox for providing the Pizza, and Visionary for letting us use their space!

Swag!
Swag!

Pizza!
Pizza!

Touring Visionary's venue!
People touring Visionary!


1,752 4 19