Here are some HTML and CSS tutorials on solutions I have come up with for issues I've run in to in the past. Also I include some freebies for your use. You may use these as you wish, credit always appreciated but not required.

Send a message
 

Vertically center an object using CSSEasy difficulty

Sure, horizontally centering text and elements on the page is easy. Simply use the text-align: center or the center tag. The trouble arises when you'd like to center an element vertically, nothing seems to work short of using tables. Fear not, there is a simple way! I guess you could call it a hack but its lightweight enough to use whenever needed.

This

centered inside this

View How

Quick twitter/tumblr/instagram unfollowFreebie

Twitter, Tumblr and Instagram followers can sometimes get out of control. If you're looking to unfollow a significant amount of followers I have two ways to do this. I will outline using tumblr as an example.

First you will want to install iMacros to your browser as an addon. Chrome imacro or Firefox imacro

Unfollow all from tumblr:

Login to your tumblr account and go to your Tumblr following page

Next, open your iMacros addon in your browser. Click record to record a new action. Do nothing and hit stop. A window should now appear showing you a code snippet. (Don't hit save just yet)

Delete all the code in that window and replace it with the downloaded code provided titled tumblr-unfollow-all.txt. Then hit save.

While on your following page, click the iMacro you just created. Under the "Play" tab, change the Max loop number to the amount of followers you have divided by 12. (there are 12 per page)

Unfollow all who aren't following you back from tumblr:

Sign up for an account at friend or follow and link it to your tumblr page.

Next, open your iMacros addon in your browser. Click record to record a new action. Do nothing and hit stop. A window should now appear showing you a code snippet. (Don't hit save just yet)

Delete all the code in that window and replace it with the downloaded code provided titled friendorfollow-tumblr-unfollow-500. Then hit save.

Make sure the page with all your followers that don't follow you is populated and click the iMacro you just created. Under the "Play" tab, change the Max loop number to the amount of followers you have divided by 500. (the script is set to unfollow 500 at a time)

Note: if you have too many follows, friend or follow will want you to get a subscription. I recommend simply starting with the unfollow all untill you have a low enough number for friendorfollow to display your followers.

That's it! Enjoy a sandwich or some cookies while you wait for the script to do its job. Repeat the same process with Twitter and Instagram as needed.

Download

IE upgrade detection pageFreebie

With HTML 5 and CSS3 on the scene, older browsers tend to get left in the dust rendering pages incorrectly. This page will inform old browser users of this and direct them to update or try a new browser!

View Demo Download

Blueprint style vector imageMedium-Hard difficulty

Create a blueprint like outline image. This tutorial covers how to create a dashed border on vector shapes in photoshop CS5. After the dashed border I go over how to add some final touches.

View How

Create better shadows in PhotoshopMedium difficulty

We all know how to use the photoshop filters to get a drop shadow, but have you ever wanted more? You can make shadows appear more styled by manually creating them with a few simple steps.

View How

Add fonts in photoshop with no adminEasy difficulty

Many of us work in an environment where the computer is locked down by your IT department and you have no admin privileges. If this is the case, your windows fonts folder will most likely ask you for the admin password when trying to install fonts there. To get fonts installed for Photoshop, just follow the steps below. This tutorial has been tested on a windows 7 machine with cs5. It should work similarly for other versions.

Photoshop 64bit: First open your operating drive (usually "C") and navigate to you "program files" drive.

Photoshop: First open your operating drive (usually "C") and navigate to you "program files (x86)" drive.

Next, follow the folder path: "Common Files" › "Adobe" › "Fonts" (If there is no folder called "Fonts" here, create one.)

Copy your fonts to this folder. Open Phototshop, your font's should now show up in your list.

CSS Sticky footerMedium difficulty

Create a footer that sticks to the bottom of your browser without overlaping content in basic HTML & CSS. The content will push the footer down but if your page doesn't have enough content to fill the screen it will stick to the bottom of the browser window. Using this technique prevents the footer from popping off the bottom of the page that has a shorter height and leaving a noticeable separation. This is how I made the footer for this page.

View How

How to add a photoshop borderEasy difficulty

A quick way to create a small 1px border around your banner or image. Adding borders to banners or other images can help the image stand out more and keep seperation between the surrounding elements.

View How