These are just a list of sites I’ve compiled that I utilize to make Tumblr themes. Some include tag references, cheat sheets, tutorials, etc. Useful for those skilled in making Tumblr themes or anyone who wants to start out!
(Links that are bold, I’ve either found particularly helpful or I use them often.)
HTML
- HTML Tutorial
- HTML4 Tag Reference
- HTML5 Tag Reference
- HTML Quicklist
- HTML Cheatsheet (For reference / a cheat sheet / a memory jogger)
- HTML Validator (Test HTML & make sure there are no syntax errors, etc).
- CSS/HTML Cheatsheet (Type in a tag to get syntax/etc info for it)
CSS
- CSS Tutorial
- CSS Reference
- CSS Validator (Validate CSS and check for syntax errors)
- CSS Compressor (Compresses CSS with custom options)
HTML Color Codes
- HTML Color Names (Names for 100+ colors supported by all browsers)
- HTML Color Mixer (Mix 2 colors and see the colors in between the 2)
- HTML Color Picker (Pick a color and get lighter/darker shades of it )
- HTML Color Reference (Just another list of HTML colors)
- Color Chart - HEX (Web-safe color chart, in HEX format)
- Color Chart - RGBA (Web-safe color chart, in RGB format)
- Color Lab (Put together swatches of colors to see how they look)
- Color Swatches (Great resource of color swatches, for download & use in Photoshop, desktop popup references, etc!)
- Ultimate CSS Gradient Generator (Online gradient editor similar to Photoshop; very powerful and useful; gives you CSS code that is compatible in all browsers—including IE!)
- HTML Color Codes (Very useful color chart and color picker, I use this a lot!)
JavaScript / jQuery
- JavaScript Tutorial
- JavaScript and HTML DOM Reference
- jQuery Tutorials (Great place to get started learning jQuery)
- Tutorial: How jQuery Works (Don’t know what jQuery is & want to learn? Read this!)
- jQuery API (jQuery API -basically a reference of jQuery functions)
- The Ultimate jQuery List(Lots of jQuery plugins, etc)
- jQuery Easing Plugin (VERY useful if you code JavaScript/jQuery!)
Miscellaneous
- HTML Symbol Entities Reference
- HTML Arrow Symbols
- All Text Symbols (A whole shit load of various symbols)
- Lorem ipsum… Generator (Generates placeholder text)
- Dafont (1,000’s of fonts in different categories—all free to download and use!)
- Online Image Optimizer (Optimize images online—GIF, JPG, & PNG)
Resources On Tumblr
- Creating a custom HTML theme (This page has been one of the most helpful with familiarizing myself with how to code themes for Tumblr. It’s basically a list of all Tumblr’s custom variables, which are essential in building a theme. They’re like placeholders for content, that tell what to put for a text post, where the description goes, etc. Very useful, and I still reference it now to make sure I get the correct spelling or format of a variable!)
- Static File Uploader (This is very important, for those of you that like adding custom images or scripts to a theme. Files such as that should be hosted externally so as to not slow down the page-load time with a bunch of code, and Tumblr only lets you use files in your themes that are hosted by them. (Also, Tumblr has a size limit for your theme code, so cut that down by hosting your CSS and JavaScript externally). So here, you can host image files, CSS, JavaScript, or even font files. But don’t use it as your own personal file hosting—Tumblr will ban your account if you do so. Only use it for theme assets.)
- Theme Submit Form (Once you complete a theme, submit it to the theme garden! Pay attention to the theme requirements on the right side of the screen; especially #4 which tells you which tags you must use at least somewhere in your theme. If you don’t, then it’ll reject your theme when you try to submit it. And even if the moderator feedback turns out to be that it’s not a complete theme or something like that, once you submit it to the theme garden, by going here, you can get the link to install your themes and distribute them manually through your own Tumblr or other sites. While some people just give their code away and don’t bother with the theme garden, it’s much easier for people to use your themes if all they have to do is press the “Install” button, rather than copying and pasting a bunch of code, which might confuse some people. So all in all—it’s a good idea to submit your themes to the Theme Garden. Even if they don’t get accepted, you can still distribute the link manually!)
