Дмитрий

сам попробовал наскоком изучить, получилось не очень хорошо, делали совместный проект, народ просил не пушить меня некоторое время код, а почему, я только месяц назад понял, когда шаг за шагом прочитал учебник по гиту https://git-scm.com/book/ru/v2

по IDE, думаю во всех современных такая опция есть, я пользую IDEA https://www.jetbrains.com/idea/ тут хорошо реализовано

после прочтения учебника использую пока только терминал

резюме: рекомендую потихоньку выучить основы по учебнику и затем совершенствоваться
в качестве бонуса: есть бесплатный хороший видео-курс https://geekbrains.ru/courses/66

теперь собственно по сабжу: путем некоторых экспериментов с потерей и восстановлением кода пришел к такой последовательности:

открываем Terminal в нужной папке с проектом и затем вводим последовательно команды:

git init
git add --all
git commit -a -m 'first commit'
git remote add origin https://github.com/user/project.git !! поменять https на свой линк на репозиторий
git pull --rebase origin master
git push origin master

От сердца отрываю. Прелоадер нужно поместить сразу после открывающего body, чтобы не проскакивали незагруженные части страницы перед показом прелоадера.
Всё в одном блоке, чтобы удобней было ставить и удалять его при необходимости и стили, скрипты работали более корректно.

<!-- preloader -->
    <style type="text/css">
        .preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
        .preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
        .preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
    </style>
    <script type="text/javascript">
    $(function(){
        $('.preloader_bg, .preloader_content').fadeIn(0);
        $(window).load(function(){
            $('.preloader_bg').delay(250).fadeOut(1500);
            $('.preloader_content').delay(250).fadeOut(750);
        });
    });
    </script>
    <div class="preloader_bg"></div>
    <div class="preloader_content">
        <span>Идет загрузка...<br>Подождите...</span>
    </div>
    <noscript>
        <style>
            html, body { opacity: 1 !important; }
            .preloader_bg, .preloader_content { display: none !important; }
        </style>
    </noscript>
    <!-- /preloader -->

<a href="/WebDesign.html">Вбе Дизайнер</a> - Веб Дизайнер )))