tribute

a short guide to creating webpages

leave your mark on the world

Long ago, or not really long ago, it was common for people to make personal websites.

It took Orpheus the dinosaur a long time to make one of her own, possibly because she doesn't have fingers :( (She will not confirm or deny whether it was actually a Tumblr blog dedicated to posting fanfiction and raccoon memes. But hey, no judgement.)

In this day and age, spaces like these are becoming less common. Orpheus is here to help you embrace cringe build a fanpage dedicated towards something you really, really like - like a tribute!

You'll learn:

  • What to make your website about
  • How to make it look nice
  • How to publish it for other people

And if you're completing this as part of the Athena Award, you'll gain some Artifacts from completing it!

orpheus Follow

what to make?

Think about something you really enjoy. A TV show, or a video game, a book, an artist, or even food.

Personally, Orpheus really likes playing this video game called Undertale. She wants to show you how you can make your own cool website for something you like.

Consider what's special about your chosen topic and how you could apply it to a website. Specifically, things like:

  • Fonts?
  • Theme/colour scheme?
  • Music and audio?

If it's a game, think about what the in-game menus and interface look like. If it's a book, think about the design of the cover. If it's an artist or band, think about what their albums look like, or the app or device you usually use to listen to their music.

Don't restrict yourself to what you think a normal website might look like. Be creative! Orpheus really likes the sites on Neocities, for instance.

40 notes
orpheus Follow

how to make it

Now that you have an idea, how do you actually turn it into a website?

There are many ways, but they all boil down to the very basics of HTML and CSS. In essenece - HTML is the skeleton of the website, and CSS is the stuff that makes it look nice.

Let's use the example of Undertale from before. Undertale has a fairly simple design, and uses pixel art and a monospace font. It's also characterised by lots of black boxes with white outlines. If we bring all those aspects together, we can make a cool video game tribute.

←→⟳ localhost:8000 ×
A raccoon approaches.
ORPHEUS LVL 0 HP 20 / 20

Let's quickly break this down into separate components.

First, though, everything you see here is inside this basic HTML file.

index.html 
<!DOCTYPE html>
<head></head>
<body>
<!-- all the cool stuff goes here! -->
</body>
  • Image: That picture of Heidi the raccoon
    • index.html 
    <img 
	src = "https://cloud-n807bcpij-hack-club-bot.vercel.app/0terrifiedheidi.png"
	style = "display: block; 
			margin-left: auto; 
			margin-right: auto;
			margin-top: 16px;
			margin-bottom: 16px;
			height: 160px;">
</img>
  • Box: The box with flavour text.
    • index.html 
    <div 
	style = "width: 100%; 
			border-width: 4px; 
			border-style: solid; 
			border-color: white;
			color: white;
			padding: 16px;
			font-family: monospace;">
	A raccoon approaches.
</div>
  • Everything else: All that text on the bottom.
    • index.html 
    <div 
	style = "width: 100%; 
			display: flex;
			flex-direction: row;
			color: white;
			font-family: monospace;
			padding-top: 8px;
			padding-bottom: 8px;">

<span>ORPHEUS LVL 0</span>

<span 
	style = "margin-left: auto; 
			margin-right: auto;">
		HP 
	
	<span 
		style = "background-color: #FEC700;
					padding: 8px;
					width: 24px;
					display: inline-block;">
	</span>
	20 / 20
</div>

Put all of those components in a div with styles background-color: black; padding: 16px; and you're good to go!

Everything inside style = "" is what's known as inline CSS. You can either keep your CSS styles inline in your HTML, or you can put it in a separate .css file.

But wait, you ask: how do I do this?

There's a few different options for trying out creating websites in the browser. One example is GitHub Codespaces, which lets you develop things without having to download anything.

  • Sign up for GitHub here.
  • Once you're signed in, visit this page to create a Codespace. Use the blank template.
  • Once the Codespace has loaded, type touch index.html in the Terminal. This will create a file named index.html where you can start creating your website!
  • Type python -m http.server in the terminal. This will start a version of the website you can access.
  • A notification should appear in the bottom right corner mentioning an application running on port 8000. Click "open in browser" to open your website in a link anyone can access! This link will only be up when your Codespace is running.
64 notes
orpheus Follow

another example

Orpheus also really likes the album Citrona by Flipturn. She wants to make a website for herself that's based off this album.

Cover of the album Citrona by Flipturn
    What stands out about this, anyways?
  • The palette of the painting and the colour used for the text at the bottom.
  • The sans-serif font and spacing (kerning) between letters.
  • The off-white box in the background, that looks vaguely like a Polaroid.
←→⟳ localhost:8000 ×
Hack Club orpheus
Hi :3 I'm Orpheus, and this is my website. I'm a dinosaur! Lorem ipsum dolor sit amet.
Here's a small demo!

The issue is sometimes, your inline CSS styles get a bit complicated when you're making your website. That's why you can put your CSS styles in a different file. Name it something useful - like styles.css.

Then you can tell your HTML where to look for CSS styles. In the head section, add the following line (if you called your CSS file something different, update the name)

index.html 
<link rel = "stylesheet" href = "styles.css">
Inside your CSS file, you can now make changes to elements. For example:
styles.css 

/* 
this will affect the <body></body> tag.
you can use this to style any HTML tag, like <p>, <div>, <span>, <a>, etc.
*/
body { 
    width: 80%;
}

/* 
this will affect elements with the 'cool' class, as shown by the '.'
e.g <div class = "cool"><div> 

classes can be applied to multiple elements
*/
.cool { 
    color: white;
}

/* 
this will affect elements with the 'very-cool' id, as shown by the '#'
e.g <div id = "very-cool"><div> 

ids should only be applied to one element
*/
#very-cool { 
    background: white;
}
It's basically the exact same as inline styles, but in a different file.

68 notes
orpheus Follow

making your website real

It makes Orpheus really sad when she clicks on a link and sees this:

←→⟳ dinosaurbbq.com ×

404

page not found! this website was probably deleted.

Someone probably put a lot of effort into making it, right? And now it's nothing...

Here's where GitHub saves the day again! GitHub is both a website that you can use to both store your code, but it also offers a feature that lets you host a website on it. It's called GitHub Pages.

  • First, though, let's turn your Codespace into a code repository. Go back to Codespaces and turn your website into a repository.
    • Creating a GitHub repository from a Codespace.
  • Then, follow these steps to publish your website permanently online. You'll be given a link in the format YOURUSERNAME.github.io/nameofyourrepository. Send this link to anyone who you want to show off your project too!
    • Publishing a static website on GitHub pages.

You're done!

Congratulations on finishing Tribute, the first guided You-Ship-We-Ship project in the Athena Award. Submit your project here to earn a special sticker and some Artifacts.

If you feel confident, you can move on and start your own project that builds on what you learned here.

If not - no worries! You can start Express, the second guided You-Ship-We-Ship project in the Athena Award.

73 notes