When you first open Glitch, you will see two main parts — the
code editor and the list of files. The code editor is where you will
write your HTML or CSS code, and on the left, you can choose which
file you will be writing your code into.
To show the preview of your website, click on the
button on the top-left of the screen, and select where you want to
show the preview window.
We recommend showing the preview window next to your code. As you
write your code in the editor, your preview window should
automatically update with the changes. With the preview window next to
your code, your layout will look like this:
You can choose to change your project title (found on the top-left
corner). Your project title needs to be unique on Glitch and cannot
contain spaces (they will be turned into dashes – ) or other
special characters). Be careful though, once you change your project
title, the URL address link to access your project also changes, so if
you shared your project link with someone, that link will not work
anymore.
Once you have finished your project, you can share the live website by
clicking on the
button at the top and then selecting the Live App tab in the popup and
then clicking on the first Copy button. Your live website is now
copied and you can paste the link anywhere to share it. You can also
paste it in your browser URL address bar and go to it or write it down
if you want to share it later.
This link will remain the same unless the project is renamed.
You can also upload images into Glitch so that you can use them in your project. Your file list in Glitch has an assets folder that you can use to store your images. Click on that folder to open it in Glitch. Then click on the Upload Asset button at the top.
Navigate to where your image is on your computer and click on Upload. Your image should now be in Glitch.
But how do you use the image? If you need the link to the image for use in an <img> tag for example, click on the image to open up the details dialog. You should see the link to the image there and you can click Copy to copy the link and then paste it wherever you need.
Have more questions about Glitch? Check out the
Getting Started
section on Glitch!