1. 2016 Cengage Learning Computing Conference Lisa Friedrichsen, Professor Web Development & Digital Media Johnson County Community College HTML 5 / CSS 3 The Perfect Capstone Project

2. Do you teach an HTML & CSS course? Course objectivesCourse objectives @ Johnson County Community College Use W3C standards for html 5 and css 3 Create semantic, validated html and css Structure with html 5 wireframe tags Create headings, paragraphs, tables, links, lists, forms Create inline, embedded, external style sheets Style for fonts, colors, and multiple column layouts Apply responsive web design principles Test and troubleshoot html and css 2016 Cengage Learning Computing Conference 2

3. Do you include video and audio? IllustratedIllustrated: Unit L New PerspectivesNew Perspectives: Tutorial 7 Shelly CashmanShelly Cashman 7 th : Chapter 8 Shelly Cashman Shelly Cashman 8 th : Chapter 9 2016 Cengage Learning Computing Conference 3

4. Do you include JavaScript? IllustratedIllustrated: Unit M New PerspectivesNew Perspectives: Tutorials 10-14 Shelly CashmanShelly Cashman 7 th : Chapters 9-11 Shelly Cashman Shelly Cashman 8 th : Chapter 10 2016 Cengage Learning Computing Conference 4

5. Do you include xml? Shelly CashmanShelly Cashman: Chapter 12 2016 Cengage Learning Computing Conference 5

6. Do you include other content? IllustratedIllustrated: K: Creating Visual Effects & Animation CSS3 N: Integrating Social Media O: Optimizing for Search Engines P: Testing & Improving Performance New PerspectivesNew Perspectives: Tutorial 9: Working with XHTML Shelly Cashman Shelly Cashman 7 th : Special feature - Frames Shelly CashmanShelly Cashman 8 th : 11: Publish & Promote 12: Maintaining a Website 2016 Cengage Learning Computing Conference 6

7. Do you include principles of responsive web design? Fluid measurements, ems and % Media queries Flexible images 2016 Cengage Learning Computing Conference 7

8. Responsive Web Design… Illustrated: Illustrated: Unit I Implementing Responsive Design New PerspectivesNew Perspectives: Tutorial 8 Advanced CSS Session 8.3 Shelly CashmanShelly Cashman 8 th Chap 5: Responsive Web Design Part 1: Mobile Devices Chap 6: Responsive Web Design Part 2: Tablets and Desktops 2016 Cengage Learning Computing Conference 8

9. 9 1.Introduction to the Internet and Web Page Design. 2.Build a Website with HTML5 3.Enhance a Website with Links and Images. 4.Style a Website with CSS. 5.Responsive Web Design Part 1: Designing for Mobile Devices 6.Responsive Web Design Part 2: Designing for Tablets and Desktops IntroductoryIntroductory: Chapters 1-4 CompleteComplete: Chapters 1-8 ComprehensiveComprehensive: Chapters 1-12 Shelly Cashman 8 th edition textbook

10. Do you include a capstone project? If so, are they…. – Satisfying to the students? – Worthy of inclusion in the student’s personal portfolio? – Demonstrative of the course objectives? – Responsive? 2016 Cengage Learning Computing Conference 10

11. Do you include a capstone project? Illustrated Unit P (Lesson) (Skills Review) IllustratedLessonSkills Review New Perspectives Tut 9 (tutorial) Tut 8 (case 4) New Perspectivestutorialcase 4 Shelly Cashman 7 th Chapter 7 Chapter 9 Shelly CashmanChapter 7Chapter 9 Shelly Cashman 8 th Chapter 8 Shelly Cashman Other Example 1 Other Other Example 2 Other 2016 Cengage Learning Computing Conference 11

12. Final Projects from Intro to HTML & CSS (3 credits) Web Development Tools Wikis CMS systems Search Engine Optimization 2016 Cengage Learning Computing Conference 12

13. Idea #1: Slow Down! Intro to HTML 5 & CSS 3 = 3 cr Advanced CSS 3 class = 3 cr Advanced HTML 5 class = 3 cr JavaScript = 4 cr Advanced JavaScript = 4 cr 2016 Cengage Learning Computing Conference 13

14. Idea #2: Assign Only Relevant Exercises html 5 best practices resources css 3 best practices personal portfolio site responsive web design 2016 Cengage Learning Computing Conference 14

15. The Problem: Expectation Gap Students want to create an exciting web sites www.csszengarden.com How do we do this in an introductory html and css class? 2016 Cengage Learning Computing Conference 15

16. Final Project Suggestions: Choose a good subject!good subject! Provide a clear grading rubric!grading rubric 2016 Cengage Learning Computing Conference 16

17. Thank you! All of my online resources Youtubes Reference sites Grading rubrics Lisa Friedrichsen, Professor Web Development & Digital Media Johnson County Community College 2016 Cengage Learning Computing Conference 17