DFTW example syllabus

Depending on how a program is used, you might think of the participants as “Students,” “Designers,” “Members,” or simply “Participants.” In the context of our personalized coaching programs, we just call them by their first names or refer to the group as @team. So, you might see that these terms vary below.

We run 2-3 in-house group coaching sessions a year and incorporate what we learn back into the curriculum. Every group is a little different, so you’ll want to shuffle things around as necessary based on the group and the time of year.

Our participants play an active role in shaping the curriculum, providing feedback and suggestions that influence its development and customization.

This collaborative approach ensures that the program evolves to meet the unique needs and goals of each group, making the learning experience highly personalized and effective.

Before a program begins

Getting ready
Duration: Variable

Internally (at PE), we only do a few sessions a year, and we let them come together organically (vs. how an online college or boot camp might be able to start a cohort every two weeks). Prospective participants/designers will likely have to wait a bit for their group to coalesce. It will be worth it. If you’re in a big rush, it might be a red flag.

Based on the person (and their goals), we will suggest books, videos, projects, and other internal and external resources. We encourage everyon to stop whatever programming learning they might have been doing and wait to focus on that in context (during the workshops). Getting your life in order is much more important than cramming programming syntax. We’ve planned the workshops to tour everything you need to learn in order.

Introduction to daily routine and team building

First Half of Week One
Duration: 1/2 week

This module aims to establish a productive daily routine, encourage reflection on personal learning goals, and introduce the expected pace of the program. Students will engage in team-building exercises and familiarize themselves with essential communication tools, such as chat and video-sharing apps. We also introduce the Time Timer and the concept of time-boxing. We’ll also go over our expectations as far as portfolio development and writing throughout the course. (example)

The human-computer connection

Second Half of Week One
Duration: 1/2 week

In this part, we draw parallels between human cognitive processes and basic computing concepts. It delves into understanding the strengths and weaknesses of human thought in relation to data processing. The aim is to make students aware of the innate data structures and logic they use daily, drawing a comparison to computer operations. It’s all key: value pairs.

Effectively leveraging your computer

Week 2
Duration: 1 week

This week is dedicated to an in-depth exploration of your computer, including hardware, software, and user interfaces. Your computer is going to be your primary tool. You might think you’re an expert, but you’re probably not. We’ll examine the Operating System through the eyes of a new user. We tend to take it for granted, but the OS is the most used program and is made up of tons of design, User eXperience, and User Interface decisions. This module covers navigating the OS, utilizing command line interfaces, and setting up efficient work environments locally and in the cloud. We will explore document hierarchy, which leads to an exploration of how data structures influence HTML.

Master the web like it’s 1999

Week 3
Duration: 1 week

How do programs know how to read a given file? How is the data stored? How do you share your sites on the web? How do protocols like FTP work? How do you build a network of websites? How do you build your network of humans? Create a plan to write about your work and share your learning journey – if only to practice explaining what you’ve learned. Build a useful web portal to act as a command station. Learn the base HTML elements and layout concepts that seem to elude even the most experienced programmers. Continue to add new semantic HTML elements to your toolbelt.

Author your web documents with style

Weeks 4-5
Duration: 2 weeks

Many programmers will write off visual design as some type of creative process they aren’t capable of – or just don’t like. But we don’t have time for bullshit. So, dig it and face your fears. It’s not magic. Figure out how logical decisions lead to things that don’t look terrible. Learn how to use standard graphics programs and how they relate to typography on the web. We’ll even show you how to make gradients and roundy corners. Put everything together in your first milestone challenge. Explore assistive technologies like screen readers to navigate web pages and learn how your HTML is seen through the accessibility tree.

More CSS and typography

Week 6
Duration: 1 week

Every day of the course, you’ll continue to enhance your HTML and CSS skills. These are not just one-time learning modules. These are ongoing areas of development. It’s not something you learn in a block and then move on from. It takes time to build up a visual sense. This week is about getting into more complex scenarios that force a fresh point of view. Learn how responsive layouts work and how to let your sites stay fluid and resilient.

Mock client challenge

Week 7
Duration: 1 week

This week starts off with a challenge to replicate a website of your choosing. You’re not going to have all the tools you’ll need yet, but this is a good way to figure out where your gaps are. Research and destroy. It’s going to be a mess. And you’ll learn all the more because of it.

Then, the rest of the week will be a 4-day sprint to research, content strategy, design, iterate with user feedback, and write the code for a small business card site. It’s an exercise in avoiding the urge to create the standard boring, centered site. We’ll focus on goal-driven design. Less is more. The website has a job to do and it is measurable.

Keep scaling out and explore interactive SVG

Week 8
Duration: 1 week

Try out all the newest CSS properties, filters, and blend modes. Get flexible and go deep into responsive layouts with Flexbox, @media, and @container queries. Just take care of business. Master it. And we’ll throw in a bit of classic positioning techniques for good measure. Cap it all off with a milestone responsive layout challenge. If you can do this, you can make 90% of the website layouts. Feel free to drop the microphone (that’s rude). But you’ll have earned it.

Consolidation week

Week 9
Duration: 1 week

At this point, you’ll actually know how to build websites. You’re not going to be amazing at it yet (maybe!) , but there won’t be any confusion about how it works anymore. From here, it’s just going to take practice!

This week is all about continuing on with your responsive layout challenge and turning it into what we call a “responsive layout garden.” You’ll have a lot of time and as much help as you can stand. At the end of the week, you’ll have a special meeting where we’ll revisit your goals and take stock of where you’re at.

Reflection and reassessment period

Week 10
Duration: 1 week

After 3 years of running DFTW sessions, it has become clear that this is the breaking point.

What will you have by the end of this week? A hefty collection of layouts in your garden? A set of articles? A fleshed-out personal website? Some wireframes for web project ideas? Is this going to be a passion for you? If not, well, then this is a great time to change course. Everything you’ve learned will be transferable, and there’s not a big reveal you’ll be missing out on. It’s going to be a long seven months of this same pace – consistently adding complexity the entire way. Take this time to get really honest with yourself. Are you willing to put your whole heart into this? Do you really want to learn how to design and build web applications? Based on your effort, we’ll decide if it is appropriate for you to continue.

—————–

Diving deeper into visual design

Weeks 11-12
Duration: 2 weeks

We’ve been folding in research, content strategy, workflow, team review, visual design, and code – the whole way so far. But it’s time to level up. You can’t just learn visual design all at once. You have to level up incrementally so that you get time to soak it in and learn to see the higher resolution. Making your websites look good isn’t just a surface area thing. The user interface is functional. It’s part of the system and how users use it. This portion is about learning how to break visual design down into a goal-driven decision-making process. The goals and the content will really do the decision-making for you. You just need to learn how to listen to their needs. You’ll still be working on your HTML and CSS – but these weeks will be about creating a visual language for the first official iteration of your personal business card site.

Programming fundamentals

Week 13
Duration: 1 week

As you’ll see at this point, HTML is just a data structure, and CSS is, too. They are computer instructions. But it’s time to get into core programming principles. What can the server do for us? Math? Repetitive tasks? Write HTML for us? If you have an e-commerce site with a thousand pages, you’re not going to write them all by hand, are you? We’ll cover all the concepts and syntax you’ll need to create dynamic page templates based on user instructions. You’ll also have time for some forced repetition to really drill it in. We’ll utilize PHP for its simplicity and zero-setup advantage. Interestingly, PHP’s syntax closely mirrors JavaScript’s because they are both based on the C language syntax. So you’re not learning PHP – you’re learning to think like a programmer. Prepare for a milestone project: creating an intricate e-commerce product-grid theme.

Programming fundamentals – continued

Week 14
Duration: 1 week

This week is all about applying what you’ve learned. Students will tackle real-world challenges integrating HTML, CSS, and PHP to build server-side forms. These exercises go beyond mere functionality, requiring a thorough understanding of user experience, interface design, HTTP POST/GET requests, and form submissions. The exercises have no solutions. Only the users can measure your success.

You can go as deep as you’re willing to take things and explore sessions and cookies too.

Application architecture

Week 15
Duration: 1 week

Hopefully, you’ve been incorporating everything you’ve been learning back into your personal website and your associated projects. We’ll be folding in CSS Grid and sub-grid wherever we can find practical uses.

Now it’s time to take the site structure up a notch. We’ll use query parameters to create a dynamic data-backed website system with routing. We’ll explore early database concepts by creating collections and documents with JSON. This section ends with a milestone CRUD challenge. Depending on the group, we may extend this to a second week. Sometimes, people get very ambitious and have the time to build their own content management system. MySQL databases are an optional sidequest here.

This portion of the course will be demanding but has proven to be very rewarding and to really connect everything together. In the grand scheme of things, we only scratch the surface with PHP. It’s all about empowering the student to build things / and not about any given language.

Content management systems

Week 16-17
Duration: 2 weeks

So far in the course, students have been building their forms from scratch. They’ve built out their own little MVC system. But things are getting complex.

You may have heard about WordPress. Some people love it, and some people hate it. But do they actually understand what it is and how it works? We’re going to use WP as a way to explore a larger Content Management System framework – without being responsible for managing every aspect of it. Just like most websites in the world, it’s built with PHP. But learning a framework isn’t about the language. It’s about the abstraction and the conventions and functions it provides. Over these weeks, we build a fully custom WP theme. This will require us to learn a lot about architecting a database and how to plan your application’s content types and data relationships. WP also brings up the concept of package managers via its plugin and theming ecosystem. We’re going to learn how to read the documentation and build a pretty damn cool project. This will not be a drag-and-drop WP nightmare.

Medley week

Week 18
Duration: 1 week

We usually take some time to let people round out their projects and revisit things here. It’s also a time when we talk more about CSS Grid and advanced layout techniques. We also leave some time to talk about database migration and how to host more complex websites. Sometimes, people just need a bit of a break. Many students choose to incorporate Sass (for CSS preprocessing) via CodeKit – since we don’t add the complexity of the Node.js eco-system until further in the course.

Personal Website Pro™

Week 19-20
Duration: 2 weeks

It’s that time again. Now that you’ve had a lot of time and practice – and gained that experience, you will see things at a higher resolution. It’s time to take things up another notch.

This is the part of the course where we plan out what will likely be the foundation for how your personal website looks when you finish the course. Your site will utilize your homegrown web framework, but now it’s time to rethink the strategy. Who are you now? What has changed? Now that you have numerous projects and case studies to share, how will they inform your design? You will create a resilient design system that showcases your understanding of content strategy, accessibility, markup, styles, – and push some of the boundaries with all the latest and greatest CSS powers.

We’ll also have our second consolidation meeting here.

Have you noticed that we haven’t gotten into JavaScript yet? Can you believe it? For some people, they already have what they need. They might not want to continue on the programming track. They might want to spend the last portion of the course focusing on a user interface design track or move into UX.

At this point, it will be objectively clear whether you like programming or not. You gave it a very thorough exploration. We’ll talk it all through and make the best plan for your unique goals.

Introduction to JavaScript and the Web API

Week 21
Duration: 1 week

JavaScript syntax is nearly identical to PHP; in fact, it’s even easier to read and write. But JavaScript is something that’s happening live in the browser. It’s not being run on a faraway server that just hands you back a Xeroxed HTML page. It’s a different mindset. And really, what you’re learning now isn’t JavaScript, the language, but the language of the browser. Again, you’ll be working with HTML, CSS, and JS all together.

Time for live interactive buttons! You’ll get a chance to explore all the nifty little low-hanging JS uses.

User interface exercises

Week 22
Duration: 1 week

Remember when we did all those programming exercises before, and you made that impressive collection of server-side forms?

It’s time to do them all again with JavaScript on the client side. We’ll progressively enhance the old forms so your site will work if JavaScript is disabled.

It’s very important that students see this as a UX challenge. JS is a great tool to enhance user interactions. That’s why it was created (seriously: to enhance form validation).

Students will come away with a milestone collection of forms showing they’re looking for the edge cases and are thinking about the end-user experience – not just the code.

This is likely where we’ll first introduce HTMX as well.

Figma to code challenge

Week 23
Duration: 1 week

We provide a complex mockup design system file. Students have a full week to implement it in the most complete way possible. Sometimes, we make a contest out of it. This will pull together our architecture and planning skills, HTML and CSS, and other tools. We’ve been collectively building up a CSS framework throughout the course, and now it’s time to see if you can put it all to work. How will you organize your custom properties? How will you break up your components and modules? What if we request site-wide color changes halfway through, or we want to change the typography? Can your system handle it?

If you’re wondering how much you’ve improved, now it’s time to find out. You can either do it or you can’t. And if you can, then you’re already better than most web developers.

Everything is a to-do app

Week 24
Duration: 1 week

Time to get serious with JavaScript. How many different ways can we create a To-do App? We can try it with plain old JS objects, Constructors, and Classes – and then compare them. What does it look like in a single file? How can we use ECMAScript Modules to organize across many files? Can we make our own little JavaScript framework?

For security reasons, we can’t really save to the file system with JavaScript (in the browser). However, we can utilize browser tools like local storage to save data in the browser itself. You can also send Application Programming Interface requests to your WP site or any other fun public API and get back some outside data. You’ll get some solid repetition with JS and CRUD functions.

Planning an app

Week 25
Duration: 1 week

Post todo app marathon; we shift focus to planning. It’s time for pencils! (and Figma), where you’ll create multiple rounds of prototypes, each with increasing fidelity. This phase emphasizes understanding user goals before development. You might discover a passion for UX and UI design here.

Vanilla JS app prototype

Week 26
Duration: 1 week

Students will take everything they know about JavaScript so far – and build out a plain JavaScript app prototype (with no frameworks). It’ll be tough. But putting in the work here can be a game changer. Sometimes, you have to just fight through it to realize that, in the end – it’s up to you. There’s no premade answer for you. It’s just you and a blank screen and a programming language – that can put stuff on that screen.

The more effort you put in now, the stronger you’ll be for the rest of the course.

If you aren’t really excited about this, then it’s going to get treacherous ahead. Sometimes, this goes on for two weeks.

Client projects

Week 27
Duration: 1 week

Depending on the group’s progress and interest, we undertake a real client project. The project’s complexity will determine its timeline. This period may also include a consolidation meeting to reassess your path. If JavaScript isn’t your forte, we’ll explore other areas where you can excel. There are numerous rewarding careers outside of full-stack JavaScript development. Someone has to talk to the client, manage the project, research the market, talk to users, discover requirements, sketch out ideas, plan things out, build prototypes, test with users, and everything in between.

Intro to JavaScript front-end frameworks

Week 28
Duration: 1 week

Regular JS is great. It’s better than ever. But it still leaves a lot to be desired. As you’ll now know (intimately), you have to write a lot of code to build an app with JavaScript. And that’s why JS frameworks exist. They take all those repeated tasks and abstract them away. Sometimes people think of JS Frameworks as advanced – but they’re much more like training wheels (in a good way).

Remember when we did all those programming exercises before, and you made that impressive collection of server-side forms and then client-side forms? It’s time to do it AGAIN! This time, we’ll be using Vue (the most fun JS framework). It’s the next logical step in abstraction (you can learn React or any other JS framework quickly after this).

This week, we’ll explore Vue 3 (with the options API). You can incorporate Vue into your personal website without any build pipelines or processing tools.

JavaScript – beyond the browser

Week 29
Duration: 1 week

The browser has to load the code, execute the code, pay attention to any user interactions, update the state of things (like memory and the graphics on screen), and do all sorts of stuff to bring your JS to life. The browser is a computer program that runs computer programs.

Node is like a program that allows JS to run outside of the browser. It allows you to do all that stuff we were doing on the server with PHP (and a lot more) – but with JavaScript.

This is where most coding boot camps start. Here we are: 29 weeks in.

So, why didn’t we teach the whole course with Node to start then? If we were to do that, people would be so busy remembering all the syntax and moving parts that they wouldn’t be able to focus on the goal. This is the perfect time to learn about Node.

We’ll quickly pick up another templating language, how the ecosystem works, and build your own CSS preprocessor.

Building a server with JavaScript

Week 30
Duration: 1 week

Express.js is a minimal collection of functions and conventions (a framework) that sits on top of Node.js and helps you write clean and readable servers. It’s a great example of layering up these Node Packages – so that’s what we’ll use to learn with.

You didn’t have to write a server with PHP because you just pushed start. Now you can get another layer deeper into how the server works and reconnect to all the HTTP you’ve been using this whole time. You’ll see that the concept of routing in Express is very similar to what you came up with in your personal website framework.

The goal here isn’t to become an Express expert or get a ton of API-building experience, but you’ll get enough to know if you want more, and that’s the point.

You can also explore real-time projects with web sockets or build a server for your other client-side projects. We’ll also go over deployment concerns and options.

Further exploration with JS frameworks

Week 31
Duration: 1 week

You got a hint of Vue and learned how to incorporate it into an existing site. But there’s a way to go all in and use JavaScript across the board as a JS-only app. This means an HTTP server and builds tools and single-file Vue component syntax. It would feel like a lot, but you’ll have been exposed to everything piece by piece. You’ll have just built your own server, and you’ll understand how the ecosystem works. Using Vite for tooling won’t be a mystery.

Finally here! But just at the right time. This phase revisits the interface exercises, and we work through them with Vue 3 with the composition API and setup pattern. We’ll talk about Pinia, datastores, and all the magic stuff.

App sprint

Week 32
Duration: 1 week

Students will build a small app in a one-week sprint. We’ll use Firebase to try out a non-relational cloud database (or Pocketbase) and explore real-time updates. They can also use their Express API and database from previous exercises. The idea here is to get a feel for how fast you can create a prototype and get it in the hands of users or possible investors. There is so much more to a real production-ready app, but this will be a great milestone. Students often use the design they’ve already made for the Vanilla JS app and expand on it with this project.

Final project

Week 33 – 38
Duration: 6 weeks

It seems silly to say “final project.”

Students can build as many projects as they want – but the core curriculum can’t go on forever. Let’s go out with a bang.

At this point, some of the students might be focusing on specialized areas. This project may not apply to them – or they may be collaborating from a UX angle. This is the project that puts everything we’ve learned into a formal web application.

Here’s the breakdown on the technical side.

The frameworks don’t really matter. That could always change. Students could choose to use React and Next or Svelte. The concepts are what matters most. We’ll be using Nuxt for this project. You can think of Nuxt as a parent framework (a set of conventions) centered around Vue. It will limit the repetitive boilerplate code so you can focus on your ideas, not the configuration. Since we’ve built up to it gradually, there won’t be any surprises. You’ll love it.

For the Database, this time, we’re going to use Supabase. It’s similar to Firebase but is relational (PostgreSQL specifically). This will allow us to get users and user login up and going – and learn about row-level security policies. It also has real-time capabilities baked in.

It’s unreasonable for a single person to create an enterprise-level website all by themselves. But let’s try anyway!

An app of this size will make a case for automated testing and tools like TypeScript. You might make it a group project. And you can take it as far as you want.

Then what?

Week 39 and beyond
Duration: Forever

Getting through the program was never the goal. Becoming a confident product designer was. Get out there and design and build awesome things!

Now that you’ve experienced the whole ecosystem, what do you want to build? What industry do you want to work in? What part of this medium do you want to focus on? Do you want to focus on the data and the servers? Manage projects? Work on a design system team? Freelance? Start an agency? Build your own Saas? Work at an agency building brochure sites or eCommerce sites? Big company?  Small company? Did you find a little niche that you’re obsessed about? Most people figure that out during the course, but sometimes it takes a little longer – and it might not be what you expected. Whatever it ends up being, we’ll be here to support you. We’ll often jump on calls with students when they’re onboarding at their new job or to game out projects and pricing – and alumni will be added to the network to connect with alumni from the other sessions.

Students who complete DFTW are also grandfathered in for all future elective course material and our collection of resources and exercises is growing all the time.