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

Do you teach an HTML & CSS course? Course objectivesCourse 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

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 Cengage Learning Computing Conference 3

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

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

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

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

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

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

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

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

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

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

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

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

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