How to Create a Webpage From Scratch

You’ve got the bug. You’ve seen awesome websites and just know that you could create your own that’s at least that good or better. Whether you’ve got a mind to do it for fun or for profit, there are a few key principles that you will need to know before you delve into the world of website design. I will cover some key tools you can use, discuss a few key elements of web design, and provide a brief tutorial of how to set up a webpage. All along I will point out things to look out for when designing your own web page.

There are many schools of thought as to which tools you could use to create your website. Many people swear by certain software programs, such as Dreamweaver or Fireworks. You can even export a Word document to a web page. However, I have found that these methods constrain what you can do with your web page. I recommend a freeware program, Notepad++. It does not introduce extra things into your webpage (like a Word .htm file does), gives you complete control over your design, and has an autocomplete feature. On the down side, it won’t provide any extras that you don’t put in either.

Key Elements of Web Design

One of the most important key elements in web design is balance. Think of balance in terms of a well-drafted memo to a superior versus a hand-written note to yourself. The hand-written note probably is not as balanced, in terms of symmetry, position, or emphasis. The memo, however, would have appropriate parts centered, left-aligned, bolded, italicized, or positioned. The idea is that you want to make a good impression, and these elements help to do that.
In a web page, these elements are controlled, at a basic level, by HTML code. HTML code is contained within angle brackets, lt; and gt;. Most code is fairly self-explanatory, such as lt; center gt;
before text that you would like centered. These HTML codes need to be told when they are done being used, with a lt; /center gt;, for example, at the end of the text to be centered. A web editor that has autocomplete, such as Notepad++, will take care of that niggling detail for you.
Another key element of web design is emphasis. If you want to make text bold in HTML, you would simply enclose it within tags lt; b gt; and lt; /b gt;. Italics are done with lt; i gt; and lt; /i gt;. Headings come in numerous sizes, designated lt; h1 gt; through lt; h6 gt;.

Basic Website Tutorial

As an example, type the following into your web editor:
lt; html gt;
lt; title gt; My First Web Page lt; /center gt;
lt; h1 gt; My First Web Page lt; /h1 gt;
Welcome to lt; b gt;my lt; /b gt; lt; i gt;first lt; /i gt; web page!
lt; /html gt;
Happy Coding!