isaacshaker / i-am-isaac

I am...A Project in Becoming

This multimodal coding tool is a great way to break the ice at beginning of your school year. Why not use code to help your students introduce themselves and to process where they are on their journey through life? It's also an easy way for you to promote coding literacy, computational thinking, and computer science knowledge in your classroom.

By working through the prompts in the index.html file, students will construct their own webtext explaining who they are, what they are doing, and where they are going. Before, I ask students to present their page to the rest of the class, I divide them into groups giving them 15 minutes to work together to debug their projects.

This template also allows the user to mix and match div. blocks should students wish to further customize their work. It's a great introduction to code that will prepare students to use our other Pitt Fuego Coding Tools

Get started!

1. Go to the I-am-a-project-in-becoming repository

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 Visual Studio Code 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" "/root" and then Click "Save"

9. GitHub will provide you with a published URL. (This process may take up to five minutes.)

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

Watch our instructional video

Check out our other cool Pitt Fuego Coding Tools

Suggested Text Editors

Setting up Visual Studio Code for Windows and CodePad for Chromebooks (Our recommended code editors)

Visual Studio Code (Mac)

1. Download "Visual Studio Code"
2. Add HTML Preview - from the dropdown menu, select View>Extension.
3. In the search bar type "Live Preview."
4. In the right-had corner, select the "show preview" button to see a live version of your code.
5. Adjust text wrapping - from the dropdown menu, select View>Word Wrap (this will force lines of code to conform to your viewer tab.)

Visual Studio Code (Windows)

1. Download "Visual Studio Code"
2. Add HTML Preview - from the dropdown menu, select View>Extension.
3. In the search bar type "Live Preview."
4. In the right-had corner, select the "show preview" button to see a live version of your code.
5. Adjust text wrapping - from the dropdown menu, select View>Word Wrap (this will force lines of code to conform to your viewer tab.)

Code Pad (Chromebook)

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.)