Mozilla and the BBC Team up to Teach Developers CSS Grid

Published in

Mozilla Tech

4 min readDec 6, 2017

Keeping up with the frantic updates and developments of the 24 hour news cycle is tough for anyone. But that pales with the challenges of working as a web developer for a news organization tasked with staying on top of it all. Working at the BBC News is a dream job for many, but the demanding pace of the news coupled with making deadlines and staying updated on new web development skills makes a tough job even tougher.

So how does a developer pursue new skills within the confines of their frantic daily pace? That was the question BBC Web Developers Sareh Heidari and James Donohue had on their minds.

For a lot of developers and designers, it turns out the best case scenario is when the lessons come to you. Mozilla introduced the Developer Roadshow program to Heidari, and the pair decided to organize a learning session inside the BBC Broadcasting House, the iconic home of the BBC. The massive building houses News, Radio, Television and Online services in one location in central London. This means it’s one of the most advanced digital centers in the world, and also a perfect location to bring web developers together.

The pair teamed up with the Mozilla Developer Roadshow which led them to noted CSS Grid expert, Invited Expert to the CSS Working Group and Smashing Magazine Editor-in-Chief Rachel Andrew.

They were used to heading outside the BBC walls to attend a conference. “It’s easy for developers to find a Javascript conference or course,” explained Heidari. “But it takes time and money to learn a new skill like CSS Grid, which is a more specialized skill.”

CSS Grids bring order to a layout, making it easier for visitors to find and navigate through information. Designers can quickly add elements to a layout, work and collaborate on the design, and have more consistency in the layout of pages. According to Donohue, “One of the biggest challenges the BBC developers face is managing the complexity of a huge website developed by different teams across multiple geographical locations and serving content to a global audience in nearly 40 human languages.”

For some of those who attended the late October workshop at the Broadcasting House location, it was the first time they’d ever met, even though they all work in that same building. “It was brilliant,” Heidari shared. “Developers we spoke to said it was incredibly useful getting a thorough introduction to CSS Grid Layout and to have practical use cases to make the spec a bit more tangible. Several people have already said that they’re excited to try some of this out for projects.”

Mozilla has organized and hosted nearly 60 events all over the world in 2017.(Check out a few video recaps here) The idea is to share practical knowledge of the Mozilla and Firefox tools and technologies that can help designers and developers level up their work immediately. Both developers who hosted the event said it felt like a real kick start to adopting CSS Grid.

“Not only did it help to foster communication and knowledge-sharing between different parts of the BBC, added Donohue, “We were delighted to have the opportunity for a renowned authority like Rachel to come in and get us started on our journey with CSS Grid.”

For Rachel Andrew, it was a unique chance to hear from developers and designers who are already making great use of CSS layout mode Flexbox.

“Being able to bring CSS Grid Layout to the developers at the BBC was a great opportunity for me to share some of the things I find exciting and interesting in the spec, with developers and designers who are already making great use of Flexbox,” said Andrew.

Her goal was to zone in on the main parts of the specification, with a set of code examples that she could work through with the attendees. She wanted to get people writing CSS Grid code as soon as possible which would give them something to look back on after the workshop. “I don’t know any better way to learn CSS than to write CSS,” Andrew explained.

Often Andrew sees designers who are independent contractors or work on small teams deploy CSS Grid. But this was one of a few chances to see a large company try it out. Her hope is to follow along with BBC designers and developers as they start to use Grid in production to see exactly how the use could scale across such a large organization.

“CSS is the bread and butter of what we do,” added Heidari. “It’s unarguable these are essential skills.”

Rachel Andrew’s CSS Grid resources:

Mozilla and the BBC Team up to Teach Developers CSS Grid

Written by Janette Ciborowski