In this video series, we're going to walk you through how to create a sleek, professional web design for a corporate website. This is part 3 of a 4 part series - we'll also be finishing the support pages and coding the entire thing in HTML/CSS!
About this Tutorial Series
Adi Purdila is going to walk us through an entire project - from design to coding - all here on Webdesigntuts this week! In Day 1, he showed us how to set the basic framework for the design as well as how to actually lay out the homepage. In Day 2, he showed us how to create the various support pages (contact, gallery, etc.). In Day 3 (today), he'll be showing us how to convert the entire Photoshop design to a fully working HTML/CSS site. We also have a Day 4 scheduled for additional coding, so keep an eye out for that tomorrow!
Just to give you a general roadmap for the coding, here's the basic outline of what we'll be doing over these final 2 days:
- Day 3, Part1: Creating the markup for the homepage
- Day 3, Part2: Slicing the PSD and writing the CSS file (i divided this into Hour1 and Hour2)
- Day 3, Part3: (cont.) Slicing the PSD and writing the CSS file (I divided this into Hour1 and Hour2)
- Day 4, Part1: Slider installation, customization and some very basic jQuery functions
- Day 4, Part2: Creating and styling the secondary pages (Services, Gallery and Contact) + browser checking
Also, I'd like to share some links for some of the resources I'll be using today:
- Slider plugin: http://www.gmarwaha.com/jquery/jcarousellite/
- Cufon: http://cufon.shoqolate.com/generate/
- CSS Browser Selector (for making styles for different browsers in the same CSS file): http://rafael.adm.br/css_browser_selector/
- Reset CSS: http://meyerweb.com/eric/tools/css/reset/
Let's get started!
Day Three: PSD to HTML Conversion
In this next series of videos, Adi is going to walk through the conversion process from PSD to HTML/CSS. Be sure to flip over to HD viewing if you have the bandwidth!
Day Three: Part 1
Apologies: the first of these “day 3” videos is, unfortunately, no longer available.
Day Three: Part 2
Day Three: Part 3
About the Author
"Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs.
If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest." - Adi
