Вебінар проводив 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 На які розміри екрану слід орієнтуватися при адаптивній верстці?
- 1:04:40 Додання поля пошуку
- 1:12:07 Пошук даних по тексту
- 1:13:30 Задання параметру пошуку
- 1:16:10 Розбір роботи пошуку
Бажаєш розвиватися в цьому напрямку? Подавай заявку на навчання на онлайн курс по фронтенду
