Websites for Creatives

🌱 Course Goals

This course aims to give creatives/artists the tools and understanding to design and code their own site, centered around some creative endeavor.

Some site possibilities might include:

• 🖼 portfolio site
• 🗯 web comic
• 📃 poetry project
• 📖 promo site for a new book
• 🧩 something weird and experimental

Web design is not all that different from art making (storyboarding, cartooning, writing, illustrating, painting, game making, etc.). We’ll draw on creative metaphors and comparative processes to better understand how you can not only utilize web design as a component of your creative process, but also view it as a creative space in its own right.

Throughout the curriculum we’ll reframe how websites are approached, seen, and built; handling website craft as an art, and a form of gardening. We’ll seek to disarm fears and concerns; and provide a map which you can use to:

• 🌿 build your own sites
• 🧭 navigate continued learning
• 🛠 know just enough to tinker

• 💻 communicate more effectively with a freelanceer you hope to hire to build a site

  🗓 Structure

We’ll meet once a week for 9 weeks, 2 hours each Thursday night 7PM CST for 8 weeks, our final class will be on Sunday at 2pm CST, and last ~3 hours.

I’ll hold informal office hours most Sunday afternoons as necessary.

Classes will mostly be a combination of:

• Review project progress
• Short lectures mixed with exercises
• Time to focus on building elements of your projects
• Questions

Because I believe the best a teacher can be is a guide and a co-conspirator, I won’t just be teaching the class, I’m going to be participating as well :)

🗺 Syllabus / Schedule

Week 1: Hello!

• About the course, each other (goals, fears, ideas, background)
• Your idea, generating scope, getting our tools ready.

🌸 We’ll leave this week with:

• An understanding of each other
• How to define a scope for our web projects

✨ In-between work to finish/refine:

• Summary of site project

Week 2: Intro to Web Design

• Review
• Web Design, a new kind of philosophy
• Building websites is building stories

🌸 We’ll leave this week with:

• An understanding of web design as art
• A story for our websites

✨ In-between Work to finish and/or refine:

• Your site’s story overall
• Inventory of things present within, and function of site
• Encounter order (by page)
• A site outline

Week 3: Journey Through HTML

• Review
• HTML as an Outline

• Meaning, markup, and semantics

  🌸 We’ll leave this week with:

• An understanding of basic HTML elements and the DOM outline

• The beginnings of our sites’ outlines transformed into basic HTML
• An understanding of the importance of accessibility in design and meaning

✨ In-between Work to finish and/or refine:

• Your site’s basic HTML and page setup as meaningful markup

Week 4: The Value of CSS

• Review
• Why CSS?
• The Cascade

• Common CSS Properties

  🌸 We’ll leave this week with:

• Understanding CSS’s place in a website

• An understanding of CSS rules making
• An understanding of specificity in the cascade
• The ability to add some basic styling to an HTML project

✨ In-between Work to finish and/or refine:

• Adding some basic styling to your site (colors, typography, borders, backgrounds)

Week 5: Layouts with HTML & CSS

• Review
• Common layout patterns
• The document flow

• Grid & flex

  🌸 We’ll leave this week with:

• An understanding about how to do basic layout patterns on our pages

• An understanding of the Document Flow behavior
• A basic understanding of CSS Grid, and CSS Flex layouts

✨ In-between Work to finish and/or refine:

• Adding basic layout patterns to your site’s pages

Week 6: At the Edges of CSS — Javascript:

• Review
• The Limits of CSS
• Basic Javascript Abstractions
• The querySelector and CSS Rules

• CSS Animations, an alternative

  🌸 We’ll leave this week with:

• An understanding of the relationship between CSS and Javascript

• A basic understanding of using the querySelector
• A basic understanding of CSS Animations

✨ In-between Work to finish and/or refine:

• Adding any little touches of subtle animation to your site
• If you feel bold, add some accessibility friendly motion or interactivity
• Finish your sites’s “first draft”

Week 7: A Cohesive Design

• Review
• Pulling it all together
• Refactor strategies, making things better

• Assets, misc., how we bring it all together

  🌸 We’ll leave this week with:

• A chance to refresh our sites with all that we’ve learned in our first draft

• Strategies to refine and improve a site’s design

✨ In-between Work to finish and/or refine:

• Work through your site’s final draft and get it closer to a completed state

Week 8: The Long Haul

• Review
• FWs, CMSs, and their place
• Hosting and maintenance considerations

• Getting to a stable release with our project

  🌸 We’ll leave this week with:

• An understanding of the role of larger abstractions and complex tools in web projects

• A chance to push the project closer to completion

✨ In-between Work to finish and/or refine:

• Get your site to a stable v1.0.0 (because websites are never finished)

Week 9: end;

• Final Presentations
• Continued learning and exploration resources
• Goodbyes

⚡️ Artifacts

A deeper understanding and literacy around how and why websites are made, which can be helpful in making sites, maintaining sites, or just communicating needs to a professional web designer/developer.

Additionally, each Learner will leave with some version of their project to continue using or building upon thereafter

A (hopefully) renewed perspective on website making that’s not centered around a toxic ideology.

🖍 Who Should Sign Up

This class is for artist/creatives already skilled in their chosen area, who want to know more about making websites.

If you’ve had a bad experience in the past trying to learn about coding or web design, someone was rude or condescending to you, you felt overwhelmed or even afraid—then this course was made with you in mind.

If you think that coding is something to feel smug about, and that being mean to people trying to learn it is just how you “weed out those that don’t have it”, don’t take this course, you’re not welcome.

💚 Anything Else…

This class is an experiment, and making websites can be a lot, so we’ll do our best to get through everything in the course as helpfully as possible. However, this course and its schedule are subject to change once things get in motion, particularly to accommodate each cohort and everyone’s own project journey as best as possible. That might mean condensing some lessons, or expanding others. The overall aim is to give everyone a map that will help them grow well beyond, and outside this course :)