Welcome to Pitt Fuego Webtext Generator! This tool allows the user to mix and match div. blocks to build a quick website similar to an Adobe Spark. All of the design elements you need to make a great webtext or presentation are embedded in the document. We've also provided hidden comments to help guide you through the process. See Video

We recommend you begin with one of our starter programs before using this one.

##Get started!

1. Go to the Pitt Fuego Webtext Generator Repository

2. Click the green "Code" button then select "Download ZIP" to your local computer.

3. Find this 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.

4. Download and/or open a text editor like atom.io or notepad-plus-plus.org.

5. Use the text editor to open the index.html and style.css documents 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 webtext!

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" and upload your files to your repository and "Commit changes". You'll need ALL of your assets to make your webtext function properly.

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.

Check out our other cool coding tools at Pitt Fuego.

Setting up Atom for Mac/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 "atom-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 "atom-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.)