Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
ITI 481 Front-End Web Development Certification Program - Week 9
Week Outline:
Session 25 - 27
- Front-End Web Design Lab
Class Exercises
Front-End Web Design Lab
- 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.
Required Items for Students in Capstone ePortfolio Certification Program
- About Me Page
- Individual Goals for Front-End Web Development Certification Page
- Listing of Certification Languages Page
- Link to Each Technology (HTML5, CSS3, JavaScript, jQuery, XML, JSON, AJAX, Responsive Web Design (RWD), Frameworks & Capstone Project*)
- Link to Each Technology Exercise
- Learning Outcomes of Each Technology Exercise
- * - Link to Capstone Dashboard
- Prospective Employment Page
Required Deliverables
- Required Deliverables
- Non-Certificaiton Students - One Website developed using a RWD Framework
- Certification Students:
- One in Bootstrap Capstone Portfolio website
- One in w3.css Capstone Portfolio website
RWD Example Sites
Boostrap Sites
Additional Support Exercises
w3School Exercises
Session I 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 |
|
|
|