ProfBurnett.com - Master a Skill / Learn for Life

ITI 481 Front-End Web Development Certification Program - Week 11

Week Outline:

Session 21

  • 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 22

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

Class Presentations, Exercise Files & Solution Sets

Session, Chapter Presentation, Examples Zip, and Solution Set Zip
Session Chapter PowerPoint Presentation Exercise Files Solution Set Files
XXI Course Overview
Setting Up Development Environment
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)
Chapter 8

Chapter 9

Chapter 10
Chapter 8

Chapter 9

Chapter 10
XXII Introduction to Responsive Web Design (RWD) Frameworks
Bootstrap Framework
w3.css Framework
RWD Website Planning Worksheet
RWD Website Planning Worksheet
RWD Website Planning Worksheet
Setting Up Development Environment

RWD Example Sites

Class Exercises

Session 21

Student Exercise 1

  • 1. Complete Chapter 8 - Exercise 8-1, Page 317 using Dreamweaver.
  • 2. Download Chapter 8 exercise zip file to your desktop.
  • 3. Unzip Chapter 8 exercise zip files and folders into your local development Chapter 8 folder.
  • 4. Students will upload test files to development site.
  • 5. Students will preview in browser development files.
  • 6. Students will upload files to live site.
  • 7. Students will preview in browser live files.

Student Exercise 2

  • Chapter 9 - Exercise 9-1
  • 1. Complete Chapter 9 - Exercise 9-1, Page 349 using Dreamweaver.
  • 2. Download Chapter 9 exercise zip file to your desktop.
  • 3. Unzip Chapter 9 exercise zip files and folders into your local development Chapter 9 folder.
  • 4. Students will upload test files to development site.
  • 5. Students will preview in browser development files.
  • 6. Students will upload files to live site.
  • 7. Students will preview in browser live files.

Exercise 3

  • Chapter 9 - Exercise 10-1
  • 1. Complete Chapter 10 - Exercise 10-1, Page 387 using Dreamweaver.
  • 2. Download Chapter 10 exercise zip file to your desktop.
  • 3. Unzip Chapter 10 exercise zip files and folders into your local development Chapter 10 folder.
  • 4. Students will upload test files to development site.
  • 5. Students will preview in browser development files.
  • 6. Students will upload files to live site.
  • 7. Students will preview in browser live files.

Session 22

Student Exercise 1

Student Exercise 2

  • 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.

Student Exercise 2 - Required Items for Students in Capstone ePortfolio Certification Program

  • About Me Page
  • Individual Goals for Front-End Web Development Certification Page
  • Listing of Certification Courses Page
    • Link to Individual Course Pages
      • Link to Each Course Exercise
      • Learning Outcomes of Each Course Exercise
  • Prospective Employment Page

Required Deliverables

  • Required Deliverables
  • One in w3.css Framework
  • For Capstone Certification Students:
    • One in Bootstrap ePortfolio Site
    • One in w3.css ePortfolio Site

Additional Support Exercises

LinkedIn Exercises

w3School Exercises

Session I Support Links

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