Make Your Own Website Part 2: HTML and CSS

• Written: 18 April 2025 • • Last updated: 18 April 2025 • • •

If you haven't already, check out Part 1: Domains and Webservers.

In Part 2 of this tutorial, you'll learn how to:

Build the framework of your website with HTML.

Style your website with CSS.

Upload your site files to DirectAdmin so that they can be found online.

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two file types, ending in .html and .css, respectively. Think of HTML as being how your website acts, and CSS as being how your website looks. It isn't really that simple, since both HTML and CSS perform each of those functions to a degree, but you'll understand why I make these broad generalizations as you work through this section.

This tutorial will replicate the layout and color scheme of this website, but the beauty of HTML and CSS is that they let you be creative, so think of this as the beginning of your web design journey, not the end.

Build the Framework of Your Website With HTML

Prerequisites

This tutorial assumes no prior experience with either HTML or CSS, so don't worry about anything skills-related. But before we begin, you'll need to download a text editor, which will let you edit and save the files you'll be making. I use VSCodium.

Now, onto the HTML!

First, make a folder on your desktop. The name can be anything you want it to be, but for the sake of organization and convenience, I just call my folder "Thunderbolt." For this tutorial, we'll call this folder "Website."
All future files will be saved somewhere within this folder, or, as I'll be using interchangeably throughout this tutorial, directory.

Next, open VSCodium, click on "Open Folder," and open your website's folder. If done correctly, it should look like this:

There's nothing in this folder yet, so let's make our first file.
In VSCodium, click the paper icon that says "New File" when you hover over it. Name this file "index.html," and it'll be your home page:

Your HTML file needs a header. None of what's on this header will be visible to site visitors in the browser; instead, different elements of the header tell the browser about the contents of the HTML file:
- "!DOCTYPE html" tells browsers that they're reading an HTML file.
- Below the !DOCTYPE should be an indication of what languge you'll be writing in. Not a coding language, but a regular language. "en" means English, and this tutorial assumes that your website will also be in English.
- HTML needs a head to indicate information that won't directly show up on your web page, but is still necessary for the browser to be able to work with the content of your page.
  That includes a title to let the browser know what to title a tab. In this case, that's "My Website," but you can title your homepage, or any other page, anything you want.
  The link to the stylesheet indicates that this HTML file will link to a CSS file. Making the CSS file will be covered later in this entry.
  The link to the favicon indicates which image should be used to represent the website on, for example, browser home pages and browser tabs. This is entirely optional, but can be a good way to help people easily recognize and navigate to your website if it's present amongst a myriad of others.
  In the head, HTML also needs a character set to refer to, since certain special characters like accented letters and punctuation cannot be replicated in a text editor. Instead, they have a unique identifying code, and the list of those codes is referred to in the character set, which in our case, is utf-8, or Unicode Transofrmation Format 8.
HTML also needs a body to refer to, to separate it from the head. The content of the body is what actually shows up on your web page.
Once you put everything together, it should look like this:

My website is broken into two main divisions, "sidenav," for the sidebar or menu on the left side of the screen, and "main," which is where this site's actual content resides. These two divisions are demarcated by tag "div." A division is just a block of HTML that can be styled together. I'll be styling this sidebar in the CSS section of this entry, but for the moment, here's what the code should look like:

In this example, I've preemptively created links to my About, Entries, Webrings, and Guestbook pages. These files don't actually exist yet, so let's go ahead and create them using the same steps as we did to create index.html. Once that process is done, your VSCodium window should look like this:

What do "h1" and "h2" mean? These are headings, and they designate important text, such as a title, plus any necessary subtitles. Start with h1; don't skip to h2. HTML 5 (the most recent version of HTML) lets you go all the way down to h6, but I don't usually go past h3.
Another element on this page is "hr," which stands for "horizontal rule," and is used to break a page, and/or indicate a new theme.
Momentarily, exit VSCodium and open your website's folder on your desktop. The view should look something like this:

Now, double-click index.html. It should open up in a browser tab, and the view should be something like this:

This view from your browser window should make the function and appearance of links, headers, and the horizontal rule apparent.

Let's try to add a few more elements: paragraphs ("p"), email links ("mailto:"), unordered lists ("ul"), and ordered lists ("ol"; like the ones used to make the steps in this tutorial). Here's how the code looks:

And here's how the browser window looks:
While not necessary, I like to create a little more spacing between the list items ("li") in my unordered and ordered lists. I do so with the following code:

Which produces the following output:

"Hey," you're probably thinking. "How'd you make the italics in that bullet point above? And while we're at it, what about bold?"
This is the code I use:

And here's the outcome:

You might also notice that I've added an attribute ("a"), "id"; this allows us to also use hyperlinks ("href"), which let us link to a specific point on a page.
In this case, if someone follows the first hyperlink in the screenshot, it'll take them to the subheader "Contact" on the homepage of this website.

Let's take a break from the homepage for a moment, and move over to creating an entry.
First, we'll need to create a new directory. Navigate to your desktop and create a new folder called "Entries," where we'll be saving all of the HTML files where we've written entries. It should look like this:

Then, we'll create another directory, this time called "Images." We're going to store the images for the entire site, but we will create a directory within this directory also called "Entries," just so that we know that's where we'll be storing the images specifically for our entries.

Go back into VSCodium and, within the file entries.html, create a link to the file name of your first entry. We'll call this one "1_my_first_entry.html" for the sake of this tutorial, and it'll be stored in the directory "Entries." Here's the code:

Now, click on the directory "Entries," and create a new HTML file. Create the header and the body, and then add any content you want to the body of the file. Here's the code:

And here's the browser window:

It looks pretty similar to the other HTML files we've made. But wait: the links are just a tiny bit different. Notice that before each link, there's a "../"

We add this to the file path (or in other words, the directions to where in the site's file structure the file resides) because the file "1_my_first_entry.html" is not located within the root directory, but within "Entries," which is one directory below it. If the file resided instead within a directory below "Entries," then we'd put a "../../" at the beginning of the file path.

For the final stops on our HTML journey for this tutorial, let's talk about images ("img") and inline frames ("iframe"). Go back to your desktop and create another folder within Images > Entries. You can title this folder whatever you want, but since this image will be used for my first entry, I'll call it "1."

Then, find any image you want and place it in the folder on your desktop.

The most common image types you'll see online are .jpg (also spelled .jpeg), .png, .gif, and .webp. These can all be referenced using the following code, though I'm using .png in my example:

Now, let's talk about iframes. These let you display videos and even other websites within your own. If you want to embed a video, you can download the video into your site files reference its path in an iframe, but for this tutorial, we'll be embedding another website. I've already put dimensional constraints on the width and height of the iframe in this code:

guestbook

That was a lot, but you now have the skills to make basic site files using HTML. Moving onto CSS.

Style Your Website With CSS

Some people choose to leave everything at HTML; after all, for quite some time, Cascading Style Sheets didn't even exist. It does now, though, so why not take the time to spice up those blank white pages and left-justified headings?

Go into VSCodium and create a new file. This time, name it "style.css"

Unlike HTML files, CSS files do not need a header, so we can get right into styling.

Let's start with the body. The only change I'm making is to the background color, which will be dark blue. The "/* */" that you might see enclosed around some of the text on my CSS file just indicates that I'm making a note to myself, and it will not affect the styling of any HTML files.

(I'm just copying the hexcode (color represented as a six-character code; can be numbers or letters) from thunderbo.lt, but if you're starting from scratch, you can type in "#ffffff" which is plain white, and then select a color manually (or enter a different hexcode, or rgb value) by clicking the color swatch).
This change has the following effect:

What about header and paragraph colors? Again, I'll be borrowing the hexcodes from thunderbo.lt, but you can customize the colors as you like. You'll also notice that I've written a preset size, in pixels, for h1, h2, h3, and p:
While we're at it, we can also set certain colors for unvisited, visited, hovered-on, and active links:

Let's also style the unordered and ordered lists, and the horizontal rule.

We can also style images and inline frames. I'm adding a border in the same color as the text to bring everything more in-line with the theme of the site. I'm not centering the images or iframes, but since I have written it so that they are now displayed as block elements, you can style your own images and iframes to be centered via CSS.

Note the img.logo means that, in my HTML file, I can write something like:

And that particular image will behave according to the parameters set by this CSS class. Same goes for the iframe. Because I wrote:

My guestbook's iframe is borderless, at least 600 pixels tall, fills 75% of the screen horizontally, and is contained within its box without being cropped.

You might notice that the "guestbook" class in the actual CSS file only specifies the width and the border. The other parameters, like height and object fit were not set within the CSS file itself, and the width is actually overwritten. This CSS written within an HTML file is called "in-line CSS."

Now for the final part that brings everything else together: separating the sidebar and the main content of the page.

There's a bit to unpack here, so let's begin with the sidebar.
- ".sidenav" just means that, in my HTML file, I can create a division ("div") and make its class "sidenav," and that division will take on all the properties of this chunk of CSS.
- The "height: 100%;" indicates that the sidebar should fill the entire height of the screen.
- The "width: 100px;" indicates that the sidebar should be 100 pixels wide.
- The "position: fixed;" means that the sidebar and its contents will stay where they are, even if a visitor scrolls.
- The "z-index: 1;" is a little more complicated, but z-indexes basically tell which elements are in front of, or behind others on the page, and they are relevant for elements which have a position (such as position: fixed). An element with a higher z-index (like 2) would go on top of the sidebar, while an element with a lower z-index (like -1) would go below it.
- The "top: 0" means that the element should be positioned directly against the top edge of the screen. Since the height is set to 100%, this property is synonymous with 'bottom: 0." Like the z-index, it is relevant for positioned elements.
- The "left: 0" means that the element should be positioned to the left edge of the screen. Like the z-index, it is relevant for positioned elements.
- The "overflow-x: hidden;" means that if the width of the sidebar's content exceeds the width of the sidebar, it'll simply be hidden, rather thaan overflowing or scrolling.
- The background color is a bit darker, to set it apart from the main body.
- The "border-right" specifies the properties of the right border. I didn't create a border for the top, bottom, or left.
- The padding signifies the space between the content and the border.
- ".sivenav:a" designates the properties of attributes ("a") within the sidebar, including links.
- The "text-decoration: none;" means that, unlike in the main body, links are not underlined.
- The "display: block;" means that the element will be treated as a block element like "p," rather than inline.
- ".sidenav:hover" just indicates how the links shuold look when hovered over with a cursor.
For the main body, the only notable thing is that the left margin is set to 190 pixels; a margin being distinguished from padding in that the padding is the space between content and a border, and the margin is the space between the border and the edge of the screen.

Putting it all together, we get this:

This concludes the HTML and CSS portion of this tutorial. Give yourself a pat on the back. Or better yet, a nice, refreshing nap. Thankfully, the next and final step is a few magnitudes simpler.

Upload Your Files to DirectAdmin

Only follow this step once you're ready to make your changes go live on your website. You can always delete, overwrite, edit, and add files in DirectAdmin, but it's just nice to be able to see a finished product on your website once you refresh your browser.

First, log into DirectAdmin, and go to System Info & Files > File Manager. Click on the domain you want to work with, and naviage to public_html. This is the directory into which you will be uploading your site files.

Now, go to your desktop and open the folder for your website. Then, select ALL of the contents (files and folders alike) and double-click (or right click). This should yield the option to compress (or sometimes, zip) the files.

Name the file and save it as .zip (other compressed file formats exist, but .zip is among the most common, and supported by DirectAdmin). In this example, I'll be saving the file as "Website.zip."
Now, go back to DirectAdmin and upload your compressed website files.

Double-click (or right click) the .zip file and extract it.

When prompted for which directory to extract the files in, choose "public_html," which is the same directory into which you uploaded Website.zip.

Once the files are extracted, double-click (or right click) the .zip file and remove it. It's your choice whether you keep the trash box checked or not, but I personally do, in case I erroneously delete a file I actually need.

If everything is configured correctly, when you enter your domain name into the search bar, you should see index.html. Note that if you are updating a page, rather than viewing it after havnig uploaded it for the first time, you may need to clear your browser's cache, or open the website in an incognito tab or a different browser.

Congratulations!

You've completed Part 2 of the Make Your Own Website tutorial series.

Now, move onto Part 3: Email Address and Guestbook.

Conflicts of Interest

None of the URLs on this page are affiliate links; I do not earn a commission or kickback if you sign up for any services or purchase any goods through them. I'm sharing these resources because I genuinely appreciate them for what they are and what they do.