Learn Web Design

Introduction to Web Design

(also known as Web Design for Print Designers)

This class was specifically created to be the friendliest possible introduction to hand-coding for the web (Please note – this is an all coding class). Originally designed to help print designers crossover to implementing web designs on their own without assistance, this class is the perfect introduction for anyone who wants to learn the right way to build search engine friendly, semantically correct, standards-based, efficient web pages in the shortest amount of time possible.

This class assumes no previous experience with either web design or coding. Students will dive deep into HTML to learn how to properly structure a web page and deep into CSS to learn how to implement layouts and design (HTML5 and CSS3 are covered in this class). Javascript is only touched on briefly in this level — students learn how to use industry standard pre-existing javascript plugins to enhance sites without learning how to program javascript (basic javascript programming is introduced in the advanced level of this series).

Who should attend this class?

Anyone with basic computer skills who wants to learn the best practices for building web pages and is not afraid of learning to hand-code.

Basic understanding of your preferred computer operating system (Mac or Windows). The ability to touch-type will probably be helpful, but not required.
  • 18 hours of hands on training – 9am to 4pm on three consecutive days
  • 100% custom training content exclusive to C2
  • USB Flash drive with all class files
  • Learning Web Design provided as reference (we do not use the this book for any class exercises)
  • 1 year of email tech support
  • 1 year free retake policy
  • 100% Satisfaction guarantee
Class Outline by Topic

Design Goals for web design

  • Effective communication
  • Creating pages that work on all kinds of devices
  • Creating pages that work on all size screens
  • Designing to support all browsers
  • Search engine optimized content
  • Accessible content and design
  • Optimize for speed
  • Resizeable text
  • Design trends

Planning and preparing designs

  • Focus on content-first planning and design
  • Hosting and domain process
  • Storyboarding and outlining a site
  • Setting up tracking and analytics
  • What tools we use for developing web sites

Preparing text content

  • Cleaning up text
  • Basic HTML page structure
  • Importance of text for search engines
  • Additional online tools to help with text
  • Grabbing text from existing webpages

Introducing HTML

  • What it means to markup text
  • Proper page titles for users and search engines
  • The paragraph – the basic unit of content
  • Heading tags to introduce content
  • Headings for page structure
  • Block vs inline elements
  • The line break
  • Lists for content and navigation
  • Emphasize text with inline styles
  • Special symbols using character entities
  • Linking with anchors

Introducing CSS

  • Where CSS can go and where it should go
  • CSS resets
  • CSS font and typography control
  • Selecting the right page element with selectors
  • Basic page design with HTML and CSS
  • Classes and ID’s to name elements for CSS
  • The CSS Box Model
  • The CSS 3 Step Design process
  • Rough-in page from Photoshop comp
  • Detailed CSS design one element at a time

HTML – Tables

  • When to use tables on web pages
  • Table use for HTML emails (very brief discussion – HTML emails is a separate class)
  • Basic CSS table styling
  • Accessible tables

HTML – Video and multimedia

  • Preparing video for the web
  • Hosting options
  • Embedding options
  • Flash or HTML5 for video and multimedia
  • Tool options for creating multimedia and video

HTML – forms

  • Form hosting options
  • How forms work
  • Front-end form design
  • Form tags and inputs

Preparing graphics

  • Using Photoshop to prepare graphics for the web
  • Batch converting images for web
  • File formats and types

HTML – Image Tricks

  • How to swap images for text
  • How to swap images for alternate images
  • Adding a slideshow with jQuery plugin

HTML – iframes 

  • Bringing in remote content with iframes
  • Using common iframe-based APIs (Twitter, Facebook)
  • Using Google maps on your site

CSS – Advanced positioning 

  • Multiple ways to create multiple columns
  • Introducing Flexbox
  • Absolute and relative positioning

Advanced CSS3 Features

  • Rounded corners
  • Drop shadows
  • Gradients
  • Advanced colors with transparancy
  • Opacity control
  • Text shadows
  • Transforming
  • Basic transformations
  • Basic CSS animations
  • Downloadable typefaces

HTML5

  • New HTML5 tags
  • New semantic structure tags
  • Deprecated tags
  • HTML5 shim/shiv for IE 6-8
  • Using HTML5 Boilerplate

Advanced CSS tricks

  • CSS rollovers
  • CSS sprites
  • CSS drop down menus
  • Advanced CSS3 selectors
  • Using CSS autoprefixer

Advanced Forms with CSS and javascript

  • Advanced form design with CSS3
  • New HTML5 form tags and attributes
  • Advanced accessibility concerns
  • Advanced mobile considerations
  • Validating forms with jQuery plugin

Javascript interactivity via plugins

  • Adding slideshow
  • Adding tabs and accordians
  • Adding overlays
  • Adding gallery or lightbox

Introduction to Basic Responsive Design

  • What is responsive design?
  • Planning for mobile
  • Mobile detection vs responsive design
  • Converting static design to responsive
  • Percentage-based design
  • Media queries to detect viewport size
  • Appropriate font sizes for mobile
  • Hiding and showing content
  • Testing mobile layouts on desktop browsers
  • Making images auto-scale
  • Meta tags for mobile
  • Managing the menu problem between mobile and desktop
  • Managing concerns about touch devices vs mouse
  • Tablet and phone dimensions
  • Alternate devices (watches, TVs, game consoles)
  • Download speeds on cellular networks
  • Mobile device statisics and analytics
  • Managing client expectations
  • User behaviour changes on mobile
  • Content decisions driven by small screens
  • Hosting content for testing
  • Responsive tools and web support
  • Supporting older versions of Internet Explorer
  • Testing designs using online services

Upcoming Class Dates

Pick your own class dates!

Schedule this class on dates that work for you.

On-Demand Training

I graduated in May and was asked to learn coding! My training is in Graphic Design and Marketing – I had only taken one Dreamweaver course in college. After taking one 6 hour course, I feel like I have learned a semesters-worth of materials!

Katelynne R.

Graphic Designer - Web Specialist

James was a great instructor. I liked that he taught us the best standards to use, and the right way to do things.
Taught me more in 6 hours than some web classes have taught me in 24 hours of class time. Instructor was very personable and helpful.
Adam E.

Content was perfectly suited to my needs as a print designer crossing over to web. It was presented very clearly, while also leaving time to thoroughly answered questions.

Word+Design, LLC