Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
Responsive Web Design (RWD) - Session II
Session Outline:
- Introduction to Responsive Web Design (RWD) Frameworks
- RWD Website Planning Worksheet
- Bootstrap Framework
- w3.css Framework
Class Presentations
| Session | Chapter | PowerPoint Presentation | Examples Zip File | Solution Set Zip File |
| II | Introduction to Responsive Web Design (RWD) Frameworks Bootstrap Framework w3.css Framework RWD Website Planning Worksheet |
 |
RWD Website Planning Worksheet
|
RWD Website Planning Worksheet
|
| II | Setting Up Development Environment | |
RWD Example Sites
Boostrap Sites
Student Exercises
Student Exercise 1
- Begin Completing RWD Website Planning Worksheet
- RWD Website Planning Worksheet (.doc)
- RWD Website Planning Worksheet (.pdf)
Student Exercise 2
- Begin designing your Bootstrap & w3.css website.
- Develop Site Navigation
- Develop Page Layout
- Create or Find Textual Content for Web Pages
- Create or Find Graphical Content for Web Pages
- Create or Find Other Media Content for Web Pages
- Determine Information to be Collected from Site Users
- Design Form to Collect Information from Site Users
- Review frameworks available that Meet Your Site Requirements.
- Begin narrowing down Framework to be Selected.
Student Exercise 2 - Required Items for Students in Capstone ePortfolio Certification Program
- About Me Page
- Individual Goals for Front-End Web Development Certification Page
- Listing of Certification Courses Page
- Link to Individual Course Pages
- Link to Each Course Exercise
- Learning Outcomes of Each Course Exercise
- Prospective Employment Page
Required Deliverables
- Required Deliverables
- One in w3.css Framework
- For Capstone Certification Students:
- One in Bootstrap ePortfolio Site
- One in w3.css ePortfolio Site
Additional Support Exercises
LinkedIn Exercises
| Session | Chapter | Level | Course |
| II | Beginner | Bootstrap 4 Essential Training | |
| II | Beginner | Bootstrap 4 Layouts: Responsive Single-Page Design | |
| II | Beginner | Dreamweaver CC: Responsive Design with Bootstrap 4 | |
| II | Beginner | Bootstrap 3 Essential Training | |
| II | Beginner | Bootstrap 3 New Features and Migration | |
| II | Beginner | Dreamweaver CC 2015: Responsive Design with Bootstrap | |
| II | Beginner | Responsive Typography Techniques |
w3School 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 |
|
|
|