Personal Website tutorial

Welcome! In the next 45 minutes, you’re going to get your first website online, and it’s going to be fabulous. It’ll look something like this:

intro-site.lachlanjc.repl.co

Check out the live demo and final code (the files index.html & style.css).

Part 1: Setup

All websites are written with code. To write our code, we need our own code editor. We’re going to use repl.it, a free, online code editor, since it works on all kinds of computers. It works similarly to Google Docs, but it’s optimized for typing code & will host your website at a permanent URL.

To get started, go to https://repl.it/languages/html. You’ll need to make an account, then click Create repl. Your coding environment will immediately spin up with some demo code.

repl.it editor with default HTML code in a MacBook

You should be seeing a file called index.html, with a bunch of text covered in < & > symbols. That’s HTML, which we’re about to write!

Part 2: HTML

Every website—from Reddit to the New York Times—is written in HTML, which stands for Hypertext Markup Language. It “marks up” text with additional meaning, like “this line of text is a heading.” We can add non-text elements too, like images, videos, and buttons. Unlike more specialized programming languages, every computer can display HTML.

Everything is a tag

<h1>Hello everyone!</h1>

Everything in HTML is a tag, like this one, made up of 3 parts (or more, we’ll get to that later):

  1. <h1>: the opening tag. The name of the tag is wrapped in angled brackets (< & >)
  2. Hello everyone!: the content. You can write whatever you want here!
  3. </h1>: the closing tag. This is just like the opening tag, but has a forward slash before the tag name. If your HTML gets wonky-looking, it’s often from forgetting a closing tag :)

Now, write your own heading!

Add your name between opening <h1> + closing </h1> tags

note:

Another thing to remember about HTML is that it treats all blank spaces the same. If we wrote this…

<h1>

  Hello

      everyone!
</h1>

…it’ll look the same as the first example.

Writing tags

Repl.it gives us starter code, but let’s start fresh. Delete everything in index.html, then type in the following. Do not copy & paste 🤓

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

Every webpage uses this structure. Here’s what the template means:

  1. The first line, <!DOCTYPE html>, tells the browser we’re using HTML, and what version of HTML to expect (the latest version, HTML5, in our case)
  2. <html></html> contains the whole page
  3. <head></head> holds information about the page (such as the title)
  4. <body></body> contains the content, which is everything you see on the page

Click the Run button to see your site. It’ll be blank—because we haven’t filled in the content yet!

Adding content

Remember that <h1> tag you wrote? Add one of those with your name, between <body> & </body>!

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Lachlan Campbell</h1>
  </body>
</html>

Click Run again. You’ve got your name on the page! Your first webpage! Congratulations 🥳

note:

You can open the webpage in its own tab by clicking the arrow button in the top-right:

Annotated screenshot highlighting the arrow button in the top-right of replit

You can open the same URL on any other device—it’s a public website!

Next, let’s add some text underneath the heading. We’ll use the <p>, or paragraph, tag.

<h1>Lachlan Campbell</h1>
<p>Hey, I'm a web developer!</p>

What does h1 stand for?

H1 stands for “heading 1.” HTML supports 6 levels of headings, with 1 being the largest. If you want a subheading, you use <h2>, or if you want another heading under that, <h3>.

What other tags are there?

HTML has hundreds of tags. <h1> is used by nearly every website, as is <p>. <strong> will make something bold, <a> adds links. <div> is a tag that has no intrinsic meaning, but it’s used all over the place for grouping elements in more complex layouts. <button> does what you think it will 👇

HTML

Adding an image

Text is fun, but let’s add an image! Images are included in HTML via the <img> tag, which has an attribute for the source URL of the image, shortened to src.

It works like this: <img src="https://url.com/image.jpg" />

Note the equals sign, then quote marks around the attribute value (the URL). Since there’s no text content inside, <img /> is self-closing; there’s no </img> afterwards.

Write an <img> tag with this source URL

https://intro.lachlanjc.com/ted.gif

Unless you love mine, head over to Google Images, Imgur, Reddit, etc to find your own image. To get the source URL, right click, then click Copy Image Address. On repl.it, add an image to your page!

How do I upload my own image?

If you want to upload your own image, drag it into the sidebar of repl.it. Then, click the ︙ to rename it to photo.jpg or something easy.

Your image URL will be a slash then the file name, like src="/photo.jpg".

Why don’t images have closing tags?

As noted, the image tag doesn’t have a closing tag the way <h1></h1> or <body></body> do. <img> is technically called a void element, which means it can’t contain text.

Images aren’t the only self-closing tags; audio, videos, & embeds (like of Google Maps) are self-closing too.

This is where our webpage should be at!

Part 3: CSS

This is my favorite part. We get to make the page look fun! HTML defines the elements on the page, while CSS (“Cascading Style Sheets”) is a secondary language to add styling & layout. You can apply things like colors, spacing, & fonts in CSS to the HTML tags on your page.

Since CSS is a different language, it lives in a separate file from the HTML.

index.html
script.js
style.css
In the sidebar, you’ll find the 3 files repl.it made. CSS is the last one!

First, we need to add a link from the HTML to the CSS. This is an HTML tag too, but not one that shows up on the page. The <head> tag is where tags like that go, so between the <head> & </head> tags, add a link, like this:

<head>
  <link rel="stylesheet" href="style.css" />
</head>
note:

The link tag describes relationships between the current file (in this case, index.html), and some external file (style.css). rel="stylesheet" specifies what this relationship is: that style.css is a stylesheet, and href (hypertext reference) specifies where the file can be found (in this case, the filename style.css). The link tag, similar to the image, is a self-closing tag, once again closed only by />.

Now, we’re venturing into the world of CSS. Let’s resize the image. Open up style.css, then type the following:

img {
  width: 200px;
}

A CSS stylesheet lists selectors followed by declaration blocks of attributes & their respective values. Here, the img is the selector, lasso-ing all the images on the page. The braces ({ }) wrap the declarations. In this case, we’re setting the width property to 200px. (px refers to pixels, which are a unit of digital measurement.) When this rule is applied, all the images on our page will have a width of 200 pixels. Each declaration ends with a semicolon.

Underneath that, let’s add one more chunk, to format the text. Instead of just picking the h1 or p, we can style body, since all the text is contained within it.

I want to center the text on my page, plus change the font. For the font, I’m going to use system-ui (the system font), but you can also try Arial (which Google uses), Georgia (if you’re fancy), or "Comic Sans MS" (note the quote marks) if that’s your vibe.

body {
  text-align: center;
  font-family: system-ui;
}
Oh hey:

We just encountered CSS’s “cascading” part: styles cascade down, depending on the selector’s specificity.

body is more general, since it’s higher up in the tree of HTML elements, but if we set font-family on the h1, it would be a different font from the rest of the text, since h1 is more specific than the whole body.

Let’s do a color, too! The attribute color (spelled without a u) allows you to set the text color, and background-color allows you to set a background color. You can find a list of supported color names over at W3Schools.

I’m going to keep it simple & just make my name magenta pink. Keep in mind you want a combination of colors will keep the text readable.

h1 {
  color: magenta;
}

Wow, we got carried away writing that CSS. Click the Run button & check out your masterpiece!

HTML
CSS

However your page is looking, give it a smile. You made this!

Part 4: Go wild

In this section, your challenge is to add additional features to your website to make it your own!

  • Want to use a different font? Google it!
  • Want to add more pictures? Google it!
  • Want to add more text? Your entire life story? Background image? Background music? Video? More pages? Google it!

A good way to get ideas for what to add to your website is to look at other people's websites. Find a website that you like, either from the below list or from somewhere else on the internet, pick one aspect of that website that you would like on your own website, and Google for ways to make it happen!

Websites Made by Other Hack Club Hackers:

Websites Made by Professionals:

Part 5: Share your work!

Now that you have finished building a website, you should share your beautiful creation—because your site is on the internet, you can share it with anyone who is also online! Remember, it’s as easy as giving them your URL!

Send me your creation

I’d love to see what you made during this workshop—even if you think it’s embarassing :)

Email
URL