ProfBurnett.com

ITI 256 HTML5 Level III - 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 based on CSS3, JavaScript, or Stylus Frameworks. Frameworks to be covered include: Bootstrap, Cascade Framework, Fluidable. Ink, Responsive Boilerplate, Semantic UI, Foundation, Kickoff, Pure, Jeet, and many more.

Prerequisites:


HTML5 Level II or equivalent experience.

Required Textbook & Materials

None

Recommended Testbook (Not Required)

  • Title:   Implementing Responsive Design
  • Author:   Tim Kadlec
  • ISBN-10:   0321821688
  • ISBN-10:   978-0321821683
  • Edition/Copyright:   1 edition
  • Publisher:   New Riders
  • Published Date:   August 10, 2012
  • Website:   

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:   Tuesday, Thursday, Saturday (07/15/2017 Only)
  • Dates:   07/11/2017 - 07/20/2017
  • Number of Sessions:   5
  • Time:   Tuesday & Thursday - 06:30 PM - 09:30 PM
  • Time:   Saturday - 09:30 AM - 12:30 PM
  • Location:   HU 321

Lesson Plan:

Session I - Tuesday, July 11, 2017

  • Course Overview
  • Web Design Challenge
  • Responsive Web Design (RWD)
  • RWD Frameworks

Session II - Thursday, July 13, 2017

  • Themes & Templates
  • Containers
  • Navigation
  • Tables
  • Lists
  • Images
  • Icons
  • Colors

Session III - Saturday, July 15, 2017

  • Selecting a Framework
  • Setting up a Framework
  • Designing using a Framework

Session IV - Tuesday, July 18, 2017

  • CSS Libraries
  • JavaScript Libraries
  • Other Libraries

Session V - Thursday, July 20, 2017

  • Open Lab
  • Website Presentatons

Web Support:

MC Web for Students Site: ITI 256 Summer 2017-CRN:12747

Frameworks

Front-End 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

Cloud Based

Download Apps

Plugin Apps

Sketch Design Resources

UI8 Design Resources

Websites

Free Web Design IDEs

  1. Sublime Text
  2. Brackets
  3. CoffeeCup Free HTML Editor
  4. Webuilder
  5. ICEcoder
  6. BBEdit
  7. Code Writer
  8. Google Web Designer

Free Web Development IDEs

  1. Visual Studio Code
  2. Atom by Github
  3. Komodo Edit
  4. Netbeans
  5. Light Table
  6. RJ TextEd
  7. Aptana
  8. CodeLobster
  9. Bluefish
  10. Coda

Cloud-Based Web Development Sites

  1. Codepen
  2. Cloud9
  3. Codeanywhere
  4. CodeEnvy
  5. Kodingen

Online Website Builder Sites

  1. WIX
  2. GoDaddy
  3. Weebly
  4. Webs
  5. WebsiteBuilder
  6. IM Creator
  7. SiteBuilder
  8. Jimdo
  9. Ucraft
  10. WebNode

Framework Architectures

Framework Comparisons

Framework Utilities

jQuery Forms

Slideshows, Carousels, Graphic Plugins & Components

RWD Testing Emulators

Minifiers

WSDL, SOAP, REST, & ODATA Introduction and Resources

Browser Rendering Engines