Building a Web Site from Start

Series : 22 Videos

Series Description: In this series we will be building a modern website from start to finish. We will be building the layout in Photoshop (Parts 1 - 5) and then learning how to take our design and turn it into a website (Parts 6 + ). We will also explore the fundamentals of setting up Adobe Dreamweaver to connect to your server, upload your website and more!

Building a Web site start to finish | Part 1 - Starting the layout
This is the first part of our series which will take you all the way through the website building process. The first 5 videos we'll be using Adobe Photoshop to create the layout. The layout we are building is based on a pre-existing site which a colleague requested I show how to make something similar.

Building a Web site start to finish | Part 2 - Building the buckets
In this part we will start to style the buckets we created in part 1.

Building a Web site start to finish | Part 3 - Styling the content area
In this part we will be styling the content area of the website layout.

Building a Web site start to finish | Part 4 - Adding the text
In this part we will be adding most of the text that is a part of our layout. This will exclude the website copy. We are focusing on the site header, and other title areas. We will wrap up the design in Part 5.

Building a Web site start to finish | Part 5 - Wrapping up the design
This is the last part of the design portion of the series. We tie up loose ends and get everything ready to export for Dreamweaver.

Building a Web site start to finish | Part 6 - Creating the site definition
In this part of the series we will be creating a new site definition in Adobe Dreamweaver.

Building a Web site start to finish | Part 7 - Creating the initial documents

In this part of our series we will be creating two documents in our root directory. We will create "index.html" and "default.css". We will do some minor modification to each of these documents before opening up Adobe Illustrator in the next part of the series to create our object diagram.

Building a Web site start to finish | Part 8 - Creating the object diagram
In this part of our series we will be creating what we call the "Object Diagram". We will be using Adobe Illustrator for this part of the series. This can be done with paper and pen if needed. We will draw up a quick sketch of our website objects (like the header, navigation, content area, etc.) and map out where we need to place these object in our HTML code.

Building a Web site start to finish | Part 9 - Writing the HTML
In this part of our series we will be writing HTML code in the "index.html" document which we created a few parts back. After we finish this part we will write our initial CSS code.

Building a Web site start to finish | Part 10 - Writing the initial CSS
In this part of our series we will be writing our initial CSS code.

Building a Web site start to finish | Part 11 - Getting our Images ready for the web
In this part of the series, we will begin to cut up our layout and export individual pieces in order to place them on our web page.

Building a Web site start to finish | Part 12 - Getting our Images ready for the web
Building a Web site start to finish | Part 13 - Applying CSS
Building a Web site start to finish | Part 14 - Applying CSS to Build our Buckets
Building a Web site start to finish | Part 15 - CSS and our Buckets Continued
Building a Web site start to finish | Part 16 - Finishing the Buckets
Building a Web site start to finish | Part 17 - Working on the content area
Building a Web site start to finish | Part 18 - Finishing the website
Building a Web site start to finish | Part 19 - Review & Static vs. Dynamic Development
Building a Web site start to finish | Part 20 - A Dynamic Website
Building a Web site start to finish | Part 21 - Setting up Hosting, Server, and PHP
Building a Web site start to finish | Part 22 - Intro to Dynamic Development