Creating a Responsive Web Design

The Missing Link of Web Design

Have you put off learning HTML and CSS? Did you look up HTML and CSS references online and think, “I can’t learn all that code” If so, then this course is for you!

In order to create a web layout based on your design comp, you really need to know only a handful of HTML tags and CSS properties. The real challenge comes in understanding the principles of how HTML and CSS work together, and how to incorporate graphics, text, and color using these technologies. This course will teach you a step-by-step approach to taking a Photoshop design comp into a finished, responsive web page that will render correctly in a wide range of web browsers and mobile devices. Plus, you’ll be learn from a fellow graphic designer who has over 20 years experience in print, web, and interactive design!


Chris ConverseChris Converse is a versatile, award-winning designer who integrates creative strategy with sophisticated design. His expertise is a perfect balance between traditional and interactive mediums, including print, interactive, DVD and CD-ROM production, animation, corporate identity, branding and photography. He has worked with a long list of reputable clients, including: Adobe Systems, AOL, Comcast, Pepperidge Farm, Pfizer, Accuvue, and many more.

What Students Are Saying
“This is a great class that has significantly helped me move along on my web design learning curve. Thanks so much!” — Jeanne S.

PSD to HTML: Creating a Responsive Web Design

Workshop Length:

4 weeks

Tuition:

$199 ($179 for VIP)

Recommended Materials:

Start Date:

View Workshop Schedule

Register Now!


Objectives:

  • Learn about the relationship between Photoshop files and HTML and CSS
  • Learn how to create an HTML structure to match your Photoshop design
  • Learn how to better work with web developers
  • Master the basics of building a responsive website
Who Should Take This Course:
  • Designers with some coding experience who need help building a live site
  • Designers working with a development team
Prerequisites (or comparable experience):


Register Now!

Outline:

LESSON 1: Exporting graphics from Photoshop
  • Video lectures
    • Course introduction
    • Tools you need for this course
    • Introduction to HTML and CSS
    • Creating your root project
    • Examining the design composition
    • Slicing and optimizing the banner graphics
    • Optimizing the template and content graphics
  • Assignment
  • Quiz
LESSON 2: Understanding HTML and CSS
  • Video lectures
    • Adding the starter files to your project
    • Linking CSS files to an HTML file
    • Adding tags to the head area of the HTML file
    • Creating the main content containers
    • Adding promo containers and adding navigation links
    • Adding content to the containers
    • Style the background and page container
    • Adding the typographic styles
    • Creating compound CSS rules
    • Creating CSS rules for layout
    • Setting CSS rules to floating promo containers
  • Assignment
  • Quiz
LESSON 3: Responsive web design
  • Video lectures
    • Adding a CSS rule with an inline CSS3 media query
    • Adding CSS rules for medium screen sizes
  • Quiz
LESSON 4: Critique and online resources
  • Video lectures
    • Styling the navigation for small screens
    • Get ideas on what to learn next
  • Assignment