Design for The Web

The most important thing about starting a new learning journey is building a sustainable daily practice. Here, you’ll establish the framework for how you’ll learn, work, and grow throughout the program. You’ll understand our pedagogy, learn how to document your progress effectively, and explore your personal goals through reflection. We’ll introduce the team structure, how collaboration will work, and establish writing as a core tool for learning and accountability. This is your opportunity to reset from hustle culture and build a centered, intentional approach to learning—replacing passive content consumption with active practice and genuine self-discovery.

The goal here is to completely reset the way you think about programming, “code,” and “tech” – and center it back to simple goals, how we think as humans, and how the computer is only a reflection of that, sped up. Before you can write instructions for a computer, you need to understand how you already organize information in your own mind. You’ll explore how humans collect, store, and retrieve data through concepts and attributes, discover the limits and strengths of human memory versus computer memory, and practice organizing real-world information in meaningful ways. This foundation reveals that programming isn’t some separate “technical” skill – it’s just a formalized version of the mental processes you already use every day. Computers were made by people, just like you.

Your computer is going to be your primary tool. You might think you’re an expert, but you’re probably not. The things we’re used to seem easy—but is that just practice, or are they easy because huge teams worked to make them feel that way? You’ll rediscover your operating system through fresh eyes, practice empathizing with first-time users, and learn to see the countless design decisions hidden in everyday interfaces. From file systems and command line basics to keyboard shortcuts and visual design patterns, you’ll build genuine fluency with your workspace. You’ll also learn version control with Git and deployment basics through FTP, understanding how to track changes and publish your work. This isn’t about memorizing menus—it’s about understanding how interfaces work so you can design better ones. You’ll also confront the environmental cost of our digital consumption, because good design means considering impact beyond the screen.

The goal here is to move through HTML historically and incrementally while weaving in early graphics program exploration. Before CSS frameworks and JavaScript libraries, there was just HTML—a simple markup language for sharing research documents. You’ll learn how the web actually works by building it the way it was originally built: marking up text documents with semantic structure, understanding file types and protocols, creating networks of linked pages, and viewing source to learn from others. This historical approach isn’t nostalgia—it’s the foundation that most developers skip, which is why they struggle with accessibility, document structure, and progressive enhancement. You’ll also begin exploring visual design tools and discover what it means to think like a designer, not just implement someone else’s vision.

More historical roll-out, exploring how things worked before Flexbox and why those design decisions happened. You’ll tackle HTML and CSS challenges that push you to the edge of what you don’t know—and learn how to name it and get close enough to ask questions. From styling text and understanding resets to semantic markup, positioning techniques, and typography fundamentals, you’ll build a foundation that lets you work with CSS intentionally rather than guessing. This isn’t about memorizing properties—it’s about understanding the cascade, specificity, and how layout actually works. You’ll create your own “kitchen sink” of styled components and learn to research and destroy existing sites to understand their techniques. Every challenge is designed to reveal gaps in your knowledge while giving you the vocabulary to fill them.

Time to put everything together in a four-day design and development sprint for a small business website—from user research and content strategy to design iteration and code. The real challenge isn’t building the site. It’s resisting the urge to copy decades of rushed and perverted design patterns. Less is more, but it’s difficult to slow down and make simple decisions when you can so easily emulate what everyone else is doing. This is an exercise in focusing on goal-driven design where the website has a measurable job to do. You’ll practice gathering user feedback, iterating quickly, and making design decisions based on actual goals rather than mimicking what looks “professional.” Then you’ll document the entire process through reviews and case studies, learning how to articulate your decision-making and present your work. This is where you discover whether you actually understand what you’ve learned.

Now you’ll explore the tools that give you real control over layout and visual design. From CSS blend modes and creating interactive SVGs to mastering Flexbox and positioning techniques, you’ll build the skills to implement sophisticated layouts and effects. This is about filling in the gaps and connecting everything you’ve learned into a cohesive system. You’ll plan layouts methodically, break designs into flexible modules and components, and continue deepening your typography knowledge. The goal isn’t to memorize every CSS property—it’s to understand how layout systems work so you can solve problems creatively and build interfaces that are both beautiful and functional.

This brings together everything you’ve learned so far. You’ll take on a super responsive layout challenge that tests your understanding of flexible layouts, responsive design, media queries, and systematic thinking. The challenge is designed to push you beyond comfort and into genuine competence. This isn’t just about making things look good at different screen sizes. It’s about building resilient systems that work across devices, handle edge cases gracefully, and maintain their integrity no matter how users access them. This challenge sets you up for the next module where you’ll expand this work into a comprehensive collection.

Students spend as long as it takes to build out 20 or 30 complex HTML and CSS modules with all the details, progressively learning more and more complex responsive layouts. You’ll introduce server-side scripting with PHP to create modular partials, keeping your layout code organized and reusable. On the way, you’ll discover things that can’t be accomplished with Flexbox alone. You’ll learn you can write better, more fluid, and accessible code than the people you’re copying from. You’ll find great reasons to introduce CSS Grid and maybe a few places to use positioning and transforms. Put in a little time each day tending your garden—add new plants, pull some weeds, save points in your Git history. Uh oh—did you accidentally create a component library or design system? If you can do this, you can build 90% of website layouts. After you conquer this, you’ll likely have a more solid core and confidence with HTML and CSS than most working developers.

You’ve already been building visual things, but now you’re not scared. It’s time to take it up to the next level, get some deeper cuts, and work towards your own first visual language for your now overflowing garden of website stuff. You’ll explore color theory, space, contrast, and how to employ these principles intentionally rather than randomly. Through exercises like city postcards, constrained graphics, style tiles, and symbol exploration, you’ll develop a vocabulary for making and discussing design decisions. We’ve learned a lot, but it’s still relatively simple, and we’ve been going deep. So let’s round everything out. You’ll create a complete visual language for your personal site and implement it in code. What if you had to apply for a job today? How serious can you get with what we’ve done so far? How much more confident are you than when you started?

This is the first time you’re working with real programming—but it’s in the context of why things like PHP were created to start with: for dynamic server-side site generation, modularity, and PersonalHomePages. It’s mostly about templating, but this very practical technique of introducing it really does the trick. You’ll learn control flow, arrays, objects, loops, and functions—all core programming concepts that transfer to any language. Build confidence with immediate real-world uses through server-side forms and programming exercises, and start to see how framework designers worked through these problems themselves. Think through problems with pseudo-code, and peer review each other’s form implementations. You’ll work through the book “Exercises for Programmers” (students always call it E4P), building an interface collection—like an interface garden or cookbook of patterns. Later in the JS section, you’ll come back to this same E4P collection to progressively enhance those forms, create JS-only versions, and tackle more exercises as a way to learn new languages. Just a start, but a very solid footing in thinking like a programmer.

Now that you have more tools, it’s time to get back to design. How do you take the same data for a brochure site but find a unique visual language to apply to it? How can you take a structure you don’t have control of and style it in a unique way? How do you go from novice to something that somehow looks 100% legit and contemporary? What are all the little things that make things feel “right”—and how do you reconnect to that? You’ll tackle a super ultra responsive layout and theming challenge, create style tiles, translate them into working styles, and then double down for a full week ironing out every detail. This is where you learn that visual design isn’t magic or talent—it’s a series of intentional decisions guided by research, constraints, and attention to detail. You’ll build multiple complete themes and discover your capacity to create professional-grade work.

This stretches about as deep as you can handle. You’ll rework the underlying structure of your personal site into your own unique and self-designed web framework. Learn routing with URL query strings, create dynamic detail templates, explore database concepts through CRUD operations, think through form validation, use route-based information for styling, and work with JSON to save data. People will unfold at their own pace here, and there might be open-ended timelines we decide together. Some will take it farther than others, but there are key aha moments here to discover before moving on. This is where you stop following tutorials and start making architectural decisions. You’ll understand why frameworks exist, what problems they solve, and how to build your own systems that work the way you think.

Now that you’ve built a pretty complex server-side framework, let’s take a look at the most used and maybe most misunderstood framework of all. This shows where things could continue if you spent months or years furthering your own framework – but let’s talk about where to draw the line. Building your own CMS is a lot. When do you leverage community tools? What is a framework? A library? A free CMS sure is helpful to spin up client projects, so now’s the time to get a real client and make that paper. If you play your cards right, you can get the whole course paid for by one client. Either way, you’ll see the power of a CMS and how to design and connect different data resources to create complex data-driven applications. You’ll install WordPress, explore the docs, create custom loops, use Advanced Custom Fields in templates, create custom post types, build resource relationships and menus, and spend two full weeks building something real. Then a medley week to round things out.

This is a general area we had for people to “catch up” — which no longer matters… but — maybe having some time for people to focus on tending their garden is important before we move on. — but these workshops need to be revisited and distributed to their right places / or removed —

You’ll already know how to think like a programmer, so learning JavaScript will be easy! But when you’re learning JS, you’re not just learning JS – that’s just a small part of it. What you’re really learning is the framework that is the DOM and the browser APIs, and how to see the differences between server and client tradeoffs. You’ll explore the browser console, understand the Document Object Model, handle user input with dialog boxes, work with forEach and filter, and discover common JS interface tricks. We’ll work through this historically and talk about progressive enhancement, when to skip it, and when to go all in. This is where you learn that JavaScript isn’t scary – it’s just another tool with its own context and use cases.

More about the DOM and an intro to how to build more complex interaction patterns, store state, and manage user input. Remember that E4P interface collection you built with PHP? You’ll spend a full week working through those same Exercises for Programmers exercises with JavaScript, rebuilding the forms and interfaces you created server-side but now on the client. This is dense but very eye-opening. The repetition with different tools is intentional—it helps you see the tradeoffs between server and client approaches. You’ll also have time to fold it back into your own websites where it’s a helpful enhancement. There’s a chance to get some fancy styles and animations involved if you’re up for it. By the end, you’ll understand how to progressively enhance your interfaces, when client-side JavaScript adds real value, and how to build interactive components that feel responsive and immediate while still working for everyone.

This is usually a sprint to research, ideate, and plan “an app” – not a huge complex web app, but something just complex enough to get you in the mindset. It could be an onboarding flow or a configurator, but it’ll need login and a few must-haves to force some complex data state out of you. You’ll map it out in a lean way, use prototyping tools like Figma to test the idea and find all the dead ends. Then you’ll build it to completion with just a little HTML, CSS, and JavaScript. No looking for answers. You can do this with a very small set of tools. The most important thing to learn is that it’s about understanding a limited toolset and actually using them – instead of always searching for other tools. You’ll spend a week planning and two weeks building your vanilla JS prototype. This is where you discover whether you actually enjoy building applications or just like the idea of it.

Let’s get back into the practical web and design systems realm after working on a single-page JS app. We’ll take a premade Figma set of pages based on a very clear design system. Can you copy it 100% perfectly? What does that mean? Can you make it even better? What if the boss wants changes? Did you build it in a way that takes a few words to change, or did you make a mess? How can we make themable systems that follow core sets of rules that are easily orchestrated from a simple configuration? How clever can you get? How much code does it really take? You’ll spend a full week on this sprint, discovering the difference between implementing designs and building systematic, maintainable design systems. This is where you learn that good code isn’t about being clever – it’s about being clear, consistent, and adaptable.

Note: Sometimes we’ve placed this mockup to code sprint between the two JS modules (between the intro to JS and the JS app sprint), which we’ll consider based on the next group.

It’s actually been a long time, and you probably hate it or you love it, but it’s a mess. But you must learn to enjoy the change. It’s time to reimagine your personal site with all the new things we’ve been exploring. What does that mean for your goals? For your information architecture? For your visual language? Let’s make this the site that keeps growing and gets mature throughout the rest of the course. You’ll work on the content, put it in context, work through type details, refine the layout, and spend dedicated work days building it out properly. That way you don’t “finish” the course and then think “now it’s time to make a portfolio.” Your portfolio has been growing the whole time. This is about elevating it to reflect who you’ve become and showcasing the depth of work you’ve accumulated. This is your professional presence taking shape.

We go through the E4P book again with Vue, so you’ll be used to the process of learning new languages by tackling the same practical interface challenges. Yes, you can learn React too if you want to, but we may as well avoid JSX for as long as possible. You’ll spend a full week rebuilding your interface collection with Vue’s Options API, discovering how frameworks abstract away the repetitive DOM manipulation you did manually with vanilla JavaScript. This is where you see that frameworks aren’t “advanced” – they’re more like training wheels that handle the tedious parts so you can focus on the logic. Because you already built these interfaces twice (server-side and client-side), you’ll understand exactly what Vue is doing for you and why it matters. You’ll explore progressive enhancement approaches and understand when a full framework makes sense versus lighter alternatives.

Note: We’re using Vue here in Options API mode as a framework for UI and progressive enhancement. We might talk about Alpine and other things too – maybe even explore HTMX here.

In the JS app module, we used ESM modules and other useful new things we might take for granted now, but it’s finally time to get into where most teachers seem to start. Basically learning all about the history of modules: Why Node? Why JavaScript on the server? Layering up what we’ve come to take for granted with the very invisible LAMP stack. You’ll understand how the browser has to load code, execute it, pay attention to user interactions, update state, and manage everything to bring your JS to life. Node is like a program that allows JS to run outside of the browser, letting you do all that stuff we were doing on the server with PHP (and a lot more) – but with JavaScript. This is where most coding bootcamps start. Here we are, many months in. You’ll learn about the ecosystem, package managers, build tools, and why we didn’t teach the whole course with Node from the start.

Important Note: Things get pretty rough around here. If you’re not loving this programming stuff, this is likely when you’ll fork off. Maybe you’ll focus on research or visual design or a specific part of the code. Our goal isn’t to produce “full stack developers” – it’s to let you explore “full stack design” and all the opportunity there is in so many areas, and how they all fit together. Maybe you want to focus on UX or product design or whatever they’re calling it this week. We’ll facilitate the right things based on the person. We might even have the core curriculum end here and have people focus on their personal goals and outlining them moving forward.

For the people who want to keep going with the SWE direction, they’ve built a lot of different things by now. Let’s see if we can design and build out a whole app? You’ll explore single file components with Vue, go through E4P with Vue 3, get introduced to Vite, and spend time understanding Vite and the modern build tooling ecosystem. You’ll work with Vue detail routes and build a new app – with Firebase or something to avoid all the Mongo-type things, or use their own PHP or JS backend, or Firebase. Just depends what you want to try. You could also rebuild your original JS app idea with all of these other tools that make it much more simple to declare. This would be a shorter version, focusing on practical application building with modern tools rather than getting lost in configuration hell.

Note: We’re teaching with Vue, but all of the same things will apply to React – so, stay focused on the concepts. You can learn React or Solid or whatever you want on the job fast – as long as you know the bigger picture.

This was kinda our “final project” – essentially creating your own version of a food delivery app with a whole custom design system and all the routes, data, and everything. This isn’t realistic in production, but you can create a really impressive project. You could work in a group if you want too. It doesn’t have to be Nuxt. It could be Laravel or React or Next. It could be front-end only, or backend only, or separate front and back with Nuxt and Laravel, or anything! Make as many apps at whatever level of depth you want. We’ll be here to support you. You’ll have access to any of our framework-specific courses. But only a small percentage of people will actually want to do this. Some students might want to design them, and other people manage or write the code, or whatever collaboration. You could get funding and start a company, or get a client. It’s not like we haven’t gotten hundreds of thousands to build apps of this complexity – because we have.

After this, you’ll be able to join other courses since you’ve got your unofficial degree of knowledge and experience in digital product design as a whole. You can join the alumni network and continue to work on projects for a very low cost. You’ve paid your dues! Now it’s time to do the work.