Web Design

Final Exam Schedule

• Period #5 – Final Exam
• Period #7
• Period #6
• Period #7 – Final Exam

Final Exam Website

• Create a Professional Looking RESPONSIVE website
• Create a cover sheet for your code you will turn in
• Print HTML code for each page and staple behind the cover sheet
• Save your ENTIRE SITE to your log-in number on the server
• Site Due – End of Class on Day of Final Exam
• Royalty Free Images – LINK

Directions – LINK

Final Exam Website

• Create a Professional Looking RESPONSIVE website
• Create a cover sheet for your code you will turn in
• Print HTML code for each page and staple behind the cover sheet
• Save your ENTIRE SITE to your log-in number on the server
• Site Due – End of Class on Day of Final Exam
• Royalty Free Images – LINK

Directions – LINK

Final Exam Website

• Create a Professional Looking RESPONSIVE website
• Create a cover sheet for your code you will turn in
• Print HTML code for each page and staple behind the cover sheet
• Save your ENTIRE SITE to your log-in number on the server
• Site Due – End of Class on Day of Final Exam
• Royalty Free Images – LINK

Directions – LINK

Final Exam Website

• Create a Professional Looking RESPONSIVE website
• Create a cover sheet for your code you will turn in
• Print HTML code for each page and staple behind the cover sheet
• Save your ENTIRE SITE to your log-in number on the server
• Site Due – End of Class on Day of Final Exam
• Royalty Free Images – LINK

Directions – LINK

Final Exam Website

• Create a Professional Looking RESPONSIVE website
• Create a cover sheet for your code you will turn in
• Print HTML code for each page and staple behind the cover sheet
• Save your ENTIRE SITE to your log-in number on the server
• Site Due – End of Class on Day of Final Exam
• Royalty Free Images – LINK

Directions – LINK

QUIZ: Project #8 Quiz Today!

DAY #4 – PROJECT #8 – CSS Grid Responsive Page

• Working with CSS Grids
• Working with CSS3
• Working with Web Fonts
• Adding HTML5 Video
• Making Grid Responsive

DAY #3 – PROJECT #8 – CSS Grid Responsive Page

• Working with CSS Grids
• Working with CSS3
• Working with Web Fonts
• Adding HTML5 Video
• Making Grid Responsive

DAY #2 – PROJECT #8 – CSS Grid Responsive Page

• Working with CSS Grids
• Working with CSS3
• Working with Web Fonts
• Adding HTML5 Video
• Making Grid Responsive

DAY #1 – PROJECT #8 – CSS Grid Responsive Page

• Working with CSS Grids
• Working with CSS3
• Working with Web Fonts
• Adding HTML5 Video
• Making Grid Responsive

Reminder: Project #7 Quiz Today

DAY #4 – PROJECT #7 – BOOTSTRAP RESPONSIVE PAGE

• Working with Bootstrap
• Creating CSS3 Transitions

QUESTIONS:  Project #7 Review Questions

QUIZ:  Complete Quiz over Project #7

Printing BLVD – Should be 2 pages

• Choose printer C126 Color (01) for printing
• Make sure that Print on Both Sides is SELECTED
• Open index.html and add comment to line #2 – <!– Todd Iwema – index.html – Project #7 –> – PRINT
• Open design.css and add comment to line #2 – /* Todd Iwema – design.css – project #7 */ – PRINT

Reminder: Project #7 Quiz on Tuesday

DAY #4 – PROJECT #7 – BOOTSTRAP RESPONSIVE PAGE

• Working with Bootstrap
• Creating CSS3 Transitions

QUESTIONS:  Project #7 Review Questions

QUIZ:  Complete Quiz over Project #7

DAY #3 – PROJECT #7 – BOOTSTRAP RESPONSIVE PAGE

• Working with Bootstrap
• Creating CSS3 Transitions

QUESTIONS:  Project #7 Review Questions

QUIZ:  Complete Quiz over Project #7

DAY #2 – PROJECT #7 – BOOTSTRAP RESPONSIVE PAGE

• Working with Bootstrap
• Creating CSS3 Transitions

QUESTIONS:  Project #7 Review Questions

QUIZ:  Complete Quiz over Project #7

DAY #1 – PROJECT #7 – BOOTSTRAP RESPONSIVE PAGE

• Working with Bootstrap
• Creating CSS3 Transitions

QUESTIONS:  Project #7 Review Questions

QUIZ:  Complete Quiz over Project #7

Project #6 Quiz will Today!

DAY #5 Project #6 – jQuery Mobile Site

• Creating a Mobile-Friendly Design
• Adding jQuery UI Elements
• Creating a JavaScript Photo Gallery

Project #6 – Complete Project #6 Review Questions

PRINTING INSTRUCTIONS

• PAGES: design.dwt, styles.css, info.html, galleries.html
• Add Comment to each page – Your name, page name, Period #7
• Chose File > Print Code > Change to printer c126 color (01)
  • This will print on front and back of page

Project #6 Quiz will be Wednesday!

DAY #5 Project #6 – jQuery Mobile Site

• Creating a Mobile-Friendly Design
• Adding jQuery UI Elements
• Creating a JavaScript Photo Gallery

Project #6 – Complete Project #6 Review Questions

PRINTING INSTRUCTIONS

• PAGES: design.dwt, styles.css, info.html, galleries.html
• Add Comment to each page – Your name, page name, Period #7
• Chose File > Print Code > Change to printer c126 color (01)
  • This will print on front and back of page

DAY #3: Project #6 – jQuery Mobile Site

• Creating a Mobile-Friendly Design
• Adding jQuery UI Elements
• Creating a JavaScript Photo Gallery

Project #6 – Complete Project #6 Review Questions

Project #6 – Project #6 Quiz

DAY #2: Project #6 – jQuery Mobile Site

• Creating a Mobile-Friendly Design
• Adding jQuery UI Elements
• Creating a JavaScript Photo Gallery

Project #6 – Complete Project #6 Review Questions

Project #6 – Project #6 Quiz

DAY #1: Project #6 – jQuery Mobile Site

• Creating a Mobile-Friendly Design
• Adding jQuery UI Elements
• Creating a JavaScript Photo Gallery

Project #6 – Complete Project #6 Review Questions

Project #6 – Project #6 Quiz

Project #5 Printing

• HTML PAGE PRINTING INFORMATION
  • Add on the line below <!doctype html> a comment on all html pages
    • <!– Your Name – filename – Period #5 –>
    • example = <!– Todd Iwema – design.dwt – Period #5 –>
  • Code should print on front and back of document automatically
  • Print Pages – design.dwt, index.html, schedule.html, food.html, faqs.html, and sign-up.html

• CSS PAGE PRINTING
  • Add Comment on first line of CSS page
    • /* Your Name – styles.css – Project #5 */
    • example /* Todd Iwema – styles.css – Project #5 */
  • Code should print on front and back of document automatically
  • Print styles.css only

Project #5 Printing

• HTML PAGE PRINTING INFORMATION
  • Add on the line below <!doctype html> a comment on all html pages
    • <!– Your Name – filename – Period #5 –>
    • example = <!– Todd Iwema – design.dwt – Period #5 –>
  • Code should print on front and back of document automatically
  • Print Pages – design.dwt, index.html, schedule.html, food.html, faqs.html, and sign-up.html

• CSS PAGE PRINTING
  • Add Comment on first line of CSS page
    • /* Your Name – styles.css – Project #5 */
    • example /* Todd Iwema – styles.css – Project #5 */
  • Code should print on front and back of document automatically
  • Print styles.css only

Project #6 – jQuery Mobile Site

• Creating a Mobile-Friendly Design
• Adding jQuery UI Elements
• Creating a JavaScript Photo Gallery

Project #6 – Complete Project #6 Review Questions

Project #6 – Project #6 Quiz

QUIZ: Project #5 Music Festival CSS Site QUIZ

DAY #4 – PROJECT #5 – Music Festival CSS Site

• Working with Classes
• Creating Online Forms

QUESTIONS:  Project #5 Review Questions

QUIZ:  Complete Quiz over Project #5.

DAY #3 – PROJECT #5 – Music Festival CSS Site

• Working with Classes
• Creating Online Forms

QUESTIONS:  Project #5 Review Questions

QUIZ:  Complete Quiz over Project #5.

DAY #2 – PROJECT #5 – Music Festival CSS Site

• Working with Classes
• Creating Online Forms

QUESTIONS:  Project #5 Review Questions

QUIZ:  Complete Quiz over Project #5.

DAY #1 – PROJECT #5 – Music Festival CSS Site

• Working with Classes
• Creating Online Forms

QUESTIONS:  Project #5 Review Questions

QUIZ:  Complete Quiz over Project #5.

Project #4 Quiz Today

DAY #4 – PROJECT #4 – YOSEMITE CSS LAYOUT

• Creating Layouts with Style Sheets
• Working with a Template
• Using CSS to Control Content

Code Printing: design.html and museum-style.css

QUESTIONS:  Project #4 Review Questions

QUIZ:  Complete Quiz over Project #4

DAY #3 – PROJECT #4 – YOSEMITE CSS LAYOUT

• Creating Layouts with Style Sheets
• Working with a Template
• Using CSS to Control Content

QUESTIONS:  Project #4 Review Questions

QUIZ:  Complete Quiz over Project #4

DAY #2 – PROJECT #4 – YOSEMITE CSS LAYOUT

• Creating Layouts with Style Sheets
• Working with a Template
• Using CSS to Control Content

QUESTIONS:  Project #4 Review Questions

QUIZ:  Complete Quiz over Project #4

DAY #1 – PROJECT #4 – YOSEMITE CSS LAYOUT

• Creating Layouts with Style Sheets
• Working with a Template
• Using CSS to Control Content

QUESTIONS:  Project #4 Review Questions

QUIZ:  Complete Quiz over Project #4

QUIZ – Project #3 Quiz TODAY

DAY #4 – PROJECT #3 – Arts Council Website

• Using Various Methods to Add Static Images into a Web Page
• Assigning alt tags to images for improved usability
• Working with Special Characters
• Manipulating images in a Web Page
• Working with CSS to define various element properties

QUESTIONS:  Project #3 Review Questions (Page #42)

QUIZ:  Complete Quiz over Project #3

DAY #3 – PROJECT #3 – Arts Council Website

• Using Various Methods to Add Static Images into a Web Page
• Assigning alt tags to images for improved usability
• Working with Special Characters
• Manipulating images in a Web Page
• Working with CSS to define various element properties

QUESTIONS:  Project #3 Review Questions (Page #42)

QUIZ:  Complete Quiz over Project #3

DAY #2 – PROJECT #3 – Arts Council Website

• Using Various Methods to Add Static Images into a Web Page
• Assigning alt tags to images for improved usability
• Working with Special Characters
• Manipulating images in a Web Page
• Working with CSS to define various element properties

QUESTIONS:  Project #3 Review Questions (Page #42)

QUIZ:  Complete Quiz over Project #3

DAY #1 – PROJECT #3 – Arts Council Website

• Using Various Methods to Add Static Images into a Web Page
• Assigning alt tags to images for improved usability
• Working with Special Characters
• Manipulating images in a Web Page
• Working with CSS to define various element properties

QUESTIONS:  Project #3 Review Questions (Page #42)

QUIZ:  Complete Quiz over Project #3

QUIZ: Project #2 Quiz will be Today!

DAY #4 – PROJECT #2 – Digital Book Chapter (Files already in Portfolio Folder-No Need to Copy)

FINISH: Complete Site today and answer Review Questions

• Preparing the Work space
• Working with Semantic Markup
• Working with Special Characters
• Creating Lists
• Attaching an External CSS File

QUESTIONS:  Project #2 Review Questions (Page #106)

QUIZ:  Complete Quiz over Project #2

Reminder: Project #2 Quiz will be Friday!

DAY #3 – PROJECT #2 – Digital Book Chapter (Files already in Portfolio Folder-No Need to Copy)

FINISH: Complete Site today and answer Review Questions

• Preparing the Work space
• Working with Semantic Markup
• Working with Special Characters
• Creating Lists
• Attaching an External CSS File

QUESTIONS:  Project #2 Review Questions (Page #106)

QUIZ:  Complete Quiz oer Project #2

DAY #3 – PROJECT #2 – Digital Book Chapter (Files already in Portfolio Folder-No Need to Copy)

FINISH: Complete Site today and answer Review Questions

• Preparing the Work space
• Working with Semantic Markup
• Working with Special Characters
• Creating Lists
• Attaching an External CSS File

QUESTIONS:  Project #2 Review Questions (Page #106)

QUIZ:  Complete Quiz oer Project #2

DAY #2 – PROJECT #2 – Digital Book Chapter (Files already in Portfolio Folder-No Need to Copy)

• Preparing the Work space
• Working with Semantic Markup
• Working with Special Characters
• Creating Lists
• Attaching an External CSS File

QUESTIONS:  Project #2 Review Questions (Page #106)

QUIZ:  Complete Quiz oer Project #2

DAY #1 – PROJECT #2 – Digital Book Chapter (Files already in Portfolio Folder-No Need to Copy)

• Preparing the Work space
• Working with Semantic Markup
• Working with Special Characters
• Creating Lists
• Attaching an External CSS File

QUESTIONS:  Project #2 Review Questions (Page #106)

QUIZ:  Complete Quiz oer Project #2

Project #1 Quiz Today!

DAY #4 – PROJECT #1 – BISTRO SITE ORGANIZATION (Files already in Portfolio Folder-No Need to Copy)

PRINTING: Locate code for adding HTML Comment and enter in <head> Section of site ON EVERY HTML PAGE. USE BLACK AND WHITE PRINTER! Write name and period # at top of first page.

• Print – index.html CODE
• Print – about.html CODE
• Print – events.html CODE
• Print – lunch-menu.html CODE
• Print – dinner-menu.html CODE
• Print – snippet of File Panel

QUESTIONS:  Project #1 Review Questions (Page #63)

QUIZ:  Complete Quiz over Project #1

DAY #3 – PROJECT #1 – BISTRO SITE ORGANIZATION (Files already in Portfolio Folder-No Need to Copy)

PRINTING: Locate code for adding HTML Comment and enter in <head> Section of site ON EVERY HTML PAGE. USE BLACK AND WHITE PRINTER! Write name and period # at top of first page.

• Print – index.html CODE
• Print – about.html CODE
• Print – events.html CODE
• Print – lunch-menu.html CODE
• Print – dinner-menu.html CODE
• Print – snippet of File Panel

QUESTIONS:  Project #1 Review Questions (Page #63)

QUIZ:  Complete Quiz over Project #1

DAY #2 – PROJECT #1 – BISTRO SITE ORGANIZATION (Files already in Portfolio Folder-No Need to Copy)

• Exploring Site Structure
• Organizing the Site Navigation
• Naming and tilting Documents
• Making Files Public

PROJECT:  Portfolio Builder Project (Page #64)

• STEP #2 – Read and follow all instructions from page #64.

QUESTIONS:  Project #1 Review Questions (Page #63)

QUIZ:  Complete Quiz oer Project #1

DAY #1 – PROJECT #1 – BISTRO SITE ORGANIZATION (Files already in Portfolio Folder-No Need to Copy)

• Exploring Site Structure
• Organizing the Site Navigation
• Naming and tilting Documents
• Making Files Public

PROJECT:  Portfolio Builder Project (Page #64)

• STEP #2 – Read and follow all instructions from page #64.

QUESTIONS:  Project #1 Review Questions (Page #63)

QUIZ:  Complete Quiz oer Project #1

WEB DESIGN – Unit #1 Dreamweaver Interface

INTRODUCTION:  Dreamweaver Software and Interface 

DAY #1 – PROJECT #1 – BISTRO SITE ORGANIZATION (Files already in Portfolio Folder-No Need to Copy)

• Exploring Site Structure
• Organizing the Site Navigation
• Naming and tilting Documents
• Making Files Public

PROJECT:  Portfolio Builder Project (Page #64)

• STEP #2 – Read and follow all instructions from page #64.

QUESTIONS:  Project #1 Review Questions (Page #63)

QUIZ:  Complete Quiz oer Project #1

QUIZ: HTML & CSS Quiz today!

INTRODUCTION:  Dreamweaver Software and Interface 

DAY #1 – PROJECT #1 – BISTRO SITE ORGANIZATION (Files already in Portfolio Folder-No Need to Copy)

• Exploring Site Structure
• Organizing the Site Navigation
• Naming and tilting Documents
• Making Files Public

PROJECT:  Portfolio Builder Project (Page #64)

• STEP #2 – Read and follow all instructions from page #64.

QUESTIONS:  Project #1 Review Questions (Page #63)

QUIZ:  Complete Quiz over Project #1

**Print CSS Tutorials be end of class on TODAY!
**Quiz over HTML and CSS will be on Tuesday!

Assignment – CodeCademy – LINK
Tutorial – W3Schools – Excellent Resource – LINK

LEARN CSS

ASSIGNMENT:  CSS Setup and Selectors
ASSIGNMENT:  CSS Visual Rules
ASSIGNMENT:  The Box Model
ASSIGNMENT:  Changing the Box Model
ASSIGNMENT:  CSS Display and Positioning
ASSIGNMENT:  CSS Color
ASSIGNMENT:  CSS Typography
ASSIGNMENT:  CSS Grid Essentials
ASSIGNMENT:  Avanced CSS Grid

Printing Directions – Open Syllabus in Chrome – Change the zoom to around 67% – View First 3 Topics – Decrease the width of the page of page with your mouse – Alt + Print Screen – Open Word Document – Type Header = Name, HTML, Period #7 <enter> Today’s Date <enter>paste (ctrl + v) the document and fit image to page. Do the same instructions for topics 4, 5, 6. Print both pages to black and white printer – turn in bin in back of room

**Print CSS Tutorials be end of class on Friday!
**Quiz over HTML and CSS will be on Tuesday!

Assignment – CodeCademy – LINK
Tutorial – W3Schools – Excellent Resource – LINK

Directions: In CodeCademy, scroll to the bottom of page and choose HTML and CSS under BY LANGUAGE section
Courses:  Introduction to HTML, Learn CSS (Sections listed below)

LEARN HTML

ASSIGNMENT:  Introduction to HTML
ASSIGNMENT:  HTML Document Standards
ASSIGNMENT:  Tables
ASSIGNMENT: Learn HTML Forms
ASSIGNMENT: Learn HTML Form Validation

Printing Directions – Open Syllabus in Chrome – Change the zoom to around 70% – Decrease the width of the page of page with your mouse – Alt + Print Screen – Open Word Document – Type Header = Name, HTML, Period #7 <enter> Today’s Date <enter>paste (ctrl + v) the document and fit image to page. Print to black and white printer – turn in bin in back of room

LEARN CSS

ASSIGNMENT:  CSS Setup and Selectors
ASSIGNMENT:  CSS Visual Rules
ASSIGNMENT:  The Box Model
ASSIGNMENT:  Changing the Box Model
ASSIGNMENT:  CSS Display and Positioning
ASSIGNMENT:  CSS Color
ASSIGNMENT:  CSS Typography
ASSIGNMENT:  CSS Grid Essentials
ASSIGNMENT:  Avanced CSS Grid

Assignment – CodeCademy – LINK
Tutorial – W3Schools – Excellent Resource – LINK

Directions: In CodeCademy, scroll to the bottom of page and choose HTML and CSS under BY LANGUAGE section
Courses:  Introduction to HTML, Learn CSS (Sections listed below)

LEARN HTML

ASSIGNMENT:  Introduction to HTML
ASSIGNMENT:  HTML Document Standards
ASSIGNMENT:  Tables
ASSIGNMENT: Learn HTML Forms
ASSIGNMENT: Learn HTML Form Validation

Printing Directions – Open Syllabus in Chrome – Change the zoom to around 70% – Decrease the width of the page of page with your mouse – Alt + Print Screen – Open Word Document – Type Header = Name, HTML, Period #7 <enter> Today’s Date <enter>paste (ctrl + v) the document and fit image to page. Print to black and white printer – turn in bin in back of room

LEARN CSS

ASSIGNMENT:  CSS Setup and Selectors
ASSIGNMENT:  CSS Visual Rules
ASSIGNMENT:  The Box Model
ASSIGNMENT:  Changing the Box Model
ASSIGNMENT:  CSS Display and Positioning
ASSIGNMENT:  CSS Color
ASSIGNMENT:  CSS Typography
ASSIGNMENT:  CSS Grid Essentials
ASSIGNMENT:  Avanced CSS Grid

Assignment – CodeCademy – LINK
Tutorial – W3Schools – Excellent Resource – LINK

Directions: In CodeCademy, scroll to the bottom of page and choose HTML and CSS under BY LANGUAGE section
Courses:  Introduction to HTML, Learn CSS (Sections listed below)

LEARN HTML

ASSIGNMENT:  Introduction to HTML
ASSIGNMENT:  HTML Document Standards
ASSIGNMENT:  Tables
ASSIGNMENT: Learn HTML Forms
ASSIGNMENT: Learn HTML Form Validation

Printing Directions – Open Syllabus in Chrome – Change the zoom to around 70% – Decrease the width of the page of page with your mouse – Alt + Print Screen – Open Word Document – Type Header = Name, HTML, Period #7 <enter> Today’s Date <enter>paste (ctrl + v) the document and fit image to page. Print to black and white printer – turn in bin in back of room

LEARN CSS

ASSIGNMENT:  CSS Setup and Selectors
ASSIGNMENT:  CSS Visual Rules
ASSIGNMENT:  The Box Model
ASSIGNMENT:  Changing the Box Model
ASSIGNMENT:  CSS Display and Positioning
ASSIGNMENT:  CSS Color
ASSIGNMENT:  CSS Typography
ASSIGNMENT:  CSS Grid Essentials
ASSIGNMENT:  Avanced CSS Grid

Assignment – CodeCademy – LINK
Tutorial – W3Schools – Excellent Resource – LINK

Directions: In CodeCademy, scroll to the bottom of page and choose HTML and CSS under BY LANGUAGE section
Courses:  Introduction to HTML, Learn CSS (Sections listed below)

Complete:

LEARN HTML

ASSIGNMENT:  Introduction to HTML
ASSIGNMENT:  HTML Document Standards
ASSIGNMENT:  Tables
ASSIGNMENT: Learn HTML Forms
ASSIGNMENT: Learn HTML Form Validation

LEARN CSS

ASSIGNMENT:  CSS Setup and Selectors
ASSIGNMENT:  CSS Visual Rules
ASSIGNMENT:  The Box Model
ASSIGNMENT:  Changing the Box Model
ASSIGNMENT:  CSS Display and Positioning
ASSIGNMENT:  CSS Color
ASSIGNMENT:  CSS Typography
ASSIGNMENT:  CSS Grid Essentials
ASSIGNMENT:  Avanced CSS Grid

Assignment – CodeCademy – LINK
Tutorial – W3Schools – Excellent Resource – LINK

Directions: In CodeCademy, scroll to the bottom of page and choose HTML and CSS under BY LANGUAGE section
Courses:  Introduction to HTML, Learn CSS (Sections listed below)

Complete:

LEARN HTML

ASSIGNMENT:  Introduction to HTML
ASSIGNMENT:  HTML Document Standards
ASSIGNMENT:  Tables
ASSIGNMENT: Learn HTML Forms
ASSIGNMENT: Learn HTML Form Validation

LEARN CSS

ASSIGNMENT:  CSS Setup and Selectors
ASSIGNMENT:  CSS Visual Rules
ASSIGNMENT:  The Box Model
ASSIGNMENT:  Changing the Box Model
ASSIGNMENT:  CSS Display and Positioning
ASSIGNMENT:  CSS Color
ASSIGNMENT:  CSS Typography
ASSIGNMENT:  CSS Grid Essentials
ASSIGNMENT:  Avanced CSS Grid

ASSIGNMENT: Complete Scavenger Hunt

Sign Up for CodeCademy – LINK
Complete Registration – Write Down Username and Password
Tutorial – W3Schools – Excellent Resource – LINK

Demonstrate – Go Over HTML and CSS Assignments

Directions: In CodeCademy, scroll to the bottom and choose Learn HTML and CSS
Courses:  Learn HTML, Learn CSS (Sections listed below)

Complete:

LEARN HTML

ASSIGNMENT:  Introduction to HTML
ASSIGNMENT:  HTML Document Standards
ASSIGNMENT:  Tables
ASSIGNMENT: Learn HTML: Forms
ASSIGNMENT: Learn HTML: Form Validation

Student Seating Charts
Introduce Course to Students
Go Over Course Syllabus with Students
Go over Course Website with Students
Place Student Log-In Numbers on Computer Screens – Record
Clean Out Log-In Numbers