Build a Personal Website with HTML and CSS (Part 1)

4 min readOct 9, 2016

This guide will show you how to build a simple website, with no previous HTML or CSS experience. The final product will look something like this:

Note: This tutorial was made for a workshop for Santa Monica College Computer Programming Club. Some information may be missing from the text.

Content

The first thing we’ll do is create a folder to hold our project, and the base file of our site, called index.html. Here is what your folder should look like:

website/
  index.html

Next, open index.html in our text editor. If you’re not sure what program to use as a text editor, you can use Sublime Text 3, Visual Studio Code, or Atom.

Let’s start with the basic structure for a HTML page.

HTML is made up of “tags” (the things surrounded by < >). I won’t discuss every tag used here, but the most important thing is that the content of the website goes between the <body> and </body> tags.

If you double-click on the index.html file on your computer, it will open in your browser.

We’ve created a functioning website! It’s pretty empty though. Let’s add some more content.

These are called header tags. They indicate topics or important info. Headers range from <h1> to <h6>.

Links

What’s a website without links? We want to add some links to our various social media accounts. We can use the <a> tag to create a link, like this:

<a href=”https://github.com/ianjsikes”>Github</a>

The href property in the tag holds the URL the link goes to. The text between the tags will be what appears as clickable, like this.

Lists

We want to list multiple links on our site, so we will use an HTML list. The code for a list looks like this:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Our list will be wrapped in <ul> (unordered list) tags. Each item of the list will be wrapped in a <li> (list item) tag.

Let’s combine what we know about links and lists to create a list of social media links on our site.

So we have an unordered list, and each list item contains a link. We can easily add more links to our list.

Next, we’ll add to the content of our site is a short bio. We’ll use the <p> tag (short for paragraph) to contain it.

Images

All that text is a little boring. Let’s add a profile picture to mix it up. Take a picture file you have and put it inside an img folder in your project, like this:

website/
  img/
    profile.jpg
  index.html

We can display that image on the page using a <img /> tag. Let’s put one at the top of our page.

The src attribute tells the browser where the image is in relation to our index.html file. The width attribute forces the image to be 200 pixels wide. <img /> tags do not need closing tags. They are self-closing.

Here is what our site looks like now that we’ve finished adding all of the content:

Structure

Before we can start styling our page, we need to group certain elements together. Here is an illustration of what I mean:

We’ll use the <div> element to divide our HTML into logical groupings. We need to add three divs to achieve that.

This won’t actually change the appearance of our site at all, but it will allow us to later reposition sections of content.

Classes

It’s hard to keep track of what each element does. Later, when we style the page, we want to give names to our elements to specify which ones to style. This is what the class attribute is for. A class attribute can go on any tag. Let’s add classes to our file.

Classy

We’re finally ready to get to styling with CSS! I’ll cover that in Part 2.

What’s Next?

Check out Codecademy and Free Code Camp for some great free guides on HTML (and many other topics). W3Schools is also a great quick reference.

Experiment with adding more social links, rearranging the order of your content, or adding more images.