Lesson Weekend

Start A Glitch Session

Only one member of your group should start the shared text editor on Glitch. Decide amongst yourselves who this will be. Once the shared text editor is started, the rest of the group members will join that session.

To start a shared text editor from the Glitch homepage, select "Get Started" from the navigation menu. If you are signed in and you don't see the "Get Started" option, navigate to Glitch's project templates webpage.

Click on "Get Started" from the Glitch homepage.

A new page will load with options for starter websites. Scroll down and select the option to build a static site from the "Minimal Website" template.

Scroll down and click the option to build a "Minimal Website".

Once you see a new "Hello Website (mvp)" template appear like in the image below, you are ready share your newly created project with your partner(s). Sharing this project will allow you all to be able to edit files and see each other make edits in real-time!

When you see the template for "Hello Website (mvp)" you have successfully started your project.

Share your Glitch session with your partner(s)

The same person who created the project should share the project. Click the "Share" button in the top left corner:

Click the "Share" button in the top left corner. Use the form with the title "invite project members" to do just that.

A pop-up window should appear that asks how you would like to share your project, just like in the image above. The "Project Links" section of the window will have a url to access your project's code. Copy the url listed under the "Code" option and send that url to your pair(s) over your pairing text channel in Discord. Note that this url won't grant access to edit the project, only to view the code. The next step is for your pairs to request edit access.

Requesting edit access on a Glitch project

To join and edit a project that your partner started, ask for the url to the project. It should look similar to https://glitch.com/edit/#!/polarized-shimmering-silverfish.

Put the url into your web browser and wait for the page to load. Once it does, you'll notice you can see the project files, but you cannot edit them yet! To edit, you must request access. Select "Request To Join Project" in the top left corner of the screen, like you see in the image below.

Click the "Request To Join Project" button in the upper left corner of the screen.

Now it's the project owner's task to accept the request. The person who started the project should look for an incoming request. Like in the image below, it will be a pop-up in the upper left of the screen. Click the pop-up and make sure that you hit the button "Invite to Edit" to grant edit access.

Look for an incoming request in the upper left corner of the screen. Make sure that you select the "Invite to Edit" button.

Check that everyone in your group is connected to the Glitch project

You'll be able to see who's joined the project by looking for the user icons at the top left corner of the screen. Make sure that everyone in your group is on the shared text editor and has edit access before moving onto the next step. In the image below, two people are connected to the project.

Verify who's connected to the project by looking for user icons at the top left corner of the screen

Once the project is loaded for everyone in your group, you can begin pair programming. Be sure to alternate who is driving vs. navigating regularly so everyone gets a chance to write HTML, CSS, and JavaScript.

Everyone should see a the "Hello Website (mvp)" project window with three sections diving the screen:

Glitch projects are divided into 3 sections within one screen

In the image above, we've added yellow, orange, and red highlights around the three sections to explain each one:

  • The yellow section is the file explorer.
  • The orange section displays the contents of whatever file is currently open. In the image above, the HTML in the index.html is shown.
  • The red section shows a preview of the webpage you are coding.

If you do not see the webpage preview, click on the "Show" tab in the upper left corner of the screen, and then click "Next to The Code", like the image below shows. This will open up a new section on the right with a preview of the code we are writing.

Next, click on the "Next to the Code" image, which is at the top of the screen.

Now, let's take a look at the files in this project:

  • README.md: All coding projects should contain a README. A README states what the project is about and how other people can use it. We won't make any updates to the README in this workshop.
  • index.html: This contains all of our HTML code. We will modify this first.
  • script.js: This contains JavaScript code, which is often used for making websites more interactive. JavaScript can be used for many other things as well, but we'll be focused on adding interactivity to our site.
  • style.css: This is where we will style our website. We can do things like change colors, fonts, margins, and so on.

We'll begin creating our actual website using HTML. If it isn't already open, we'll start by clicking on the index.html file from the file explorer section. This will open up a basic HTML fil with some content which we'll replace soon.


Writing HTML

HTML is the basic building block of the internet. HTML is used to display the basic content of every website you've ever visited.

Read the following code and type it into the index.html file. The code that was there previously should be removed.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Epicodus Workshop Project</title>
  </head>
  <body>
    <h1>My Programming Goals</h1>
  </body>
</html>

We are using several different element types here. Each element has two tags: an opening tag and a closing tag. Here is an example: <html> and </html>. Tags are always enclosed in < and >. <html> is an opening tag. </html> is a closing tag. Closing tags always include a / after the <.

Here are the tags we are using in the code above:

  • <html> tells the browser that everything within it is HTML.
  • <head> includes important information about the webpage that will not be displayed. For now we are just including a <title>. We will cover other elements that go in <head> soon.
  • <body> contains information that will be displayed to the user. Most of the code we add will go in the body.
  • <h1> is a header tag. There are headers 1-6 and they correspond to different text sizes. You can try changing <h1> to <h2> and so on and see how the preview in the left-hand pane of Glitch changes.

If you make any errors in your HTML, Glitch will add a red dot to the left of the line where the error is. You can hover the cursor over the red dot to see what the error is. If you accidentally type <body> like <<body>, you'll get the following error: "Special characters can't be escaped."

Here's an example of an error showing in Glitch.

Even if an error message doesn't make sense yet, it can still provide useful information. The error message above doesn't help us much - it's happening because the linter reading our software is confused. A linter looks for errors in our code and points them out to us. In this case, the linter is still being helpful: it tells us exactly where the error is so we can fix it. We just need to remove the extra <.

Expanding HTML

Let's add more elements to our HTML. Follow along and match your HTML to the following code snippet. We will focus on the code inside the <body> element. Each html document should only have one set of body tags - they should "wrap around" the rest of the html code that isn't inside the head.

index.html
...
  <body>
    <h1>My Programming Goals</h1>
    <p>Every journey is easier if you <strong>know where you're going.</strong> <em>-unknown</em></p>
  </body>
...
  • The <p> element is a paragraph. This is the basic text element used in HTML. It's used to display most basic text. Note how the <strong> and <em> tags inside the paragraph element have changed the styling in the right-hand pane of Glitch. strong tags add bold while em tags add italics.

Now let's use a new element to display an image on our page.

index.html
...
  <body>
    <h1>My Programming Goals</h1>
    <p>Every journey is easier if you <strong>know where you're going.</strong> <em>-unknown</em></p>

    <img src="https://tinyurl.com/lfkubwe" />

  </body>
...

Here we've added an element called an <img>. We can use this image to link to an image. Note that there is no closing tag </img> present. Instead the / is located at the end of the element itself. This is called a self-closing element.

This element has additional information included as well. It has an attribute called src. This attribute defines the source of the image. In this case we're using a URL to show an image from the internet. You can replace this URL with another image by copying and pasting an image link inside the double quotation marks. You must always add quotation marks to an attribute. Any information about the attribute is included inside the quotation marks like the code example above.

An HTML list

Let's create a list of goals below the image we're displaying. Add the following code below the <img> element:

index.html
...
<h3>My Goals:</h3>
<p>
  I want to become a professional web developer. Here are the things I'll need to learn first.
</p>
<ul>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ul>
...
  • <ul> is an element that indicates we wish to display an un-ordered list. By default this means we'll display bullet points.
  • <li> is a list item. When displayed within a list, they will be grouped together.

Now let's add a link:

index.html
...
<h3>My favorite website</h3>
<h4><a href="http://www.google.com">Google</a></h4>
...

Here we've used another set of header elements and a new element called an anchor. The anchor is defined with the <a> element. The anchor has an attribute just like an image. The href attribute is the hypertext reference. If a user clicks on the link, the href states the site where the user will end up.

If you try to open the link in the Glitch panel, it will throw an error. To actually visit the link, you need to do it in a new tab. You can right click your mouse and click "Open link in new tab".

Our basic site now has basic elements including a header, paragraph element, an image, a list, and a hyperlink. In the next lesson, we'll add styling with CSS.

Lesson 2 of 7
Last updated May 21, 2021