CSS-Tricks - HTML5 Resource of the Day

Brent Schooley / Monday, August 5, 2013

It’s been a while since I have done one of these, but I’m back with another great HTML5 resource for you today. Today’s resource is CSS-Tricks. Although CSS-Tricks is primarily known for its namesake tips and tricks for doing cool things with CSS, the site offers many other things modern web developers might find useful. Read on to see what this site has to offer you.

css-tricks

Snippets

The snippets section of the site contains the “tricks” you might be looking for when you land on a site like this. Each snippet is a quick tip for accomplishing a specific task in a specific aspect of web programming. Note that this is not limited to just CSS. There are snippets for HTML, CSS, htaccess, PHP, JavaScript, jQuery, and WordPress. Chances are if you are doing web programming or design, you will find something useful here. Here is an example snippet for creating a “stitched” look in CSS:

stiched-snippet

Gallery

The gallery section of the site is a collection of images that show off sites that use creative CSS. These can be browsed by tags, so if you are looking for a particular type of CSS tricks this might be a good way to find them. Each item in the gallery links off to the originating website so you can explore what they did to accomplish their design.

gallery-example

Videos

There are a ton of video guides in the video section of CSS-Tricks. In fact, the latest one is #126. These are definitely worth checking out if you are the type that learns well from video.

video-example

Almanac

The Almanac is a CSS reference that is broken up into CSS Selectors and CSS Properties. It is set up like an alphabetized index and allows you to quickly look up the definition and examples of anything listed in it. There are many things like this on the web, but this one is pretty informative.

Demos

The Demos portion of the site is really useful. It contains a ton of JavaScript and CSS demos that include both a live demo on the web and downloadable files for each demo. This is a great way to learn how to do new things.

demo-sample

Summary

CSS-Tricks is a great resource for the modern web developer. It contains a ton of useful snippets, demos, and videos. I would subscribe to this one and spend a few hours going through it. I guarantee you will find something useful here.

Contact

If you want to comment or reach out to me, the best place to do that is on Twitter @brentschooley. I can also be reached via email at bschooley@infragistics.com.