Step-by-Step Creating a Website Guide

I wrote 8 chapters of “Step-by-Step Creating a Website Guide” so this is the time to organize them. This article just says basic steps but you’ll see details when you click on links. I hope this guide helps beginners who want to create a website! Also don’t forget to download sample files!

Sample File

I share a sample file that I made for this tutorial. Please DO NOT use this template except for your studying. It’s tested on Google Chrome, Safari, Firefox, IE8&9.


Step-by-Step Creating a Website Guide

1. Planning

Planning a Perfect Website Content
There are many tutorials to design or code your website but one important step is often skipped – planning contents of your website. Let’s think the reason to create a website or who will need that website before you start to work on it!

2. Sitemap

Visualize Website Structure – Sitemap
Which pages are linked? or which page is the most important etc. Organizing page priorities will help you when structure changes later on. I will share tips to make a sitemap and useful online tools!

3. Wireframe

How to Create a Website Wireframe
After you decided main target users and what kind of website it will be, it’s time to make a wireframe. Wireframes are basic illustrations of the structure and components of a web page. Please do not start designing yet unless your website is super minimal design. Wireframing helps clarify exactly what needs to be on your website.

4. Design

Photoshop Website Design Tutorial
I will share a tutorial on how to design a website using Adobe Photoshop. It’s a bit long article, but I hope it’s easy to understand!

5. Slicing Images

Slicing Images
Slicing Images for Your Website with Photoshop
The Photoshop slice tool allows you to divide an image into smaller pieces which are easy to use on the web. This chapter focuses on how to slice your mock up design image file. I usually use Fireworks to slice, but since we used Photoshop on this guide, I’ll use Photoshop.

6. HTML Markup

Guide to HTML Semantic Markup
This chapter will show you how to markup HTML finally! You like to design but don’t like coding? Don’t worry! Just follow this guide and markup a little by little with me! Open your favourite text edit tool like TextEdit or NotPad, let’s get started!

7. Apply CSS

Basic Process to Apply CSS to Your Website
If you are very new to CSS, you might think to create a layout with CSS from scratch is a bit difficult. However, you’ll get used to it when you understand common properties and build it little by little. I made a sample so you can download and have a look deeply.

8. Publish a Website

Publish a Website
Let’s Publish Your Website to the World!
A web page that you saved in your computer is not going to show up on a web of course. You need to upload all files to the web server. I will share how to publish your website via SFTP.