Верстка по макету

• Знакомимся с Viewport
  • Краткое описание Viewport.
  • Развернутое пояснение на примере iPhone3 и iPhone4
  • Узнать размер viewport вашего экрана поможет тестовая страница
• Знакомимся с Media Query
• Смотрим Как пользоваться инспектором в Figma
• Пересматриваем Возможности Developer Tools в Сhrome по работе с CSS (или FF, если его используете)
• Устанавливаем PixelPerfect для сверки страницы с дизайном
• Делаем адаптивную mobile-first страницу портфолио по макету

Копирование стилей из Figma

В Figma на каждом элементе будут указаны свойства шрифта. Копирование их "как есть" приведет к бОльшему размеру CSS и затруднит внесение изменений в него.

В хорошем дизайне будет всего 2-3 шрифта. Их надо идентифицировать. Основной шрифт применить к body. Отличные от базового свойства менять там, где они отличаются. При этом в дизайне в разных секциях страницы будет использоваться заголовки второго и третьего уровня.

Вероятно, что стили у заголовков одного уровня будут повторяться не зависимо от секции. Правильно будет указать стили один раз для заголовка каждого уровня в начале CSS файла.