Hello, maker! Welcome to the Electrate Fuego web design tutorial. I'm glad we crossed paths – for this might be an important intersection on your way to becoming. Through this exercise, you'll learn a little bit about code literacy, computer science, and something called "electracy." Just follow the code comments in the HTML file, and you'll make a really cool web document that will help you process how different discourse communities in your life have contributed to your arrival in this space, virtual and actual, and how they might also contribute to where you're going. By sharing this webtext, we'll meet other people at this intersection, each on their own path to becoming.

In this doc, you'll work through Gregory Ulmer's discourses of career, family, entertainment, community, and schooling (Internet Invention From Literacy to Electracy , 2002.) In Ulmer's text, he elides community and schooling into one category, but we'll separate them here. Ulmer's theory of electracy helps make sense of how we find/construct meaning and connect with others rhetorically in a media rich ecology. Ulmer uses analogy to define electracy, explaining that "electracy is to digital media what literacy is to print."

Before we get going, I would like to give a shout-out to my research buddy Shauna Chung, who helped me develop the original Ulmerian framework we'll follow in this webtext. Are you ready to get started?

Peace and love only, Stephen Quigley, University of Pittsburgh 2020

See My Demo

1. Go to repository: HERE

2. Click the green "Code" button, and then click "Download ZIP" to your local computer.

3. Find this folder in your downloads. Move this folder to a secure place. You will return to this folder to manage your scripts and other assets like images, pdfs, etcetera.

4. For Mac, Windows, and Linux, download and/or open a code editor like atom.io or any code editor of your choice. If you use a Chromebook O.S., we recommend Code Pad or Caret. You will find additional information below about optimizing your code editor to work with HTML and CSS.

5. Use the code editor to open the index.html and style.css files from your project folder.

6. Start working with code by reading through the index.html where you'll find instructions on how to build your own web text!

7. Once you have modified and added your files to your project file, you will want to publish to the web. GitHub provides a good solution for "free." Create a GitHub account, then create a new repository for this webtext. Click "uploading an existing file," (push) your files into this repository. You'll need ALL of your assets to make your webtext function properly. Upload assets, then click "Commit changes."

8. Now go to your repository "settings." Scroll down to "GitHub Pages" in the left-hand menu. Change the source setting from "none" to "main." Click "Save"

9. This will provide you with a published GitHub URL.

10. Test the URL in a browser. Magic, no? Actually, it's computer science.

View the Instructional Video

Check out our other Pitt Fuego Coding Tools

Setting up Atom for Windows and CodePad for Chromebooks

1. Download "Atom" from Atom.io
2. Add HTML Preview
   • from the dropdown menu, select Atom>Preferences>Install
   • In the search bar type "HTML Preview."
   • Select the package built by "HARMSK." Click "Install."
3. Adjust text wrapping
   • from the dropdown menu, select View>Toggle Soft Wrap (this will force lines of code to conform to your viewer tab.)

1. Download "Atom" from Atom.io
2. Add HTML Preview - from the dropdown menu, select File>Settings. In the tab that loads select +Install
3. In the search bar type "HTML Preview."
4. Select the package built by "HARMSK." Click "Install."
5. Adjust text wrapping - from the dropdown menu, select View>Toggle Soft Wrap (this will force lines of code to conform to your viewer tab.)

1. Download "Code Pad Text Editor" from Chrome Web Store.
2. From the dropdown menu, select Editor>IDE Preferences
3. Toggle "Word wrap limit" to the middle value (this will force lines of code to conform to your viewer tab.)