Corporate Website Series

In this series we create a complete corporate-type website. We begin by showing you how to design the template using Photoshop. Then we go into how to slice and code the website using HTML and CSS.

In this designing series we go through the steps of designing a corporate-style website design.
This is a complete series, from start to finish. From creating a new document to slicing up the template to prepare it for coding.

The final PSD can be found at the bottom of the videos.



Part 1 – Planning the layout

Part 2 – Middle splash zone

Part 3 – 3 Content boxes

Part 4 – Bottom & Sidebar

Part 5 – Finishing up


Download Files



Website Coding

In this part of the series, we code up the template that we just designed.
We use HTML, CSS, and a little bit of CSS3. Grab a bottle of water and lets get started.

The image files, index.html, and styles.css can be downloaded from the download button at the end the bottom of the videos.

Part 1 – Slicing the template

Part 2 – Navigation Bar

Part 3 – Navigation Bar Styles

Part 4 – Banner Styles

Part 5 – 3 Columns using Divs

Part 6 – Twitter Feed

Part 7 – Content Area & Footer


Download Files


Comments are closed.