Designing a Beginner-Friendly HTML & CSS Class

Designing a Beginner-Friendly HTML & CSS Class

This is the first in a two-part process series on developing and producing my new HTML & CSS class with Brit + Co. This one is about designing the lesson plan and project. The next one is about filming the class in Brit + Co’s studio.

When I was working in NYC last year, Brit Morin and I started talking about collaborating on an introductory HTML & CSS class. Her company and creative community, Brit + Co, had just started producing a beautiful lineup of DIY online classes.

I took a look at their opening catalog and saw cake decorating, flower arrangements… and LED electronics. Yes! I was pumped to see those things side-by-side on a creative platform for women and girls. Brit gets it.

I’ve been hooked on the infinite possibility of technology since I was a kid. As a designer and visual artist, my all-time favorite medium is the web.

There’s an unbeatable sense of immediacy and empowerment in conjuring something beautiful out of correctly-ordered words. That’s a long-winded way of saying code is really fun!

If you’re completely new to code, HTML and CSS are a great place to start—especially if you’re a visual person.

Although building websites isn’t just a visual discipline (technical and interactive know-how are part of it too), it’s one that benefits tremendously from a creative mind and a good eye.

Making a class like this has been a longtime dream for me. Here’s how we did it!


Developing the Lesson Plan

I’ve previously taught HTML and CSS in a few different contexts—workshops, bootcamps, and through education products—but this was my first time filming an entire class on camera.

Last year, I produced a live UX & Front-End Development course with Metis and thoughtbot. Our first graduating class was 85% women.

My first challenge was choosing what material to include in the 60-minute session. When we’re introducing a new tool, its capabilities are a black box. I believe early projects should be about understanding the possibilities.

This means before we grind out a foundation or attempt to memorize anything, we have to answer a couple big picture questions. Why is this interesting? What can we do with it?

My early lessons always favor this stuff over nuts-and-bolts basics. The first objective is to build a complete project we can use in the real world. For now, we see what we can do. Perfect mastery and technical details can come later.

With that in mind, I put together a project-based lesson plan to make sure we hit all the high notes. Here are the topics we cover in the class.



  • Introduction
    • What are HTML & CSS?
    • Starter Kit & Setup
  • HTML (The Content!)
    • HTML: Structure
    • HTML: Formatting
    • HTML: Layout
  • CSS (The Style)
    • CSS: Layout
    • CSS: Spacing
    • CSS: Typography
    • CSS: Color
  •  Checking Our Code
    • Testing & Validation
    • Next Steps & Goodbye

The HTML unit is about making our content friendly to web browsers—basically, getting it to show up! The CSS unit brings in elements of graphic design, giving us a way to lay things out and make it stylish. Finally, we double-check our code and talk about where to go from there.


Designing the Project

After reviewing these topics with Brit + Co, I was ready to build out the class project. A personal page has a broad range of uses and the opportunity for self-expression is built right in.

For the design, what better place to find inspiration than B+C? I found myself inspired by these fun emoji perler bead coasters. Y’all know I’m a sucker for colors that POP.

Remember perler beads?! I had a blast with these as a kid! These unbelievable coasters come from Brit + Co kit designer Lee.
Remember perler beads?! I had a blast with these as a kid! These unbelievable coasters come from Brit + Co kit designer Lee.

I took a first pass at a layout and shared it with two of the stunning creative minds at Brit + Co, Chief of Staff Katie and Creative Director Anj.

They gave me some feedback and we dialed in a direction together.

After going through a couple revisions, we settled on this tangerine dream and used the perler bead DIY project for a backdrop.

It was important the design was easy to implement without compromising style. By using bold headlines and colors, we kept it fresh without adding a lot of complexity to the code.

This HTML & CSS class is perfect for beginners interested in creating a profile page, promoting a product or service, or marketing themselves for their next big gig.

I know a lot of y’all are already EXPERTS. If that’s you, please share with a friend who has always wanted to learn! Let’s get more creative gals on the scene. Here’s the link.

Next week, I’ll dive into my day of shooting with Brit + Co. I flew from Austin to San Francisco to film the class in their studio! I found the process really interesting and hope you will too.

(Update: Et voila! Read about filming the class here.)

Allison House is a designer and art director specializing in 3D visuals and motion graphics. Her work has appeared in the New York Times, Wall Street Journal, TIME, SPIN, Pitchfork, and many more.