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 CrowdTwist’s main app to use the emerging design system of our parent company, Oracle. 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 outdated 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. Rather than addressing symptoms of a larger problem, 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.
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!
Previews
(Selection of diagrams used in slides)
Evaluation
(What worked well and what I’d do differently)
- The team now has a library of lectures that they 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
Before parting ways with the company, I shared the resources with the global Oracle engineering team to review, use, and build upon.