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

1. Scroll to the top of this repository and click the green "Code" button. Select "Download ZIP" to download project files to your local computer. These are all the project files you'll need to get started working with code.

2. Find this project folder in your downloads and move it to a secure place. You will return to this folder to manage your files and other assets like images, pdfs, etcetera.

3. Download and/or open a code editor. We recommend Visual Studio Code (See download and setup instructions below).

4. Use the code editor to open your project folder. Open index.html document. Read through the code comments embedded in the index.html document. Here, you'll find all the information you need to work with code!

5. Once you have modified and added content to your project, you will want to publish your webtext to the internet. GitHub provides a good publishing solution. If you do not already have one, create a GitHub account. Go to GitHub

6. Create a new repository to house your project files. Click "uploading an existing file" and upload your project files to your repository and "Commit changes". You'll need ALL of your assets to make your webtext function properly.

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

8. GitHub will now provide you with a published URL. (This process may take several minutes.)

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

Watch our video tutorial.

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

Phoenix Code (Online or Download -- Great for Chromebooks and iPads)

1. Go to Phoenix Code.
2. Use the online version or download a desktop app for Mac, Windows, Linux.
3. Adjust text wrapping, select View>Word Wrap
4. Enjoy the live preview.