Coding for Designers: HTML and CSS

In this four-week course you’ll learn HTML and CSS and develop a better understanding of these core web languages. Patrick McNeil created this class specifically for graphic designers, so you can make the print-to-web transition more easily. You’ll study design as it relates to the web, learn some basic combinations of HTML and CSS, and start building common website layout elements. This course is also the next step for students who’ve taken Principles of HTML, CSS and JavaScript.

---

Patrick McNeil, the creator of Design Meltdown, is the content director for HOW Interactive Design and the author of the Web Designer’s Idea Book series. He’s not only an HTML teacher, he can instruct in all the fundamental languages of the web—JavaScript, jQuery, CSS, and more.

What Students Are Saying
“This is the second class that I’ve taken with Patrick. The information is really laid out in a ‘non-confusing’ way. I went to school for design and wanted nothing to do with coding, but with these classes, he has made it much more understandable and almost a little bit fun.” — Briana N.

See what all students are saying about this course…

Workshop Length:

4 weeks

Tuition:

$199 ($179 for VIP)

Recommended Materials:

• The Web Designer’s Idea Book, Volume 1 or Volume 2
• The Getting Started in Web Design Collection

Start Date:

View Workshop Schedule

Objectives:

• Learn about HTML tags, attributes, semantics and page building
• Learn CSS syntax, values, selectors and properties
• Discover how to pull it all together to make something beautiful.

• Experienced print designers making the transition to web and interactive design
• Creative professionals unfamiliar with the language of the web
• Designers just starting to code websites

• Principles of HTML, CSS and JavaScript

Outline:

• Development tools
• File extensions
• What is HTML?
• What is a tag?
• HTML tags
• Tags for tabular data
• Tags to create structure in a layout
• Attributes
• Validating HTML
  • Building a basic HTML page
• Assignment
• Quiz

• Separation of styles and content
• CSS Syntax
• Selector
• Attaching a style sheet to an HTML page
• The Cascade
• Inheritance
• Selectors
• Basic text properties
• Additional key CSS properties
• Working with color
• Some examples of CSS
• Some basic text styles applied to a paragraph
• Assignment
• Quiz

• Debugging code
• Selecting the right browser
• Finding typos
• Block versus inline
• Styling links
• Turning links into menus
• Turning our vertical menu into a horizontal one
• Image replacement
• Building columns
• Assignment
• Quiz

• What is CSS3
• Extending basic web typography
• Styling tables
• Stling forms
• Assignment
• Quiz