Glitch

Richard Elzey on Flickr

A cool community to help you brush up on your web development skills.

Have you wanted to learn how to build a website or code in JavaScript? Does the idea of a web development site where you can remix projects like in Scratch sound interesting? Then read on to learn about Glitch, a site that combines Scratch-like project sharing with making small single-purpose web pages.

When you first go to https://glitch.com you’ll see something like the following:

Once you sign up, you’ll be able to play around with making a simple site! To start, click on the button that says “New Project”. You’ll see three different choices:

Click on the option that says hello-webpage for a really simple start!

From this page you can:

  • Click on the sunglasses near the top of the screen to see what the app looks like
  • Click on the files to the left of the screen in order to modify those files

This is where, if you haven’t done web programming before, I have to plug the Mozilla Developer Network, commonly just called the MDN.

This is probably the single best resource online for learning HTML, CSS, or JavaScript. It has tutorials, reference manuals, and all sorts of guides to other cool things like SVG, WebGL, or WebAssembly. It’s really cool.

If you’ve done web programming, you can just jump right in to messing around with the HTML, CSS, and JavaScript. If you haven’t, then read on as I give a brief introduction!

So the three technologies I’ve mentioned before are

  • HTML
  • CSS
  • JavaScript

You may have heard of all of them and might even know that JavaScript is a programming language! Let’s talk a bit more, though, about what these three components to a webpage are!

HTML is the bones of a webpage. It’s the basic content that says “There’s a heading here, a list there, a paragraph o’er there”. In your starter-site you’ll see the file index.html. For historical reasons the main page for a website is almost always called index.html! It should look a little something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
 
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>Hi there!</h1>
 
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
 
    <!-- include the Glitch button to show what the webpage is about and
	  to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

You’ll see a bunch of pairs like

<body> ... </body>

or

<p> ... </p>

. The ones without the slash are opening tags and the ones with the slash are closing tags. What goes in between them is the actual content you want in your page. So between

<p> ... </p>

you put the text of a paragraph. Between

<div> ... </div>

you put things you want to group together.

CSS determines how your HTML looks on the screen. The default CSS in your project will look like:

/* CSS files add styling rules to your content */
 
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}
 
h1 {
  font-style: italic;
  color: #373fff;
}

This makes a pretty good example of what CSS looks like in general! It’s a mixture of selectors, like body and h1, and then the properties that you’re changing. As a little taste of modifying CSS, let’s add a rounded border around the heading. Change the code after the h1 to look like:

h1 {
  font-style: italic;
  color: #373fff;
  width: 150px;
  border: solid;
  border-radius: 10px;
}

If you go click on the sun glasses to launch the page preview it should look like this now:

Finally, JavaScript is the thing you may have heard the most about. It’s the programming language that makes the web work! Every browser has a JavaScript interpreter built into it that runs the JavaScript in each website.

The default JavaScript in this project has only a single line: console.log(‘hi’). If you go to the preview of your project then you can open the JavaScript console and see that this code wrote “hi” to the console’s output. You can find a comprehensive list of how to open the console in different browsers here.

With this brief overview of web programming aside, let’s talk about the social media aspects of Glitch!

You can go to the front page of Glitch and browse through categories or search for other people’s projects to look at, but let’s pick a particular example I like! So first navigate to https://glitch.com/~space-invaders!

Once you’re on this page you can click on the button that says show to try the game. You can also click on “view source” to look at the project itself! This is like the “See Inside” button you might be familiar with from Scratch.

I picked this project in part because it’s very clean and well commented. You can’t actually do anything with it from here other than look at it, though! Now, go to the button in the upper right corner of the screen that says “Remix to Edit”. Go ahead and click that to copy the project for yourself. We’ll just change one simple thing to show how that works. You want to click on the file that says space-invaders/space-invaders.js then scroll down to the part where you see “// Bullet”.

Here you can mess with the properties of the bullets both the players and enemies fire. For example, you can make the bullets fatter and move up and down the screen twice as fast by changing the code to:

var Bullet = function(center, velocity) {
    this.center = center;
    this.size = { x: 10, y: 3 };
    this.velocity = velocity;
    this.velocity.y = 2*this.velocity.y;
  };

From here, I recommend that you follow some of the recommended Glitch projects linked below and don’t be afraid to remix everything in sight!

Learn More

Mozilla Developer Network

https://developer.mozilla.org/en-US/

The Myth Busters Jr series of Glitch sites

https://glitch.com/culture/tag/mbj/

Tutorial for building Twitch chat bots

https://glitch.com/~twitch-bot

Learn You Node tutorials for writing JavaScript-based servers

https://glitch.com/~nodeschool-learnyounode

Combining Machine Learning and Music

https://glitch.com/~piano-genie

Also In The April 2019 Issue

Use SketchUp to create this fascinating mathematical pattern that appears everywhere in nature.

Learn about the STEAM star’s amazing journey onto Mythbusters Junior and beyond.

What’s the best way to choose a classroom lunch? Or the best way to elect a leader? The answer isn’t so simple.

Keep your passwords at the tip of your fingers, or maybe at the back of your eyes!

Bring your coding skills and your desserts to new levels in this simple Python coding activity.

Learn about the shiny new technology that allows us to be connected like never before.

Squares, checkerboards, and hollow boxes… what pattens can you imagine in Python?

A fun, DIY electronics project that’ll keep you from bumping around in the dark!

Use your favourite block language to animate this fascinatingly odd game.

Can we make a computer using only three simple rules?

How science and tech led to an exciting discovery in one of the most dangerous areas of space.

How did video games become popular before the internet? It’s all about shareware, floppy disks, and human cleverness!

Links from the bottom of all the April 2019 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about science and technology for April 2019.

Receive an email announcement of new issues, sent every two months, plus a monthly newsletter with curated site content.

No, thanks!