Download HTML 5 / CSS 3 The Perfect Capstone Project

2016 Cengage Learning Computing Conference
HTML 5 / CSS 3
The Perfect Capstone
Project
Lisa Friedrichsen, Professor
Web Development & Digital Media
Johnson County Community College
Do you teach an HTML & CSS course?
Course objectives @ Johnson County Community College
•
•
•
•
•
•
•
•
2
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
Do you include video and audio?
Illustrated: Unit L
New Perspectives: Tutorial 7
Shelly Cashman 7th: Chapter 8
Shelly Cashman 8th: Chapter 9
3
2016 Cengage Learning Computing Conference
Do you include JavaScript?
Illustrated: Unit M
New Perspectives: Tutorials 10-14
Shelly Cashman 7th: Chapters 9-11
Shelly Cashman 8th: Chapter 10
4
2016 Cengage Learning Computing Conference
Do you include xml?
Shelly Cashman: Chapter 12
5
2016 Cengage Learning Computing Conference
Do you include other content?
Illustrated:
K: Creating Visual Effects & Animation CSS3
N: Integrating Social Media
O: Optimizing for Search Engines
P: Testing & Improving Performance
New Perspectives:
Tutorial 9: Working with XHTML
Shelly Cashman 7th:
Special feature - Frames
Shelly Cashman 8th:
11: Publish & Promote
12: Maintaining a Website
6
2016 Cengage Learning Computing Conference
Do you include principles of
responsive web design?
•
•
•
•
7
Fluid measurements, ems and %
Media queries
<meta name="viewport"…>
Flexible images
2016 Cengage Learning Computing Conference
Responsive Web Design…
Illustrated: Unit I
Implementing Responsive Design
New Perspectives: Tutorial 8
Advanced CSS Session 8.3
Shelly Cashman 8th
Chap 5: Responsive Web Design Part 1: Mobile Devices
Chap 6: Responsive Web Design Part 2: Tablets and Desktops
8
2016 Cengage Learning Computing Conference
Shelly Cashman 8th edition textbook
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
Introductory: Chapters 1-4
Complete: Chapters 1-8
Comprehensive: Chapters 1-12
9
2016 Cengage Learning Computing Conference
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?
10
2016 Cengage Learning Computing Conference
Final Projects from
Intro to HTML & CSS (3 credits)
•
•
•
•
12
Web Development Tools
Wikis
CMS systems
Search Engine Optimization
2016 Cengage Learning Computing Conference
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
13
2016 Cengage Learning Computing Conference
Idea #2:
Assign Only Relevant Exercises
•
•
•
•
•
14
html 5 best practices
resources
css 3 best practices
personal portfolio site
responsive web design
2016 Cengage Learning Computing Conference
Final Project Suggestions:
Choose a good subject!
Provide a clear grading rubric!
16
2016 Cengage Learning Computing Conference
Thank you!
All of my online resources
• Youtubes
• Reference sites
• Grading rubrics
Lisa Friedrichsen, Professor
Web Development & Digital Media
Johnson County Community College
17
2016 Cengage Learning Computing Conference