12 HTML5 & CSS3 Tutorials To Bring Your Projects Into The Modern Age

HTML5 and CSS3 have made the web a more beautiful place to work, but they also give you a bunch of new markup and styles to master – not to mention constantly changing support. Worse still, browsers can only take so much so you need to keep your code tidy and your scripting under wraps if you want your projects to work on multiple devices.

The tutorials we’re looking at today offer up a number of JavaScript-free solutions to everyday web challenges – just to prove you don’t always need those script tags to get the job done. You’ll also find some more specialist tutorials in this list, as well as some splashes of tidy JavaScript to bring your projects into the modern age.

Enhancing Your Image Thumb Galleries Using CSS3 Transitions And Transforms (Responsive)

8

This tutorial from Tangled In Design shows you how to make a responsive image gallery with a number CSS3 transitions and transforms to bring your gallery pages to life – without a single line of JavaScript.

CSS-Only Responsive Layout With Smooth Transitions

SmoothTransitions

Tympanus offers up another CSS-only tutorial and takes you through the process of creating a responsive layout with little more than a style sheet.

Mozilla Guide To HTML5 Canvas

Screenshot 2014-10-01 at 10.19.42

The Mozilla Developer Network introduces the power of HTML5 canvas which allows you to script images, graphs and a range of animations for beginners and pros.

A Thought On HTML5 Geolocation

html5-geolocation

This guide from InstantShift goes through the ins and outs of HTML5 geolocation and some of the key features of geo-data that makes targeted marketing more effective.

Page Transitions With CSS3

CSS3PageTransitions

JavaScript transitions are all over the web, but Sergio Camalich takes the time to code up some CSS-only transitions that don’t slow the browser down.

How To Use HTML5’s Drag And Drop

featured29@wdd2x

Another big feature in the HTML5 library is drag and drop, which is native to the browser and manages to get by on just a slither of JavaScript. Web Designer Depot takes you through the process.

Cirlce Hover Effects With CSS3 Transitions

CircleHoverEffects

Here we have another JavaScript alternative with a number of CSS3 hover effects explained in this Tympanus tutorial.

HTML5 Audio Player With Playlist

player-700x373

Every now and then you come across a project that needs some kind of media player and HTML5 makes this a whole lot easier – as shown by this tut from Script Tutorials.

Create The Illusion Of Stacked Elements With CSS3 Pseudo-Elements

stacks-css3-pseudo-elements

If flat design isn’t your thing then you might prefer to add a bit of depth and texture to your web projects. Inspect Element offers up one option with a quick look at CSS3 Pseudo-Elements and how create a stacked elements effect.

How To Make A Stopwatch Using CSS3 Without Images Or Javascript

Screenshot 2014-10-01 at 10.18.17

Learn how to make a stopwatch using CSS3 keyframe animations with this interactive tutorial from The Code Player.

Height Equals Width With Pure CSS

Screenshot 2014-10-01 at 10.18.03

CSS lacks a simple way to put equal height and widths on divs, but luckily some clever people have come up with CSS-only solutions and this article from Made My Day visualises a fix for height equals width using pure CSS from A List Apart and Stack Overflow.

Expanding Search Bar Deconstructed

ExpandingSearchBar

A responsive search bar goes a long way on multiple devices when your site has a lot of content for users to find. Tympanus makes a final appearance on our list to show you how it’s all done.