Tutorial Step 1

Tools Needed:

  1. PSD
  2. Text editor
  3. Web browser
  4. Knowledge of HTML / CSS coding
  5. Framework for responsive web design, if you so choose.

PSD: Think of yourself as a webpage architect while planning the design of your website. Let your creative juices flow while keeping in mind what your end objective is. Find a balance with creativity and usability to design the look you want.

Sketch your layout, wire frame the basic design, and then make your PSD in Photoshop.

A couple of sizes commonly used for PSD documents are 1024×1280 pixels with a resolution of 72 pixels/inch and the 960 grid template with 12 column grid that we are using in this example. This will leave room for the columns on the grid. To check the width of your PSD simply select the “Rectangular Marquee Tool” in PhotoShop. This will be your container width when you begin writing the code for your webpage.

Text editor:
There are many text editors to choose from for Windows or Mac computers. Notepad++ is commonly used on Windows computers. Text wrangler, Textmate and many more can be used on Mac computers but choose and download the editor you would like to use on your computer.

Web browser:
Computers come with a browser such as Chrome or IE already installed.

Knowledge of HTML / CSS coding:
There are many courses you can take to help give you a basic understanding of how to build a webpage. The more knowledge you have, the better your webpage will look and function.

Framework for responsive web design:
Responsive framework will make your webpage resize depending on what size screen the device being used to view you webpage has. A internet search will yield free frameworks that are available to give you a responsive webpage.