Update README with instructions for the workshop, add TODOs to the in…

…dex.html file

README.md

@@ -3,3 +3,104 @@
 This is an example page for the Summer of Tech git tutorial.
 
 Feel free to fork and modify it as you see fit.
+
+## Setup
+
+Make sure you have installed the GitHub desktop client and signed up to GitHub:
+
+* [GitHub Desktop](https://desktop.github.com/ "GitHub Desktop")
+* [Signup to GitHub](https://github.com/join "Signup to GitHub")
+
+## The Workshop
+
+1. (On GitHub) Fork the Flux [hello-summer](https://github.com/fluxfederation/hello-summer "hello-summer") repository.
+2. (With GitHub Desktop) Clone your hello-summer repository.
+3. Add your name and photo.
+4. (With GitHub Desktop) Commit and push your changes.
+5. (On GitHub) View the result.
+
+### Fork the Flux hello-summer repository
+
+Extra help docs: [Forking repositories](https://guides.github.com/activities/forking/ "Forking repositories").
+
+A Fork is a copy of another person's repository onto your GitHub account.
+By copying a repository, you may then edit your copy as you see fit (make sure to respect the LICENSE), either for yourself or as a playground before submitting a pull request (patch or fix).
+
+We will be forking the [hello-summer](https://github.com/fluxfederation/hello-summer "hello-summer") repository to edit it for yourself.
+
+1. Visit [hello-summer](https://github.com/fluxfederation/hello-summer "hello-summer").
+2. Click "Fork" in the top right hand corner. You should be redirected to a copy of the repository
+   on your account.
+
+### Clone your hello-summer repository
+
+Extra help docs: [Cloning your fork](https://guides.github.com/activities/forking/#clone "Cloning your fork").
+
+Cloning a repository will copy it to your computer, so that you may edit it locally.
+This can be done a few ways. We're going to do it through the GitHub Desktop client.
+(N.B., these instructions are for using the client on a Mac, but it should be very similar for Windows or Linux.)
+
+1. Open GitHub Desktop.
+2. Sign in with your GitHub account.
+    1. Click "GitHub Desktop" in the menu bar.
+    2. Click "Preferences".
+    3. Go to the "Accounts" tab.
+    4. Click "Sign In" next to "GitHub.com".
+3. Clone your repository.
+    1. Click "File" in the menu bar.
+    2. Click "Clone Repository...".
+    3. Go to the "Github.com" tab.
+    4. Find and click "your-username/hello-summer".
+    5. Select a destination path.
+    6. Click "Clone".
+
+### Add your name and photo
+
+Update the website! You can do this using your favourite editor.
+
+There are a couple of TODO's in the index.html file:
+* Your name.
+* Your picture.
+* Your blurb.
+* Your links.
+
+Edit some or all, and anything else that you want to change.
+
+### Commit and push your changes
+
+We're going to create a commit with the new versions of the files.
+We can view what we have changed in GitHub Desktop before making the commit.
+We can also choose to only commit some of the changes.
+
+1. Open GitHub Desktop.
+2. Ensure "hello-summer" is selected as the "Current Repository" in the top left corner.
+3. Get the commit ready.
+    1. Tick any changes you wish to commit in the left hand panel (they will be ticked by default,
+       so you shouldn't have to do anything here).
+    2. Write a summary and description for the commit.
+4. Click commit to master!
+5. Click "Push origin" (to the right of "Current Repository" and "Current Branch".
+
+If you click on the "History" tab (just below "Current Repository"), you should see your new commit
+at the top.
+
+### View the result
+
+We're going to use GitHub pages to view the result.
+GitHub pages is essentially a web server that grabs the website from your repository.
+You need to enable it (it's disabled by default), and then you can view the website at https://your-username.github.io/hello-summer.
+
+1. Open GitHub.
+2. Enable GitHub Pages.
+    1. Click on "hello-summer" from "Your repositories" (the box on the right).
+    2. Click "Settings" (make sure to click on the repository settings, and not your account settings).
+    3. Scroll down to "GitHub Pages".
+    4. Select "master" as the "Source".
+    5. Click "Save".
+3. Visit https://your-username.github.io/hello-summer (make sure to replace your-username with your
+   actual username).
+
+## Additional links
+
+* [GitHub help](https://help.github.com/ "GitHub help").
+* [Git documentation](https://git-scm.com/doc "Git documentation").

index.html

@@ -12,20 +12,26 @@
       <p>My name is</p>
     </header>
     <main>
+      <!--
+      TODO: Replace the image with your own, e.g., "me.png" or "me.jpg".
+            You'll need to ensure that you add the image to the codebase if you change this.
+      -->
       <img src="me.svg">
+      <!-- TODO: Replace the text with your name. -->
       <h1>Your name here</h1>
       <p>
         Here's a good place to write a little bit about yourself.
         Include anything you want people to know about you.
       </p>
+      <!-- TODO: Replace the text with a description about yourself. -->
       <p>
          Intelligentsia dreamcatcher chartreuse franzen sartorial ugh. Whatever
          brunch asymmetrical tousled occupy before they sold out, distillery VHS
          fingerstache salvia church-key readymade listicle. Craft beer skateboard
          hella, hoodie brooklyn.
       </p>
       <ul class="social">
-
+        <!-- TODO: Replace the links with your own GitHub account, website and Twitter handle. -->
         <li><a rel="github" href="http://github.com/fluxfederation">My code</a></li>
         <li><a rel="home" href="http://fluxfederation.com">My website</a></li>
         <li><a rel="twitter" href="http://twitter.com/fluxfederation">@fluxfederation</a></li>