Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
ITI 481 Front-End Web Development Certification Program - Week 11
Week Outline:
Session 31, & 32 - Capstone Portfolio Certification (Virtual)
The certifying event sequence listed below will be used to conduct the evaluation of web development skills and projects submitted by students for Front-End Web Development Certification. Some certification events may happen immediately or may be delayed until skill exercises or projects in the course are completed. Once the final portfolio evaluation process is completed, certification will be granted based on successful completion and certification of all web development skills exercises and projects.
Certification Steps
- Instructor completes evaluation based on web development skills exercises and projects completed during the course. The following skill exercises and project will be evaluated:
- ● HTML5 Website - Session 1 - 4 / Weeks 1 & 2
- ● CSS3 Website - Session 5 - 8 / Weeks 2 & 3
- ● JavaScript Skill Exercises- Sessions 9 - 12 / Weeks 3 & 4
- ● jQuery Skill Exercises - Session 13 - 16 / Weeks 5 & 6
- ● XML Skill Exercises - Session 17 & 20 / Weeks 6 & 7
- ● JSON Skill Exercises - Session 21 / Week 7
- ● AJAX Skill Exercises - Session 22 - 25 / Weeks 7 & 8
- ● RWD Websites - Sessions 23 - 27 / Weeks 8 - 10
- ● Capstone Portfolio Project - Sessions 28 - 31 / Weeks 10 - 11
- Instructor will identify any skill exercises or project deficiencies.
- Student is notified by instructor of skill exercise or project deficiencies.
- Student corrects skill exercise or project deficiencies.
- Student resubmits to skills exercise or project for certification.
- Skill exercise and project proficencies are certified by instructor.
- Final Capstone Portfolio website certification is conducted.
- Front-End Web Development Certification Granted.
Week 11: MC Front End Web Certification Graduation
Date: 2/23/2022 (In-Person)
RWD Example Sites
Boostrap Sites
Class Exercises
- Front-End Web Design Lab
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 |
|
|
|