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.<\/p>\n\n\n\n
LEARN HOW TO BE A WEB DESIGNER THAT DEVELOPERS LOVE<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
COURSE OUTLINE<\/p>\n\n\n\n
Lesson 1: How Web Design Is Different From Print Design
\nAn introduction to design principles on the web. We\u2019ll explore examples and discuss context, but won\u2019t begin coding yet.<\/p>\n\n\n\n
Lesson 2: \u201cHello World,\u201d Coding Pages, And Fixing Problems
\nAn introduction to coding HTML5 and CSS. We\u2019ll set up our tools and start building pages.<\/p>\n\n\n\n
Lesson 3: Page Layout And Color With CSS
\nA deep-dive into CSS and how to merge visual design with website language. We\u2019ll cover layout boxes, shapes, color, and the basics of page layout.<\/p>\n\n\n\n
Lesson 4: Typography On The Web
\nA focused introduction to what can (and can\u2019t) be done with type on web pages. We\u2019ll cover typefaces and licensing, sizing type, leading and kerning, and drop shadows.<\/p>\n\n\n\n
Lesson 5: Create A Mobile Website
\nThe \u201cmobile first\u201d philosophy and why it\u2019s useful for web designers. We\u2019ll cover buttons, links, and scrolling layouts.<\/p>\n\n\n\n
Lesson 6: Create A Complete Website With Twitter Bootstrap
\nIt\u2019s time to apply for the final project: building a desktop website from a comp with the help of the very popular Twitter Bootstrap framework.<\/p>\n\n\n\n
SOFTWARE REQUIREMENTS<\/p>\n\n\n\n
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\u2019s what you\u2019ll need:<\/p>\n\n\n\n