• 
• 
• LEARN
• BOOKS
• FORUM
• 
• 
• GO

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.

• 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)
   

  • Anatomy of a CSS Style 101
  • CSS Selectors: Type, Class, and ID
  • CSS Attribute Selectors
  • All About nth-of-type and nth-child
  • Where Will Your Styles Live?
  • All About Color In The Year 2013 AD
     

• JavaScript

  
   
  • Introduction
  • Variables
  • Functions
  • Variable Scope
  • Numbers
  • Rounding Numbers
  • If and Else Statements
  • Switch Statements
  • For Loops
  • Events
• Arrays
• Objects and Classes
• Just Objects
• Using Prototype to Add New Properties
• Finding Elements in the DOM Using querySelector
• Debugging JavaScript by Using Breakpoints
• Managing Dependencies with Require.JS

• 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

The Basics

• Introduction to Animation in HTML
   

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

• Intro to Property-Based Animations

• 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

• 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

• General Programming Forum
• Useful Programming Links

 

• HTML5 Canvas: From Noob to Ninja
  • BUY NOW
• Animation in HTML, CSS, and JavaScript
  • BUY NOW
• JavaScript: Absolute Beginner's Guide
  • BUY NOW

Copyright 2017 Kirupa, Inc.