diff options
19 files changed, 103 insertions, 6 deletions
diff --git a/static/images/jams/jams_1.png b/static/images/jams/jams_1.png Binary files differnew file mode 100644 index 00000000..6f60301b --- /dev/null +++ b/static/images/jams/jams_1.png diff --git a/static/images/jams/jams_10.png b/static/images/jams/jams_10.png Binary files differnew file mode 100644 index 00000000..a1685ebf --- /dev/null +++ b/static/images/jams/jams_10.png diff --git a/static/images/jams/jams_11.png b/static/images/jams/jams_11.png Binary files differnew file mode 100644 index 00000000..5dd019ac --- /dev/null +++ b/static/images/jams/jams_11.png diff --git a/static/images/jams/jams_12.png b/static/images/jams/jams_12.png Binary files differnew file mode 100644 index 00000000..ca75f404 --- /dev/null +++ b/static/images/jams/jams_12.png diff --git a/static/images/jams/jams_13.png b/static/images/jams/jams_13.png Binary files differnew file mode 100644 index 00000000..b3ec813d --- /dev/null +++ b/static/images/jams/jams_13.png diff --git a/static/images/jams/jams_14.png b/static/images/jams/jams_14.png Binary files differnew file mode 100644 index 00000000..6205de2a --- /dev/null +++ b/static/images/jams/jams_14.png diff --git a/static/images/jams/jams_15.png b/static/images/jams/jams_15.png Binary files differnew file mode 100644 index 00000000..38deef2b --- /dev/null +++ b/static/images/jams/jams_15.png diff --git a/static/images/jams/jams_16.png b/static/images/jams/jams_16.png Binary files differnew file mode 100644 index 00000000..1835c795 --- /dev/null +++ b/static/images/jams/jams_16.png diff --git a/static/images/jams/jams_17.png b/static/images/jams/jams_17.png Binary files differnew file mode 100644 index 00000000..b62412f9 --- /dev/null +++ b/static/images/jams/jams_17.png diff --git a/static/images/jams/jams_2.png b/static/images/jams/jams_2.png Binary files differnew file mode 100644 index 00000000..486ace82 --- /dev/null +++ b/static/images/jams/jams_2.png diff --git a/static/images/jams/jams_3.png b/static/images/jams/jams_3.png Binary files differnew file mode 100644 index 00000000..ea799afd --- /dev/null +++ b/static/images/jams/jams_3.png diff --git a/static/images/jams/jams_4.png b/static/images/jams/jams_4.png Binary files differnew file mode 100644 index 00000000..da73c511 --- /dev/null +++ b/static/images/jams/jams_4.png diff --git a/static/images/jams/jams_5.png b/static/images/jams/jams_5.png Binary files differnew file mode 100644 index 00000000..f3782fd8 --- /dev/null +++ b/static/images/jams/jams_5.png diff --git a/static/images/jams/jams_6.png b/static/images/jams/jams_6.png Binary files differnew file mode 100644 index 00000000..83c74809 --- /dev/null +++ b/static/images/jams/jams_6.png diff --git a/static/images/jams/jams_7.png b/static/images/jams/jams_7.png Binary files differnew file mode 100644 index 00000000..1aacdff0 --- /dev/null +++ b/static/images/jams/jams_7.png diff --git a/static/images/jams/jams_8.png b/static/images/jams/jams_8.png Binary files differnew file mode 100644 index 00000000..9b1a9859 --- /dev/null +++ b/static/images/jams/jams_8.png diff --git a/static/images/jams/jams_9.png b/static/images/jams/jams_9.png Binary files differnew file mode 100644 index 00000000..9337af06 --- /dev/null +++ b/static/images/jams/jams_9.png diff --git a/static/style.css b/static/style.css index 2b14c8ce..7eedd2cd 100644 --- a/static/style.css +++ b/static/style.css @@ -58,4 +58,8 @@ .uk-heading-divider .uk-article-meta { margin-bottom: 0; +} + +img.uk-border-rounded { + border: 1px #25292f solid; }
\ No newline at end of file diff --git a/templates/main/info/jams.html b/templates/main/info/jams.html index 3edff9cd..71e7d68e 100644 --- a/templates/main/info/jams.html +++ b/templates/main/info/jams.html @@ -32,10 +32,10 @@ If you'd like to join one of our code jams, feel free to ask a member of staff about the next one. </p> - <h2 class="uk-article-title hover-title" id="top"> + <h2 class="uk-article-title hover-title" id="rules"> Rules and Guidelines - <a href="#top" class="uk-text-primary" title="Permanent link to this header"> + <a href="#rules" class="uk-text-primary" title="Permanent link to this header"> <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> </a> </h2> @@ -67,10 +67,10 @@ <li>Communicate with your teammate - Add them as a friend, start a DM, and work together on the problem.</li> </ul> - <h2 class="uk-article-title hover-title" id="top"> + <h2 class="uk-article-title hover-title" id="getting-started"> Getting Started - <a href="#top" class="uk-text-primary" title="Permanent link to this header"> + <a href="#getting-started" class="uk-text-primary" title="Permanent link to this header"> <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i> </a> </h2> @@ -84,10 +84,103 @@ then open a pull request with their project on the code jam repository. </p> <p> - If you're not familiar with GitHub and Git in general, we're writing a guide just for you! + Once the challenge task has been announced, head to the link provided to reach the challenge repository. + In order to work on the task, you will need to fork the repository - this will create a copy of the + repository under your account, which you will be able to work on with your teammate. To do so, + log into GitHub and click on the "Fork" button on the repository page. Select your username from the + dialogue, and + </p> + <figure> + <img src="/static/images/jams/jams_1.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_2.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + Once this has been done, you should find yourself looking at your new copy of the repository. Next + up, you'll need to give your teammate access to it! Click on the "Settings" tab, click on + "Collaborators", enter your password if you're prompted for it, and add your teammate as a + collaborator. + </p> + <figure> + <img src="/static/images/jams/jams_3.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_4.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_5.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + Now that you've set up your repository, it's time to install Git. If you're on Linux, you can + install Git using your system's package manager. Windows users can install + <a href="https://git-scm.com/download/win">Git for Windows</a>, and Mac users can install Git + using <a href="https://brew.sh">Homebrew</a>. Once you're all installed, open up a terminal + (or open Git Bash if you're on Windows). For the purpose of illustration, we will be working on + Windows, but this will work on any platform. + </p> + <p> + We will use Git to clone the repository to the machine. Simply type <code>git clone <url></code> + and Git will download a copy of the repository. The URL is the same one you use to get to the + repository page on GitHub. Use <code>cd project-name</code> to change directory to the repository. + </p> + <figure> + <img src="/static/images/jams/jams_6.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + Now, open the newly-cloned repository in your favourite editor and make some edits. We'll be using + <a href="https://code.visualstudio.com/">Visual Studio Code</a> in this example, but use whatever + you prefer. For example, let's create a file named "hello.py", and add a line of code to it. + </p> + <figure> + <img src="/static/images/jams/jams_7.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + Now that we've edited a file, we need to make Git aware of our changes. Head back over to your + terminal, and type <code>git add hello.py</code> to add this file to our changeset. + </p> + <p> + Next up, we'll need to bundle up our changes into a commit, and push it to GitHub. To do that, we'll + use <code>git commit -a -m "message"</code>. Make sure you use a descriptive message explaining why + you made your changes and what they are, but try to keep it to a single line of text if you can. + Following this, we can use <code>git push origin master</code> to push our commit up to GitHub. + </p> + <figure> + <img src="/static/images/jams/jams_8.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_9.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + In order to pull the latest version of the code when the repository was cloned earlier, we can + simply use the <code>git pull</code> command. In order to illustrate this, we will need to enlist + the help of our lovely assistant... + </p> + <figure> + <img src="/static/images/jams/jams_10.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_11.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_12.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + Oh boy. + </p> + <p> + Once you've pushed some code to the repository, you will notice a "Pull request" link. Click on + that to create a pull request, which will let us know that you're working on the task and help us + to keep track of things. Simply click on the "Create pull request" button on the next page, fill + in the "Title" box and finish creating your pull request, and it'll be ready to go. + </p> + <figure> + <img src="/static/images/jams/jams_13.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_14.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_15.png" class="uk-align-center uk-border-rounded" /> + <img src="/static/images/jams/jams_16.png" class="uk-align-center uk-border-rounded" /> + </figure> + <p> + Now that your pull request has been created, keep working on your project! Code that you push to + GitHub will automatically be added to your pull request in real-time. As the code jam continues on, + you may find review comments waiting from us. These are just suggestions to help you improve as + a programmer - free advice from us. Feel free to incorporate our suggestions into your project + if you wish. </p> + <figure> + <img src="/static/images/jams/jams_17.png" class="uk-align-center uk-border-rounded" /> + </figure> <p> - This page is incomplete - watch this space! + That's all there is to it! Keep working at your task, do your best and you might just come out + on top! </p> </article> </div> |
