Web design How to

125 CSS and JavaScript tutorials to power up your skills

Apr 25, 2013 14:43 pm 6 comments

We round up 125 of best CSS and JavaScript tutorials from around the web. They could save you some serious time on your next web design project!

There are so many blogs and sites publishing high quality CSS and JavaScript tutorials these days that it can be hard to keep track - and it's easy to miss an amazing tutorial completely. And sod's law dictates that the one you do miss will be the one that could have saved you days of work on your latest project...

So to help out we've rounded up some of the very best CSS and JavaScript tutorials from around the web, covering web design techniques old and new, how to use the latest tools and frameworks, and a series of projects you can sink your teeth into. They're all written by leading experts in the field, and many come with downloadable code you can play around with. Finally, we've grouped the tutorials into a series of categories to make it easier to find what you're looking for.

NOTE: most of these CSS and JavaScript tutorials are aimed at professional web designers. If you're a beginner, we'd recommend W3schools, where you can take an interactive series of tutorials for free; Treehouse, which provides high quality training videos and tests you through quizzes and code challenges; or Code Academy, an interactive course where you can learn along with friends.

For the rest of us, though, on with the tutorials!

Fundamentals of CSS

Make your sites load faster

Your website’s visitors care whether or not it loads quickly. Tom Gullen explains what the price of a slow site can be and shows you how to make yours render faster

Discover the power of CSS3 selectors

To style an element with CSS, you need to be able to target it. Rich Clark shows you how to keep your markup slim and target elements in the DOM without resorting to extra presentational markup or JavaScript. How? By using CSS3 selectors...

How to structure your CSS

We want you to learn from the best. So who better to explain their CSS tactics than front end developer Mike Byrne? His handy tips will really help to structure your CSS.

Decoupling HTML from CSS

Working with HTML, CSS and JavaScript can get a little messy. Jonathan Snook gives you a new insight into coding your CSS that will make the clean up a whole lot easier.

Classes? Where we’re going, we don’t need classes!

Classes, classes, classes everywhere. What if we don’t need CSS classes at all? What if we stopped worrying about how many classes we’re using and what we should be calling them and just finished with them once and for all? Heydon Pickering investigates.

Fundamentals of JavaScript

JavaScript debugging for beginners

Frontend developer David Smith outlines a few of the key features of modern developer tools that can aid debugging JavaScript in your website or application.

Understanding design patterns in JavaScript

Solid design patterns are the basic building block for maintainable software applications. If you’ve ever participated in a technical interview, you’ve liked been asked about them. This tutorial by Tilo Mitra looks at a few patterns that you can start using today.

Key principles of maintainable JavaScript

JavaScript is a curious language. It’s easy to write, but difficult to master. By the end of this tutorial by Jonathan Creamer, you’ll be able to transform your spaghetti code into a five-course meal, full of readable, maintainable yumminess!

Introduction to JavaScript unit testing

You probably know that testing is good, says Jörn Zaefferer, but the first hurdle to overcome when trying to write unit tests for client-side code is the lack of any actual units; JavaScript code is written for each page of a website or each module of an application and is closely intermixed with back-end logic and related HTML.

Which Javascript recipe is right for you?

JavaScript has been called everything from great to awful to the assembly language of the web, but we all use it. A little confused by it all? Find out which recipe works for you with this tutorial.

Build a relationship between CSS and Javascipt

JavaScript is so powerful, so there are a lot of overlaps in capability between JavaScript and HTML (building document structure) and JavaScript and CSS (injecting style information). Learn how to build the relationship you need here.

Write fast, memory-efficient JavaScript

If you care about memory usage and performance, you need to know what's going on in your user's browser's JavaScript engine behind the scenes. Do that and more with this tutorial.

CSS techniques

Master the new CSS layout properties

New CSS properties offer easy ways to lay out web pages. Thomas Lewis of Microsoft walks you through Grid Alignment, Flexible Box and Multi-column Layout.

The problem of CSS form elements

In this tutorial, you'll cover some of the CSS patterns used by web developers to tame the visual layout of form elements.

Swishy CSS3 navigation

CSS3 offers so many possibilities to create cool rollovers on website menus. Dan Voyce explains how he created the effect on Graphite Design’s site.

Master CSS pixels for Retina displays

As screens get smaller and more detailed, web pages will have to change to cope. Sean B Palmer examines the past, and the future, of CSS resolution independence

Minimum paragraph widths in fluid layouts

Incorporating images into your body text can often be a long and frustrating process. Take a look at this tutorial from Gustav Andersson, who has come up with techniques for all your text flow problems.

How to take advantage of the CSS background-size property

Front-end developer Stephanie (Sullivan) Rewis, owner of W3Conversions, takes you through a variety of uses for the CSS3 background-sized property.

Triangle with shadow

Chris Coyier explores different ways to creating shadows behind triangles in CSS.

How to set up a print style sheet

Print styles are often forgotten in the age of responsive web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for readers and show them that you’ve gone the extra mile to deliver a better user experience, says Christian Krammer.

Get to grips with gradients

Essential CSS gradient tips

Tim Van Damme explains the CSS tips he used in a prominent website redesign to make it picture perfect.

How to master CSS gradients

If you're still scratching your head when it comes to CSS gradients, this tutorial from The Book of CSS3 by Peter Gasston provides simple examples that'll have you acting like a pro in no time.

Generate CSS sprites

Make a CSS animated sprite in Photoshop

With new CSS features come opportunities to animate without the need for script. Sam Hampton-Smith demonstrates how to produce a retro gaming-inspired sprite

CSS sprites revisited

While the theory behind CSS sprites is easy enough and its advantages are clear, they often prove to be too bothersome to implement, especially when time is short and deadlines are looming. Niels Matthijs shows how to get round the problem.

Using SpriteCow

An example of creating your own sprite image and using SpriteCow to help with the CSS from Chris Coyier.

Visual effects

Swishy CSS3 navigation

CSS3 offers so many possibilities to create cool rollovers on website menus. Dan Voyce explains how he created the effect on Graphite Design’s site

Short code for parallax scrolling

We're big fans of parallax scrolling here at Creative Bloq - creating the illusion of 3D depth as you scroll is a simple and effective technique. Learn how to write shortest and simplest code to achieve the best from your parallax scrolling website.

How to create progressively enhanced 3D CSS rollovers

Rollovers are a great thing. Principal evangelist for HTML5 and the open web at Mozilla Christian Heilmann explains how to enhance these beauties with 3D CSS rollover effects.

How to build a rotating 3D carousel with CSS

Paul Hayes shows you how to create a carousel for your website that rotates from panel to panel.

A pure CSS3 cycling slideshow

CSS and Javascript often come hand-in-hand but thanks to CSS3, JavaScript seems to be slowly letting go. Alessio Atzeni provides a simple tutorial into the world of CSS3 by creating an infinitely looping slider of images.

How to build a 360 degree image slider with JavaScript

It takes a lot to keep your user's attention and that's why a 360 degree image slider could be your ticket to success. Robert Pataki demonstrates how you can show it off using CSS and JavaScript.

How to create a zoomable user interface with CSS3

In this tutorial, David DeSandro explains how CSS transforms can be used to create a zoomable user interface. He also delves into JavaScript to show you how you can manipulate the zoom.

Master CSS animations

Animated CSS effects with fallbacks

New CSS3 modules enable cool effects, but what about browsers that don’t support them? Opera’s Chris Mills demonstrates a few examples - and styling alternatives via Modernizr.

Getting CSS animations to trigger at the right time

Karl Schellenberg demonstrates how to stagger full-site animations with CSS3 and JavaScript through page scrolling.

A masterclass in CSS animations

From the basics of animation keyframes to expert animation tips that will save you many a headache, Estelle Weyl, web developer and author of HTML5 and CSS3 For the Real World, takes you on a tour of all you need to know to get up and running with CSS3 animations.

Chain CSS animations together with JavaScript

CSS animation is set for widespread adoption. Peter Gasston shows how we can extend its capabilities by mixing and chaining with CSS and JavaScript events.

How to create a clickable accordion with CSS animation

Belgian interface designer and CSS trickster Benjamin de Cock tells you how to create a clickable accordion with the power of CSS3, whilst also discussing the cons of the technique.

Create amazing typography

Texturise web type with CSS

As newer CSS properties, such as text-shadow, gain traction, there’s no limit to what can be done with web type. Trent Walton from Paravel goes a step further by texturising it.

How to preserve vertical rhythm with CSS and jQuery

Vertical rhythm is really important for type-based design approaches. Web developer Matthew Wilcox shows you the basics.

Create a Letterpress effect with CSS Text-Shadow

The Letterpress effect is fast becoming one of the most popular tools in web design. Jump on the bandwagon with Chris Spooner as he shows you the ins and outs with CSS Text-Shadow.

The future of screen typography is in your hands

Andreas Carlsson and Jaan Orvet discuss the way text is changing, thanks to the latest tablets and devices from the likes of Amazon and Apple. Here, they show you how to create and customise your own font file to keep up with the Jones.

How to create a cool anaglyphic text effect with CSS

If you didn't know already, anaglyphs are those 3D images, offsetting two of the red, blue and green channels. If you've ever wanted to make your own, now is the time as Chris Spooner shows you how.

Handling typography for responsive design

You've got your layout and images scaling, but you need to have your type following along as well. One size of type does not fit all line lengths or screen widths, says Val Head.

Dealing with images

How to control image aspect ratios with CSS3

Opera's Chris Mills shows how object-fit and object-position in CSS3 can help to display media consistently throughout a website.

How to get to grips with CSS3 multiple background images

Keeping your HTML clean whilst still adding numerous separate images can be a bit of a headache. Freelance front-end designer Prisca Schmarsow tackles the issue of multiple background images in CSS3.

Responsive web design: the basics

Responsive web design: what it is and how to use it

In the field of web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices, writes Kayla Knight. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option...?

Responsive web design: a visual guide

These days, "one size fits all" is quickly becoming a dated concept. Luckily, with CSS media queries, we can now easily build responsive web designs that accomodate everything from your mobile phone to your massive desktop, as this video tutorial demonstrates.

Braindump on responsive web design

Chris Coyier explains the very basics of what "responsive web design" has come to mean, with examples, related resources, relevant people, tips and tricks, and more.

Build a responsive website

Build a basic responsive site with CSS

Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website.

Build a responsive site in a week: part 1

Interested in responsive web design but not sure how to get started? Don't fret, help is at hand! In a five-tutorial series, Paul Robert Lloyd talks you through the responsive design process, soup to nuts.

Build a responsive site in a week: typography & grids: part 2

In the second part of this series, Paul Robert Lloyd tells us how to translate static page designs into adaptable, fluid websites. So let go of those pixels and learn to love proportions!

Build a responsive site in a week: images and video: part 3

In the third part of this series, Paul Robert Lloyd looks at incorporating images and video into responsive layouts, and describes some of the problems in this area that still need solving.

Build a responsive site in a week: media queries: part 4

In the penultimate part of this responsive design series, Paul Robert Lloyd explains how media queries work, and describes a device-agnostic approach to breakpoints.

Build a responsive site in a week: going further: part 5

In the final part of this responsive web design series, Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries.

Create fluid layouts with HTML5 and CSS3

In this exclusive excerpt from Responsive Web Design with HTML5 and CSS3, Ben Frain explores how to convert pixel-based designs to their proportional equivalents

Design sites using the Responsive Grid System

The Responsive Grid System isn't a framework or a boilerplate. But it does make creating responsive websites quick and easy. Graham Miller, its creator, explains how to use it.

The many ways to mobile

Create a mobile website with jQuery Mobile

Zak Ruvalcaba and Anne Boehm explain how to use jQuery Mobile to create a mobile website.

Create a custom theme in jQuery Mobile

We present an exclusive excerpt from jQuery Mobile Web Development Essentials, on the basics of theming and building and using a custom theme for your app

Build a mobile template with Handlebars

Nathan Smith of Projekt202 explains how to use Handlebars.js to build lightweight HTML templates for JSON data.

Getting started with PhoneGap

In an excerpt from the PhoneGap Beginner's Guide, Nitobi/Adobe's Andrew Lunny shows you how to set up and build simple and effective apps for BlackBerry, Android and iOS.

Going mobile with ExpressionEngine

Websites are now viewed consistently on the move, so when developing them, it's important that the website looks great in all formats. Erskine Design's Garrett Winder shows you how to go mobile with ExpressionEngine.

Improving the mobile user experience

Raising the bar on mobile

Scott Jehl shows you how to decrease browser functions to make more room on the screen for your designs.

Build a smart mobile navigation without hacks

Aaron Gustafson explains how to build a progressively-enhanced, CSS-based dropdown that works as part of a responsive design.

How to improve user interface design for Android apps

If you want your mobile app to stand out from the crowd, take a look at this tutorial from co-director of Bitmode Ltd, Richard Leggett. He'll show you how to style and theme your app to make it go the distance.

Produce the perfect portfolio site

Create a page turn effect

Joe Lambert walks you through creating a stunning page turn effect to enhance a portfolio image gallery.

Develop a one-of-a-kind CSS/JavaScript-based game portfolio

A portfolio is a must-have for any designer or developer who wants to stake their claim on the web. With a bit of HTML, CSS and JavaScript, you can have a one-of-a-kind portfolio that capably represents you to potential clients.

Awesome Cufonized fly-out menu with jQuery and CSS3

Mary Lou knows how to get the best out of your website menu. Whether it's for an online portfolio or just for fun, take a look at this tutorial which will add two great features to your menu.

Create forms your users will love

Build a login form for your mobile app

Alexandra Klenova shows you how to implement a login form for your mobile app using CSS and JavaScript framework DHTMLX.

Design a prettier web form with CSS3

Do you feel like your website needs a face lift? Thanks to advanced CSS and JavaScript properties, you can now turn even the dullest of homepages into something beautiful. Matt Hedberg shows you how.

Build a mobile-friendly form with email domain suggestion

So, you're happy as Larry that you've finally converted your web design for mobile use. But what about those pesky forms your users just have to fill out? Jim Nelson shows you how to go above and beyond to make your users happy.

Build your own ecommerce store

How to build an ecommerce store with LemonStand: part 1

This tutorial guides you through the murky world of setting up your own e-commerce store using the LemonStand platform. Phil Schlam also talks you through the basics of creating a theme.

How to build an ecommerce store with LemonStand (pt 2)

In this second part of the LemonStand tutorial, Phil Schlam continues to explain the content options, the shopping cart, product page and check out. Follow these tutorials and you'll have your store up and running in no time.

Build an image editor

Build an image editor with EaselJS

Maciej Sopylo shows you how to create a full-blown picture editor that will be on the same level as most desktop applications.

Build a canvas image editor with Canvas

This tutorial by Dan Wellman shows you how to rotate, resize, translate and even add subtle colour manipulation to your images.

Harness the power of Twitter for your site

Create a data driven Twitter avatar

Matthew Knight explains why you don’t need to be a genius to make simple digital toys – just build upon the genius of others and make use of Google Apps Script.

How to style Twitter posts on your site with CSS3

Listing your tweets can look a bit boring. Zoe Mickley Gillenwater, author of Stunning CSS3 tells you just how to improve the look of your Tweet lists with the new properties and selectors of CSS3.

How to build a Tweet map with SVG

Divya Manian reveals how to create dynamic visualisations using Polymaps, a library that makes it trivial to create and manipulate map data in SVG.

Create retro designs

Create awesome retro designs with Photoshop and CSS

Retro graphics never go out of style. Illustrator and designer Naomi Atkinson reveals some awesome Photoshop and CSS tricks to give your designs a real vintage feel.

How to make a super simple animated background

Designer, illustrator and .net Awards nominee Mike Kus explains how he built an amazing 404 page for .net magazine. This tutorial shows you how to make a very simple background with an animated GIF using Photoshop and a dash of CSS.

Build awesome prototypes

How to quickly build a prototype to test on any device

Prototypes can be a bit of a pain, so take a look at this brilliant advice from Jonathan Smiley. He shows you how to use Foundation to quickly build a prototype you can test and build onto for any device.

How to build prototypes in HTML and CSS

Leisa Reichelt held a workshop teaching how to build prototypes in HTML and CSS. Here, Anna Debenham puts it all into a perfect summary for all your prototyping needs.

Advanced CSS

An introduction to Object Orientated CSS (OOCSS)

We can all agree that decent content creation reigns supreme when it comes to attracting those unique visitors. Here, Louis Lazaris introduces you to the often overlooked concept of object orientated content using the OOCSS framework.

Diving Into CSS Regions

This tutorial covers the basics of CSS Regions, which allow us to flow content within various sections of the page.

An introduction to the CSS Flexbox module

CSS always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionised front-end development? This tutorial talks about Flexbox, a module that's causing a similar change in the way we lay out web pages.

Get started with Less & Sass

Create faster fluid layouts with LESS

Paul Mist explains how to code dynamic CSS with LESS and how we can make use of variables, mixins and functions to speed up the creation of fluid layouts

How to code smarter CSS with Sass

Not managed to get your head around Sass yet? No problem. Christopher Eppstein explains how to use this style sheet language, which makes your style sheet as beautiful as your web page.

Get yourself preprocessing in just a few minutes

There's nothing to be afraid about in this brave new world of preprocessing. In this video Chris Coyier walks you through a simple project that uses Jade and Sass.

How to improve your responsive design workflow with Sass

Once you've got Sass sorted, take a look at this tutorial with Ryan Taylor. Not only can Sass help to maintain your style sheets, it can actually improve your responsive layout workflow. Need we say more?

Refactoring CSS into SASS

Handcrafting CSS from the start is a great move but more often than not it can become difficult to manage. Eugene Fedorenko explains how to overcome the hurdle and successfully redesign your style sheets.

Improve your JavaScript technique

Make your JavaScript apps smoother

A growing amount of real-time content is being written in JavaScript. Ashley Gullen shows how to avoid pauses caused by garbage collection for a smoother experience.

Get started with jQuery Masonry

Luke Shumard provides a crash-course in David DeSandro’s Masonry, a jQuery plug-in that’s ideal for both novice and intermediate web designers.

Build an immersive environment with CSS and JavaScript

Technologist Benjamin Bojko and art director Dan Mall show us how they created Activatedrinks.com. They'll show you how to build an immersive environment using CSS and JavaScript.

JavaScript profiling with the Chrome Developer Tools

Site performance is about two things, writes Zack Grossbart: how fast the page loads, and how fast the code on it runs. Plenty of services make your website load faster, from minimisers to CDNs, but making it run faster is up to you. Grossbart explains how to go about it.

Useful jQuery function demos for your projects

Every aspiring web developer should know about the power of JavaScript and how it can be used effectively to enhance the ways in which see and interact with web pages, writes Sam Deering. Fortunately, to help us be more productive we can use the power of JavaScript Libraries.

A quick look into the math of animations with JavaScript

There is a lot of math in the visual things we do, writes Christian Heilmann, even if we don’t realise it. If you want to make something look natural and move naturally, you need to add a bit of physics and rounding to it.

Fantastic JavaScript tools

JS Bin: Built For Sharing, Education And Real-Time Rendering

JS Bin is one of the very first public paste bins with the output rendered live in your browser and available to share and edit with the completed output. It’s free to use all its features and it’s available on Github. Remy Sharp explains how to use it.

Get started with WebRTC

Andi Smith demonstrates how to use Web Real Time Communication to control webcam and microphone streams using JavaScript APIs

How to create web animations with Paper.js

For some of us, animation can be a daunting prospect. It can however, improve your site to its fullest potential (and it looks cool too!). Zack Grossbart gives you his tips on how to develop a range of animations from the neat to the very, very messy.

10 reasons why your projects should use the Dojo Toolkit

The most powerful and underutilised JavaScript utility is one and the same: the Dojo Toolkit. David Walsh covers many of the most powerful features of the Dojo Toolkit, and in doing so makes the case for why you should use it for your next project.

Simplify your JavaScript with CoffeeScript

CoffeeScript helps generate readable code. Jonathan Barrett walks you through validating an online form to demonstrate how.

Journey through the JavaScript MVC jungle

There are modern JavaScript frameworks that can assist with bringing structure and organization to our projects. Addy Osmani explains how to get started with them.

Give Knockout a try

Rapid and responsive UI development with Knockout.js

Umbraco developer Matt Brailsford takes you through creating a sample application using Knockout to simplify interactions and responsive interfaces.

How to integrate Knockout.js with third-party libraries

In this second part of the Knockout tutorial, Matt Brailsford shows you how to integrate the program with existing software. You'll be a Knockout whizz once you're finished.

Build an image gallery with Knockout

New JS libraries are making rapid development of complex interfaces a breeze. Stephen Fulljames builds an image gallery to showcase the power of Knockout.

Fantastic jQuery projects

Make a better FAQ page with jQuery

Learn a jQuery expand and collapse technique that will be useful in many situations.

Spice up your personal site with jQuery

Joel Besada shows you how to take a personal site with a common text document layout, and create something far more interesting with the jQuery Scroll Path plug-in

How to create an interactive street view with jQuery

Severin Klaus explains how Hinderling Volkart created an innovative method of scrolling through video for its 360 degree Langstrasse website. Impressed? Well, this tutorial will show you just how you can do it for your very own site.

How to get more out of your CSS transitions with jQuery

CSS transitions can sometimes use a little help from jQuery for better control. Val Head explains just how you can get to grips with it.

How to create a cute pop-up bar with HTML5, CSS and jQuery

Similar to a 'hellobar', Eric Hoffman shows you how to create a cute pop-up bar and use it to your advantage. It has only been tested in Chrome and Safari, so be aware it may not work in other browsers!

Tripping the DOM fantastic with jQuery

Jay Blanchard, author of the book Applied jQuery focuses on the DOM tree traversal methods in jQuery.

Build a colourful clock with CSS and jQuery

Countdown clocks can give your website the edge it needs to stand out. Martin Angelov walks you through the project.

Amazing tools to discover

PrefixFree: Break free from CSS prefix hell

Using CSS regularly can often come with its frustrations. Fear not as Lea Verou, well-known for her experiments with CSS and JavaScript, presents her most recent free tool, PrefixFree. Banish the prefix blues!

A new front-end methodology: BEM

Vavara Stepanova investigates BEM ('Block Element Modifier'), a front-end modifier that's created a new way of thinking when it comes to web interfaces.

Use Gridpak to roll your own responsive grid

Another free tool to make your design life that little bit easier. Gridpak comes from Erskine Design and enables you to quickly generate your own responsive grid. However, it can be a little tricky so here, Joshua Jackson gives you an extensive introduction.

Start your project right with Modernizr

The HTML5 Boilerplate includes the feature-detection library Modernizr. Learn how to take full advantage of what this feature-rich JavaScript library has to offer when you start a new project.

Cool HTML5 projects

Build a cross-platform HTML5 game

Ibon Tolosana and Iker Jamardo Zugaza show you how to get to grips with cross-platform HTML5 game development using Canvas.

Create a Pong game

Classic games such as Pong will never grow old with your users. That's why Carlos Yanez has created this simple tutorial on how to develop your very own version using HTML5, CSS and JavaScript.

Build an MP3 player

A little music to the ears can often inject some much-needed personality into your website. Here, James Tyner shows you how to create your own MP3 player.

Create a mobile version of Snake

We all know and love the classic game of Snake, and Eoin McGrath shows you how to bring it into a brave new world using HTML5 Canvas and JavaScript.

Create a hangman game

Ah, the never-aging game of Hangman. We all love to play it and so will your users. James Tyner shows you how using HTML buttons for the input and JavaScript to provide the gamelogic.

Create audio visualisations

Nick Jonas shows you how to synthesise audio-driven animation into your web applications with a few easy steps.

Save the day with Scoped CSS

One little known feature of HTML5 is Scoped CSS. It's an attribute for style blocks that may change the way we tackle certain styling challenges in the future, as Chris Coyier explains here.

And finally...

Building your own widgets

Léonie Watson of Nomensa explains how DIY widgets can still play a significant role in overcoming barriers to accessibility.

Build a beautiful calender widget

Calenders are often an overlooked yet important aspect of web design. Andrew Burgess steps in to show you how to build a quick but effective widget using CSS and JavaScript.

Build a real-time commenting system

Adding real-time functionality to an app can result in a more interactive and engaging user experience. But setting up and maintaining the server-side real-time components can be tricky. Phil Leggetter offers a solution using HTML5, CSS and JavaScript.