Showing off your projects: embeddings

Having learned the basics of writing tags in HTML, it’s time to start showing off projects we’ve done.

Here we’re going to follow a simple pattern for each project. We’re going to

• write a h2 heading for the title of the project
• include either an image or some kind of embedded audio/video
• write a paragraph talking about the project, with relevant links included

My first example is going to be an old project I did on generative poetry. I called it “Poetry in Partnership” so that’s going to be the title I use, just below the paragraph tags for the bio earlier. My code thus looks like

<p>My name is Clarissa Littler, or left_adjoint in the weird small places of the internet, and I'm an artist, programmer, and teacher based in Portland, OR.</p>

<p>I create poetry, generative art, algorithmic music, and essays on the relationship between people and technology. Below I link to some of the projects I've worked on!</p>

<h2>Poetry in Parternship</h2>

and when displayed is going to look like the following screenshot.

Next, I’m going to link to a YouTube video of the talk I gave on this. That means I’m going to go to YouTube, find the video, and click on share and then embed. Here’s a screenshot showing what this looks like in my browser:

After you click on embed, you’ll be presented with a bunch of ugly looking code that you might recognize as HTML. You’re going to copy this entire code snippet, from the start of the <iframe> to the end of the </iframe>, and paste it into your site just below the title of the project.

That makes my code look like the following:

  <h1>left_adjoint's Computational Peculiarities</h1>

    <p>My name is Clarissa Littler, or left_adjoint in the weird small places of the internet, and I'm an artist, programmer, and teacher based in Portland, OR.</p>
    
    <p>I create poetry, generative art, algorithmic music, and essays on the relationship between people and technology. Below I link to some of the projects I've worked on!</p>

    <h2>Poetry in Parternship</h2>
 <iframe id="poetryYT" width="560" height="315" src="https://www.youtube.com/embed/OhDyBXnXpm0" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreeen></iframe>

And here’s a screenshot of what my site looks like now:

Embedding media like this is really helpful because you can play it in the browser! You can use this trick for all sorts of things: soundcloud tracks, spotify playlists, Scratch games, even social media posts. So if your projects are hosted on another site, you’ll be able to include them in your portfolio site in an interactive way. In general, you just need to look for the keywords share and embed to find the HTML code you need to copy over.

In the next section, we’ll be covering how links work so we can include them in our description of our projects.