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
