A round-up of the very best CSS and JavaScript techniques from around the web, which include advice on building great websites, creating stores and designing apps.

CSS and JavaScript tutorials

1. 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.

2. Discover the power of CSS3 selectors

To style an element with CSS, you need to be able to target it. Rich Clark gets on the case, showing 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…

3. 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.

4. 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 that makes your style sheet as beautiful to read as your web page.

css2 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Learn how to build an interactive widget.

Prototyping and demo wisdom

5. 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?

6. 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 ZURB design lead Jonathan Smiley. He’ll show you how to use Foundation to quickly build a prototype you can test and build onto for any device.

7. How to take full advantage of the CSS background-size property

The changes brought in by the various CSS3 modules late last year were pretty exciting for designers and front-end developers alike. Front-end developer Stephanie (Sullivan) Rewis, owner of W3Conversions, takes you through a variety of uses for CSS3 background-sized property.

8. 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.

css tutorials beercamp 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Create a zoomable web interface.

Give Knockout a try

9. 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.

10. 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.

11. How to implement Google Custom Search into WordPress

If, like many designers, you’re a bit fed up with the basic WordPress search function then take a look at this. Paul Maloney shows you how to replace it with a much broader, super-powered Google Custom search engine.

12. How to code a real-time survey with HTML5 WebSockets

If you’ve always wanted to build a demo app but you’ve never been sure where to start, look no further. Phil Leggetter explains how to use WebSockets and Pusher, plus how to layer a user experience onto an app using progressive enhancement.

css6 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Create perfect background gradients.

Getting to grips with gradients

13. 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 Gasson provides simple examples that’ll have you acting like a pro in no time.

14. Essential CSS gradient tips

Still can’t get enough of our CSS and JavaScript tutorials? Tim Van Damme explains the CSS tips he used in the Gowalla redesign to make it picture perfect.

15. A masterclass in CSS animations

Save yourself some time and take a look at this CSS round-up by Estelle Weyl – web developer and author of HTML5 and CSS3 For the Real World. It has everything you’ll need to know to really get started with CSS3.

16. 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.

css tutorials accordion 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Create a clickable accordion.

Create 3D rollovers and carousels

17. 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.

18. 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.

19. How to make a super simple animated background

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

css4 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Create eye-catching retro designs using CSS.

Control images and create retro designs

20. How to 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.

21. How to control image aspect ratios with CSS3

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

22. 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.

css tutorials style twitter 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: How to style your Twitter feed.

How to make Twitter better

23. 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 new properties and selectors of CSS3.

24. How to build a Tweet map with SVG

Ever wanted to know what the world tweets? Now you can with Divya Manian of nimbupani.com, who reveals how to create dynamic visualisations using Polymaps, a library that makes it trivial to create and manipulate map data in SVG.

How to use CSS transitions with jQuery

25. How to create a diagonal rotation with CSS transitions and jQuery

Web designer Josh Miller shows you how to order your lists into an impressive diagonal rotating portfolio using CSS3 and jQuery.

26. 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.

css5 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Learn how to create an interactive street view.

Create interactive street views

27. 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.

28. 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.

29. Tripping the DOM fantastic with jQuery

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

css tutorials dom 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: DOM tree traversal methods explained.

Build your own e-commerce store

30. How to build an e-commerce store with LemonStand (pt 1)

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

31. How to build an e-commerce 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.

css7 75 top CSS and JavaScript tutorialsCSS and JavaScript tutorials: Go mobile with ExpressionEngine.

CSS for your mobile

32. How to build a login form for your mobile app with DHTMLX Touch

Web developer Alexandra Klenova shows you how to implement a log in form for your mobile app using Javascript framework DHTMLX.

33. 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.

34. Getting started with PhoneGap

An exert 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.

Make way for more mobile

35. Building 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 from Tuts+ shows you how to go above and beyond to make your users happy.

36. Raising the bar on mobile

24 ways is a fantastic site, offering the very best archived tutorials. Here, Scott Jehl shows you how to decrease browser functions to make more room on the screen for your designs.

37. 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.

Get Gamey with Snake

38. How to create a mobile version of Snake with HTML5 canvas and JavaScript

We all know and love the classic game of Snake, so why not take a look at this tutorial to bring it into a brave new world? Eoin McGrath, co-founder and lead developer at boutique web studio Starfish shows you just how to do it using HTML5 Canvas and JavaScript.

39. How to create an HTML5 Hangman game with Canvas: The basic gameplay

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.

40. Create a Pong Game in HTML5 with EaselJS

Classic games such as ping-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.

pong 75 top CSS and JavaScript tutorialsGet your head in the game with ping-pong

Immerse yourself in JavaScript

41. How to 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.

42. 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 of Waste Creative demonstrates how you can show it off.

HTML5 visuals

43. Create HTML5 audio visualisations

Senior Interactive Developer at B-Reel, Nick Jonas shows you how to synthesise audio-driven animation into your web applications with a few easy steps.

44. Writing Unit Tests For WordPress Plugins

As soon as your website starts to rack up its users, updates can make even the savviest of developers quiver. Here, Smashing Magazine‘s Zack Grossbart shows you how to compile unit tests to ensure nothing ever goes wrong again. Well, hopefully

45. 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.

wordpress 75 top CSS and JavaScript tutorialsGet it right with WordPress unit tests

Form filling frustration

46. Refactoring CSS into SASS

Handcrafting your 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.

47. Triangle With Shadow

We won’t bore you with how to make triangles in CSS because you will most likely already know how to do that. Instead, CSS-Tricks Chris Coyier explores the alternatives in creating shadows behind them.

New toys to play with

48. A new front-end methodology: BEM

The sixth article in Smashing Magazine’s series that introduces the latest free tools, Vavara Stepanova discovers BEM. Standing for ‘Block Element Modifier,’ it’s a front-end modifier which has created a new way of thinking when it comes to web interfaces.

49. 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, you can quickly generate your own responsive grid. However, it can be a little tricky so here, Joshua Jackson gives you an extensive introduction.

50. 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 those prefix blues!

51. Rapid Prototyping For Any Device With Foundation

Are you yearning for responsive web design? Take a look at this offering from ZURB – Foundation is a framework which helps to build prototypes and production code that’s truly responsive.

spiffy quiz 75 top CSS and JavaScript tutorialsGet more input from your users with a quiz

Impress with cuteness

52. 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!

53. Build a spiffy quiz engine

Quizzes can often entice more user input, which can only mean one thing – why haven’t you got one? Here, Siddharth gives you a quick preview into how to create your own mini quiz version.

54. How to create web animations with Paper.js

For some of you, animation can often 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.

Get the right effect with text

55. 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.

56. 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’.

57. 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.

Secrets of CSS

58. Saving the Day with Scoped CSS

Sometimes, your CMS won’t do everything you tell it to, or want it to. Arley McBain of Thrillworks spills the beans on some of CSS’ secrets and shows you how to make your stream stand out.

59. Asynchronous Search With PHP and jQuery

Widgets – you either love them or hate them. Either way, it’s probably important to understand how to create widgets to ensure you are making your user’s visit as smooth as possible. Here, Dan Wellman shows you how to do just that using jQuery.

60. Build a colourful clock with CSS and jQuery

Count down clocks can give your web site the cute edge it needs to standout. Take some time out and get to grips with this tutorial from tutorialzine.

colourful clock 75 top CSS and JavaScript tutorialsCreate your own colourful clock with tutorialzine

Content is King

61. 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.

62. 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.

63. Power a Facebook page using WordPress

In this tutorial, Aaron Lumsden shows you how to improve your Facebook page using WordPress as a CMS. Starting with design styles and coding, Aaron will then show you how to easily install the whole thing into the social network.

Image Editing

64. Build an Image Editor With EaselJS, jQuery, and the HTML5 File API

HTML5 is more popular than ever and the major browsers are starting to support it’s API (application programming interface) Here, Maciej Sopylo shows you how to create a full-blown picture editor that will be on the same level as most desktop applications.

65. Build a canvas image editor with Canvas

For those of us that don’t have time for Photoshop editing, there’s always CSS and Javascript tricks. This tutorial by Dan Wellman will show you how to rotate, resize, translate and even add subtle colour manipulation to your images.

66. A pure CSS3 cycling slide show

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. Be careful though, some browsers don’t support CSS3!

maths 75 top CSS and JavaScript tutorialsMake maths more fun with CSS and Javascript

Get ahead with a striking menu

67. Awesome Cufonized Fly-out Menu with jQuery and CSS3

Mary Lou knows how to get the best out of your web site 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.

68. A quick look into the math of animations with Javascript

Nobody likes maths (unless you do. In which case, sorry!) Christian Heilmann breathes new life into the school subject, with a look at how Javascript can help.

69. Integrating FitVids.js into WordPress

Thanks to difficult sizing, you can have endless amounts of trouble when uploading video content into WordPress. Here Chris Coyier explains how you can get your video looking great.

Tutorials for big kids

70. Mental model diagrams

As much as we all love tutorials, they can often leave you bewildered when faced with a mountain of text instructions. Indi Young and Brad Colbow put their own spin on things by showing you what your users want in comic strip form!

71. Build a HTML5 MP3 Player with Soundmanager 2

A little music to the ears can often inject some much-needed personality into your website. Using Javascript – with a little help from Flash – James Tyner shows you how to create your own MP3 player.

72. Radio Buttons with 2-Way Exclusivity

More and more websites are in need of a little UI upgrade and radio buttons aren’t a bad way to go about it. Chris Coyier shows you how to develop your own grid of radio buttons in a few simple steps.

calender 75 top CSS and JavaScript tutorialsCreate your own Calender widget

Be selective

73. Building a simple CSS Selector Engine

When it comes to building a selector, we often use both CSS and Javascript libraries and selectors to get the job done. Andrew Burgess strives to simplify the process with this quick tutorial.

74. How to build a beautiful Calender widget

Calender’s are often an overlooked yet important aspect of web design. Once again, Andrew Burgess steps in to show you how to build a quick but effective widget using CSS and Javascript.

And finally…

75. Design a Prettier Web Form with CSS 3

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.