Ольга Грабко

Если опустить банальности....
Узнайте (если еще не знаете) о композиции слоев и комментариях в фотошопе. О композиции слоев особенно.
Текст пиксель-в-пиксель от края до края блока и больше места не предусмотрено - считайте, что он не влез.
Рисуя версию для мобилы шириной 320, держите в уме, что ее растянут до 650-760.
Рисуя версию для планшета, держите в уме, что ее скорее всего будут и тянуть в большую сторону, и сжимать в меньшую по ширине. Не надо делать элементы совсем впритык, оставьте место для маневра.
Помните, что у видео-проигрывателей и карт есть элементы управления (и если вы вдруг решили наложить перекрывающий карту слойчик и в нем инфу - покажите, что вы планируете делать с элементами управления).
Комментируйте состояния (или соответствующе называйте слой) - просто три кнопки/ссылки разного цвета - это просто три разные кнопки/ссылки.
Помните, что у полей форм есть состояния: обычное, в фокусе, заполнено, заполнено правильно (по желанию), заполнено не правильно, disabled, некоторые поля требуют пояснений по заполнению. У самой формы есть состояния - отправлена успешно, ошибка - не правильно заполнена, ошибка - не отправлена хз почему. Покажите ответы формы, если у вас формы и на странице, и во всплывашках, и хз где еще - покажите для каждого вида. В макетах надо показать все виды полей (хотя бы основные), а не только те два текстовых поля, которые требуются в конкретной форме "заказать звонок".
Типовая текстовая страница должна содержать оформление основных текстовых элементов (заголовки, абзацы, списки всех видов, таблицы, картинки и их взаимодействие с окружающими элементами. А не только заголовок и пару абзацев.
256 оттенков серого и текст размеров 12, 13, 14, 15, 16, 18, 20, 22, 24, 26 итд. конечно держат верстальщика в тонусе, но все же старайтесь несколько ограничивать палитру и количество стилей текста. Будет неплохо, если в них даже будет какая-то логика.
Используя все доступные начертания парочки шрифтов в макете помните, что парочка шрифтов по 8-10 начертаний - это 16-20 подключаемых шрифтов, а не 2.
Иконки и картинки смарт-объектами - это удобно, очень.

codepen.io/anon/pen/EPOOpO

Не обязательно все знать наизусть, важно знать, где посмотреть. Со временем все само собой запомнится.
На начальном этапе не нужно заморачиваться специфическими приемами (типа "делаем красивое выпадающее меню в стиле таком-то" - это можно посмотреть, когда припрет.
Нужно разобраться с основными принципами - в html с назначением элементов, их логической структурой;
в css - свойства можно условно разделить на две группы: отображение (display, position + разные способы позиционирования, отступы, поля, box-sizing и его влияние на отступы и поля), и оформление (цвет, фон и подобное). Вот первую группу - отображение, позиционирование, расчет размеров нужно очень хорошо понимать - без этого никуда. А оформление - достаточно знать, что оно есть и где посмотреть подробнее.
Вообще, пользоваться справочниками, шпаргалками - это нормально. Чтоб быстрее запомнилось, на начальном этапе не пользуйтесь автодополнением, подсказками в редакторе, печатайте ручками, они все сами запомнят.

codepen.io/anon/pen/OMZzEy
если можно использовать calc(), :after{} и vw

Адаптировать или нет - зависит от проекта и, к сожалению, желания и бюджета заказчика. Не адаптивные проекты встречаются все реже, но и в них используем как минимум модульную сетку.
Количество контрольных точек, в которых перестраивается макет, и их значения зависят от дизайна, также бывают дополнительные медиа-запросы для элементов, которые на какой-то ширине/высоте начинают плохо выглядеть.
Основной принцип - конкретный дизайн должен хорошо выглядеть всегда, без привязки к размерам конкретного устройства (но дизайнеры все равно рисуют 320, 768 и "большой" - какой? по настроению дизайнера), все, что не нарисовано, додумывает верстальщик на ходу.
Элементы форм, анимацию, кнопки, ссылки - все, с чем взаимодействует пользователь, также делим по принципу тач/не тач.