discord.html

---
permalink: /discord/
layout: default
suffixes:
- Committee,
- Equity,
- History,
- Leadership,
- Publicity,
- Support,
- Us
title: Discord
---

<h1>{{page.title}}</h1>

<h2>Index</h2>
<ul>
    <li><a href="#beforetheevent">Before the event</a></li>
    <li><a href="#joiningTheEvent">Joining the event</a></li>
    <li><a href="#controls">Controls</a></li>
    <li><a href="#troubleshooting">Troubleshooting</a></li>
</ul>

<a name="beforetheevent"></a>
<h2>Before the event</h2>
<p>
    There are lots of ways to join us, but the most reliable method is to use a
    'proper' computer or laptop, and log into Discord in Microsoft Edge or Google Chrome.
    Safari does <b>not</b> work.
</p>
<p>
    It is possible to join using your mobile phone or tablet (e.g. iPad), but be aware that you may
    be missing the chat functionality and you may not be able to participate in any of the
    interactive parts of the session. Again, if using an iPad please make sure you have a browser
    other than Safari.
</p>
<p>
    Some workshops include "code-alongs" where you need to use a 'proper' computer to be able to access the session. If
    you are not sure, feel free to contact the organisers via the <a href="{{site.url}}\contact">contact us</a> page.
</p>
<p>
    Don't worry, you won't need to install anything! The webinar will be hosted on CodeWith's Discord server. You simply
    follow the link in the email which will open
    up in a web browser.
</p>

<div class="row">
    <div class="col">
        <p class="back-to-top">
            <a href="#">Back to top</a>
        </p>
    </div>
</div>


<a name="joiningTheEvent"></a>
<h2>Joining the event</h2>
<p>When you follow the invite link, you should see the following message.</p>


<img class="discord-image img-fluid" width="200" src="../images/discord/discord-signup.png">

<p>
    You can either use the Discord app or, if you don’t have Discord
    installed, we recommend you join on the web. Click the button shown:
</p>

<img class="discord-image img-fluid" width="200" src="../images/discord/discord-web.png">

<p>
    You can then sign up or log into an existing account.
</p>

<div class="row">
    <div class="discord-cols col-m-12 col-l-6">
        <h3>Register</h3><img width="200" class="discord-image img-fluid" src="../images/discord/discord-create.png">
    </div>
    <div class="discord-cols col-m-12 col-l-6">
        <h3>Log in</h3><img width="200" class="discord-image img-fluid" src="../images/discord/discord-login.png">
    </div>
</div>


<p>Once you are logged in (either by signing up or using an existing account) you can select a channel by clicking on
    its name on the left of the screen. </p>

<p>
    Your browser might ask if Discord can use your microphone. Click <b>Allow</b> – don't
    worry, you can turn it off whenever you like. Turning this on will allow you to ask questions
    using your microphone during intervals.
</p>
<img class="discord-image img-fluid" src="../images/discord/discord-microphone.png">
<p>
    If you would like to use your webcam on Discord, select the video button. It will open another dialog box. Click
    <b>Allow</b> – don’t
    worry, you can turn it off whenever you like.
</p>


<div class="row">
    <div class="discord-cols col-m-12 col-l-6">
        <img class="discord-image img-fluid" src="../images/discord/discord-video.png">
    </div>
    <div class="discord-cols col-m-12 col-l-6">
        <img class="discord-image img-fluid" src="../images/discord/discord-camera.png">
    </div>
</div>

<p>
    Your name should appear underneath the channel name. It will then show the other people in
    the channel.</p>
<img class="discord-image img-fluid" src="../images/discord/discord-list.png">

<p>
    To join the channel click the name, it will look something like this:</p>
<img class="discord-image img-fluid" src="../images/discord/discord-call.png">

<p>
    You can click on the <b>Event Chat</b> channel to use text chat. You can use this to ask questions
    throughout the session. The host may answer during the session, or one of the mentors
    may respond in the Event Chat.
</p>

<div class="row">
    <div class="col">
        <p class="back-to-top">
            <a href="#">Back to top</a>
        </p>
    </div>
</div>

<a name="controls"></a>
<h2>Controls</h2>
<div class="row">
    <div class="discord-cols col-m-12 col-l-4">
        <h3>Microphone Mute</h3><img class="discord-image img-fluid" src="../images/discord/discord-buttons.png">
    </div>
    <div class="discord-cols col-m-12 col-l-4">
        <h3>Video On/Off</h3><img class="discord-image img-fluid" width="300" src="../images/discord/discord-video.png">
    </div>
    <div class="discord-cols col-m-12 col-l-4">
        <h3>Event Chat</h3><img class="discord-image img-fluid" width="300" src="../images/discord/discord-event-chat.png">
    </div>
</div>




<h3>Screen Share</h3>
<div class="row">
    <div class="discord-cols col-m-12 col-l-6">
        <h4>Step 1</h4><img class="discord-image img-fluid" src="../images/discord/discord-screen-1.png">
    </div>
    <div class="discord-cols col-m-12 col-l-6">
        <h4>Step 2</h4><img class="discord-image img-fluid" width="300" src="../images/discord/discord-screen-2.png">
    </div>
</div>

<div class="row">
    <div class="col">
        <p class="back-to-top">
            <a href="#">Back to top</a>
        </p>
    </div>
</div>
<a name="troubleshooting"></a>
<h2>Troubleshooting</h2>

<div id="accordion">
    {% for question_hash in site.data.discordQuestions %}
    {% assign question = question_hash[1] %}
    {% include_relative _includes/question.html question=question %}
    {% endfor %}
</div>