FrontendMasters.com – Introduction to HTML5 and CSS3 [19 MP4]
English | Size: 1.23 GB (1,323,370,172 bytes )
Category: Tutorial
Christopher Schmitt, author of HTML5 Cookbook, explains semantics and HTML5 features such as audio, video and geolocation. He dives into CSS3 and then dazzles us with his CSS flag using many of CSS3′s features.
Note: This course is still valuable, but has been superseded by our comprehensive, Introduction to Web Development course.
Table of Contents
Part 1 – HTML5
0:00:00 – 0:08:00 XHTML vs. HTML5 Christopher Schmitt dives right into the issues XHTML actually delivered, despite having been touted as ‘the next great thing’.
0:08:01 – 0:18:08 Building with HTML5 DOCTYPE for HTML5 vs the more complex HTML4 and XHTML is an exceptional improvement.
0:18:09 – 0:28:41 HTML5 Audio & Video The HTML5 AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS.
0:28:42 – 0:34:29 HTML5 Video Captions Historically, Flash captioning has been ridiculously cumbersome, though its function is proven to help literacy, etc. http://www.idonline.org/article/35793
0:34:31 – 0:41:11 HTML5 Geolocation HTML5 GEOLOCATION element allows you to use plugins to enhance web user experience ie: pointing you to nearest location of a BBQ joint.
Part 2 – CSS3
0:41:12 – 0:45:07 CSS3 Color & Opacity CSS is a consolidation of 50 modules being simultaneously developed and updated rather than one long doc http://www.w3.org/Style/CSS/current-work#CSS3 .
0:45:08 – 0:55:09 CSS3 Text: Selection & Columns CSS3 uses ellipses to control text overflow – and is supported by all browsers, even IE6!
0:55:10 – 1:03:09 CSS3 Text: @font-face & Shadows Use @font-face to set fonts – different font files are supported by different browsers pretty much breaking out by IE and then everyone else.
1:03:10 – 1:10:32 CSS3 Images Like text-shadow, box-shadow works to set glow around a box – accomplished automatically vs the “old” days.
1:10:33 – 1:19:52 CSS3 Effects Image masks – only in webkit for now – shown in an example putting a gloss over a photo to create a headshot look.
1:19:53 – 1:25:50 Advanced CSS3 Animations Example of complex animating links shows that you can use many types of animation properties to enhance your page by hovering over elements.
Part 3 – Building the American Flag in CSS3
1:25:51 – 1:36:25 How we solve problems We solve design problems based on physical limitations, our experience, and our browsers.
1:36:26 – 1:44:45 Exercise: Build an American Flag Breakout exercise: 15 minutes to build an American Flag with CSS and HTML – try this exercise on your own at this point and see how it goes!
1:45:11 – 1:50:55 American Flag: Layout Preparing to create the flag with semantic markup
1:50:56 – 1:57:25 American Flag: Resets CSS resets are vital to ensure a page conforms regardless of browser. Resets can be found at http://developer.yahoo.com/yui/reset, http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles and http://meyerweb.com/eric/tools/css/reset/index.html
1:57:26 – 2:05:34 American Flag: Data Attributes and Stripes HTML5 Data Attributes are a convenient way to add customization to elements and embed information. More information at http://ejohn.org/blog/html-5-data-attributes/ and a case study at http://sxswcss3.com/
2:05:35 – 2:11:09 American Flag: Stars Adding the stars, removing the names, adding subtle gradients
2:11:10 – 2:22:38 American Flag: Wrap-up Questions, answers and discussions on Christopher’s flag solution
2:22:39 – 2:36:34 Comments and Q&A Closing comments
DOWNLOAD:
http://rapidgator.net/file/ab30d4b6f9458e61d3cb3e779aa4a109/Frontend_Masters_-_Introduction_to_HTML5_and_CSS3.part1.rar.html
http://rapidgator.net/file/964d767ac50ce9044f9f269ada6515e3/Frontend_Masters_-_Introduction_to_HTML5_and_CSS3.part2.rar.html
http://nitroflare.com/view/38BF927D00154A4/Frontend_Masters_-_Introduction_to_HTML5_and_CSS3.part1.rar
http://nitroflare.com/view/9A635E5A4DE446B/Frontend_Masters_-_Introduction_to_HTML5_and_CSS3.part2.rar
If any links die or problem unrar, send request to http://goo.gl/aUHSZc
Leave a Reply