HTMLRockstars - You Design, We Code.

DIY Guides to ‘PSD to HTML / CSS’ for Beginners

Topher — Thu, 04 Feb 2010 16:18:48 +0000

We receive a lot of requests from people looking to learn how to code their own designs into HTML / CSS. Typically we point them to one of the following tutorials to get started. We also recommend a number of other sites for refining those techniques, however these PSD to HTML / CSS tutorials are a good place to start.

CSS-Tricks

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time. Please let me have it with criticisms at my contact page.

Chris Coyier, CSS-Tricks.com

Converting a Photoshop Mockup (part 1 of 3)

Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website. Firstly id do the tutorial on creating the layout or skip it and download the PSD file from the hv-designs shop, if you do my tutorial try and get it as close to my design as possilable, changes you wish to make can be done easily once coded. Right lets begin…

Richard Carpenter, HV-Designs.com

From Photoshop to HTML

Learn how the professionals convert their designs from Photoshop [PSD] to CSS and HTML. I will show you how to make a generic business template from the Photoshop file that is included with this tutorial.

Joshua Bolduc, BolducPress.com

From PSD to HTML, Building a Set of Website Designs Step by Step

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

Collis Ta’eed, NetTuts

Slice and Dice that PSD

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

Jeffrey Way, NetTuts

LemonStand Open Beta Launched

Topher — Tue, 12 Jan 2010 20:11:02 +0000

The LemonStand Open Beta launched yesterday, and despite a few false starts, is looking very promising.

We’ve been keeping an eye on LemonStand since before alpha, and are evaluating it for inclusion as a supported CMS along side Shopify(a hosted solution) and our PSD to HTML services.

As a selfhosted ecommerce application, LemonStand’s list of features set it apart from most of the competition. Full sales analytics and reporting, MVC approach to development and templating, full HTML/CSS control, a CMS built in along side ecommerce abilities make this app worth taking a look at if you are going the selfhosted route. While it does nothing to unseat Shopify as king of the hosted ecommerce solutions, we expect LemonStand to rise quickly among the ranks of self hosted applications.

It will be interesting to see how well LemonStand preforms over the next few weeks, and we’ll keep you posted on how we progress with the beta.

Professional Frontend Engineering

Topher — Mon, 16 Mar 2009 21:07:13 +0000

In this hour and a half presentation, Nate Koechley covers professional frontend development from bare basics markup to the finer points of naming conventions. A very good watch, especially for those who may be under-familiar with frontend development.

Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

IE8 takes a step backwards

Topher — Fri, 13 Feb 2009 22:00:57 +0000

As you may recall about a year ago Microsoft announced that standards mode rendering in Internet Explorer 8 would be opt-in only. This caused quite a commotion in the standards movement, and a short while later Microsoft backed off.

Now it seems they’ve backed off backing off, returning to opt-in rendering and taken it a step further by introducing site blacklists. For sites on this blacklist rendering will fall back to IE7 compatibility mode (which isn’t really IE7 compatibility at all), regardless of the actual ability of the page to be displayed properly.

I’ve not yet had a chance to explore this issue in it’s entirety so for now I’ll leave you with a link to the original article on blacklisting in IE8 and how it’s bad for everyone.

Win a ticket to FOWA Miami

Callie Ann — Tue, 03 Feb 2009 21:10:16 +0000

Earlier this year we mentioned our intention to giveaway a pass to FOWA Miami. With business picking up and all the changes with the new year, we just haven’t had a chance to open the contest.

We really wanted to make the giveaway happen, so we let the great team over at FuelYourCreativity.com take the lead and run the contest.

If you’d like to see us in Miami at FOWA, stop by http://www.fuelyourcreativity.com/win-a-ticket-to-fowa-miami/ for your chance to win.

Tribble: A Shopify Theme from CSSRockstars

Topher — Tue, 27 Jan 2009 08:27:09 +0000

Theme Overview

Tribble is a new theme for Shopify from Twenty Six Media/CSSRockstars. This is the first of what we hope will be many releases for the Shopify ecommerce platform. A demo is available here…

Tribble features a small foot print design accommodating a wide variety of screen resolutions. Browser tested with IE6/7 (XP), FireFox 2/3(XP/OSX), Opera 9/10, and Safari 3 (XP/OSX), Tribble exemplifies proper rendering across multiple browsers and operating systems.

Download Tribble for Shopify

Usage Info

Upload theme via the Shopify Assets panel to activate. Front page is easy to configure, see this screen shot for more information.

Releases / Updates

01/27/2008 Version 1.0