Lam Besis

Подборка сервисов для прототипирования

Bootstrap в четвёртой версии предусматривает вёрстку Desktop First, можно выбрать подходящие брекпойнты: getbootstrap.com/docs/4.0/layout/overview

Как уже ответили выше, у вас не указано свойство content: ''. И это одна из самых противных ошибок)
Рекомендую почитать крайне информативное руководство по псевдоклассам и псевдоэлементам, оно переведено на русский язык.

Рекомендую очень внимательно ознакомиться с этой статьей: 100% правильный способ делать контрольные точки в CSS
В ней ответы на все вопросы и описан самый логичный и правильный подход к медиа-запросам.

Вы используете старую версию owl-carousel. Рекомендую скачать новую отсюда, вот как должен будет выглядеть ваш код:

$(document).ready(function() {
  $(".carousel").owlCarousel({
    loop: true, //включаем бесконечную прокрутку
    nav: true, // пишем это вместо "navigation" и включаем кнопки 'prev' и 'next'
    navText: [
        "<i class='fa fa-chevron-left'></i>", 
        "<i class='fa fa-chevron-right'></i>"
            ], // пишем это вместо "navigationText" и подключаем свои кнопки
    dots: false, // вместо "pagination", отключаем точки
    autoplay: true, // включаем автопрокрутку
    autoplaySpeed: 500, // пишем это вместо "slideSpeed" и задаем скорость прокрутки
    responsiveClass: true,
    center: true,
    responsive: {
        0: {
            items: 0 // от 0px до 599px слайдов нет
        }, 
        600: {
            items: 1 // от 600px до 899px один слайд
        }, 
        900: {
            items: 2 // от 900px до 1199px два слайда
        }, 
        1200: {
            items: 3  // от 1200px и больше три слайда
        }
    }
  });
});

Как человек, который был в той же ситуации, рекомендую вот что: в первую очередь, самым идеальным вариантом будет найти работу верстальщиком, как уже сказали выше. Пусть не за очень большие деньги, но найти ее надо обязательно. Вы не поверите, насколько быстро вы будете учиться, т.к. задачи перед вами будут стоять совершенно реальные, и каждый день будет что-то новое чего вы еще не делали, в отличии от тренировочных макетов. Таким образом у вас накопится хороший опыт реальной разработки.
Далее, настоятельно рекомендую постоянно гуглить. Абсолютно по всем вопросам и сложностям которые у вас возникают. Повторюсь, именно гуглить, не задавать вопрос на тостер (не воспринимайте в упрек :)), а самостоятельно искать ответы, решения и туторы. В будущем это очень поможет вам быстро находить всю необходимую информацию, а так же грамотно и четко формулировать соответствующий вашей задаче запрос.
Так же, советую постоянно читать книги и статьи из мира фронтенда. Постоянно!
Навскидку из того что пришло в голову скажу четыре сайта.
Всем известный хабр: открываем тег "html" и внимательно изучаем все статьи подряд, делая для себя пометки в блокноте и добавляя в закладки полезные статьи, которые могут пригодиться в будущем, отмечая для себя темы которые нужно изучить в будущем и т.д. Даже касательно вашего вопроса о технологиях - полхабра забито статьями на эту тему.
Второй - css-live.ru, шикарный ресурс с русскоязычным контентом, огромным количеством переводов каяественных иностранных статей, и очень понятной подачей материала.
Третий - webref.ru (бывший htmlbook). Лучший справочник по html и css, а так же на нем множество уроков, статей и полезных материалов и бесплатных обучающих курсов.
И четвертый - frontender.info. Изначально может показаться что там все связано с Js, но на самом деле это не так.
Помимо всего этого, порекомендую вам курсы от LoftSchool. Они лучшие, честно. За два месяца с ними вы изучите больше чем самостоятельно за полгода, и я не утрирую.

И на последок, вам нужен наставник. Человек, который подскажет решение если в гугле не удается найти ответ, придумает ТЗ для тренировки, подскажет где ошибка в коде и, если что, направит в нужное русло. Если хотите, могу вам в этом помочь, я люблю делиться знаниями :)

Уточните ваш вопрос.
Если у вас есть подобный чатик, который нужно сделать выезжающим, то это проставив связка (CSS Transitions + 5-строчный скрипт отлавливающий клик по кнопке "чат").
Другое дело, если вам нужно непосредственно этот сайт написать и заставить работать. Что именно вам нужно?

Если я вас правильно поняла, то вам необходимо использовать подобный медиа-запрос:

@media only screen (min-width: 544px){ 
.element: { background: red; }
}

Который обозначает, что у данного элемента фон будет красным только если ширина браузера будет 544px или выше (т.е. вплоть до фул-hd, если сами не поставите ограничение).
Почитать подробнее можно тут.
Либо запросом (max-width: ....) пропишите непосредственно то, как как ваши блоки должны выглядеть на мобильном устройстве.