A Syllabus for Web Design & Web Development Apprenticeships

An intentional way to teach web design and web development from scratch.

Published on

Around 7 minutes to read

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 #

Required Materials #

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:

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

Suggested Reading & Resources

Day 2: Introduction to HTML #

Conversation

Assignment

Create a résumé and bio in HTML

Suggested Reading & Resources

Day 3: How the tech industry works #

Conversation

Day 4: Introduction to CSS #

Conversation

Assignment

Style your résumé and bio

Suggested Reading & Resources

Day 5: More CSS #

Conversation

Assignment

Find a layout in a magazine and replicate it with CSS

Suggested Reading & Resources

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

Conversation

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

Assignment

Redesign your copied site to make it better

Suggested Reading & Resources

Days 10–15: Copy and redesign #

Assignment

Same as previous assignment with more complex original sources each time

Days 16–23: JavaScript #

Conversation

Assignment

Build a rock-paper-scissors game

Suggested reading & resources

Days 24–30: DOM Scripting #

Conversation

Assignment

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:

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:

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 Next

A CEO’s COVID-19 Calendar

Join 57,400+ subscribers to the weekly Dan Mall Teaches newsletter. I promise to keep my communication light and valuable!