ValeraValera

Соль в том что что все размеры типографики, размеры заголовков и их отступы, отступы абзацев и высота строки задаются относительно базового шрифта например 16px. И если нужно изменить всю типографику под конкретное устройство, то в медиазапросе меняется всего одно значение - базовый шрифт, остальное меняется пропорционально.
https://betterwebtype.com/rhythm-in-web-typography
https://www.youtube.com/watch?v=b9M_7ytm-iM

Вот интересно, как обоснует наличие этих линий дизайнер ? Сколько потеряет бизнес, если эти кружочки будут просто на голубом фоне ? Тем более это не связанные элементы, о отельные услуги и врайпером для них служит голобой фон. Дизайнер должен уметь верстать и точка, чтобы такую дичь не творить

Потому что firefox и chrome используют разные движки рендеринга CSS и по разному реализована спека CSS
В Firefox - Gecko
В Crome - WebKit
Попробуйте использовать префиксы

Любой бери:
20 крутых PSD макетов для верстки
20 крутых PSD макетов для верстки. Часть 2.

Для того чтобы понять дзен Sass нужно сразу сверстать 5-10 макетов без препроцессоров на чистом CSS , с опытом начнет приходить понимание где операции самые нудные , какие хочется делать быстрее и так далее , надо почувствовать боль тех кто придумал этот инструмент, тогда будет четкое понимание зачем это нужно и как использовать. А сразу если начать верстать на Sass - понимания не будет.
Макеты , если что здесь можно взять https://htmlacademy.ru/blog/tags/%D0%BF%D0%BE%D0%B...

https://www.youtube.com/watch?v=n0Vy9cYES-4
https://pepelsbey.net/pres/clear-and-sharp/

https://www.google.ru/
Что должен уметь фронтенд-разработчик
Чем отличается верстальщик от front-end developer?
Чем верстальщик отличается от фронтенд-разработчика

все зависит от того , какие браузеры нужно поддерживать
caniuse.com/#search=float
caniuse.com/#feat=flexbox
caniuse.com/#search=grid

Чтобы запилить сетку как на Bootstrap самому нужно понимать следующие темы CSS:
1) Блочная модель документа
2) Свойство Float
3) Методы очистки потока в CSS
ну и прочитать ЭТО

Используй то, в чем разбираешься и понимаешь как и зачем это работает. Если ты не понимаешь разницы между 3 и 4 версиями Boostrap и не понимаешь к каким последствиям может это привести я тебе советую не использовать и не 3 и не 4 , а учить css пока не поймешь что и как. Если бы ты понимал , то такой вопрос не задал бы.

Всего 4 колонки по 25% , центральная - 50% , элементарная арифметика вроде

HTML и CSS - пока не научишься хорошо верстать макеты
потом JS
Существует ли «карта программиста»? Что и за чем учить?
krekotun.ru/ui-developer-skills.html

Gulp для самых маленьких - подробное руководство

col-xl-1 убери и напиши свой класс с нужной шириной , скажи клиенту что он дятел , потому что не понимает нафиг нужен бутсрап

Определить абсолютные координаты и радиус каждого кружка, определить градиенты, тени и порядок наложения расставить кружки , раскрасить , определить z-индексы , основной блок сделать оверфлоу хайден...

Пока Вы не понимаете как определить разницу между методологиями , не советую Вам использовать их вообще.
А если бы Вы понимали разницу - этот вопрос не задавали бы.
Самая популярная и оплачиваемая - БЭМ