Skip to content

Instantly share code, notes, and snippets.

@lachlanjc
Created March 26, 2018 15:30
Show Gist options
  • Save lachlanjc/61a659f4de81f4e147a0f61ffbd06667 to your computer and use it in GitHub Desktop.
Save lachlanjc/61a659f4de81f4e147a0f61ffbd06667 to your computer and use it in GitHub Desktop.
Favorite Song site

Favorite Song site

1. Open Glitch

Open Glitch, click on "hello-webpage", and click "Remix your own."

2. Start your HTML

HTML is the language we use to write webpages. Every website you've ever visited uses HTML, and yours is no different.

Open the index.html file in the sidebar, and delete everything :)

Now, start typing your code (don't copy and paste!!)

<!DOCTYPE html>
<html>
<head>

</head>  
<body>

</body>
</html>

3. Add a heading

First things first, let's add a heading! Below the <body> line, add an <h1>, which is a large heading:

<h1>Shake It Off by Taylor Swift</h1>

4. Check it out!

Click the Show Live button in the upper left to see your website so far! You've got your own webpage!

5. Add a photo

Find a photo online, then right-click and "Copy Image Address".

Add it to your page like this:

<img src="YOUR URL">

6. Add more!

Want to add a paragraph of text? Try this:

<p>Shake It Off is the best song ever written.</p>

Maybe embed a YouTube video? On a YouTube page, click "Share," then "Embed." Copy the HTML code it gives you into your page, and voilà!

7. Start styling

While we use HTML to write the content of webpages, we use another language, called CSS, for styling and layout.

First, we need to add a link to the CSS we're going to write. Below the <head>:

<link rel="stylesheet" href="style.css">

Now open your style.css file in the sidebar, and delete everything.

8. Write some styles

In your CSS file, write this: (don't copy and paste!)

body {
  font-family: Arial;
  text-align: center;
}

Just like that, you're starting your own design!

9. Go crazy!

Not sure how to do something? Google it! Try how to add a link in html or how to embed audio with html. Find some code, copy and paste it, change things. The web is built by tinkerers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment