ProfBurnett.com

ITI 239 HTML5 Level I - Session III

Session Outline:

  • Chapter 4 - How to use CSS to format the elements of a web page
  • Complete Exercise 1 - Normalizer.css
  • Complete Exercise 2 - Modernizer.js
  • Complete Exercise 3 - Chapter 4
  •  
  • Chapter 5 - How to use the CSS box model for spacing, borders, and backgrounds
  • Complete Exercise 4 - Chapter 5
  •  
  • Chapter 6 - How to use CSS for page layout
  • Complete Exercise 5 - Chapter 6

Student Exercises

Student Exercise 1

  • 1. Download Normalizer.css file.
  • 2. Right-Click Download v4.1.1 button on Normalizer site.
  • 3. Choose “Save Link As”
  • 4. Save normalize.css in the styles directory of your dev site.
  • 5. Include link to normalizer.css file in head section of your index (home) page.
  • 6. Link to normalizer.css v4.1.1 file.

Student Exercise 2

  • Create a Specialized Modernizr File.
  • 1. Select some functions.
  • 2. Generate Minified version.
  • 3. Download and place in your test site.
  •  
  • Create a Specialized Non-Minified Modernizr File.
  • 1. Generate non-minified version.
  • 2. Download and place in your test site.
  •  
  • Download Modernizr and Install File
  • 1. Download Modernizr ver 3.3.1 file to JavaScript directory in Dev Site.
  • 2. Include link to Modernizr ver 3.3.1 file in Head section of index page.
  • 3. Link to Non-Minified Modernizer file.
  • 4. Link to Minified Modernizer file.

Student Exercise 3

  • 1. Complete Exercise 4-1, page 164 using Dreamweaver.
  • 2. The basic.html file listed in Exercise 4-1 is located in the templates folder on your developmental site.
  • 3. Students will upload files to live site.
  • 4. Students will preview in browser website files.

Student Exercise 4

  • 1. Complete Exercise 5-1 and 5-2, page 197 using Dreamweaver.
  • 2. Synchronize development files with live site.
  • 3. Preview site in web browser.

Student Exercise 5

  • 1. Complete Exercise 6-1, 6-2 and 6-3, page 233 using Dreamweaver.
  • 2. The c6_content.txt and c6_sampson.txt files listed in Exercises 6-2 and 6-3 are located in the txt folder on your developmental site.
  • 3. Synchronize development files with live site.
  • 4. Preview site in web browser.

Session 3 Support Links

MC Web for Students Site: ITI 239: Summer 2017 CRN:43120

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

Chapter Presentation, Zip, and Solution Set Files
Session Chapter Presentation Exercise Zip File Solution Set Zip File
1 Course Introduction Presentation
1 Chapter 1 - Introduction to Web Development
1 Chapter 18 - How to Design a Web Site
1 Chapter 19 - How to Deploy a Web Site on a Web Server
2 Chapter 2 - How to Code, Test and Validate a web page
2 Chapter 3 - How to Use HTML to Structure a Web Page
3 Chapter 4 - How to Use CSS to Format the Elements of a Web Page
3 Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds
3 Chapter 6 - How to Use CSS for Page Layout
4 Chapter 7 - How to Work with Links and Lists
5 CSS Precompilers and Scripting Vulnerabilities
5 Chapter 9 - How to Work with Images
5 Course Review