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 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.

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 your 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.

Create a Site

After making an account you will be asked to name 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).

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 Command/Ctrl-A. Then paste the block of text below.

Modify Elements to Make a Heading

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 content into a heading, go ahead and type “h1” into the place where it says “p”. In this case we’re turning 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 into the document or into the Images sidebar that serves as a library. You can also open a file picker dialog box by clicking “Upload an image” in the same sidebar.

Creating a Link

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 XX 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.

Previewing Your Work

To view this web page as anyone else on the internet would see it, we first need to save it. Click “Save” in the toolbar at the top of the page. Then hit the XX 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.

Adding 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” button. That’s a reference to the 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 style rules to give this page a little more flavor. Switch to the style rules and paste the following CSS.

html {
  background-color: yellow;
  color: red;
}

a {
  color: red;
}

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 class “job-title” so that both lines say “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 {
  text-style: italic;
}

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

Add a Font

Things are going to really 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 TK and 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=Protest+Guerrilla&display=swap

In the styles tab, click the @import button again and paste the link. Then paste this CSS to use the fonts on the page:

html {
  font-family: TK, sans-serif;
}

h1 {
  font-family: TK, sans-serif;
}

Nesting Layout 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 things nested levels and levels deep. This is how we build up a layout on any web page.

<<<image of nesting>>>

Now paste the following CSS in the styles tab

.top {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 16px;
  max-width: 36rem;
  margin: 0 auto;
}

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

Adding 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 the pages on your site. 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 click save, your page will be visible at “/poems” on your site.

Go ahead and paste the content below:

To style this page, we are going to take a shortcut and use a pre-built stylesheet from elsewhere on the web. This is a feature that you may not have seen in other web site editors, because most are designed as a closed platform that only allows you to use their themes or components.

There’s a great CSS style sheet ((https://edwardtufte.github.io/tufte-css/)) that’s based on the work of Edward Tufte, an author who writes about information design. Let’s @import this to the new page’s Styles tab:

Since this file defines a different background color, you’ll probably want to remove the rule that sets the background white.

The Tufte CSS project defines class names just like our own styles. So for instance let’s style the line “By Charles Baudelaire” with the class “subtitle”. Now it’s clear from the typography that this is not part of the poem itself nor it’s title.

Repeating Content on Many Pages

A web site is a collection of different pages, but they often share some parts in common, such as a header or footer with links to navigate between the pages. We can easily create a header and include it on multiple pages in Hot Page.

Go ahead and create another page now and call it Header. Paste in the following HTML:

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

And add this CSS to the Styles tab:

.nav {
  display: flex;
}

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 “Publish” and the page will no longer be visible to anyone visiting from the internet.

Now that we’ve built the header, let’s add it to both of pages on our growing site. You can quickly jump around your site by using a dropdown menu above the title of the page you’re working on:

<<screenshot>>

To insert the header, 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 page for Destruction as well. Now we have a convenient way to jump back and forth between our 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 only 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.

It turns out that much of what we do in JavaScript is manipulating HTML and CSS of the page. So to start things off, let’s add another CSS file to the page. This time it’s a link to an open source animation library called animate.css ((link)):

https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css

We’re going to animate the image of Burnout. The first step is to add a class to the image: animate__animated. That’s just the way they designed this animation library.

Now 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("animate__jello")

To test this out, save the document again and click on the image in your page. Ta da!

Remove the Hot Page Banner

There’s one big problem left on this page and that’s the ugly red pixelated 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 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 ((link)) to chat directly with the Hot Page developers.