HTML5 (CSS and JavaScript) Tutorials
The newest frontier this site hopes to explore and provide tutorials on is HTML5. This section is so new that the paint hasn't even dried yet! If you have any suggestions or requests for tutorials you would like to see here, feel free to chime in.
Basics
- Introduction to HTML
- Getting Your Feet Wet with HTML 5
- The HTML5 Starting Template
- Revisiting Some (Old) Tags in HTML 5
- Naming via Class, ID, and Name
-
Using Firebug to Easily Inspect (and Diagnose!) CSS
-
CSS (Cascading Style Sheets)
-
JavaScript
Styling and Design
- HTML5 Local Storage
- Styling Links in CSS
- Rounding Corners using CSS3
- Grabbing All Available Space
- Changing Selection Color using CSS
- Drop Shadows in CSS3
- Centering Vertically and Horizontally Using Flexbox
- Centering a Div Horizontally
- Changing the Default Focus Styles
- Clipping Content Using CSS
- Making the First Letter Stand Out
- Hiding Things using CSS
- Fixing an Element's Position in CSS
- Styling Placeholder Text using CSS
- Reading aRGB / RGB Color Values
- A Little About Color: RGB vs. HSV
- Drawing Circles on a Canvas
- The CSS Cursor Property
- Removing the Space Between Images Using CSS
- Style Beautiful Tables Using Only CSS
- Display an Outline (Not a Border!) on Hover
- CSS Filters
- Creating Circles Using HTML/CSS
Animation
The Basics
- Introduction to Animation in HTML
- All About CSS Animations
- All About CSS Transitions
-
Animating in Code Using JavaScript
Deeper Look at Animations and Transitions
- CSS3: Animations vs. Transitions
- Easing Functions in CSS3
- Animating Movement Smoothly Using CSS
- The CSS Animation Events
- The transitionEnd Event
- Get the Value of CSS Properties As They Are Animating
-
Looping a CSS Transition
Practical Examples with Transitions
- Slide Image on Hover using CSS3
- Sliding Background Effect on Link Hover
-
Animating Many Elements Using a Transition
Practical Examples with Animations
Animating in Code
- Animating with requestAnimationFrame
- Creating a Simple HTML5 Canvas Animation
- DOM vs. Canvas
- Animating with Easing Functions in JavaScript
- Animating Many Things on a Canvas
-
Frame Rates and HTML/JavaScript
Example Time with Animations in Code
Other
JavaScript
- Vendor Prefixes and JavaScript
- Running Scripts at the "Right" Time
- Loading a Random Page Inline
- Finding HTML Elements via JavaScript
- Image Rollover with Preload
- Changing CSS using JavaScript
- Tracking JavaScript Events using Google Analytics
- Page Navigation on Click
- Hashtables vs. Arrays
- Random Numbers in JavaScript
- Advanced Random Numbers in JavaScript
- Random Colors in JavaScript
- Viewport, Device, and Document Size
- Resizing the HTML Canvas Element
- Get an Element's Position Using JavaScript
- Getting the Mouse Click Position
- Displaying PHP Data in HTML
- Preloading Images
- Shuffling an Array
- Picking a Random Item from an Array
- Handling Events for Many Elements
- Removing Duplicate Items from an Array
- Detect Whether a Font is Installed
- Checking If a File Exists
Common Tasks
- Accessing Your Webcam in HTML5
- Creating a Sweet Content Slider
- Creating Printer Friendly Pages
- Creating an E-Mail Contact Form
- Adding reCAPTCHA to A Contact Form
- Creating an Awesome Search Box
- Create an Awesome Contact Page
- Common .htaccess Tricks
- Creating a Vertical CSS List Menu
- Creating a Horizontal CSS List Menu
- Counting in Hexadecimal
- 5 Simple Tools/Tricks You Should Use
- Custom Data (data-*) Attributes
- Backup Your Site's Data Efficiently...Like a Ninja!
- Avoid Using Vendor Prefixes
- A Little About Color: HSV vs. RGB
Other Resources
