Web Fundamentals 4 Collaborative Coding

1. Open toms_site/index.html in your code editor, and change the page heading (inside <h1>) to something of your choosing. (At the same time I'll also make a change). When you're done, commit your change to the local repository:

    $ git add --all
    $ git commit -m "Changed heading"

2. Wait while I push my own change to the <h1> element.

3. Pull down my changes

    $ git pull

1. Delete the conflict markers (<<<<, =====, >>>>) from index.html (using Sublime text)

2. Delete the version of the heading that you don't want.

3. On the command line:

    $ git add --all
    $ git commit -m "Fixed conflicts"

4. To have a look at what you've just done:

    $ gitk --all

   or

    $ git log --pretty --graph --oneline

   You should see how the two versions branched and came back together.

1. Person A should set up a new project on their laptop:

   1. Create a new folder called group_cheatsheet in your coding_course folder
   2. Create a file in that folder called index.html with some simple html in it.

2. Person A should then set it up as a git repository

   $ cd group_cheatsheet
   $ git init
   $ git add --all
   $ git commit -m "Initial import"

3. Person A creates a new repo on github. To do this you need to log in at github.com and select "Create a new repo". You should call the repository group_cheatsheet.

4. Person A should then push their code up to github following the instructions on github. You want to "Push an existing repository from the command line" - the instructions at the bottom of the page. You should end up pasting a command like

   # Warning: these commands won't work. You need copy the right ones from GitHub.
   git remote add origin https://github.com/username/blah.git
   git push -u origin master

5. Person A then needs to add everyone else as collaborators by going to Settings > Collaborators on the repo page

6. Everyone else should then clone the project:

   1. Go to the repo's github page

   2. Copy the ssh link from the box on the page

   3. In your coding_course folder do

      git clone paste_the_repo_link_here

7. Person B should then download Twitter Bootstrap and put it in the group_cheatsheet folder

8. Meanwhile Person C should add more content to the page's html

9. Person B should add their changes and push up to github:

    git add .
    git commit -m "Added twitter bootstrap"
    git push

10. Person C should then add their changes and try and push up:

     git add .
     git commit -m "Edits to index.html"
     git push

11. This will probably fail, as C won't have B's changes. To fix this Person C needs to pull and merge (the merge will probably happen automatically if you haven't changed the same files). They should then push again:

     git pull
    
     # fix any merge conflicts if necessary, then add and commit the changes
    
     git push

12. Continue to work on the cheatsheet together!

1. Open your command line:

   • On a Mac open Terminal (Applications > Terminal)
   • On Windowns open Command Prompt with Ruby on Rails

2. Find out where you are:

    $ pwd

3. See what is in the same folder:

    $ ls

4. If you are on a Mac move into Documents:

    $ cd Documents

5. Create the folder for the coding course:

    $ mkdir coding_course

6. Move into that folder:

    $ cd coding_course

7. Move back up to the folder above

    $ cd ..

8. Move back into the coding course folder. This time don't type out coding_course - just type out the first few letters and hit Tab:

   $ cd coding_course

9. In the Finder (Mac) or My Computer (Windows) find the folder that you just created.

Tell us about your first site by filling in this form. If you're still having problems getting it to display online or pointing your url to it, ask in the forum!

Continue to add information to your group cheatsheet. At the very least you should

1. Have a section for the basic command line commands.
2. Have a section for the basic git commands.
3. Have each pushed to the shared repository at least twice by next week.

1. Practise using Cmd-tab (Mac) or Ctrl-tab (Windows) to move between programs.
2. Practise using Cmd-space (Mac) or ?? (Windows) to open programs by typing their names.
3. Practise using short cut keys:
   • Cmd-s (Mac) or Ctrl-s (Windows) for saving
   • Cmd-r (Mac) or Ctrl-r (Windows) to refresh the browser

(Optional) Take a look through the Sublime text screencasts at Tuts+.