Web Standards

Links

Contact

My Bio

Your contact info

Google Drive

Text file

html5 Cheat Sheet

Simple responsive files

Web Education Community Group Wiki

Bootstrap

Bootstrap tutorial

html5 Beginner's Guide

HTML5 Semantic Elements

What Makes For a Semantic Class Name?

How to Use Semantic Tags for HTML5 and CSS3 Programming




















Agenda


Week 11:


Final presentations

Final responses



Week 7:


Lecture:

Modernizr, Bootstrap, jQuery and other libraries. HTML5 boilerplate and others. Github. CSS preprocessors (LESS, SASS)

Homework:

Final project: Incorporate Modernizr/Bootstrap/LESS/SASS into a boilerplate you create. Must be a responsive, fluid site.


Week 6: Lecture:

Scalable Vector Graphics (SVG). Fluid web design. Homework: Create a responsive, fluid page using SVG graphics.


Week 5: Lecture:

Images and Audio. Methods for optimizing both for browser compatibility and mobile formats. Sprite sheets. Homework: Take a given HTML page and reformat it to optimize images and audio. Include a sprite sheet. Make it responsive. Read chapters 6 and 7 (Zeldman).


Week 4: First, we'll look at your backward compatible pages.

Typography Methods of using fonts and type as design elements. Web fonts. ASCII codes. Homework: Read From Work to Text

Create a responsive web page using diacritical marks as content. Add a logo using only CSS. Read chapters 7 and 8 (Zeldman).


Week 3: Backward compatibility. Graceful degradation vs. progressive enhancement. Homework: Take an HTML5 page and make it backward compatible for older browsers. Upload it to Google Drive and test it in older browsers. Read chapters 5 and 6 (Zeldman).



Week 2:


Semantic HTML and CSS3. HTML5 semantic tags. Common Problems Solved. Quirks mode. Doctype switching. Div-itis. Homework: Take a given HTML page and update it to HTML5/CSS3 with correct semantic coding and a fluid grid. Upload it to Google Drive and make sure it passes online browser tests. Read chapters 3 and 4 (Zeldman).


Week 1:   


Housekeeping- My site, e-book, your contact, Google Drive

Lecture: Review syllabus. Introduction to Web Standards. The need for web standards. Browser penetration. Browser tests, compatibility, feature sets. Desktop, tablet, mobile issues. HTML/CSS history. Unicode. Homework: Using the supplied text file, create a web page for HTML5 with content only (no images, no links) and use CSS to make it responsive for desktop, tablet and mobile browsers. Upload it to Google Drive and make sure it passes online browser tests. Read chapters 1 and 2 (Zeldman). Read chapter 1 (Sikos).

Comments