Build a Personal Website with HTML and CSS (Part 1)
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.
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:
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
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
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:
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.
We want to list multiple links on our site, so we will use an HTML list. The code for a list looks like this:
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.
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:
We can display that image on the page using a
<img /> tag. Let’s put one at the top of our page.
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:
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.
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.
We’re finally ready to get to styling with CSS! I’ll cover that in Part 2.
Experiment with adding more social links, rearranging the order of your content, or adding more images.