Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
Responsive Web Design (RWD) - Session I
Session Outline:
- Course Overview
- Web Design Challenge
- Front-End Web Design Contest
- Chapter 8 - How to Use Responsive Web Design (RWD)
- Chapter 9 - How to Use Flex Box for Page Layout in Responsive Web Design (RWD)
- Chapter 10 - How to Use Grid Layout for Page Layout in Responsive Web Design (RWD)
Class Presentations
| Session | Chapter | PowerPoint Presentation | Examples Zip File | Solution Set Zip File |
| I | Course Overview |  |
 |
|
| Setting Up Development Environment | |
|||
| Chapter 8 - How to Use Responsive Web Design (RWD) Chapter 9 - How to Use Flex Box for Page Layout in Responsive Web Design (RWD) Chapter 10 - How to Use Grid Layout for Page Layout in Responsive Web Design (RWD) |
|
Chapter 8 Chapter 9 Chapter 10
|
Chapter 8 Chapter 9 Chapter 10
|
Student Exercises
Exercise 1
- 1. Complete Dreamweaver Development Environment
- 2. Download Testing Server files and folders to your local development folder.
- 3. Students will upload development site to development site.
- 4. Students will preview in browser development files.
- 5. Students will upload development site to live site.
- 6. Students will preview in browser live files.
Exercise 2
- Chapter 8 - Exercise 8-1
- 1. Complete Chapter 8 - Exercise 8-1, Page 317 using Dreamweaver.
- 2. Download Chapter 8 exercise zip file to your desktop.
- 3. Unzip Chapter 8 exercise zip files and folders into your local development Chapter 8 folder.
- 4. Students will upload test files to development site.
- 5. Students will preview in browser development files.
- 6. Students will upload files to live site.
- 7. Students will preview in browser live files.
Exercise 3
- Chapter 9 - Exercise 9-1
- 1. Complete Chapter 9 - Exercise 9-1, Page 349 using Dreamweaver.
- 2. Download Chapter 9 exercise zip file to your desktop.
- 3. Unzip Chapter 9 exercise zip files and folders into your local development Chapter 9 folder.
- 4. Students will upload test files to development site.
- 5. Students will preview in browser development files.
- 6. Students will upload files to live site.
- 7. Students will preview in browser live files.
Exercise 4
- Chapter 9 - Exercise 10-1
- 1. Complete Chapter 10 - Exercise 10-1, Page 387 using Dreamweaver.
- 2. Download Chapter 10 exercise zip file to your desktop.
- 3. Unzip Chapter 10 exercise zip files and folders into your local development Chapter 10 folder.
- 4. Students will upload test files to development site.
- 5. Students will preview in browser development files.
- 6. Students will upload files to live site.
- 7. Students will preview in browser live files.
Additional Support Exercises
Session 1 Support Links
Frameworks
| Framework | Website | Example Site | Github | Site Zip File |
Foundation |
 |
 |
 |
 |
Bootstrap |
 |
 |
|
|
Semantic UI |
 |
 |
|
|
Pure |
 |
 |
|
|
UIkit |
 |
 |
|
|
W3C.CSS |
 |
 |
|
|
HTML KickStart |
 |
 |
|
|
YAML |
 |
 |
|
|
Ink |
 |
 |
|
|
GroundworkCSS 2 |
 |
 |
|
|
Kickoff |
 |
 |
|
|
960 Grid |
 |
 |
|
|
Metro UI CSS 3.0 |
 |
 |
|
|
Wireframe Design Apps
Free Cloud Based
- frame box
- Gliffy
- Mockflow
- Mockingbird
- Proto
- Wireframe
- iPhone Mockup (iPhone)
- Mokk.me (iPhone)
Cloud Based
- Axure ($)
- Fluid ($)
- HotGloo ($)
- Moqups ($)
- Invision ($$$)
- Pidoco ($)
- Protoshare ($)
- Solidify ($)
- UXPin ($)
Download Apps
- Justinmind
- Craft by InVision LABS
- Bolt 2.0 ($)
- Flair Builder ($)
- Indigo Studio ($$$)
- Omnigraffle (iOS)($)
- TETHR (iOS)
- iPlotz (iPhone & Android)
- Mockups.me - (Web & Desktop)
- Balsamiq ($ - Web & Desktop)
Plugin Apps
- Wireframe Sketcher (Plugin for Eclipse IDE)
- Pencil Project (Firefox Extension)
Sketch Design Resources
UI8 Design Resources
Websites
Free Web Design IDEs
- Sublime Text
- Brackets
- CoffeeCup Free HTML Editor
- Webuilder
- ICEcoder
- BBEdit
- Code Writer
- Google Web Designer
Free Web Development IDEs
- Visual Studio Code
- Atom by Github
- Komodo Edit
- Netbeans
- Light Table
- RJ TextEd
- Aptana
- CodeLobster
- Bluefish
- Coda
Cloud-Based Web Development Sites
Online Website Builder Sites
Framework Architectures
- Shayhowe.com
- Responsive Web Design (RWD)
- Object Oriented CSS (OOCSS)
- Scalable & Modular Architecture for CSS (SMACSS)
- Adaptive Web Design (AWD)
- Responsive Server Side Components (RESS)
Framework Comparisons
- HTML5 CSS Framework Comparison
- HTML5 JavaScript Framework Comparison
- HTML5 Mobile Framework Comparison
Framework Utilities
jQuery Forms
Slideshows, Carousels, Graphic Plugins & Components
- Malsup jQuery Plugins
- Web Designer Depot
- JSSOR
- Wow Slider
- Smashing Apps
- PixelzDesign
- Tiny Carousel
- FlowType
- Adaptive Images
- FitVids.js
RWD Testing Emulators
- Google Chrome Dev Tools
- Firefox Firebug
- The Responsinator
- StudioPress Responsive Emulator
- ProtoFluid
- ResponsivePx
- Responsive Web Design Testing Tool
- ReView
- Screenfly
- Screenqueri.es
Minifiers
WSDL, SOAP, REST, & ODATA Introduction and Resources
- w3schools - XML WSDL
- SOAP Introduction and Resources
- w3schools - XML Soap
- REpresentational State Transfer (REST)
- OASIS Open Data Protocol (OData) TC
- OData
Browser Rendering Engines
Session, Chapter Presentation, Examples Zip, and Solution Set Zip
| Session | Chapter | PowerPoint Presentation | Examples Zip File | Solution Set Zip File |
| I | Course Overview | |
|
|
| Setting Up Development Environment | |
|||
| Web Design Challenge Front-End Web Design Contest Chapter 8 - How to Use Responsive Web Design (RWD) Chapter 9 - How to Use Flex Box for Page Layout in Responsive Web Design (RWD) Chapter 10 - How to Use Grid Layout for Page Layout in Responsive Web Design (RWD) |
|
|
|
|
| II | Introduction to Responsive Web Design (RWD) Frameworks Bootstrap Framework w3.css Framework RWD Website Planning Worksheet |
|
|
|