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.
Goal for the day: Work with another workshop participant(s) to build an interactive website we can use to track our programming goals.
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 navigates. The driver types and controls the cursor while the navigator watches and provides suggestions as needed. Every fifteen minutes or so, pairs switch so that each person gets regular opportunities to both drive and navigate. There are several reasons why pair programming can be more effective than soloing:
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!
Let's get familiar with the tools we'll be using today.
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.
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:
If they are voice channels, they will have a speaker icon like this:
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
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.
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.
#generaltext 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.
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. Go ahead and go to Glitch's homepage now. You do not need to have an account but it is easy to sign up for one if you like.
Lesson 1 of 7
Last updated April 5, 2021