I thought I’d share two particular resources that I have found highly useful.

Nettuts+

Part of a larger collection of educational resources from Envato, Nettus+ offers online tutorials on HTML, CSS, Javascript and PHP, along with a large number of popular libraries like jQuery.

Additionally, they have full “courses” — usually a lengthy series of video tutorials — they offer via a subscription fee.

When Nettuts+ launched their premium service last year they offered a course titled “30 Days to Learn HTML and CSS” for free. That course is still available as a no-cost example.

Tutorials are usually instructed by Editor Jeffrey Way, who I find to be an astonishingly knowledgeable and effective educator.

Envato also offers Wptuts+ for WordPress developers and Webdesigntuts+ for those on the design side. Many more tutorial collections are available at the Tuts+ Hub.

CodeCademy

Those that prefer hands-on coding should be sure to check out Codecademy.

The resource focused solely on javascript at launch, but has since expanded into HTML and CSS.

Instead of articles or video tutorials, Codecademy offers live problems the user must correctly solve to advance. The site is careful to introduce users slowly as to not scare away those brand new to coding languages. Those who begin the javascript track, for example, receive the following as their first question:

Hey! Let’s get to know each other. What’s your name?

Type it with quotes around it like this “Ryan” and then press enter on your keyboard.

Users of the site are rewarded for correct answers with points and badges. There are more than 500 excercises in the javascript track alone.

Tumblr has added a second theme I designed and coded to their template offerings.

The Hipster theme can be installed by following this link.

• How long will it take before I know if the theme is approved?
• Did I submit everything correctly?
• How do I delete my duplicate theme submission?

Unfortunately, there are no quick answers.

After submitting your theme, you will be given access to a theme management page. The link appears at the top of the Theme Garden upon login.

Inside will be listed your theme name and a link you may use to manually share your theme with others while it’s under the review process.

And that’s all that is provided. You may click on your theme name to make changes to what you have submitted, but otherwise … crickets.

I checked on the status of my theme almost daily for the first week after its submission. No change. I checked on it a couple times the second week. Nothing. I checked in maybe once the third week. Still nothing. At the end of that third week, I had discovered it had been approved.

You can probably expect a similar time frame.

If you are worried about submitting everything correctly, be sure to review the submission checklist thoroughly. They provide it in the sidebar directly on the submission page as seen below. Since you enjoy coding enough to build your own theme, you probably are skilled at paying attention to detail, so hopefully this won’t be a problem.

Be careful when you submit your theme. Tumblr hiccuped when I submitted mine and I resubmitted, which gave me two entries of the same theme. I don’t know if it is a consistent problem. If you DO accidently double submit your theme and figure out how to delete the duplicate, please let me know. I’m still trying to solve that issue myself.

Here’s a detailed list of features:

Color Selection:

• Background Begin Gradient
• Background End Gradient
• Blog Title
• Post Titles
• Links

Font Selection:

• Title font (includes blog title, post titles and side navigation)
• Body font

Toggle on or off:

• Header image box shadow (when a header image is uploaded)
• Show post author
• Show Tumblr portrait
• Show blog description
• Show following

Upload:

• A header image

Quickly enter:

• Disqus shortname
• Flickr ID (what’s my ID?)
• Google Analytics
• Twitter account (Be sure you connect your Tumblr & Twitter accounts under settings).

Feel free to leave questions and comments below.

UPDATE: 1.01 released on 2/22. Streamlined Twitter integration. Updated theme options. Added link to this blog for questions.

If you are a fan of simple, clean, easily customizable templates, you will enjoy the Markus theme.

The free theme allows users to quickly change colors, headlines and fonts.

The theme is also optimized for Disqus comments, Twitter, Flickr and Google Analytics.

The best way to get the full experience is to install it yourself.

UPDATE: The theme has been added to the Tumblr Theme Garden. Users can find information on updates and support by following this link.

After polishing up my custom WordPress theme this morning, I happy to report that this site is now backed by the WordPress CMS.

I built Rick Markus 1.0 from scratch to mirror the look of the site when it was ran solely on HTML and PHP files, so returning visitors might not notice much of a difference.

It’s fulfilling to break away from pre-made themes, especially considering the popularity of WordPress around the Web.

• In your dashboard go to Users, choose your profile and then check “Disable the visual editor when writing.”

Next, you have to install a plugin that lets you choose to keep your page in it’s raw code form. I chose Text Control, as recommended in the WordPress codex. Note: There seems to be a newer version (2.3) if you choose to install the plugin from inside the WP dashboard, but I couldn’t get it to work properly.

• Install Text Control.
• Go to the page you want to include JavaScript on and make sure there’s a saved version/draft. The plugin options may not appear in the backend of the individual page until there is a saved version.
• From Text Control’s two drop-down menus, choose “No Formatting” and “No Character Encoding”.

Next you have to create a JavaScript file and upload it to your server. Put all of the JavaScript defining code in that file. All functions and variable creations go in in there.

So for instance, if you have the following code:

<script type="text/javascript" charset="utf-8">

	function myFunc() {
	sum = 5 + 10;
	return sum;

	}

	myFunc();

</script>

You would put this in a .js file:

	function myFunc() {
	sum = 5 + 10;
	return sum;

	}

• Upload your JavaScript code to the server. I put mine in a folder called “scripts”.
• Finally, call to your javascript to run from inside your WordPress page.

Following the above example, we would post the following code into the WordPress page we want to run the JavaScript:

<script type="text/javascript" src="http://www.yourdomain.com/scripts/yourjavascriptfile.js"></script>
<script type="text/javascript">
<!--
myFunc();
//--></script></pre>

“myfunc();” is the call to action that fires up your JavaScript code from the .js file.

That should do it!

Forget Yahoo! Pipes, or Google modules or RSSinclude. There’s an WordPress plugin called Embed RSS that is all you need.

It places a button up in your post/page editing links that lets you enter an RSS feed on the fly. You can choose the number of items posted and whether to include post content, author or dates published. The drop down menu appears to limit users to posting 1-20 or 100 links, but if you edit the number in HTML view, you can choose mid range output, like 50 links.

This plugin would have saved me some time, but it hid from me quite well over the past month.

Most clients will reject third-party ads on their site. Otherwise, the plugin runs smoothly. Although I didn’t like the print popup box’s green color (which isn’t quickly changed in settings), I considered removing the ads legitimately with the plugin’s ad-removal fee ($4 a month).

I also tried some other print friendly plugins, but liked them even less.

Luckily, WordPress has this great “how to” codex for setting up your own printer-friendly styling via CSS. It walks you through it pretty nicely, although I noticed some repetitive code in their final example of printer-friendly CSS.

Depending on the WordPress theme you are using, the code you need could end up quite different than this, but here’s what I ended up using for PageLines’ WhiteHousePro3 theme:

/* Print Style Sheet */
@media print {
body {background:white;
font-size:10pt;
margin:0 }
#header { height:75px;
font-size: 24pt;
color:black }
#content { margin-left:0;
float:none;
width:auto;
color:black;
font-size:12pt }
#maincontent a { font-weight:normal;
color:black;
text-decoration:underline }
#contentcontainer { display:block }
#contentborder { display:block }
#comments { display:none }
#commentform { display:none }
#sidebar { display:none }
.post-footer { display:none }
#footer { display:none }
#widgets{ display:none }
#wrapper { display:block }
#nav { display:none }
#subnav { display:none }
#header { display:none }
#grandchildnav { display:none }
#overview { display:none }
#searchform { display:none }
#sidesearch { display:none }
#morefoot { display:none }
#searchsubmit{ display:none }
#welcome { display:none }
#fcolumns_container { display:none }
#subfoot { display:none }
#cred { display:none }
#calendar-wrap { display:none }
#wp-calendar { display:none }
#caption { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }
img { display:none }
.right { float: right; }
.left { float: left }
margin: 0 7px 2px 0;
display: inline; }
img { display:none }
}

I opted to remove the images from printing in the above example.