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
Conversation
Web browsers
Internet protocols, IP addresses, and URLs
Clients and servers
Suggested Reading & Resources
Designing with Web Standards, 3rd Edition, by Jeffrey Zeldman and Ethan Marcotte: chapters 1–4
Day 2: Introduction to HTML
Conversation
Tags, attributes, and values
Semantics
XML
The anatomy of a web page
Assignment
Create a résumé and bio in HTML
Suggested Reading & Resources
Designing with Web Standards: chapters 5–8
Learning Web Design, by Jennifer Niederst Robbins: chapters 4–10
HTML & CSS: Design and Build Websites, by Jon Duckett: chapters 1–10
HTML5 for Web Designers, by Jeremy Keith
Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm
Day 3: How the tech industry works
Conversation
Career paths
Day 4: Introduction to CSS
Conversation
Block and inline elements
Anatomy of CSS rules
Specificity
The box model
Assignment
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
Conversation
Layout techniques:
Floats
Positioning
Flexbox
CSS Grid
Responsive design
Assignment
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
Conversation
What is “design?”
What’s the difference between “art“ and “design?”
Tool rundown in design tools of choice (Sketch, Photoshop, Figma, etc.)
Assignment
Choose a website on siteInspire and replicate it in your design tool of choice pixel-for-pixel
Suggested Reading & Resources
Day 8: Redesign
Conversation
What makes a digital product “better?”
Assignment
Redesign your copied site to make it better
Suggested Reading & Resources
Steal Like an Artist, by Austin Kleon
Days 10–15: Copy and redesign
Assignment
Same as previous assignment with more complex original sources each time
Days 16–23: JavaScript
Conversation
Client-side vs. server-side applications
Basic programming concepts
Variables
Conditionals
Assignment
Build a rock-paper-scissors game
Suggested reading & resources
Days 24–30: DOM Scripting
Conversation
Progressive enhancement vs. graceful degradation
DOM traversal and manipulation
document.querySelector
Assignment
Build a progressively-enhanced dropdown menu or modal
Suggested Reading & Resources
DOM Scripting, by Jeremy Keith
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:
Scoping work
Writing proposals and pitches
Project management methodologies
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!
read this next
A full line doesn’t always mean the right line.
