Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Tuesday, May 13, 2008
Development & Programming
Video Tutorial: CSS Design, Part One
Coding your design.
By: Brian Getting
Comments: 14
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
Click the image below to launch the 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.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Tuesday, June 19, 2007
Comments:
A very nice tutorial, I appreciate. waiting for the next section. Providing these types of tutorial (specially videos) will help.
Thanks
Posted by: syed akram
Tuesday, June 19, 2007
Thanks - I learned a lot I didn't even know I didn't know.
Posted by: Jim Gansle
Thursday, June 28, 2007
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!
Posted by: Elec
Saturday, June 30, 2007
Love it... such beauty in simplicity... magnificent tutorial that's easy to follow. It's like watchig magic unfold in CSS.
Posted by: Gabriel
Wednesday, July 04, 2007
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)
Posted by: Lisa
Tuesday, July 10, 2007
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?
Posted by: Kate
Monday, September 17, 2007
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.
Posted by: johnny
Friday, September 21, 2007
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!!!
Posted by: Scott
Thursday, October 04, 2007
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
Posted by: Dr. Mojo
Wednesday, November 21, 2007
Great stuff! Made the process cake...thanks for putting this up.
Posted by: Jen
Monday, March 03, 2008
This maybe the most useful tutorial I have ever seen. Please do part two, it's a life saver!
Posted by: cass
Sunday, March 16, 2008
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!
Posted by: Jordan
Monday, April 21, 2008
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!
Posted by: Alejandro Lopez
Sunday, April 27, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
When's Part Two Arrivign ?? :-)
Posted by: tcraw1010
Tuesday, June 19, 2007