Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
ITI 481 Front-End Web Development Certification Program - Week 4
Week Outline:
Session 10
- Chapter 4 - JavaScript Events, Objects, & Functions
- Chapter 5 - Testing and Debugging JavaScript
- Chapter 6 - JavaScript and the DOM
Session 11
- Chapter 7 - JavaScript Links, Images, & Timers
- Chapter 13 - How to Work with Number, Strings and Dates
- Chapter 14 - How to Work with Control Structure Exceptions and Regular Expressions
Session 12
- Chapter 15 - How to Work with Browser Objects, Cookies and Web Storage
- Chapter 16 - How to Work with Arrays
Class Presentations, Exercise Files & Solution Sets
| Session | Chapter | PowerPoint Presentation | Exercise Files | Solution Set Files |
| X | Chapter 4 - JavaScript Events, Objects, & Functions Chapter 5 - Testing and Debugging JavaScript Chapter 6 - JavaScript and the DOM |
 |
||
| XI |
Chapter 7 - JavaScript Links, Images, & Timers Chapter 13 - How to Work with Number, Strings and Dates Chapter 14 - How to Work with Control Stucturesm Exceptions and Regular Expressions |
|
||
| XII | Chapter 15 - How to Work with Browser Objects, Cookies and Web Storage Chapter 16 - How to Work with Arrays |
|
Class Exercises
Session 10 - Student Exercise 1
W3School Exercise I - Objects
W3School Exercise II - Functions
Exercise III
- Chapter 4-1 and 4-2
- 1. Link to Chapter 4 - Exercise 4-1 and 4-2 solution files.
- 2. Students will upload test files to development site.
- 3. Students will preview in browser development files.
- 4. Students will upload files to live site.
- 5. Students will preview in browser live files.
Exercise IV
- Chapter 6-1, 6-2 and 6-3
- 1. Link to Chapter 6 - Exercise 6-1, 6-2 and 6-3 solution files.
- 2. Students will upload test files to development site.
- 3. Students will preview in browser development files.
- 4. Students will upload files to live site.
- 5. Students will preview in browser live files.
Session 11 - Student Exercise 1
Student Exercise I
- Chapter 7-1 and 7-2
- 1. Link to Chapter 7 - Exercise 7-1 and 7-2 solutions files.
- 2. Students will upload test files to development site.
- 3. Students will preview in browser development files.
- 4. Students will upload files to live site.
- 5. Students will preview in browser live files.
Student W3School Exercise II - Numbers
Student W3School Exercise III - Math
Student W3School Exercise IV - Dates
Student Exercise V
- Chapter 13-1
- 1. Link to Chapter 13 - Exercise 13-1 solution file.
- 2. Students will upload test files to development site.
- 3. Students will preview in browser development files.
- 4. Students will upload files to live site.
- 5. Students will preview in browser live files.
Student W3School Exercise VI - Switch
Student W3School Exercise VII - Break
Student Exercise VIII
- Chapter 14-2, and 14-3
- 1. Link to Chapter 14 - Exercise 14-2, and 14-3 solutions files.
- 2. Students will upload test files to development site.
- 3. Students will preview in browser development files.
- 4. Students will upload files to live site.
- 5. Students will preview in browser live files.
Session 12 - Student Exercise 1
Student W3School Exercise I _ Arrays
Student W3School Exercise II - Array Methods
Student Exercise III
- Chapter 16-1 and 16-2
- 1. Link to Chapter 16 - Exercise 16-1 and 16-2 solution files.
- 2. Students will upload test files to development site.
- 3. Students will preview in browser development files.
- 4. Students will upload files to live site.
- 5. Students will preview in browser live files.
Additional Support Exercises
LinkedIn Exercises
| Session | Chapter | Level | Course |
| VII | 15 | Beginner | Choosing and Using Web Fonts |
| VII | 16 | Advanced | CSS: Gradients |
| VII | 16 | Advanced | CSS: Transforms and Transitions |
| VII | 16 | Advanced | Design the Web: CSS Animated Rollovers |
| Session | Chapter | Level | Course |
| VIII | 20 | Advanced | Building a Responsive Single-Page Design with Sass |
Additional LinkedIn Beginner Exercises
| Session | Chapter | Level | Course |
| Beginner | Learning Web Semantics | ||
| Beginner | Web Development Foundations: Web Technologies | ||
| Beginner | Coding Faster with Emmet | ||
| Beginner | CSS Layouts: From Float to Flexbox and Grid | ||
| Beginner | CSS: Frameworks & Grids |
w3School Exercises
SoloLearn Exercises
Advanced and Master LinkedIn Exercises
Session I Support Links
General Computer Files & Windows Skills
- CMP 226 - File Management Skills (5 hrs)
- CMP 628 - Introduction to Keyboarding (18 hrs)
- CMP 073 - Working with Windows (8hrs)
- ITI 338 - Networking Basics (6 hrs)
Keyboard Shorcuts
- Windows Keyboard Shortcut Keys
- MAC Keyboard Shortcut Keys
- Adobe Dreamweaver Windows Shortcut Keys
- Adobe Dreamweaver MAC Shortcut Keys
General Web Development Links
- Caniuse
- Normalizer
- modernizr
- w3schools
- Google HTML5 Code
- HTML5 Array
- Webkit
- CSSTableGenerator
- CSS Layout Generator
- How Browsers Work
Wireframe Design Apps
Free Cloud Based
- frame box
- Gliffy
- Mockflow
- Mockingbird
- Proto
- Wireframe
- iPhone Mockup (iPhone)
- Mokk.me (iPhone)
- Sketch Design Resources
- UI8 Design Resources
IDE's
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
- CodeLobster
- Bluefish
- Coda
- Aptana (JAVA Required)
- Eclipse (JAVA Required)
Downloadable DesktopWeb Development 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)
Cloud Based Web Development
Cloud-Based Web Development Sites
- Axure ($)
- Fluid ($)
- HotGloo ($)
- Moqups ($)
- Invision ($$$)
- Pidoco ($)
- Protoshare ($)
- Solidify ($)
- UXPin ($)
- Codepen
- Cloud9
- Codeanywhere
- CodeEnvy
- Kodingen
Online Website Builder Sites
Learning Management Systems (LMS)
- PC Magazine - The Best (LMS) Learning Management Systems for 2018
- Absorb LMS
- Schoology LMS
- Instructure Canvas LMS
- Moodle LMS
- Blackboard Learn LMS
- Google Classroom
- Office 365 Education
CSS Links
CSS Minifiers
- HTML Minifier
- CSSTidy
- Minify
- YUICompressor (also does JS)
- AjaxMin (also does JS)
- CSSCompressor
CSS Precompilers
CSS Postprocessors
CSS Tools
- CodeKit (Paid)
- Compass.app (Paid, Open Source)
- Ghostlab (Paid)
- Hammer (Paid)(Mac)
- Koala (Open Source)
- LiveReload (Paid, Open Source)
- Prepros (Paid)
- Scout-App (Free, Open Source)
jQuery Links
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
Calendar & Datepicker jQuery Plugins
JavaScript Minifiers
- HTML Minifier
- JSCompress
- Packer
- JSMin
- Closure compiler
- YUICompressor (also does CSS)
- AjaxMin (also does CSS)
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
Browser Plugin Apps
- Wireframe Sketcher (Plugin for Eclipse IDE)
- Pencil Project (Firefox Extension)