Skip to main content

📓 Welcome to the Workshop

This workshop is designed to give you a chance to experience working with some of the basic tools used in everyday web development while pair programming. It doesn't matter if you've coded before or if this is your first time building a project. By completing this workshop you'll get a feel for what goes into building a basic website and why we value pair programming at Epicodus. You might also get a sense of whether this is the kind of career you might be interested in pursuing.

The Workshop​

Today, we'll be using Discord to communicate as a class and to talk with your partner(s) for the day. After you form groups for the day, you'll work with your group to build a simple HTML webpage using an online website-creation tool called Glitch. Once the page is built, we'll add some styling with CSS. Finally, we'll make the site interactive by using JavaScript. You'll also have the opportunity to ask questions about Epicodus and pursuing careers in the tech world.

Today's Project​

Goal for the day: Work with another workshop participant(s) to build an interactive website we can use to track our programming goals.

Pair Programming​

During today's workshop, we'll practice pair programming. Each student will work from their own machine while virtually sharing their screen, code editor, and so on. This is the same model remote Epicodus students use every day as students.

When pair programming, one person drives while the other observes. The driver types and controls the cursor while the observer watches and provides suggestions as needed. Every fifteen minutes or so, pairs switch so that each person gets regular opportunities to both drive and observe. There are several reasons why pair programming can be more effective than soloing:

  • Programming is less about writing massive amounts of code and more about solving difficult problems. Two heads are often better than one when coming up with solutions.
  • Usually, each person in a pair will have different knowledge and different strengths. Pairing lets you learn from each other.
  • When you work alone, you're often tempted to take shortcuts that will come back to haunt you. For example, you might not read an explanation fully and spend a large amount of time looking for a solution that's already in the lesson. When pairing, you can hold each other accountable to writing high-quality code.
  • When you watch somebody else code, it's easier for you to see their mistakes and catch their bugs. The reverse is also true - they can help you spot mistakes you aren't seeing!
  • You don't check your email, social networks, news, text messages, and so on when you're pairing. As a result, you're much more productive.

From past classes, we've seen that teamwork and communication skills are actually more important than coding skills when it comes to applying for jobs. So use pairing today as a way to build your skills in these areas and see if the a paired programming environment works for you!

Before your start Pair Programming​

When you have found a partner for the workshop, take time to introduce yourself and get to know each other. You will be sharing an online code editor, while also reading through lessons, while also switching off who's driving and who's observing! That's a lot!

It's important to talk about how you want to move through the lessons together. Here are some questions to ask each other:

  • Do you want to silently read through a lesson section and then check in and talk about it?
  • Do you want to read a loud together?
  • Who will start driving?

While you are working together today with your pair, make sure you are communicating well with your pair:

  • We recommend checking in before moving onto following sections and lessons
  • We recommend communicating about what you are going to change in the code, before you change it
  • It's also helpful to reference the file name and line number when you are talking about your code.

Tools​

Let's get familiar with the tools we'll be using today.

Online text editor: Glitch​

Web developers commonly use a text editor to write and edit their code. Think of this as being like a tool for creating a school project, except instead of writing a paper we are writing code that we can run in a web browser.

We are going to use an online text editor called Glitch. It is free to use. Best of all, we don't need to download any programs to use it. In the next lesson we'll explain how to use Glitch to create a project and share a workspace with your pair.

Take note that you will either need to create and use a Glitch account or share your email address to work on a shared Glitch text editor with your partner(s) for the day. To save your project long-term, we recommend that you create an account with Glitch.

Discord​

We use Discord to message, talk, and share screens with each other. You will receive a Discord invite via an email before the date of the weekend workshop. If you do not already have a Discord account you will be prompted to create one in order to access the Discord classroom. If you do not have an invite by the day of the workshop please ask one of the staff members at the Google Meets orientation to send you an invite. When loading for the first time you may be asked to grant permissions for Discord to use your microphone, be sure to click allow.

Once orientation has ended, everyone should familiarize themselves with Discord and find one or two other people to pair with for the day.

Discord classroom layout with colored boxes outlining areas

When you get to Discord, you should see a screen that looks similar to the one above. On the left side of the screen, you have a list of channels, your voice/video status if you're inside a voice channel, and your user settings. To enter a channel simply click on its name.

Rooms on Discord that are text channels will have either a hashtag or number symbol like this:

Hashtag symbol

If they are voice channels, they will have a speaker icon like this:

Speaker symbol

You will know you're successfully in a text channel when you've clicked on the channel name and can see current conversation in the center of your Discord screen. In the example layout above, you can see that #general is selected in the left navigation menu and at the top in the center of the screen you can see a larger version of #general displayed.

To enter a voice channel (such as Workshop-Pair-5), click the speaker symbol next to that channel. You'll know you are successfully in the channel if you see a connection status (shown in the yellow square of the image below). Your username will also appear listed beneath the channel's name.

If you're still having issues connecting to a voice channel please post in the #general channel and ask a staff member for help.

Discord side bar with colored boxes outlining voice channel, connection status, and user settings

Great! Now that we know how to connect to voice and text channels, we should able to see our names under a voice channel on the left and see a text conversation in the center. In order to communicate properly with your pair(s), make sure your microphone and speakers/headphones are functioning. Your Discord controls are shown in the green square of the image above. The microphone icon can be used to mute or unmute yourself on the channel. The headphone icon allows you to turn off or turn on the sound heard from your voice channel. Finally, the gear icon opens User Settings. Clicking on the microphone and headphone icons will cause a red slash to appear when you are muted/deafened, clicking it again will remove the red slash and allow you to hear and be heard. In the red circled part of the image above you can see that the user is inside a voice channel but has a microphone with a slash through it next to their name, this means they are muted.

Your voice channel connection is shown in the yellow square of the image above. The voice connection displays your signal strength as well as the name of the server and voice channel you're in. The yellow square also has controls to disconnect, share your camera, and share your screen.

Still Having Connection Issues?​

  • If the signal strength of your voice channel is red or orange instead of green, it may mean that others are having problems hearing you. Make sure you're somewhere with a good internet signal and close any unnecessary applications and browser tabs.
  • Test your microphone by clicking the User Settings gear icon, shown in green square, then click Voice & Video from the menu on the left. Make sure to select the proper input and output devices. If you're still having trouble with your sound please reach out to a staff member.

Finding a Pair:​

  • To find a pair for the day, you can post in the #general text chat and ask others looking for a pair to join your Discord channel. If you see any voice channels with only one other person, you can hop in and introduce yourself! Just be sure to take yourself off mute.

Each pair will have their own voice and text channel to use, this way you can talk to each other over voice and share links or code snippets over text. For example if you're both in the voice channel Workshop-Pair-5 you should use the text channel #pair-5-chat for any written communication needed.