Noobcube

Site From Scratch: Localmost (Part 1, Design)

Jarod Taylor — Sun, 13 Sep 2009 05:22:00 +0000

This is Part 1 of the 3 part series, "Site From Scratch: Localmost". In Part 1, we'll be designing a dark and sleek web layout in Photoshop. I will walk you step by step through the process in designing our fictitious company's layout. In Part 2, we'll be moving our design to the web using clean, semantic, and valid HTML & CSS. Finally, in Part 3, we'll be adding the interactive elements, the bells, and the whistles with my favorite javascript library, jQuery. So, I hope you're ready for the first installment of Site From Scratch, let's get started on Part 1: Design.

Combining Shapes in Photoshop

Jarod Taylor — Tue, 01 Sep 2009 21:23:25 +0000

When using vector based programs like Illustrator, combining two shapes is pretty straight forward with the paths palette. Unfortunately in Photoshop, it's not quite as obvious to achieve. In this Photoshop Quick Tip, we're going to do just that; combine 2 shapes into one. Have you ever been working in Photoshop, using two or more [...]

Horizontal and Vertical Centering Using CSS: A Beginner’s Guide

Jarod Taylor — Thu, 27 Aug 2009 17:32:42 +0000

There comes a time in every web designer's life, when you're trying to center an HTML element and it's failing miserably. You're ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like: <center>, align, and valign. In this tutorial we're going to shed some light on the subject, and hopefully help demystify the process of centering HTML elements using CSS.

News: DoFollow, Quick Tips, Upcoming Posts, and More!

Jarod Taylor — Tue, 18 Aug 2009 05:27:55 +0000

All kinds of exciting news and updates here on Noobcube. First of all, just wanted to thank everyone that has subscribed to Noobcube. Thank all of you for the kind emails, and kind words. We promise to keep the tutorials coming! This is just a quick Update post, to let you know of some changes here at Noobcube. We promise to keep our Site News posts to a minimum by collectively reporting updates and news rather than posting a new article every time something changes! I don't want to flood your RSS feeds with a bunch of Site News Articles. So let's get started!

WordPress, Stop Changing My Quotes!

Jarod Taylor — Sat, 15 Aug 2009 19:33:04 +0000

Alright, so you're copying and pasting something from your blog post into another website and instead of getting Mom's Yummy Cookies you get Mom‘s Yummy Cookies. Of course, the site doesn't allow you to edit anything, so you're screwed. Okay fine, you caught me, this happened to me. While I wasn't boasting about my mother's delicious cookies, I still endured something very similar while promoting a post. What I'm referring to is Wordpress' default rendering of both single quote and double quote characters.

CSS Image Maps: A Beginner’s Guide

Jarod Taylor — Tue, 11 Aug 2009 19:50:58 +0000

While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp. In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.

Creating a jQuery Plugin: A Beginner’s Guide

Jarod Taylor — Sun, 19 Jul 2009 03:31:39 +0000

This is not an introduction to jQuery or a tutorial on the basic syntax rules of jQuery, but, rather how to take what little knowledge you already have of jQuery to the next level by putting it to practical use, and building a jQuery plugin. By taking your knowledge of CSS, and what knowledge you already have of jQuery, I'm going to walk you through the processes of creating a jQuery plugin. I feel, by using the skills you're already comfortable with, like CSS, it will be easier to wrap your head around jQuery. So instead of trying to learn a bunch of programming concepts, you may or may not understand, you're going to learn something new by using concepts that are already familiar to you. Once you're finished with this tutorial, you'll then be ready to take the necessary steps in really learning jQuery.

Fixed Header & Footer Layout: A Beginner’s Guide

Jarod Taylor — Sun, 28 Jun 2009 03:05:25 +0000

Having a fixed header and/or footer can be quite effective in a web interface where its use proves to be advantageous. However, getting it implemented in all browsers, including IE6, can seem quite daunting. In this tutorial we'll not only get it working in all the major browsers, but we'll also cover all the necessary steps required in doing so. By the end of this tutorial, you should be able to implement this into your own projects without having to copy and paste a thing.

10 Seamless Grunge Textured Stripe Patterns

Jarod Taylor — Fri, 19 Jun 2009 14:43:53 +0000

I've created 10 seamless stripes for you to go tiling crazy with. All the patterns are semi-transparent with different grunge textures. You can easily modify the colors and feel to fit your needs by opening the PSDs that are included.

Create an Advanced CSS Menu Using the Hover and Position Properties

Jarod Taylor — Thu, 28 May 2009 00:56:47 +0000

Starting with a photoshop file and finishing with semantic HTML and CSS, we'll be creating an advanced CSS navigation menu using its :hover and position properties. The finished product will render properly in all major browsers including Firefox, Safari, IE7/IE8, Opera, and Google Chrome. Due to IE6 and its lack of support for the :hover property (other than on anchor elements), we'll have to implement a little javascript to gain its support. Nonetheless, let's get started!