git detach head in branch & merge

Question

I was learning some git related topics and commands, this scenario occurred when i was using combination of git and GitHub features, using git push and changing file at github at the same time, I have created 2 branches (jsfirst and imagegallery) Just want to understand what went wrong, I am trying to analyze and intend to not repeat at important project

EDIT Why 564903c (imagegallery) Image gallery branch is disconnected in graphical view?

What does HEAD@{0}, HEAD@{1}, HEAD@{2}, HEAD@{3} means ?

Output of git log --all --decorate --oneline --graph Command

*   76ebb92 (HEAD -> master) Merge branches 'master' and 'master' of https://github.com/sometest/test
|\  
| * 4f264fe (origin/master) Created CONTRIBUTING.md
| *   1159fe3 Merge pull request #3 from sometest/code_of_conduct-patch-2
| |\  
| | * a7184f0 (origin/code_of_conduct-patch-2) Updated code of conduct
| |/  
| *   4369922 Merge pull request #2 from sometest/code_of_conduct-patch-1
| |\  
| | * 1893331 (origin/code_of_conduct-patch-1) Created CODE_OF_CONDUCT.md
| |/  
| * b3fbde0 Created .gitignore
| *   6275e91 Merge pull request #1 from sometest/add-license-1
| |\  
| | * 38d02c5 (origin/add-license-1) Create LICENSE
| |/  
* | cc0cdad (jsfirst) Silly story
* | a52170c Using events in JS
* | c271cdd Added number guessing game
* | 493a155 Learned basic of JS
|/  
| * 564903c (imagegallery) Image gallery
|/  
* 25266ce first commit

Output of git reflog Command

76ebb92 (HEAD -> master) HEAD@{0}: reset: moving to HEAD
76ebb92 (HEAD -> master) HEAD@{1}: checkout: moving from 564903c3078ffdbdbd43bceb3da3495daddf82da to master
564903c (imagegallery) HEAD@{2}: checkout: moving from master to 564903c
76ebb92 (HEAD -> master) HEAD@{3}: checkout: moving from imagegallery to master
564903c (imagegallery) HEAD@{4}: checkout: moving from master to imagegallery
76ebb92 (HEAD -> master) HEAD@{5}: pull: Merge made by the 'recursive' strategy.
cc0cdad (jsfirst) HEAD@{6}: checkout: moving from imagegallery to master
564903c (imagegallery) HEAD@{7}: checkout: moving from master to imagegallery
cc0cdad (jsfirst) HEAD@{8}: reset: moving to cc0cdad
25266ce HEAD@{9}: checkout: moving from imagegallery to master
564903c (imagegallery) HEAD@{10}: checkout: moving from master to imagegallery
25266ce HEAD@{11}: checkout: moving from imagegallery to master
564903c (imagegallery) HEAD@{12}: checkout: moving from master to imagegallery
25266ce HEAD@{13}: checkout: moving from jsfirst to master
cc0cdad (jsfirst) HEAD@{14}: checkout: moving from imagegallery to jsfirst
564903c (imagegallery) HEAD@{15}: commit: Image gallery
25266ce HEAD@{16}: checkout: moving from master to imagegallery
25266ce HEAD@{17}: checkout: moving from jsfirst to master
cc0cdad (jsfirst) HEAD@{18}: commit: Silly story
a52170c HEAD@{19}: checkout: moving from master to jsfirst
25266ce HEAD@{20}: checkout: moving from jsfirst to master
a52170c HEAD@{21}: commit: Using events in JS
c271cdd HEAD@{22}: commit: Added number guessing game
493a155 HEAD@{23}: commit: Learned basic of JS
25266ce HEAD@{24}: checkout: moving from master to jsfirst
25266ce HEAD@{25}: commit (initial): first commit

Git Command History

 4221  git init
 4222  git add README.md
 4223  git commit -m "first commit"
 4224  git remote add origin https://github.com/sometest/sometest.git
 4225  git push -u origin master
 4233  git checkout -b jsfirst
 4235  git add chapter-1/hello.html
 4236  git add README.md
 4238  git commit -m "Learned basic of JS"
 4241  git add chapter-1/numberguessinggame.html
 4242  git commit -m "Added number guessing game"
 4247  git add chapter-1/basic2/*
 4249  git commit -m "Using events in JS" 
 4258  git add assessment-1/sillystorygenerator/*
 4259  git commit -m "Silly story" 
 4262  git checkout master
 4265  git add assessment-1/imagegallery/*
 4266  git reset assessment-1/imagegallery
 4270  git checkout -b imagegallery
 4273  git add assessment-1/imagegallery
 4274  git commit -m "Image gallery" .
 4280  git checkout jsfirst
 4284  git checkout master
 4285  git merge --squash jsfirst
 4287  git checkout imagegallery
 4296  git merge --squash imagegallery
 4297  git checkout master
 4298  git merge --squash imagegallery
 4305  git merge --squash imagegallery
 4312  git reset --hard cc0cdad
 4319  git checkout imagegallery
 4323  git checkout master
 4326  git pull 
 4333  git checkout imagegallery
 4342  git checkout master
 4343  git merge --squash imagegallery
 4345  git merge imagegallery
 4366* git chekout 564903c
 4371* git commit -a -m "Image Gallery"
 4372* git checkout master
 4376* git commit -a -m "Image Gallery Detach HEAD"
 4379* git reset --hard\n

Answer 1

The only thing I found worth answering (because this was the only question) is:

What does HEAD@{0}, HEAD@{1}, HEAD@{2}, HEAD@{3} means ?

HEAD@{n} means n commits before the current HEAD. So, HEAD@{1} would mean one commit before HEAD. You can also use @~nas a shorthand for the above notation (i.e., use @~n instead of HEAD~n to simplify things).

Why 564903c (imagegallery) Image gallery branch is disconnected in graphical view?

You need to state what you were expecting from the instructions/commands you provided, only then it will be clear. The amount of data you have provided is a lot to read in one go. No one has the time to go through such a huge chunk of commands (not pointing fingers at you but rather stating a genuine case). You need to be a little specific with things (more on that below).

I have one advise for you, when you post a question here, just ask others to replicate the current state of your repo. This would mean the minimal number of redundant instructions as possible. For instance, this segment:

4319  git checkout imagegallery
4323  git checkout master
4326  git pull 
4333  git checkout imagegallery
4342  git checkout master

contains redundant instructions. You could have done this part just with a git checkout master, git pull followed by a git checkout imagegallery. Also, it is not necessary to use a -u when doing a push, especially if you do a git push origin <branch-name>.

BTW, you might want to check out this FAQ provided by Git on various common problems faced by an end-user of Git. Might help you out a little :)

Best