Open Fuego Webtext Generator

Welcome to Open Fuego Webtext Generator! This tool allows you to mix and match code blocks to quickly build websites similar to Adobe Express (Formerly 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.

Watch the Webtext Generator video tutorial to learn how it works.

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

Go to Open Fuego to find more code-based tools and projects.

 

##Get started!

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 Phoenix Code which runs on a browser or download a desktop version.

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.

Check out our other cool coding tools at Open Fuego.

 

 

Code editors

You have a range of code editor options depending on your operating system, but we recommend Phoenix Code because it works across all operating systems, it comes with HTML preview already installed, and it's free and open-source. You can download a version or use the online editor.

Phoenix Code (Free and Open-Source for Mac / Windows / Linux. Download or use Online)

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.

    

    

Pulsar (Free and Open-Source for Mac / Windows / Linux)

See Video Tutorial

1. Download "Pulsar" Pulsar comes with "Spell Check" already installed.
2. Add HTML Preview
   • from the dropdown menu, select Packages>Open Package Manager
   • select + 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 view tab.)

 

 

Visual Studio Code (Mac / Windows /Linux)

See Video Tutorial

1. Download "Visual Studio Code"
2. Add HTML Preview
   • from the dropdown menu, select View>Extension.
   • In the search bar type "Live Preview." Install.
   • Right click on the index.html tab and select "show preview." You should see a live version of your work.
3. Install Spell Check
   • from the dropdown menu, select View>Extension.
   • In the search bar type "Code Spell Check." Install.
4. Adjust text wrapping on index.html
   • from the dropdown menu, select View>Word Wrap (this will force lines of code to conform to your viewer tab.)