Webring Garden Tour

To add social context to our personal websites we'll create a class webring in the form of a garden tour. "A webring (or web ring) is a collection of websites linked together in a circular structure, and usually organized around a specific theme, often educational or social." (Wikipedia)[] In this case, we'll focus our webring on the class, and create links to eachother's personal websites in an alphabetical order.

In this case we'll each create an ASCII Garden that will act as a stop on our class webring.

Resources: HTML Paths, ASCII art.

First, we'll create our own ASCII Gardens.

  1. Create a new page titled garden.html in the same folder as your class site index.html file.
  2. Copy and save the following code into your garden.html file:
<!DOCTYPE html>
<html>

<head>
  <title>[your name]'s ASCII Garden</title>
  <meta charset="utf-8" />
</head>

<body>
    <pre>
      <!-- create your garden here -->
    </pre>
</body>
</html>

And design your garden inside of the <pre> tag (refer to www.asciiart.eu/ for code samples). Tilde Town Cadastre is a great example to reference.

Then we'll link to our garden from our class sites.

  1. In your index.html file add a link in the first <li> tag under the <h3> tag with the text "Exercises" inside of it to your garden.html file. Your code should look like this (feel free to change the link text as you wish):
<h3>Exercises</h3>
<ul>
    <li><a href="garden.html">my garden</a></li>
</ul>

Lastly, we'll set up our webring.

  1. Add a link to the top of your garden.html webpage to the "next" and "previous" garden pages adjacent to your name in the list below:

For instance Chris would link to Yuxi and Katie's gardens like the following: 

<a href="https://vincywu-design.github.io/interactive-foundations/garden.html">previous</a>
<a href="https://kpharper.github.io/interactive_foundations/garden.html">next</a>

Once everyone uploads their gardens, our webring should be complete!

Demo Files

We'll be working with a Github repository of weekly demo files to follow along with video tutorials. Copy this to your local github websites folder to stay up to date.

By using Github Desktop to “Fetch” from the remote repository, you’ll always have access to the latest demo codes that are relevant to our lectures each week.