Shadowman69

Пропустил, это синтаксис предпроцесора для CSS, он SASS называется, посмотри на их официальном сайте. Есть еще аналоги LESS и Stylus, но SASS самый популярный, это используется для ускорения процесса верстки.

По самой верстке, честно говоря маловато заказов, а конкуренция очень большая. Поэтому если есть возможность, учите CMS Wordpress. Понимаете, клиент хочет сразу готовый полнофункциональный сайт из одних рук, это слишком напряжно для него сначала искать верстальщика, а потом еще человека, который натянет верстку на ВП, а потом еще одного человека, который пофиксит недочеты двух предыдущих исполнителей. Теперь почти никто так не распыляется - хотят все и сразу. 85% заказов на верстку сразу требуют натяжку на Вордпресс. А если сама верстка и с учетом снижения цены в 2 раза, то на русских площадках Вы врядли заработаете 20 кусков.

Ну судя по Вашему описанию это обычная модальная картинка, насколько я понял. Решение здесь.

Я не гуру верстки, поначалу тоже была такая проблема, я решаю ее двумя способами:
- каждую секцию(блок) сайта я отделяю отступом с комментарием, это делаю как в html. так и в сss, так намного легче найти где что есть. Комментарии зеленым отмечаются и потому хорошо видно где какой блок, я вообще то комментариев не жалею, и выглядит оно по-людски и читабельно, а не все в одну кучу.
- даю осмысленные названия классов, да как сказали выше можно использовать БЭМ, лично я себе придумываю свои классы, но их логика понятная и простая, напр. service-container, service-cards, card-title, card-content, то есть слова "контейнер", "тайтл", "контент всегда повторяются в верстке, меняется только название секции.
И еще к тому же перед началом верстки я прохожусь по макету и в начале стилей выношу классы со стандартнимы стилями заголовков, абзацев, ссылок, чтоб избежать повторения кода, в итоге цсс-кода становиться намного меньше и в нем легше разобраться. И в общем не отчаивайтесь это в принципе нормально, что Вы открываете файлы для правок и сначала сложно разобраться. потому что забывается как это версталось, у меня тоже так. я перед тем как внести правки сначала 5 минут изучаю структуру блока. так Вы сведете к минимуму съежание блоков. Ну и про отступы от левого края тоже не забывайте, это важно, их не зря придумали)

Может каждый раз, когда Вы заходите в брекетс нужно активировать этот плагин какой-то комбинацией клавиш или в нужно в настройках в браузере изменить параметр, чтоб обновлялось при изменении у всех рабочих файлах.

Я бы верстал просто через ::before и ::after, вместо свойства контент вставьте символьный код этих черточек и стрелочек. Коды и как их вставлять посмотрите здесь.

Лучше в отдельной папке, многие верстальщики в конторах делают именно так, потому что пользуются Sass и Gulp. и они имеют привычку создавать для каждой секции на лендинге свой файл со стилями. Даже если Вы так не делаете, то учтите, что потом будет отдельный файл с медиа-запросами, а если сайт многостраничный и страницы сильно отличаются, то для каждой страницы тоже отдельный файл со стилями. Если Вы будете все писать в одном файле, то скоро Вы сами там запутаетесь. а если возвратитесь к нему через некоторое время то тем более, Вы дооолго будете искать что и где подправить. Так что лучше все стили складывать в отдельную папку.))) Для скриптов тоже отдельная папка, как и для картинок, и для шрифтов тоже. Если все будет рядом с index.html, то будет винегрет)))

Да, лучше через background, сначала картинку, потом позиционирование по оси X и Y, потом задаете цвет, будет выглядить примерно так:

background: url('images/image_name.png') no-repeat 70%  50%, 
          #f4f4f4;

Когда будете делать адаптив, и картинка будет заходить под текст, что возможно ухудшит его читабельность, то просто переписываете свойство background без картинки
background: #f4f4f4;
Через кому Вы можете делать столько бекграундов, сколько пожелаете, каждый из своим позиционированием и значением для рэпита, просто помните, цвет указываете самым последним)))