Over a million developers have joined DZone.

CSS-Tricks: HTML5 Resource of the Day

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This post comes from Brent Schooley at the Infragistics Blog.

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 trick this might be a good way to find it. Each item in the gallery links to the original 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.



Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}