Home Pricing Open Editor

Hot Docs

Hot Tutorial

A step-by-step guide to building a web site on Hot Page, exploring all of the basic functionality

In this tutorial, we’ll be building a personal web site for Burnout, the Hot Page mascot. We’ll show you the basics of creating a layout, integrating open source code and building a site-wide header that links pages together. Feel free to use this guide with your own content to start building your own pages immediately — the steps taken here are a starting place for many common web sites.

If you’re brand new to HTML, you might want to first check out our one-page introduction, Elemental HTML, and an accompanying guide to CSS, the Style of Elements.

Also, if you want to spoil the ending you can see a copy of the site we’re going to build or how it was built by opening it in the Hot Page editor. But like, don’t ruin the narrative for yourself quite yet. It’s just there in case you get stuck or your site doesn’t end up working the “right” way and you want to see how it’s “supposed” to look like.

A Word About Content

All great web pages start with great content. If you don’t have anything to say, there’s really no point to any of the design or swank interaction you will build for your site. Content is like the foundation and steel beams holding up your site, without it, any windows or tiles you put on it will just fall down and the result will look pretty silly. Your site’s look and feel can help great content get attention, but it can never replace it.

If you’re interested in building something real of your own, take a moment to sit down and really think about the message you want to express. Before picking colors or making any other design choices, write some text.

This step is certainly harder and more important than anything that follows. That said, it is something that Hot Page will never be able to help you achieve, so we are now going to breeze right over it like it never happened. Do not make the same mistake!

Signup for Hot Page

Although you can test out Hot Page without making an account, it’s probably best to do so if you want to keep access to your site. So go ahead and go the the signup page and register your email with a username and password — it’s totally FREE!

Create a Site

After making an account you will be asked to pick a name for your first site. Actually, your site has a title which is human readable with punctuation and the like, as well as a name, which forms part of your own domain name, like my-name.hot.page.

If you already did the signup previously, you can create a new site from the home page of the editor at https://hotpage.dev/. Click the button that says “Create a new site” (or just click this link to go directly).

Add Some Content

Let’s paste in some demo content. For this tutorial we’re building a simple personal website that starts with a bio page. You can select all the content that’s already in the document with the mouse or hit Ctrl + a. Then paste the block of text below.

Not exactly cheerful, but they’re pretty good at web design.

Modify an Element

Hot Page can be quite intimidating if you have never built a web page by hand before. That’s because as you use Hot Page, you may still need to type stuff directly into the computer, just like a goddam hacker.

To make the first line of the page into a heading, stick your cursor in the box above “I’m Burnout” and replace p with h1. Code tends to be very concise and by doing this, we’ve just turned the element from a paragraph into a level-one heading. This is very basic web stuff so it’s probably looking familiar already, but if not, please take a look at our one-page introduction to HTML.

Add an Image

Drag the image below directly into the editor above the heading you just made. You can also drag images from your desktop or any folder on your computer straight into the document. There’s also an Images sidebar that serves as a library of all the images that you’ve already uploaded to your site. You can also drag new images there or open a file picker dialog box by clicking “Upload an image.”

The web is made of links between pages. On Hot Page, you can add a link to any piece of text by just selecting it and using the black menu that pops up.

To create our first link, select the text “Hot Page” in the first paragraph of text and click the X icon that sorta looks like a chain. A dialog will pop up asking for the URL that is the target of this link. Go ahead and paste “https://hot.page” and hit “Okay.” You have made a link.

Preview Your Work

To view this web page as anyone else on the internet would see it, we first need to save it. Click the “Save” button in the toolbar at the top of the page. Then hit the X icon to open your brand new page in another tab.

You will probably be shocked at how ugly things are at this stage. You might think, “This is a professional web site tool? This thing looks like crap!” And, well, you wouldn’t be wrong. However, things are just as they should be and by the end of this tutorial, you will have made something that looks totally decent.

The philosophy of Hot Page is about building things up from zero instead of giving you a complete design and asking you to subtract. We believe this process is inherently more creative and fun.

Add a Style Sheet

Let’s add a style sheet and see this thing come to life. Go to the “Styles” tab and hit the @import style sheet button. That’s a reference to the @import CSS rule for adding whole chunks of CSS from another file. Click the line that says boilerplate.css.

If you save your document and look at it in the other tab that we opened in the previous step, you’ll see things have definitely changed for the better. It’s not exactly pretty — and certainly not distinctive — but it’s at least less, um, ugly.

The idea for this boilerplate CSS file is to just add some common-sense style rules that you probably want on any web page, things like spacing and shortening the lines of text so that you can actually read them. You can read the entire CSS file by opening it in the Hot Page editor. The comments there explain most the rules and why they’re included.

Adding Custom Styles

Let’s keep going with the styles to give this page a little more flavor. You can start by pasting the following CSS in to your Styles tab.

html {
  background: #5F347A;
  color: white;
  --horizontal-margin: auto;
  --text-width: 900px;
}

img {
  margin-inline: auto;
}

h1 {
  font-size: 3rem;
  font-weight: normal;
  color: #FAD61F;
}

a {
  color: #FAD61F;
  font-weight: bold;
}

Using Classes

Let’s take those first lines after the heading and turn them into a sort of header area with bigger text. To do this we can add classes to the elements and then use them to make style rules. So where it says p above Burnout’s pronouns, go ahead and type p.pronouns, which adds the class pronouns to the p tag. And for the two lines below it, add the classes identity and job-title so that both lines say p.identity and p.job-title.

On the Styles tab, we are going to use these classes to select the elements and give them some new style rules. Paste the following CSS and feel free to tweak it as you see fit.

.pronouns {
  font-style: italic;
}

.identity,
.job-title {
  font-weight: bold;
  font-size: 1.2em;
}

Nest Elements

Alright, so that header section could still use a little bit of work. In HTML, elements can group other elements inside of them and form elaborate trees of stuff nested levels and levels deep. This is how we build up a layout on any web page.

We can put the image next to the text by adding a few more elements and style rules. Here are the steps:

In the end, it should look like this:

Now paste the following CSS in the Styles tab:

.top {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 16px;
  max-width: var(--text-width);
  margin: 0 var(--horizontal-margin);
}

When you preview your page, the image should now be next to the text.

Create Another Page

There’s a lot you can do with a single-page site, but sometimes it’s best to split your content into new pages. Let’s do that now.

From the page editor, hit the back arrow at the top or click on your site title and you’ll arrive at an overview of your site. The current tab is called “Pages” and it’s a view of all your pages. Go ahead and click “Create a new page” and we’ll be in the document editor once again. Give the page the title “My Favorite Poems” and the path “/poems”. Once you hit Save, your page will be visible at “/poems” on your site.

Go ahead and paste the content below:

Create a Style Sheet

If you take a peak now, you’ll see that things are just as ugly as that first page was and we’ll need to add style rules again to make this thing look decent. This could get pretty tiring to do for every page, so we’re going to go ahead and make a style sheet that we can include the same styles from now on out.

Go back to your site page by clicking the the name of the site or the back arrow at the top of the page. You’ll see both pages that we’ve created and above that three tabs: Meta, Pages and Style Sheets. Hit “Style Sheets” and then use the “Create a style sheet” button to make a new one.

At the top, you’ll need to give this style sheet a general path like /main.

Click @import style sheet to add the boilerplate.css styles here. Then you can paste the same rules to change the colors and spacing:

html {
  background: #5F347A;
  color: white;
  --horizontal-margin: auto;
  --text-width: 900px;
}

h1 {
  font-size: 3rem;
  font-weight: normal;
  color: #FAD61F;
}

a {
  color: #FAD61F;
  font-weight: bold;
}

Be sure to hit save before you leave the page.

Now go back to the poetry page and hit the same @import style sheet button again. You should see the style sheet we just created under “Site Style Sheets.” Go ahead and click it to add it to your document.

Take a look at that crazy purple poems page.

Add a Font

Things are really going to get better once we pick a better typeface. You can go to Google Fonts and pick out a few fonts, then copy the link it generates for you into your page.

I just picked out Pixelify Sans for the heading and Open Sans for the body text (Burnout loves pixel art, obviously). The import link that Google gave me is below. Please note we don’t want the whole @import rule, but just the URL of the CSS file, like this:

https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pixelify+Sans:wght@400..700&display=swap

Click the @import style sheet button again and paste the link. Then paste this CSS to use the fonts on the page:

body {
  font-family: Open Sans, sans-serif;
}

h1 {
  font-family: Pixelify Sans, sans-serif;
}

Different pages on the same site often share some parts in common, typically a header and footer with links to navigate between the pages. We can easily do this on Hot Page by just including one page inside another. Here we will create a header.

Go ahead and make a new page and call it Header. Paste in the following HTML:

<nav>
  <div>Burnout</div>
  <div>
    <a href="/">Home</a>
    <a href="/poems">Poems</a>
  </div>
</nav>

On the Styles page, import your site’s style sheet again and add this CSS to format the <nav> element:

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F65E2B;
  margin: calc(var(--body-padding) * -1);
  margin-bottom: 2rem;
  padding: 0.7rem 2rem;
}

nav h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 300;
}

nav a {
  margin-left: 2rem;
}

Since we don’t want this page to be loaded by itself, we can make it private. Open the Head tab and hit the toggle next to “Published” and the page will no longer be visible to anyone coming from the internet.

Now that we’ve built the header, let’s add it to both of pages on our growing site. Open the home page in the editor, flip to the Pages tab on the left of the screen and drag the Header page into the body of the document above all of the other content. Hit save and you’ll see the header is now sitting at the top of the document.

Add it to the poetry page as well. Now when you look at your site, you can see we have a convenient way to jump back and forth between both pages.

Add Some JavaScript

As you can see, you can do a whole lot with just HTML and CSS. If content is the meat and potatoes of web design, HTML and CSS are the butter and all of the seasonings. Now we’re getting to dessert: JavaScript.

In this section, we will add one line of JavaScript, a simple event handler that will trigger an animation when clicked. This is an Easter egg on the page that serves to introduce you to some basic concepts of JavaScript and how you can use it on Hot Page.

JavaScript can be intimidating because it often gets quite complex. But it turns out that typically most of what we do in JavaScript is just manipulate the HTML and CSS of the page. So to start things off, let’s add another bit of CSS to the Styles tab. This is a new type of rule that defines the animation we’ll be using.

.jello {
  animation: jello 0.7s ease-in-out;
}

@keyframes jello {
  12.5% {
    transform: skew(-12deg, -12deg);
  }
  25% {
    transform: skew(6deg, 6deg);
  }
  37.5% {
    transform: skew(-3deg, -3deg);
  }
  50% {
    transform: skew(1.5deg, 1.5deg);
  }
  62.5% {
    transform: skewX(-.75deg, -.75deg);
  }
  75% {
    transform: skewX(.4deg, .4deg);
  }
  87.5% {
    transform: skewX(-.2deg, -.2deg);
  }
}

Click on the menu next to the image for burnout and select “Add a JavaScript event handler.” That pops up another little box to type in. The event we’re now creating is onClick and, no surprise, it will run this code when someone clicks on the image. Go ahead and paste this line of code:

this.classList.toggle("jello")

To test this out, save the document again and click the image on your page. Ta da! You are now a programmer.

There’s one big problem left on this site and that’s the ugly banner at the top of it that advertises Hot Page. You can get rid of that by filling out a simple form with your credit card number. 😉

What’s Next?

The site we built could still use a little work. The following ideas are left as assignments for the reader:

If you got stuck along the way or have any suggestions for how to improve this document, we would love to hear from you. Please reach out to the Hot Page team via email at support@hot.page or join our Discord server to chat directly with the Hot Page developers.