Photoshop & Web HTML Design & CSS Development Video Tutorials » HTML

HTML / CSS3 Sliding Image Boxes

Steve875 — Mon, 19 Dec 2011 18:39:24 +0000

In this video we dive into some CSS3 and create an awesome looking sliding image box.

Prior to CSS3, I would have wasted a lot of time using JQuery to do this exact same effect. CSS3 is a huge time saver!

You can download the video files here: [ click me to download ]

Programming Social Media Icons

Steve875 — Mon, 12 Dec 2011 06:36:09 +0000

In this lesson we program the social media icons that we designed in a previous lesson.
We use simple CSS and HTML to bring out icons to life.

Be sure to check out the designing of these beautiful Social Media icons.
You can view that video HERE

Jquery Dynamic Tab Switcher

Steve875 — Sun, 21 Nov 2010 20:23:54 +0000

In this lesson, we create a dynamic tab switcher using JQuery. When you click on the top navigation, the page does NOT need to refresh inorder to show the new content. This is great for a small sidebar widget and even for dynamically loading another page on your website.

Download the lesson files here:

Corporate Website Series

Steve875 — Sat, 07 Aug 2010 16:09:58 +0000

In this series we create a complete corporate-type website. We begin by showing you how to design the template using Photoshop. Then we go into how to slice and code the website using HTML and CSS.

In this designing series we go through the steps of designing a corporate-style website design.
This is a complete series, from start to finish. From creating a new document to slicing up the template to prepare it for coding.

The final PSD can be found at the bottom of the videos.

Part 1 – Planning the layout

Part 2 – Middle splash zone

Part 3 – 3 Content boxes

Part 4 – Bottom & Sidebar

Part 5 – Finishing up

In this part of the series, we code up the template that we just designed.
We use HTML, CSS, and a little bit of CSS3. Grab a bottle of water and lets get started.

The image files, index.html, and styles.css can be downloaded from the download button at the end the bottom of the videos.

Part 1 – Slicing the template

Part 2 – Navigation Bar

Part 3 – Navigation Bar Styles

Part 4 – Banner Styles

Part 5 – 3 Columns using Divs

Part 6 – Twitter Feed

Part 7 – Content Area & Footer

Modern Navigation Bar

Steve875 — Mon, 24 May 2010 18:43:46 +0000

In this small series, we go from designing all the way to programming a modern-style navigation bar.

Designing the navigation bar:

Programming the navigation bar: Part 1

Programming the navigation bar: Part 2

Lesson files:

Click the following link to download the image files and css/html files.
PixelForLife – nav bar files

Defining A Dreamweaver Website

Steve875 — Sat, 06 Jun 2009 19:51:59 +0000

This is one of the most important steps when you decide to use Dreamweaver.
This should be done before you even create a new page, but if you have already created one, it’s not too late to define your website.

How To Install Fonts

Steve875 — Tue, 03 Mar 2009 19:28:07 +0000

Fonts are a huge part of design. Picking the corrent font for a project is often harder than the design.

Before we can get started on installing a font, we need 1 thing…… A FONT!

There are many websites that offer fonts, but most of them charge you money.
Here are a couple of websites that I always turn to when the fonts on my computer just aren’t enough.

AcidFonts : Here you can find a great selection of fonts for your Mac or PC.

1001FreeFonts : This is my favorite free font website. The layout design is just simple.

Now that you have selected your font and downloaded the correct version (MAC or PC) you are going to need to extract the content.

Now the next step is installing the font.

Depending on what version of windows you are using, this may be different.

If you are using Windows 98.. I’m sorry, but you need to upgrade. Anyhow, your Fonts folder may be located where the Windows XP Font folder is.

Let’s go ahead and find where our Fonts folder is hiding.

For Windows XP:
I am using Windows 7, so my Control Panel will look different.

You will need to go to: START > Control Panel > Fonts

For Windows Vista / Windows 7:

You can either go to START and then type in “Fonts” in the search bar or..

Go to: START > Control Panel
Once in Control Panel, you will want to go to “Appearance and Personalization”

There, you will find that pesky “Fonts” Folder.

Now that you have your Fonts folder open all that you need to do is drag and drop the font files directly into the folder. It will automaticly install them.

Now that you have done that, you can go ahead and start using your beautiful new font!

If you have any problems with installing your font, or if you can’t find the correct font for your project, leave your troubles in a comment below and we will help you out!

iPhone Webclip

Steve875 — Sun, 15 Feb 2009 07:11:14 +0000

This tutorial doesn’t have the designing of the webclip, just how to set it up on your web server.

Remember, it is recommend to design your icon as 57px by 57px but the iPhone will automatically resize the icon.

Size: 57px by 57px
File type: .png
File name: apple-touch-icon.png

Beginning CSS – part 1

Steve875 — Thu, 11 Dec 2008 05:52:10 +0000

This is part one of many CSS videos.
This tutorial is the absolute beginning of CSS. I introduce you to the basic and most commonly used CSS attributes.
Not only is this video the begging of CSS, but also the beginning of DIV tags. I feel they both go hand-in-hand with each other, so it’s very helpful to learn both at the same time.

How to slice and code a psd website template! Part 3

shandaman — Wed, 10 Dec 2008 17:47:41 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

Download the slice-code-examples now!