Starting With Glitch

Designing with Web

Welcome to Glitch!

Our first web page

As said before, we'll use Glitch for coding our websites and applications. It will provide us with a complete environment for creating files, writing code and see our websites, accessible from anywhere.

We've created a "hello-web" project on Glitch for you to start, begin by opening the following link: hello-web on Glitch.

Make sure you're logged in, then click on the "remix" button, it will create a copy of this project for you to work, create and edit files… The copy will have a random name, like mighty-wheat-drizzle in the example below:

Now that you have your own project and workspace, creating a web page with Glitch is really simple, we just need to create a new file and name it index.html:

Finally we can add some content to our page and click Preview then Preview in a new window, it will open a new tab showing what your web page looks like:

Congratulations, you've just made your first web page!

While you're on the Glitch editor, activate the Wrap Text option, this is super useful to read your code:

Sum up

A few explanations on what we've done with Glitch:

When clicking on the remix button, Glitch is creating a kind of folder on their machines, to host the files for our website. Plus, it is setting up a glitch.me subdomain, i.e. an address for accessing to our website, in my case: https://deserted-grey.glitch.me
HTML files: these are just plain text files, with the .html extension, that we could create on our computer using Notepad on Windows or TextEdit on MacOS (or a more modern text editor like Visual Studio Code or Sublime Text). HTML files will hold the content of our web pages, we'll see what HTML really is in the next section.
See why we named our file index.html: Webserver directory index

Let's add content

Let's add some random content to our page, like other paragraphs, and observe the result:

The example above is a Glitch embed, you'll see a lot of those during this course. That means you can edit code right here to test what we're learning, switch between "code", "app" or "both" buttons, navigate through files. Learn by doing: you have to test everything we'll see using embeds. This will make it way more easy to understand. Moreover, you'll learn a lot of tips by exploring those.

At the end of this gif, you can see the effect of the Wrap Text option: if a line of text is too long to fit in the editor, our text continues on a new line without changing the number of the line, observe line 7 here.

If you're correctly logged-in with Glitch, it creates a new project for you that you can find on your Glitch profile page:

The browser is sticking all our texts together! Indeed, we need to structure the content of our web page in a way that is comprehensible for the browser. Let's move on to the next section: Structuring Data.