ProfBurnett.com

ITI 392 Responsive Web Design (RWD) - 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. Frameworks to be covered include: Bootstrap and w3.css. The Dreamweaver Integrated Development Environment (IDE) will be used to design and develop RWD compliant websites using the Bootstrap and w3.css frameworks.

Prerequisites:


HTML5 Level II or equivalent experience.

Required Textbook & Materials

  • Title:    MURACH'S HTML5 and CSS3
  • Author:    Zak Ruvalcaba and Anne Boehm
  • ISBN:    978-1-943872-26-8
  • Edition/Copyright:    4th
  • Publisher:    MURACH
  • Published Date:    March 2018
  • Website:    murach.com

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:   Monday & Wednesday
  • Dates:   11/4/2019 - 11/13/2019
  • Number of Sessions:   4
  • Time:   06:30 PM - 09:30 PM
  • Location:   HU 321

Lesson Plan:

Session I

  • Course Overview
  • 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)

Session II

  • Introduction to Responsive Web Design (RWD) Frameworks
  • Bootstrap Framework
  • w3.css Framework

Session III

  • Front-End Web Design Lab

Session IV

  • Front-End Web Design Lab
  • Front-End Web Design Contest Presentations

Web Support:

remote.itiwebcert.com ITI 392 Responsive Web Design (RWD) Fall 2019 - CRN:25058

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

Session, Chapter Presentation, Examples Zip, and Solution Set Zip

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

Colleges and Universities