Быстрая вёрстка HTML-макета из Figma | Митап #1
Дружище, я помог тебе? Подари мне кофе ➡☕ https://yoomoney.ru/to/4100118065342340
Корпоративный митап Leadrate (LR) для Junior/Middle FrontEnd-разработчиков на тему "Быстрая вёрстка HTML-макета из Figma".
Для небольших проектов, требующих просто вёрстку, мы решили использовать сборщик Gulp. Наш стартер вы можете найти скачать тут: https://github.com/LeadrateMSK/gulp-s... (мы открыты к любым предложениям)
Темы, которые мы обсуждали:
0:00:00 - Вступление
0:00:43 - Какой макет плохой, а какой хороший?
0:06:20 - Что делать, если макет плохой?
0:07:22 - Подготовка проекта в GitHub и Gulp сборщика
0:19:28 - Какие плагины в Figma должны быть у каждого верстальщика?
0:23:09 - Перенос всей основы макета в Gulp проект
0:32:30 - Работа с изображениями в Figma: как выбрать размер и тип картинки
0:40:32 - Продолжение переноса всей основы макета в Gulp проект
0:48:28 - Как работают иконки Iconify и иконочный шрифт в целом
0:52:30 - Как начать верстать? Есть 3 варианта старта
0:57:40 - Вёрстка
1:30:26 - Использование изображения формата WebP в проектах
1:37:44 - Работа с колонками. SASS миксин создания колонок
1:42:30 - Продолжение вёрстки
1:47:35 - Модификаторы БЭМ. Как лучше: navbar--scrolled или navbar_scrolled (примеры)
navbar
1:51:18 - Продолжение вёрстки (с JavaScript)
1:57:54 - JavaScript плагины для основных, частых задач (4 плагина)
2:06:54 - Браузерные расширения для разработчика
2:12:55 - Ответы на вопросы, подведение итогов митапа
Полезные ссылки:
https://clck.ru/NJHun - Единицы измерения: px, em, rem и другие
https://clck.ru/asyCf - CSS font-display
https://clck.ru/DLL72 - типограф
https://doka.guide/ - Дока
https://clck.ru/asyEK - Доклад Яндекс на тему формата изображений
========================================
https://avis-agency.ru - создание сайтов под ключ
https://rah-emil.ru - мой сайт и соц. сети
https://leadrate.pro - Leadrate