Video Tutorial: CSS Design, Part One
Coding your design.
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
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
Sponsored links
- Pod1 – Design, Ecommerce, Online Marketing
14 Comments
Legacy User says:
A very nice tutorial, I appreciate. waiting for the next section. Providing these types of tutorial (specially videos) will help. Thanks
-- syed akram
Legacy User says:
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
Legacy User says:
Love it... such beauty in simplicity... magnificent tutorial that's easy to follow. It's like watchig magic unfold in CSS.
-- Gabriel
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
This maybe the most useful tutorial I have ever seen. Please do part two, it's a life saver!
-- cass
Legacy User says:
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
Legacy User says:
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
