Skip to main content

This course has been retired. We recommend taking the course Modern Web Design instead. It’s a bit more advanced, but we think you’d get a lot out of it.

Course image for Coding for Designers

Coding for Designers

Full Course
Enrollment is Closed

Coding for Designers is a free, self-paced introductory course to HTML and CSS for designers with graphic design experience. No prior web or coding experience is necessary.

Learn How to Be a Web Designer that Developers Love

Students will learn how to translate graphic design to the web; about common pitfalls many print designers face when moving to the web; the basics of how HTML, CSS, and JavaScript work together; how to prototype designs into working web pages; and how to troubleshoot layout and code problems when they come up.

Course Outline

  • Lesson 1: How Web Design Is Different From Print Design

    An introduction to design principles on the web. We’ll explore examples and discuss context, but won’t begin coding yet.

  • Lesson 2: “Hello World,” Coding Pages, and Fixing Problems

    An introduction to coding HTML5 and CSS. We’ll set up our tools and start building pages.

  • Lesson 3: Page Layout and Color with CSS

    A deep-dive into CSS and how to merge visual design with website language. We’ll cover layout boxes, shapes, color, and the basics of page layout.

  • Lesson 4: Typography on the Web

    A focused introduction to what can (and can’t) be done with type on web pages. We’ll cover typefaces and licensing, sizing type, leading and kerning, and drop shadows.

  • Lesson 5: Create A Mobile Website

    The “mobile first” philosophy and why it’s useful for web designers. We’ll cover buttons, links, and scrolling layouts.

  • Lesson 6: Create A Complete Website with Twitter Bootstrap

    It’s time to apply for the final project: building a desktop website from a comp with the help of the very popular Twitter Bootstrap framework.

Prerequisites

  • 5+ Years professional graphic/web design experience (page layout, color, typography, visual communication).
  • Expertise with Adobe Photoshop, Illustrator, or InDesign, or equivalent graphic design software.
  • No coding experience required (in fact, if you know how to code, you might be bored).

Software Requirements

The software requirements for this class are somewhat flexible. It makes no difference whether your computer setup is old or more modern, or whether you have the Adobe suite of design software or not. Many of the assignments can use whatever design software you are most familiar with. That being said, here's what you'll need:

  • Mac or Windows desktop or laptop
  • A text editor (We suggest Visual Code Studio, it’s free, and available for Mac, Windows, and Linux)
  • Google Chrome web browser

This Course is For

  • Seasoned Graphic Designers
  • Web Designers Looking for a Coding Refresher
  • Bloggers Who Want to Learn to Code

Meet the Instructor

Jim Webb

Jim Webb

Jim Webb is a web developer and teacher in Washington, D.C., with more than 1,800 hours of classroom experience teaching HTML, CSS, JavaScript, jQuery, PHP/MySQL, and WordPress.

He’s taught web workshops for nonprofits, design firms, and media companies like HP, The Washington Post, The Newseum, and National Public Radio.

🛠 We’re planning some website maintenance on . We’ll be down temporarily — we apologize for any inconvenience.