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

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
It’s something!

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>

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>

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

Structure

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

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

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.

--

--

programmer || ❤️ the open web, functional programming, & game dev ❤️

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ian J Sikes

Ian J Sikes

programmer || ❤️ the open web, functional programming, & game dev ❤️