ProfBurnett.com - Master a Skill / Learn for Life

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

Week Outline:

Session 7

  • Chapter 15 - How to work with Fonts and Printing
  • Chapter 16 - How to Use CSS3 Transitions, Transforms, Animation and Filters

Session 8

  • Chapter 20 - How to use SASS and Less

Session 9

  • Chapter 2 - Getting Started with JavaScript
  • Chapter 3 - Essential JavaScript

Class Presentations, Exercise Files & Solution Sets

Session, Chapter Presentation, Examples Zip, and Solution Set Zip
Session Chapter PowerPoint Presentation Exercise Files Solution Set Files
VII Setting Up Development Environment
VII Chapter 15 & 16 Chapter 15

Chapter 16
VIII Chapter 20
IX Chapter 2 - Getting Started with JavaScript
Chapter 3 - Essential JavaScript

Class Exercises

Session 7 - Student Exercise 1

  • 1. Complete Exercise 15-1 and 15-2 on page 547 and 548 using Dreamweaver.
  • 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 7 - Student Exercise 2

  • 1. Complete Exercise 16-1 on page 567 using Dreamweaver.
  • 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 8 - Student Exercise 1

(See Finished Site for completed exercise.)

  1. Add "Return to Homepage" link on Scott Sampson speaker page.
  2. Make Main navigation bar dropdowns for Jefffer Toobin, Andrew Ross Sorkin, Amy Chua, Scott Sampson, and Scott Sampson Video pages.
  3. Link "Speaker" dropdown on Main navigation bar to "#".
  4. Make speakers pages for Jefffer Toobin, Andrew Ross Sorkin, and Amy Chua using Scott Sampson speaker page as template.
  5. Link speakers pages to each speaker page and the Scott Sampson Video page.
  6. Link the Sampson Video page to the "or play video."
  7. Make all the page footers a JavaScript year update.
  8. Link "About Us" Main navigation bar link to actual San Joaquin Valley Town Hall - About Us page.
  9. Link "Our History" Main navigation bar link to actual San Joaquin Valley Town Hall - Our History page.
  10. Link "Board of Directors" Main navigation bar link to actual San Joaquin Valley Town Hall - Board of Directors page.
  11. Link "Past Speakers" Main navigation bar link to actual San Joaquin Valley Town Hall - Past Speakers page.
  12. Link "Contact Us" Main navigation bar link to actual San Joaquin Valley Town Hall - Contact Us page.
  13. Fix relative links on Luncheons and Tickets Ordering pages.
  14. Students will upload test files to live site.
  15. Students will preview in browser test files.

Session 9 - Student Exercise 1

W3school JavaScript Exercise I - Variables

  • Variable Exercises 2, 3, 4, 5

W3school JavaScript Exercise II - Assignment Operators

  • Assignment Operator Exercises 4
  • Operator Exercises 5

W3school JavaScript Exercise III - Data Types

W3school JavaScript Exercise IV - Arithmetic

  • Arithmetic Operator Exercises 1, 2, 3

W3school JavaScript Exercise V - Strings

  • String Exercises 2 , 3 , 4

W3school JavaScript Exercise VI - String Methods

  • String Methods Exercises 2, 3, 4, 5

JavaScript Exercise VII

  • Chapter 2 - Exercise 2-1, 2-2, and 2-3
  • 1. Link to Chapter 2 - Exercise 2-1, 2-2, and 2-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.

W3School Exercise VIII - Comparison

  • Comparison Exercises 1,2,3,4

W3School Exercise IX - Conditional

  • Conditional Exercises 1,2

W3School Exercise X - Loops

  • Loops Exercises 1,2

W3School Exercise XI - Loop While

  • Loop While Exercises 1,2

W3School Exercise XII - Break While

  • Break While Exercises 1,2

Exercise XIII

  • Chapter 3 - Exercise 3-1 and 3-2
  • 1. Link to Chapter 3 - Exercise 3-1 and 3-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

LinkedIn HTML5 & CSS3 Session V Exercises
Session Chapter Level Course
V 11 Beginner HTML: Images and Figures
V 12 Beginner HTML: Building Tables
LinkedIn HTML5 & CSS3 Aession VI Exercises
Session Chapter Level Course
VI 13 Beginner HTML & CSS: Creating Forms
VI 13 Beginner HTML5: Web Forms
VI 13 Beginner HTML & CSS: Creating Forms
VI 14 Beginner Design the Web: HTML Background Video</td>
VI 14 Beginner Learning Web Audio and Video

Additional LinkedIn Beginner Exercises

LinkedIn HTML5 & CSS3 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

LinkedIn HTML5 & CSS3 Advanced and Master Exercises
Session Chapter Level Course
II 3 Advanced HTML: Structured Data
Advanced Learning Web Components
Advanced Advanced HTML5 Game Development
Advanced Creating an Advanced Responsive Presentation in HTML5
Advanced Creating an HTML Email Newsletter
Advanced Creating an HTML5 Banner Ad with GreenSock (GSAP)
Advanced Creating HTML Layouts with InDesign
Advanced Creating Interactive Charts with HTML5
Advanced Creating Photo Card Titles with HTML5
Advanced Creating Surveys with HTML5
Advanced HTML for Educators
Advanced Building a Responsive Single-Page Design with PostCSS
Advanced CSS: Visual Optimization
Advanced CSS Shorts
Advanced CSS: Advanced Layouts with Grid
Advanced CSS: Advanced Typographic Techniques
Advanced CSS: Refactoring Style Sheets
Advanced CSS: Selectors
Advanced CSS: Styling Navigation
Advanced Design the Web: CSS-Controlled SVG with PHP
Advanced Design the Web: Getting CSS from Photoshop
Advanced Design the Web: Graphics and CSS Pseudo-Elements
Advanced Design the Web: Pie Charts with CSS
Advanced Design the Web: Responsive SVG Images
Advanced EPUB: CSS
Advanced React: Building Styles with CSS Modules
Master Delivering Video in Web Experiences
Master HTML5 Game Development with Phaser
Master HTML5: Geolocation
Master Learning HTML Canvas
Master Practical HTML for Marketing Projects
Master CSS to Sass: Converting an Existing Site
Master CSS: Animation
Master CSS: Design Systems and Architectures
Master CSS: Enhancing Website Graphics
Master CSS: Formatting Visual Data
Master Design the Web: Using Counters and Resets in CSS
Master Interactive Animations with CSS and JavaScript
Master Next Generation CSS Design with PostCSS and CSSNext

Session I Support Links

General Computer Files & Windows Skills

Keyboard Shorcuts

General Web Development Links

Wireframe Design Apps

Free Cloud Based

IDE's

Free Web Design IDEs

Free Web Development IDEs

Downloadable DesktopWeb Development Apps

Cloud Based Web Development

Cloud-Based Web Development Sites

Online Website Builder Sites

Learning Management Systems (LMS)

CSS Links

CSS Minifiers

CSS Precompilers

CSS Postprocessors

CSS Tools

jQuery Links

jQuery Forms

Slideshows, Carousels, Graphic Plugins & Components

Calendar & Datepicker jQuery Plugins

JavaScript Minifiers

RWD Testing Emulators

Browser Plugin Apps

Imaging Programs

WSDL, SOAP, REST, & ODATA Introduction and Resources

Colleges and Universities