Where to Start with Web Design

The art of designing your own website may seem confusing and complicated at first, and you may not know the first thing about where to start. But with a little bit of learning and practice, you'll find that it's actually a fun and interesting way to express yourself creatively.

Let's start by learning the basics.

What Is HTML?

HTML stands for "HyperText Markup Language."

HTML is the hidden code on websites that controls things like fonts, colors, graphics, links, and more. HTML is the backbone of every website that you've ever been on.

In fact, the browser you are using right now serves as an interpreter for HTML, in a sense. Every time you type a URL in your browser, your browser sends a request to the server of the website you would like to visit. The server then sends the response to your browser in HTML format, and your browser reads the HTML to show you the website how the designer intended.

If you'd like to check out what this code looks like, you can see the HTML that serves as the backbone of this page by right-clicking and then clicking View Page Source.

While there are tools that can help you write HTML, you don't need to download fancy software to start. You can begin writing it yourself in any program that lets you write text. Because HTML documents are text-only documents, you may find it easier to start writing in a plain text processor, such as Notepad or TextEdit, to avoid confusion.

If you think you're ready to start writing HTML yourself, Columbia University has a great Sample Web Page that explains the basic HTML tags and how to use them, and Khan Academy has videos that might make HTML a bit easier to understand.

Once you've mastered the basics of HTML, you'll be ready to move on to CSS.

What Is CSS?

CSS stands for "Cascading Style Sheets." This is a different kind of language than HTML, but the two work together for a common goal.

You've learned that you can determine the text color and font, and much more, in HTML. But if you had a specific font size and color you wanted for the text on your website, using just HTML, you would have to constantly specify exactly what you wanted, sometimes multiple times on each pages. This would only get more time-consuming if you wanted to add things like borders and background colors.

A cascading style sheet acts as a template that you can use so that you don't have to constantly rewrite what you want your pages to look like using HTML. CSS makes a Web designer's job simpler and can save a lot of time, especially if they want to change the look of their site lately: Rather than having to change every page by hand, you can just change the style sheet.

While often, CSS is used primarily by the Web designer, some websites offer different style sheets and let the user pick which one they want to use. For example, some websites have day mode (usually black text on a white background) and night mode (usually white text on a black background.)

If you'd like to learn to write your own CSS, Mozilla has a page where you can learn to do just that. You can even practice it there, too!

How Do I Make My Own Website?

There are many websites that help you make your own website. A very popular one is WordPress.

WordPress is a free and very user-friendly tool to host your own content. Some people use it as a place to write their blog; others use it as a host for their online stores. Even some professional websites have been set up using WordPress.

If you want to set up a website but don't know how to use HTML yet, WordPress makes it easy. The interface is simple to use and customize, and you don't have to know HTML or CSS to use it. Though if you want to practice your new Web design skills, that's easy to do as well. Just switch from "Visual" to "HTML" when creating your online content.