Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
Responsive Web Design (RWD) - Overview
Course Outline:
Learn the foundational building blocks for designing and creating HTML5, mobile-first web sites optimized for modern computers, tablets, and mobile devices using Responsive Web Design (RWD) principles. Topics include: layout using fluid, proportion-based grids, and flexible images. You will also develop a RWD compliant website. Frameworks to be covered include: Bootstrap and w3.css. The Dreamweaver Integrated Development Environment (IDE) will be used to design and develop RWD compliant websites using the Bootstrap and w3.css frameworks.
Prerequisites:
HTML5 Level II or equivalent experience.
Required Textbook & Materials
- Title: MURACH'S HTML5 and CSS3
- Author: Zak Ruvalcaba and Anne Boehm
- ISBN: 978-1-943872-26-8
- Edition/Copyright: 4th
- Publisher: MURACH
- Published Date: March 2018
- Website: murach.com
Materials:
Please bring a Flash Drive/Memory Stick 512MB or larger to class which will enable you to save your class work.
Meeting Information:
- Days: Monday & Wednesday
- Dates: 8/10/2020 - 8/26/2020
- Number of Sessions: 6
- Time: 06:30 PM - 09:30 PM
- Location: Online
Lesson Plan:
- 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)
- Introduction to Responsive Web Design (RWD) Frameworks
- Bootstrap Framework
- w3.css Framework
- Front-End Web Design Lab
- Front-End Web Design Lab
- Front-End Web Design Lab
- Front-End Web Design Lab
- Front-End Web Design Contest Presentations
Web Support:
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 |
|
|
|