Build great sites and applications for any platform
HTML5 lets you program for features, not browser versions, giving you much more control and flexibility over your sites and apps while freeing you from worrying about the quirks of any specific platform. Learn how to create impressive, interactive websites and web apps that include video and audio, dynamic drawings, geolocation, offline availability, drag-and-drop, and many other features.
Build great sites and applications for any platform
HTML5 lets you program for features, not browser versions, giving you much more control and flexibility over your sites and apps while freeing you from worrying about the quirks of any specific platform. Learn how to create impressive, interactive websites and web apps that include video and audio, dynamic drawings, geolocation, offline availability, drag-and-drop, and many other features.
HTML5 And CSS - An Introduction To Modern Web Development
About The Author
Overview Of The Course
Setting Up Your Workspace
A Simple HTML Document
The Basic Structure Of A Website
Moving Files From Your Computer To A Webserver
What Is HTML?
HTML Syntax
The Doctype
The Document Head
The Document Body
Understanding Block And Inline Elements
Paragraphs And Line Breaks
Div And Span
Links
Images
Basic Lists
Lists Of Lists
Tables
Validation
Understanding Document Structure In HTML
Quotes
Articles
Navigation
Figures
Sections
Headers And Footers
Aside
What Is CSS?
Adding CSS To An HTML Document
Basic CSS Selectors
Grouping CSS Selectors
Using Shorthand
CSS Units
Color In CSS
The Cascade
Understanding Web Typography
Text Size
Text Weight And Style
Using Fonts
Pseudo-Class Selectors
Styling Links
Dynamic Pseudo-Class Selectors - The Hover State
Background Color In CSS
Adding A Background Image To A Page
Using Background Images On Other Elements
Styling A Blockquote With Multiple Background Images
Gradients With CSS
Shadows In CSS
Opacity And Transparency
The CSS Layout Model
Margins And Padding
Borders
Absolute Positioning
Relative Positioning
The Basics Of Float
Clearing Floats
Building A Simple, Floated Layout
Styling The Navigation Sidebar
Styling The Page Header
Styling The Page Footer
Understanding The Role Of Forms On The Web
The Form Element
The Input Element
Form Labels
Text Areas
Buttons
File Input Fields
Hidden Fields
Checkboxes And Radio Buttons
Select Lists
Fieldsets And Legends
Laying Out A Simple Form
Styling Our Form With CSS
Advanced Form Styling Tips
The Audio Element
The Video Element
Providing Fallbacks For Older Browsers
What Is Responsive Design?
Media Queries
Images In Responsive Design
A Simple Layout With Three Breakpoints
Testing Different Platforms
Debugging CSS Problems
Accessibility Tips
Common Problems When Making Websites Live
Resources And Where To Get Help
What You Will Learn
About The Author
Tools We Will Need
A Brief History Of How We Got Here
Understanding Video Containers And Codecs
Understanding Audio Containers And Codecs
Current Browser Support for Audio And Video Formats
The Basics Of Inserting Video With HTML5
The Basics Of Inserting Audio With HTML5
Setting Media Playback Dimensions
Setting Up Fallback Video Formats
Setting Up Fallback Audio Formats
Pre-Loading Your Web Videos
Muting Media
Using Autoplay With Your Videos
Looping Media Playback
Inserting Video Poster Frames
Providing Flash Fallback For Older Browsers
Fallback With Download Links
Adding Subtitles And Captions With The Track Element
Mobile Playback With Responsive Video
Using Video Embed Builders
Encoding MP4 Video With Handbrake
Encoding Ogg And WebM With Firefogg
Encoding Audio With VLC
Where To Go From Here
About Ben Jaffe And What You Will Learn
A Quick Introduction to HTML5
The HTML5 Autocomplete Attribute
Creating Autocomplete Inputs With HTML5
Creating Autocomplete Inputs With Fallback
Creating Autocomplete Inputs With JQueryUI
Autofocus
Cross-Browser Autofocus With Fallback
Placeholder Text
Cross-Browser Placeholder Text With Fallback
Checked, Disabled And Spellcheck
Required Fields
New Input Types - Part 1
New Input Types - Part 2
New Input Types - Part 3
Web Shims And Polyfills - Part 1
Web Shims And Polyfills - Part 2
Welcome and Set Up
What is the Mobile Web
Browsers and Platforms
Mobile Web Strategies
Creating a Development Environment
Chrome Mobile Emulation
Emulating iOS
Emulating Android
Emulating Windows, BlackBerry and Firefox OS
Working with Real Devices
Remote Debugging Safari
Remote debugging Chrome
Remote Debugging for Others
Other Tools
Basic Template
CSS Pixels and Screens on the Market
Viewport Basics
Advanced Viewport Declarations
CSS Media Queries
CSS Mobile Tricks
Client-side and Server-side Detection
Basic Form Template
Virtual Keyboards
Native Input Controls
Form Validation
Advanced Auto-Complete Options
Images
Canvas API
Video and Audio
Overview on JavaScript for Mobile
Network Communications and Data Storage
Geolocation
Accelerometer, Magnetometer and Gyroscope
Touch, Gesture and Pointer Events
Camera
Calling Native Apps
Integrating with Our Native App
Home Screen Web Apps Overview
Icons and Meta Tags
Closing