Frontend Academy

I served “professor realness” to bolster the foundational frontend concepts of our engineering team. The courses I put together on modern HTML, CSS, and accessibility led to measured improvement and higher quality code commits.

Motivation

At the start of 2020, I was asked to see how much work it’d be to update our app to use our parent company’s emerging design system. As a designer that knows his way around a frontend challenge, I agreed to take a look.

When I reviewed the markup and styles in our frontend codebase more closely, I found discouraged practices and features in use — things like inline styles, unnecessary CSS prefixes, and high selector specificities. To be fair, you’ll find tech debt like this in plenty of longstanding apps, but I also found these discouraged practices popping up in new features, too. It got me thinking about the best way to help the team’s understanding of modern styles and markup. Could I carve out time in our team’s busy schedule to help establish a solid frontend foundation?

Process

After taking some time to see what areas needed modernizing, I decided that a lecture series would be the best way to educate the team in a concise way. I paired up with a coworker, and we set out to create an optimal curriculum. We took a long list of topics on both sides of the great frontend divide and whittled it down to a list of ten. I worked on these eight topics:

  • CSS Cascade, Specificity, and the Box Model
  • Testing Your Work with Dev Tools
  • Testing Across Devices, Operating Systems, and Scenarios
  • Modern CSS, Layouts, and Markup
  • Responsive Design
  • Inclusive Design and Markup
  • Internationalization
  • SCSS

I expanded each topic into a full presentation. For each lecture’s slides, I cited high-quality sources like the MDN Docs, CSS-Tricks, and Smashing Magazine. I started with broad explanations and then dove deep with example code, custom diagrams, and a collection of CodePens to help give devs different ways to grapple course material.

Screenshot of the Frontend Academy collection of CodePen examples
The CodePen examples I adapted and put together supplemented each lecture’s slides and diagrams.

We then presented each topic in a weekly, one-hour Zoom call, talking alongside the slides and answering questions along the way. Each session was recorded, which we uploaded alongside the the slides and additional examples so that engineers could refer to them later on.

Overall, we made good progress on everyone’s understanding of frontend coding. We wrote a pre- and post-academy quiz to track the team’s progress, and we saw a marked improvement of several percentage points. Not bad for a ten-week crash course!

Evaluation

(What worked well and what I’d do differently)

  • We now have a library of lectures that we can refer back to. Having a reference set like this means it’s easy for new devs to be onboarded and for seasoned devs to brush up whenever necessary.

  • With limited time and resources, I couldn’t provide as many code examples and quizzes as I had hoped. My coworker and I only had time to put together those two quizzes, so finding more opportunities for active learning might have boosted the team’s understanding of the material even more.

  • The sessions reminded me that I enjoy breaking down concepts and explaining strategies in understandable ways. My experience in the web development world all came about through self-guided learning, so I relied heavily on others explaining concepts and providing examples to me. Being able to pay it forward in a similar way was pretty rewarding.

Details

Timeframe

March – August 2020


Skills in use

Frontend programming, presentation skills, education and lecturing


Tech specs

  • Ten presentations covering fundamentals of frontend programming, of which I made eight
  • Nine CodePen examples to illustrate some CSS concepts
  • A post-session exam to evaluate progress

Status as of December 2020

We’re beyond the “crash course” phase and are keeping up a regular cadence of continued frontend programming education.