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
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.
OVERVIEW – INTRO TO HTML & CSS
- 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.
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.
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.