Monday, 6 August 2012

101 CSS and JavaScript tutorials to power up your skills

We round up 101 of best CSS and JavaScript tutorials from around the web. Check them out: one of them 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 101 of 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 recommendW3schools, 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

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.

CSS techniques

Quick overview of CSS position values

A beginner-level overview of the different values for CSSposition and what they do from Chris Coyier.

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

 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.


Log in to Creative Bloq with your preferred social network to comment


Log in with your Creative Bloq account

Ads by Google

No comments:

Post a Comment