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
- Building a Simple Web Page
- 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
CSS Animations and Transitions
- All About CSS Animations
- All About CSS 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
Examples Using CSS Animations and Transition
- Slide Image on Hover using CSS3
- Sliding Background Effect on Link Hover
- Animating Many Elements Using a Transition
- Creating a Sweet Content Slider
- Move Element to Click Position
- Simple Text Fade and Scale Animation
- Getting Jittery on Hover
-
The
<blink> Tag Shall Live On
Animating in Code
- Animating in Code Using JavaScript
- Animating with requestAnimationFrame
- Creating a Simple HTML5 Canvas Animation
- DOM vs. Canvas
- Introduction to Easing in JavaScript
- Animating with Robert Penner's Easing Functions
- Animating Many Things on a Canvas
-
Frame Rates and HTML/JavaScript
Examples Involving Animations Created in Code
- Animated Scroll to Top with Easing
- Smooth Parallax Scrolling
- Creating a Strobe Light Generator
- Amorphous Circles
- The Falling Snow Effect
- Deconstruction: Irritated Bubbles
-
Creating a Basic Particle System
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 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
- The HTML5 Starting Template
Other Resources
