Skip to main content
Version: v1.2

📓 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. 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. 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. You'll build a simple HTML webpage using an online website-creation tool called jsPad. 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 Fidgetech and pursuing careers in the tech world.

Today's Project​

Goal for the day: Build an interactive website we can use to track our programming goals.

Tools​

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

Online text editor: jsPad​

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 jsPad. 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 jsPad to create a project. To save your project long-term, we recommend that you create an account with jsPad.

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.

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. 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.