Advertisement
Complete Websites

Create a Sleek, Corporate Web Design (HD Video Series: Day 3)

by

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:

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

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!

Day Three: Part 2

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!

Day Three: Part 3

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!


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

Related Posts
  • Web Design
    CMS
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    CMS
    Improving Our Tumblr Theme Navigation and Post NotesTumblr 27 retina
    We've reached the end of our Tumblr theming series! In this video we're going to add some styling to our post notes and the tag page. We'll also be adding some extra CSS which will make navigating the site a little easier.Read More…
  • Web Design
    CMS
    Adding Media Queries to Our Tumblr ThemeTumblr 18 retina
    In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make allowances for various usage scenarios, such as unusually long blog titles.Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…
  • Web Design
    Complete Websites
    Create a Sleek, Corporate Web Design (HD Video Series: Day 1)Corpora preview thumbnail
    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 1 of a 4 part series - we'll also be finishing the support pages and coding the entire thing in HTML/CSS!Read More…