Вебінар проводив Danylo Mysak — Full-stack Coach at Mate academy, веб-розробник із 15-річним досвідом, призер Міжнародної олімпіади з інформатики.
Дійство відбувалося в форматі live-coding, де Данило показував все на практиці під час проведення вебінару.
Було розглянуто: — як з нуля зверстати простий сайт; — як швидко прикрасити його, нічого не малюючи; — як додати на сайт базові анімації; — як створити швидкий пошук за допомогою простих скриптів.
Таймлайн вебінару:
1:10 Привітання, представлення
3:32 План вебінару
3:55 Заготовка для HTML-сторінки
5:10 Розбір HTML-сторінки на блоки
7:28 Задум сторінки, головний блок, розмір сторінки
8:18 Рішення з розміром сторінки, висота блоків
9:47 Наповнення main’у, позиціювання елементів
10:48 Властивості шрифтів сторінки
12:15 Задання типового кольору для шрифтів
12:30 Питання з чату. Чи не було б краще використовувати min-height, а не height?
14:11 Верстка меню сторінки
17:13 Встановлення кольору посилань, встановлення відступу між посиланнями
19:45 Питання з чату. Як правильно розраховувати відступи тексту між рядками?
20:25 Чому nav не зробили у «li-a», а одразу зробили в «а»?
21:27 Верстка основної частини сірого блоку
25:00 Налаштування кнопки
27:44 Позиціювання наповнення блоку
28:40 Встановлення відступів між рядками тексту
29:29 Нижня частина сторінки, верстка другого блоку
33:27 Стилізація окремих блоків, властивості зображень
34:03 Питання з чату. Чому ми не зробили header-header?
36:05 Налаштування відступів між текстами та зображеннями
42:08 Розташування ціни на сторінці, позиціювання стосовно article
43:00 Налаштування відступів між елементами блоку
44:20 Правильне розташування елементів на екрані
45:20 Питання з чату. Чому не вгорнули image в ще один блок, щоб використовувати overflow і hidden?
45:53 Заокруглення зображень
46:20 Додання footer’у для нових елементів – контакти та адреси
48:02 Питання з чату. Співвідношення сторін зображень?
49:48 Додання стилів для footer’а
50:50 Відбивка між елементами сторінки
53:39 Прикрашення сторінки
54:14 Додання градієнту кольору
55:05 Коли неможна користуватись absolute’ом для позиціювання?
58:35 Налаштування градієнту
59:43 Позиціювання градієнту на фоні та іншого контенту сторінки
59:55 Додання стилів для кнопок та посилань
1:01:40 Додання до посилань та кнопок анімацій
1:03:10 На які розміри екрану слід орієнтуватися при адаптивній верстці?