Kevin W. Tharp
Doc Tharp

Butterfly Drinking Nector

Dynamic Web Technologies ICT 475-675

This is a resource site for the class in Dynamic Web Technologies offered by Kevin W. Tharp at UW-Stout.

Module 1 - Responsive Web Design.

The book we use for the responsive web design is "Responsive Web Design with HTML5 and CSS3" by Ben Frain.

Information Architecture

    • At this point, the materials for this section are only available in the Course Management System
    • Lab: Visio Information Architecture Lab

Introduction to Responsive Design

    • Begin the process of understanding how to design for multiple screen sizes using media queries and fluid grids.
    • Lab 2: Setting up the Server and the Cascade

Three Screen Design Using HTML5 and CSS3

  • Learn about the 960 fluid grid, and understand why it is necessary to use fluid grids when doing responsive design. Look at new features of HTML5 and CSS3 such as media queries, the CSS cascade and the 12 column approach that allow us to do responsive design.
  • Lab: Fluid Grid Lab

Media Queries in Responsive Design

  • Create the HTML structure for a responsive fluid grid design, establish the css base, and understand hot the cascade within a single stylesheet applies to mobile first responsive design
  • Exercise and Lab: Using the 12-8-4 column mockup from the previous lesson, create a responsive design.

Implementing a Responsive Design using Media Queries

  • Set up the 960 px fixed width grid, change it from fixed to fluid, understand min-width vs max-width, and walk through going from Fluid to Responsive.
  • Lab: Turn your mockup into a Fluid responsive grid using media queries to adujust the layout at the appropriate viewport sizes.