Crossover Episode: Poetry + Coding

Publish your poetry on a website with HTML!

Part One: Write a Poem

Write a poem about anything. It should have at least eight lines. Alternatively, you can find a poem somewhere and use that instead.

Part Two: Get Setup to Code

Click here to get started.

1. Sign up with Google note: you may have to sign in first, and then click the link again
2. In the bottom left corner, click "Save a copy and edit"

From there, you should be ready to start coding!

What is VS Code for Education?

This is basically a website that lets you make websites. On the left, you can choose files and share your site. In the middle, you can actually write the code for the website you're building. On the right, you can see the website you're building.

How do websites work?

Every website you've ever seen is made with a language called HTML. Web browsers like Google Chrome take HTML code and turn it into nice looking pages. Today, we're going to write some HTML code!

Part Three: Code Your Poem

You should see the code for your website in the middle of the screen. It's in a very specific format: HTML. You can change any of the text in the code, like where it says Poem Title or Poem Author, but don't change anything like the <h2> or </h4>. If you look at the code in the middle, and compare it to the website, you will see how the text translates into different things!

Your job is to change the text in the code so that it's your poem. Don't worry about any of the other stuff - just focus on the text you see in the website itself.

Title & Author

Start by changing Poem Title to the title of your poem, and Poem Author to your name! You can click the green triangle in the top right to update your site. Your code should look something like this:

<h2>The Red Wheelbarrow</h2>
<h4>William Carlos Williams</h4>

The First Four Lines

Next, change the first four lines of the poem. These are all inside of <p> and </p> things - those make new lines. Note that blank space in the code does NOT make blank space between lines in the website - that's why we need these things. The first four lines should have the lines from your poem! Like this:

<p>so much depends</p>
<p>upon</p>
<p>a red wheel</p>
<p>barrow</p>

The Next Four Lines

For the next ones, you will actually have to make brand new lines instead of updating the ones that are already there! The code will look basically the same, you just need more of it. When it's all done, it should look something like this:

<h2>The Red Wheelbarrow</h2>
<h4>William Carlos Williams</h4>

<p>so much depends</p>
<p>upon</p>
<p>a red wheel</p>
<p>barrow</p>
<p>glazed with rain</p>
<p>water</p>
<p>beside the white</p>
<p>chickens</p>

Poem Reading

If you would like the computer to read your poem, you will have to publish your site - that's part five!

Part Four: Customize Your Website

Now for some fun - you can change the text color, background color, font, and font size! This is all done using CSS - the language for customizing styles on websites.

1. On the left, click the style.css file to open it
2. Find the code that changes the background color: background: white
3. Click the white box next to white to choose a new background color!

Once your background has changed, you can try changing the other parts too.

1. Change the text color by clicking the box next to black
2. Change the size of the text by changing 16 to another number (make sure to keep the px though)
3. Change the font by changing Arial to one of the fonts below (make sure to keep the new font inside of " and " though)

These are just some of the things you can do to customize your site.

More Customization Options

Here are some of the possibilities for your website after this:

1. Add a picture
2. Add a YouTube video
3. Add text shadow
4. Add hover transitions
5. Add a background image
6. Add multiple pages, or more poems
7. JavaScript: change the voice that reads your poem (this ones harder but doable)

See if you can think of any other way to enhance your website!

Part Five: Share Your Website

First, you will have to publish your site!

1. In the bottom left, click the "Publish Site" button
2. Open the site in a new window using the "Open" button that should appear in the bottom right
3. Copy the URL from the address bar (should be something like constructing-pine-needle-938.vscodeedu.app)

When you have your URL, you can paste it to share it with anyone!

Click here to share your site.