ProfBurnett.com - Master a Skill / Learn for Life

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

Week Outline:

Session 27 & 29 - Front-End Web Design Labs

Class Exercises

Front-End Web Design Labs

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

Required Items for Students in Capstone ePortfolio Certification Program

  • About Me Page
  • Individual Goals for Front-End Web Development Certification Page
  • Listing of Certification Languages Page
    • Link to Each Technology (HTML5, CSS3, JavaScript, jQuery, XML, JSON, AJAX, Responsive Web Design (RWD), Frameworks & Capstone Project*)
      • Link to Each Technology Exercise
      • Learning Outcomes of Each Technology Exercise
      • * - Link to Capstone Dashboard
  • Prospective Employment Page

Required Deliverables

  • Required Deliverables
  • Non-Certificaiton Students - One Website developed using a RWD Framework
  • Certification Students:
    • One in Bootstrap Capstone Portfolio website
    • One in w3.css Capstone Portfolio website

Session 30 - 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

  1. 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 / 9/5 - 9/12/2023
    • ● CSS3 Website - Session 5 - 8 / Weeks 2 & 3 / 9/13 - 9/20/2023
    • ● JavaScript Skill Exercises- Sessions 9 - 12 / Weeks 3 & 4 / 9/21 - 9/28/2023
    • ● jQuery Skill Exercises - Session 13 - 16 / Weeks 5 & 6 / 10/3 - 10/10/2023
    • ● XML Skill Exercises - Session 17 & 20 / Weeks 6 & 7 / 10/11 - 10/18/2023
    • ● JSON Skill Exercises - Session 21 / Week 7 / 10/19/2023
    • ● AJAX Skill Exercises - Session 22 - 25 / Weeks 7 & 8 / 10/24/2023
    • ● RWD Websites - Sessions 23 - 28 / Weeks 8 - 10 / 10/25 - 11/7/2023
    • ● Capstone Portfolio Project - Sessions 29 - 31 / Weeks 11 - 12 / 11-8 - 11-13/2023 (Virtual) / 11/14/2023 (In Class)
  2. Instructor will identify any skill exercises or project deficiencies.
  3. Student is notified by instructor of skill exercise or project deficiencies.
  4. Student corrects skill exercise or project deficiencies.
  5. Student resubmits to skills exercise or project for certification.
  6. Skill exercise and project proficencies are certified by instructor.
  7. Final Capstone Portfolio website certification is conducted.
  8. Front-End Web Development Certification Granted.

RWD Example Sites

Boostrap Sites

Folio

Folio Boostrap Site

Folio Zip Files
Kelly

Kelly Boostrap Site

Kelly Zip Files
Laura

Laura Boostrap Site

Laura Zip Files
MyResume

MyResume Boostrap Site

MyResume Zip Files
Personal

Personal Boostrap Site

Personal Website Zip Files

w3School Sites

W3.css_CV

W3.css CV Site

W3.css CV Site Zip Files
W3.css_CV

W3.css B & W Site

W3.css B & W Site Zip Files

Class Exercises

  • Front-End Web Design Lab

Additional Support 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