From 2012–2019, I ran a 9-month apprenticeship at SuperFriendly for people new to design and development that wanted to make their way into the tech industry. I’ve previously written about why apprenticeships are valuable and what format I used; here are the details about how I ran them.

Within that 7-year span, I had almost 20 apprentices. Some finished the apprenticeship; some didn’t. Some got full-time jobs in the discipline they pursued during their apprenticeship. Some took the skills they learned in their apprenticeship and applied them to a tangential industry. Some went freelance or started their own companies. Some went back to doing what they did before the apprenticeship.

As I write this information for the first time, I’m realizing in hindsight how valuable documenting this earlier would have been for me and even moreso for my apprentices. I’m partially writing all of this down as a resource for myself in case I ever bring the apprenticeship back again.

C‘est la vie.

The final 3 months of my apprenticeship focused on preparing the apprentice for a job elsewhere, so, in terms of describing a replicable format, I’ll focus the syllabus specifically on the first 6 months (180 days).

Objective #

To unlock a new way of life for the apprentice through emergently gaining knowledge of web design and/or web development and the accompanying industry.

Prerequisites #

  • Computer proficiency. As little prior knowledge about design and development is preferred, as most of it would likely have to be untaught. If you can already make a design or development portfolio, you’re over-qualified for this apprenticeship.
  • Because this apprenticeship focuses on those interested in getting into tech, I host a several-week prelude to the apprenticeship. I ask each prospective apprentice to come to the office for 2–4 hours per day. I assign various reading and watching, from books to online articles to conference talks to YouTube videos. I also encourage them to observe the work that’s currently happening in the office and to take notes on words and acronyms that sound unfamiliar, and we spend time discussing what’s happening and why. If this is going to be a full-time career, I want the apprentice to have the chance to see what that could look like and try to envision themselves in that role. For many apprentices, it will be their first time in a desk job and/or sitting in front of a computer for an extended amount of time.

Required Materials #

  • Laptop

Attendance Policy #

At the beginning of the apprenticeship, in-person attendance at SuperFriendly HQ 4–5 days a week from 10am–4pm is required. During the second and third units of the apprenticeship, in-person attendance can decrease and independent remote work can increase.

(Because so much of the learning comes from passive observation, reflection, and real-time discussion, I haven’t yet figured out how to make a remote apprenticeship work as well as an in-person one, so to date it has never been an option that I offered.)

Methodology #

Every assignment comes with a conversation covering these kinds of questions:

  • What was easy?
  • What was difficult?
  • What did you learn?

The answers to these questions help shape the individual learning and direction each apprenticeship takes.

Calendar for basic training #

Day 1: How the internet generally works #


  • Web browsers
  • Internet protocols, IP addresses, and URLs
  • Clients and servers

Suggested Reading & Resources

Day 2: Introduction to HTML #


  • Tags, attributes, and values
  • Semantics
  • XML
  • The anatomy of a web page


Create a résumé and bio in HTML

Suggested Reading & Resources

Day 3: How the tech industry works #


  • Career paths

Day 4: Introduction to CSS #


  • Block and inline elements
  • Anatomy of CSS rules
  • Specificity
  • The box model


Style your résumé and bio

Suggested Reading & Resources

  • HTML & CSS: Design and Build Websites, by Jon Duckett: chapters 10–14
  • Learning Web Design, by Jennifer Niederst Robbins: chapters 11–13

Day 5: More CSS #


  • Layout techniques:
    • Floats
    • Positioning
    • Flexbox
    • CSS Grid
  • Responsive design


Find a layout in a magazine and replicate it with CSS

Suggested Reading & Resources

  • HTML & CSS: Design and Build Websites, by Jon Duckett: chapter 15
  • Learning Web Design, by Jennifer Niederst Robbins: chapters 15–16
  • Designing with Web Standards: chapter 9
  • Responsive Web Design, by Ethan Marcotte

Day 6–7: Introduction to design and design tools #


  • What is “design?”
  • What’s the difference between “art“ and “design?”
  • Tool rundown in design tools of choice (Sketch, Photoshop, Figma, etc.)


Choose a website on siteInspire and replicate it in your design tool of choice pixel-for-pixel

Suggested Reading & Resources

Day 8: Redesign #


  • What makes a digital product “better?”


Redesign your copied site to make it better

Suggested Reading & Resources

Days 10–15: Copy and redesign #


Same as previous assignment with more complex original sources each time

Days 16–23: JavaScript #


  • Client-side vs. server-side applications
  • Basic programming concepts
    • Variables
    • Conditionals


Build a rock-paper-scissors game

Suggested reading & resources

Days 24–30: DOM Scripting #


  • Progressive enhancement vs. graceful degradation
  • DOM traversal and manipulation
  • document.querySelector


Build a progressively-enhanced dropdown menu or modal

Suggested Reading & Resources

Days 1–30 #

The first month is basic training: dipping toes into the foundational skills in being a web professional. Whether intending to concentrate on design or development, every apprentice starts with an introduction to both design and code as understanding both of these things are crucial to being a competent web professional. This first month is intended to provide exposure, not necessarily build proficiency.

Days 31–90 #

After the first month, an apprentice is encouraged to choose an area of focus between design and development. Learning much more follows the interests of the apprentice, so there’s less of a stated curriculum available as it shifts to being more self-directed. Learning includes topics that broadly address professionalism, such as:

Design concentration #

For those more interested in design, we do more copying and remixing assignments. The assignments progressively increase in complexity and intend to increase fluency with design tools and design solutions. The design apprentice should grow more confident solving challenges like drawing more attention to a particular piece of content, knowing if a design is accomplishing its job, shifting the mood of any particular design, and more.

Typical topics covered within this time period may include the following as they’re of interest to the apprentice:

  • Typography
  • Art history movements
  • Illustration
  • Branding
  • Image formats & optimization
  • 2D & 3D Animation
  • 3D modeling
  • Motion graphics

Development concentration #

For those more interested in development, each assignment intends for the apprentice to build more and better than they could before.

If the first assignment is to build 1 unstyled web page, the final assignment before moving on to real project work may be to build a fully-functioning, multi-page website with both client-side and server-side logic. Every assignment between builds up to that point, and the path taken for each assignment is to both reinforce good skills as well as address weaknesses that could use more practice from the previous assignments.

Typical topics covered within this time period may include the following as they’re of interest to the apprentice:

  • CSS animation
  • Content management systems
  • Package management
  • Image formats & optimization
  • Performance
  • APIs

Day 90 #

Every 90 days, each apprentice does an evaluation. We go through a review sheet as a way to calibrate how closely their plan of study matches against what they want to as well as their strengths and weaknesses.

Days 91–180 #

After the first 3 months, a pre-defined syllabus is almost impossible to use. Apprentices are usually ready to join real projects with larger teams, and lessons learned are a direct result of the specific projects available and greatly vary from apprentice to apprentice. Because of this inevitable variation, it’s important that both the mentor and apprentice be continually focused on the specific skills the apprentice wants to advance. Some apprentices enter with stronger back-end skills than front-end skills or a stronger ability to execute user interface designs rather than present well in a meeting. That’s an advantage of the apprenticeship model of learning rather than following a more structured learning plan like a online course or university major, so the apprenticeship style should be utilized to its advantage.

All assignments tend to give the apprentice some sphere of ownership, although that ownership is very limited in earlier days and much more broader as they approach the end of their apprentice. For example, an apprentice who is new to real project work may only be in charge of the footer’s design or code, while an apprentice at the end of their apprenticeship may be in charge of designing or developing a whole section of a site or app or even the entire thing.

Day 180 #

If paced well—which is the responsibility of both the mentor and the apprentice—the end of this 180-day period should give the apprentice at least 3 examples (read: portfolio pieces) that show the broadest scope of what that apprentice can confidently handle on a project.

Hopefully this gives you a good sense of what went into the first 6 months of the SuperFriendly apprenticeship. If you’re considering starting one of your own, or even if you have an existing one, you’re more than welcome to take any parts of what I’ve done here and integrate or remix it into your curriculum. But if you do, please share that publicly too!

Up Next

Weeknotes: May 17–May 23, 2020