getting-started.html

---
layout: default
---
<div class="header-container">
    <h1>Getting Started</h1>
    <p class="header-p">Hack for LA brings together civic-minded volunteers who build digital products,
        programs and services with community partners and local government to address issues in the LA region.
    </p>
    <div class="step-link-img">
        <div class="step-links">
            <a class="gs-link" href='getting-started#step-1'>Step 1</a>
            <p style="text-align: center; font-size: 20px;">Onboard</p>
            <img class="step-img" src="./assets/images/getting-started/step1.png">

        </div>
        <div class="step-links">
            <a class="gs-link" href='getting-started#step-2'>Step 2</a>
            <p style="text-align: center; font-size: 20px;">Choose a Project</p>
            <img class="step-img" src="./assets/images/getting-started/step2.png">

        </div>
        <div class="step-links">
            <a class="gs-link" href='getting-started#step-3'>Step 3</a>
            <p style="text-align: center; font-size: 20px;">Join a Project</p>
            <img class="step-img" src="./assets/images/getting-started/step3.png">

        </div>
        <div class="step-links">
            <a class="gs-link" href='getting-started#step-4'>Step 4</a>
            <p style="text-align: center; font-size: 20px;">Adopt Our Standards</p>
            <img class="step-img" src="./assets/images/getting-started/step4.png">
        </div>
    </div>
</div>


<div class='content-section getting-started-page'>

    <a class='anchor' id='step-1'></a>
    <div class='getting-started-page-card'>
        <div class="step-header">
            <p style="font-size: 25px;">STEP 1: <b>Onboard</b> </p>

        </div>
        <p style="text-align: center;">Complete Self Onboarding, or attend a Guided Onboarding session via Zoom.</p>
        <div class="getting-started-guide-content-section">
            <div class="ordered-list-steps-1">
                <div class="project-position-1">
                    <h3>Self Onboarding</h3>
                    <img class="step-img" src="./assets/images/getting-started/onboard-1.png">
                    <p style="text-align: initial;">Watch our <a
                            href="https://undebate-cc.herokuapp.com/hackforla-projects">Onboarding Video</a>
                        where<br />
                        you will hear a brief introduction to Code for
                        America and Hack for LA, meet <br />members of our active projects,
                        and hear about the intended impact and roles these projects seek to fill.</p>
                </div>
                <div class="project-position-1">
                    <h3>Guided Onboarding</h3>
                    <img class="step-img" src="./assets/images/getting-started/onboard-2.png">
                    <p style="text-align: initial;">Attend a Hack for LA Remote Onboarding session via Zoom. Our next
                        one can be found on
                        our <a href="https://www.meetup.com/hackforla/events">Meetup</a> page.
                    </p>
                </div>
            </div>
            <hr>
            <div class="ordered-list-steps-2">
                <div class="project-position-2">
                    <h3>Next Actions</h3>
                    <img class="step-img" src="./assets/images/getting-started/onboard-4.png">

                    <ol>
                        <li class="g-s-list">Read the <a href="https://github.com/hackforla/codeofconduct">Hack for LA
                                Code of
                                Conduct</a></li>
                        <li class="g-s-list">Complete our <a
                                href="https://docs.google.com/forms/d/e/1FAIpQLScXnJSyCXgO_RCAuCyOkG4sqGILpAepTlJ0HOaK4H_ccEVmNw/viewform">Remote
                                Onboarding Survey</a></li>
                        <li class="g-s-list">Self-invite to the <a href="https://hackforla-slack.herokuapp.com/">Hack
                                for LA Slack</a>
                        </li>

                    </ol>

                </div>
            </div>
        </div>
    </div>



    <a class='anchor' id='step-2'></a>
    <div class='getting-started-page-card'>
        <div class="step-header">
            <p style="font-size: 25px;">STEP 2: <b>Choose a Project</b></p>
        </div>
        <div class='getting-started-guide-content-section'>
            <ol class="ordered-list-steps">
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/proj-1.png">
                    <li class="g-s-list">Review the <a href="https://www.hackforla.org/#projects">Projects Section</a>
                        and choose a
                        project. If still in doubt, attend one of our onboarding sections</li>

                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/proj-2.png">
                    <li class="g-s-list">Check the <a href="https://www.hackforla.org/project-meetings">Team Meeting
                            Overview</a> to
                        see
                        if the team you are intersted in meets at a time that fits into your schedule</li>
                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/proj-3.png">
                    <li class="g-s-list">Click to the project’s home page. Locate and review the project-specific
                        getting started
                        guide.
                    </li>

                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/proj-4.png">
                    <li class="g-s-list">Locate and join the project’s Slack channel. Post your interest to join the
                        team in the
                        channel.
                    </li>

                </div>
            </ol>
        </div>
    </div>


    <a class='anchor' id='step-3'></a>
    <div class='getting-started-page-card'>
        <div class="step-header">
            <p style="font-size: 25px;">STEP 3: <b>Join a Project</b></p>
        </div>
        <p style="text-align: center;">Once you have chosen a team you will need to do the following.</p>
        <div class='getting-started-guide-content-section'>

            <ol class="ordered-list-steps">
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/join-1.png">
                    <li class="g-s-list">Slack the project lead your Gmail address so we can add you to the shared
                        Google drive.</li>
                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/join-2.png">
                    <li class="g-s-list">If you do not already have one, sign up for a <a
                            href="https://github.com/">GitHub
                            Account</a>
                    </li>

                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/join-3.png">
                    <li class="g-s-list">Fill out the Team Roster after you receive access to the Google drive.
                    </li>

                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/join-4.png">
                    <li class="g-s-list">Slack the <a href="https://hackforla.slack.com/team/UE1UG1YFP">Admin</a> a link
                        to the Team
                        Roster to be added to the GitHub
                        repository.
                    </li>

                </div>
            </ol>
        </div>
    </div>


    <a class='anchor' id='step-4'></a>
    <div class='getting-started-page-card'>
        <div class="step-header">
            <p style="font-size: 25px;">STEP 4: <b>Adopt our Standards</b></p>

        </div>
        <div class='getting-started-guide-content-section'>

            <ol class="ordered-list-steps">
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/adopt-1.png">
                    <li class="g-s-list">Set up <a href="https://github.com/hackforla/governance/issues/20">two-factor
                            authentication</a>
                        while waiting for the GitHu Admin to send you the invite</li>

                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/adopt-2.png">
                    <li class="g-s-list">After you have accepted the email invitation to our GitHub organization/repo,
                        mark your Hack
                        for
                        LA membership<a
                            href="https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/publicizing-or-hiding-organization-membership#changing-the-visibility-of-your-organization-membership">
                            Public.</a>
                    </li>

                </div>
                <div class="project-position">
                    <img class="step-img" src="assets/images/getting-started/adopt-3.png">
                    <li class="g-s-list">Read the <a href="https://www.ada.gov/pcatoolkit/chap5toolkit.htm">ADA
                            Compliance Guide</a>.
                        All web and mobile app projects at Hack for LA are inclusive by design.
                    </li>

                </div>
            </ol>

        </div>
    </div>


    <div class='getting-started-page-card'>
        <div class="step-header">
            <h3> Frequently Asked Questions</h3>
        </div>
        <div class='getting-started-guide-content-section'>


            <p class="accordion" style="font-size: 20px;">How do I raise my hand on Zoom? </p>

            <div class="panel">
                <p><i>To raise your hand in Zoom: (1) Click the Participants button found in the control panel at the
                        bottom of the Zoom window (2) Click “Raise Hand” found at the bottom of the chat window that
                        appears</i>.</p>
                <div class='zoom-pictures'>
                    <img class='zoom-img'
                        src='{{ "assets/images/getting-started/getting-started-zoom1.png" | absolute_url}}'>
                    <img class='zoom-img'
                        src='{{ "assets/images/getting-started/getting-started-zoom2.png" | absolute_url}}'>
                </div>

            </div>

            <p class="accordion" style="font-size: 20px;">How many hours are you expected to
                commit to Hack for LA each
                week? </p>
            <div class="panel">
                <p>At least 3 hours per week. Most often, this means you commit to recurring weekly meetings, plus a
                    minimum of 2 hours. Since meetings are primarily reserved for coordination of tasks and feedback,
                    you will
                    need to allocate additional time in order to work on something to contribute.
                    Your contribution will, of course, depend on your skillset. For example, one Hack for LA volunteer
                    looks for typos on team project material, does not attend meetings, and always reviews the issues
                    when
                    tagged. If you are about to enter a very busy period in your work or personal life, please consider
                    joining
                    at a later date when your schedule allows. We always welcome new volunteers, but in return, expect
                    that
                    members return the time spent onboarding them through their efforts.
                </p>

            </div>
            <p class="accordion" style="font-size: 20px;">Can you tell me more about how
                communication in Hack for LA
                works? </p>
            <div class="panel">
                <p> We work in Slack, GitHub, and Google Drive. Some teams may use additional tools, so check with the
                    project you are interested in to confirm.
                </p>

            </div>
            <p class="accordion" style="font-size: 20px;">When do project teams meet?</p>
            <div class="panel">
                <p> Project teams will meet as scheduled on the <a
                        href="https://www.hackforla.org/project-meetings">Project
                        Team Meetings</a> page. For more detailed meeting information, please visit the project’s Slack
                    channel.
                    Additionally, all team’s are welcome to attend the virtual happy hours scheduled each week the
                    Westside,
                    Downtown, and South LA Meetups. The day and time of these socials are posted by the Hack Night
                    Co-Hosts
                    in the Slack General channel.

                </p>

            </div>

        </div>
    </div>
</div>

<!-- //script for FAQ dropdown -->

<script>
    var showAnswer = document.getElementsByClassName('accordion');

    for (var i = 0; i < showAnswer.length; i++) {
        showAnswer[i].addEventListener("click", function () {

            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none"
            } else {
                panel.style.display = "block"
            }
        })

    }
</script>