Intro to Coding for Designers

In Spring of 2021, I taught a virtual course called Intro to Coding for Designers hosted by Index. The first cohort had eleven students who met over six weeks on Zoom.

Learning Outcomes

Drawing from principles of the handmade web, students learned basic HTML, CSS, and how to see the browser as a design tool. By thinking in terms of default design, students were able to design for screens they cannot see.

Our discussions explored coding as craft, similar to DIY zines and art books. By creating personal spaces for creative play, coding becomes a therapeutic act. Using gardening as a metaphor, we came together to envision a world where artists can grow the website as a garden.

We explored the foundations of web history, politics, and pulled back the curtain on the infrastructures that govern the internet. Students gained a better understanding of what the web is and how to communicate with machines.

Student Work

Personal websites were published to Github Pages. Starting from Week 1, students hand-coded HTML pages from scratch.

Artifacts

Part of the web as garden philosophy includes the idea of designing in public. By publishing HTML pages and styling them in iterative layers, we can grow our websites slowly over time.

The course is designed to start with the most foundational skills, allowing students to publish a basic website during the first workshop.

I didn’t know I could do something for myself on the internet! The process of adding code and publishing, adding some more code and repeating--of growing a site incrementally vs all at once has completely changed the way I approach web design. I feel more confident making something fun or personal and even experimenting with it in the same way I used to rely on photoshop.

- Rupali

Designing without seeing

The biggest mindset shift is releasing control of the pixel in designs. Instead, we think in terms of percentages, relative units, and default design of the browser.

12:30:24 From Katherine Chao (she/her) to Everyone : thinking of accessibility too, not everyone has a computer

12:30:59 From Zach Whitworth to Everyone : Gotta be able to read on a Nokia flip phone!!

12:31:22 From Katherine Chao (she/her) to Everyone : the most important device tbh!

Browser as Design Tool

Using the Web Inspector, students learned how to design websites directly in the browser. By skipping the mockup phase entirely, one can experiment and stumble upon visual effects that are only possible in the browser.

This skillset also allows students to inspect any website and understand how it was designed.

Web as Garden

We compared the commercial web to the small web and handmade web. We also discussed how digital gardening is helping web designers return to the original goals of hypertext, before the rise of social media and the attention economy.

I felt like you touched on a lot of things that were secretly disturbing me that I could never find people to talk about it with. I’m glad that you’re able to bring it up and also find other people that are like YES, this is the type of web I want to create.

- Katherine, Week 4 Discussion

Resource Library

During the course, I created a series of code demos and written tutorials to answer student questions. Materials focus on pure CSS and HTML solutions with semantic web principles from the WHATWG Living Standard.

Here are some of the code demos we discussed:

• Grid Portfolio Layout
• Editorial Layout
• Gradient Type Animation
• Photos Appear On Hover
• Hover Word Change
• Dark Mode Button
• More/Less Button

Demos were created based on discussion and student questions during class and office hours. The Resource Library is available to students after the course ends.

I’ll end this writeup with one of my favorite quotes from the whole workshop:

You gave us the tools to be able to do it, and it’s crazy, it happened so fast… We can never go back. We’re all different now.

- Carma, Week 6 discussion

Thank you for reading!