Practical Ecommerce

Video Tutorial: CSS Design, Part One

REPLACE ALT Designing search engine friendly websites can be intimidating, particularly for designers who are just learning how to use CSS formatting. One of the most intimidating aspects to learning CSS design is creating page layouts that do not rely on tables. In the first of a two-part video tutorial by Practical eCommerce’s online director Brian Getting, we will look at some of tricks and techniques used to create flawless CSS page layouts.

In Part One, starting with a Photoshop layout, we will look at how to markup an HTML document based on our design needs, and create the proper code we will need to get the results we are looking for. Once we have our markup in place, we finish Part One by using CSS to create a formatted two-column page layout that does not rely on tables or other non-compliant code.

Once we achieve a lean, efficient layout, we will find ourselves ready for Part Two, where we will learn how to apply graphics and visual styling to our layout in order to match it up to our Photoshop document.

Please feel free to download and review the additional files provided below.

Software Used: Adobe Photoshop CS2, TextMate

Additional Files: CSS_layout.zip

View Tutorial

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Brian Getting
Brian Getting
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 14 )

  1. Legacy User June 20, 2007 Reply

    A very nice tutorial, I appreciate. waiting for the next section. Providing these types of tutorial (specially videos) will help.
    Thanks

    — *syed akram*

  2. Legacy User June 19, 2007 Reply

    When's Part Two Arrivign ?? :-)

    — *tcraw1010*

  3. Legacy User June 28, 2007 Reply

    Thanks – I learned a lot I didn't even know I didn't know.

    — *Jim Gansle*

  4. Legacy User June 30, 2007 Reply

    A very very very nice tutorial. I just started with CSS and stuff and this really helped me a lot. I can't wait till part 2 is out.. I really need it. Tnks man!

    — *Elec*

  5. Legacy User July 4, 2007 Reply

    Love it… such beauty in simplicity… magnificent tutorial that's easy to follow. It's like watchig magic unfold in CSS.

    — *Gabriel*

  6. Legacy User July 10, 2007 Reply

    I think your excellent – we need more people like you! You explained css so well, I can't wait for more tutorials from you – just wicked ;o)

    — *Lisa*

  7. Legacy User September 17, 2007 Reply

    This was a great tutorial. You managed to successfully demystify the process of css layout for me!! When is part 2 coming? Do you have more vid tutorials?

    — *Kate*

  8. Legacy User September 22, 2007 Reply

    Hi. I would really like to know when is the second part coming out. It's awesome. Please post the second part soon. Also after converting the psd to html, please create another tutorial on how to convert that html to WordPress. Thanks.

    — *johnny*

  9. Legacy User October 4, 2007 Reply

    Hey great work… ive searched high and low for css tutorials, and i think your's is by far the easiest to follow….can't wait for stage 2!!!

    — *Scott*

  10. Legacy User November 21, 2007 Reply

    Wonderful … but, try as I might, when I create the class "clear" to settle the placement of the footer, double checking everything line by line with what you suggest, the footer won't budge. Stays up looking like a 3 column, as it were.

    I'm completely stalled. Any suggestions are greatly appreciated!!

    Mojo

    — *Dr. Mojo*

  11. Legacy User March 3, 2008 Reply

    Great stuff! Made the process cake…thanks for putting this up.

    — *Jen*

  12. Legacy User March 16, 2008 Reply

    This maybe the most useful tutorial I have ever seen. Please do part two, it's a life saver!

    — *cass*

  13. Legacy User April 21, 2008 Reply

    Incredible! I understood some of the basics of CSS. But getting an understanding the whole work flow and layout is so helpful!!! Thank you so much!

    (To those that are looking for part 2, here it is: http://www.practicalecommerce.com/articles/505/Video-Tutorial-CSS-Design-Part-Two/ you can also click on Brian Getting name at the top and you'll find a list of articles and tutorials that he has done!!!)

    Thank you Brian!

    — *Jordan*

  14. Legacy User April 27, 2008 Reply

    Nice Work! Very simple and clear! I like it and I want more. Where can I get more CSS videos?
    Keep up the good work!

    — *Alejandro Lopez*

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas