Ever seen interesting things on NeoCities/other personal sites but can't figure out how to do them? Looking for tutorials but can't find much between 'here's how to do a link' and 'professional webdev stuff'?

If I could time travel, this is a little taster I would give myself so I could quickly get into some mid-level HTML/CSS fun. My hope is that this will show aspiring newbies what they can do with their personal website or something you can show friends to help them get a handle on personal web development.


border of four leaf clovers

For something simple to start, here is how to make links that when clicked go to another section in a webpage. Handy if you have a large topic and want to break the page up by sub-topics (such as this).

The below code is put into the BODY section.

Code for the link:

<a href="#links">Links Within the Same Page</a>

So mostly your typical link but instead of a URL as a reference, we use "#" then a word of your choice.

Target Code:

<h2 id="links">Links Within the Same Page </h2>

When you click the link, you end up here. You don't need the # and need to use the exact same word as the link for it to work.

border of four leaf clovers

Custom Fonts

There are multiple ways to embed custom fonts. I've found this way to be the quickest. But if you have an easier way, please share it!

The Google Fonts directory has plenty of free to use fonts. Once you've selected the fonts you want to use, look to the sidebar.

There are two boxes. The top box has the code you will paste into the head section of your webpage. To keep things simple, I stick with <link> which is preselected. If you use NeoCities, whenever you create a new HTML page it generates some default code. I paste the Google code under the below, which shows up in the HEAD section, so after the META and TITLE tags.

<link href="/style.css" rel="stylesheet" type="text/css" media="all">


<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href="" rel="stylesheet">

But this just pulls the fonts. Now we need to "tell the webpage" where we want to use the fonts and how. The second box in the Google Font sidebar labelled "CSS rules to specify families" has the code you need. If you only picked one font you can just replace "font-family: font;" with what they provide.

Yet if you want to use more custom fonts, you can! Anywhere you can insert and edit the "font-family" you can change to a Google Font. Here are some examples to help get you started.

On this page, I used the Rampart One Font for HEADING 1 and HEADING 2 on this web page. The following code was used in the style section.

h1 {
font-family: 'Rampart One', cursive;

h2 {
font-family: 'Rampart One', cursive;

You can use this code to edit other blocks like PARAGRAPH and BLOCKQUOTE along with HEADING 3 and 4. Just change the h1/h2 part with what you want to change.

border of four leaf clovers

DIV Refresher

If you are proficient in using <div> you can skip this section. I just want to cover some basics before moving to the next section which will reference <div>.

<div> is a way to define or "style" sections of HTML. Many interesting effects can be achieved.

I will show two ways to start with <div>.

The first way, you predefine in the STYLE section then refer to this in the BODY section whenever you want to use <div>. All the black boxes that appear in this page are <div> and I will show the code I used below.

Code for the STYLE section.

.code {
background-color: black;
color: honeydew;
padding: 10px;
margin: 5px;

Now in the BODY whenever I want to use the above section I use:

<div class="code">CODE EXAMPLE HERE</div>

Another DIV box!

The second way is you just put everything in the BODY. The above example was made with the below code. As you can see its a bit messy with all of the STYLE referenced there as well. But if you want have a bunch of different <div> sections, this way can be simplier than having several predefined sections in STYLE that are slightly different and referencing them in the BODY.

<div class="example1" style="height:100px; width:200px; text-align:center; background-color: darkmagenta; border-style: outset; border: 5px outset indigo;">Another DIV box!</div>

Either way you use, you can get into a lot of customization regarding font, border, background color and even background images. I'm not going to go into every aspect that you can customize as there are better references for that but below are some easy to hard things to play around with if you need to get more comfortable with DIV.

border of four leaf clovers

Position, Z-Index or Layering Items



Here is a small example of layering you can do with z-position.

For extensive documentation on position and z-index here are the w3schools documentation. There is a lot you can do with this. Above and below is just a brief example to get ideas going for your personal page.

Here is the code for the butterfly gif that floats over part of a <div> box.

<img src="" style="position: absolute; left: 915px; top: 3400px; z-index: 1;">

Here I've added some STYLE directly into the image reference. Position and z-index are underlined. Position must be defined in order to use z-index.

I stick with 'absolute' for position as I can define by pixel where I want the image to go.

Left: 915px is the amount of pixels(px) that the image is from the left. Top: 3400px is the amount of pixels(px) that the image is from the top. z-index: 1 is the level the image is at. Everything defaults to zero, even if its not stated. The exception being the background which seem to be about -1.

Below is the code for the date box. The z-index is 1 which puts it above the main box.

<div class="datebox" style="height:25px; width:100px; text-align:center; background-color: #606c38; border-style: solid; position: absolute; left: 350px; top: 3450px; z-index: 1;">DATE HERE</div>

Here is the code for the main box. I did not define neither the position nor z-index so it is below the images and DATE box.

<div class="blahbox" style="border-style: solid; box-shadow: 10px 10px; height:200px; width:600px; text- align:justify; background-color: #40916c; padding-right: 20px; padding-left: 20px; color: black;"><br> <br><br>DEAR DIARY</div>

Below is the code for the mushroom gif at the bottom right. The position and z-index are underlined.

<img src="" style="position: absolute; left: 920px; top: 3590px; z-index: 1;">

And this is only the tip of the 'cool things you can do with HTML/CSS' iceberg. I hope this helped or at least inspired some ideas for your personal website.

This article was created by JR