Практичний курс з верстки лендінгу

Урок охоплює основи налаштування середовища для розробки. Спочатку ознайомимося з процесом встановлення та налаштування редактора коду, який є основним інструментом для написання коду. Далі ви налаштуєте систему контролю версій за допомогою Git, що дозволить ефективно управляти змінами у коді та працювати над проєктами в команді. Потім створимо акаунт на GitHub — популярному сервісі для хмарного зберігання та спільної роботи з кодом, що дасть змогу зберігати проєкти та ділитися ними з іншими. Крім того, ознайомимося з менеджером пакунків npm, який використовується для керування бібліотеками та залежностями в JavaScript-проєктах, і встановлення Node.js для коректної роботи з npm та іншими інструментами для розробки.

Урок охоплює популярні бібліотеки та фреймворки CSS, такі як Bootstrap, Tailwind, Bulma, Foundation та інші, які допоможуть швидко створювати адаптивні макети з мінімальними зусиллями. Спочатку відокремимо основні поняття та аспекти CSS, що є основою для роботи з будь-якими фреймворками. Далі буде розглянуто поняття бібліотек і фреймворків CSS, їх роль у спрощенні розробки та наданні готових рішень для верстки. Детально ознайомимось з фреймворком Bootstrap, який є одним з найпоширеніших інструментів для створення адаптивних вебсторінок завдяки набору готових компонентів і сітки.

У цьому уроці буде розпочато створення файлової структури проєкту, зокрема налаштування директорій, підготовка базових налаштувань стилів та початок верстки шапки сторінки — header. Особлива увага буде приділена правильному використанню семантичних тегів HTML, щоб забезпечити доступність і зручність для користувачів та пошукових систем. Крім того, на уроці буде розглянуто основні моменти роботи з препроцесором SASS та зокрема його синтаксисом SCSS, включаючи налаштування структури SCSS-файлів і використання змінних, міксинів та вкладеності для зручності написання стилів. Додатково, урок передбачає налаштування збірки проєкту за допомогою Gulp, що дозволить автоматизувати процеси компіляції стилів, отже протягом уроку буде встановлена та налаштовано збірку. На завершення уроку буде здійснена верстка header для десктопної та мобільної версій, з використанням адаптивних технік для забезпечення коректного відображення на різних пристроях.

Урок націлений на освоєння інструменту CSS — Flexbox, який дозволяє зручно та ефективно розташовувати елементи на сторінці, створюючи максимально гнучкі адаптивні макети з мінімальними зусиллями. Буде розглянуто основні принципи роботи з Flexbox, такі як вирівнювання, розподіл простору та порядок елементів, що дозволяє швидко створювати складні макети та майстерно налаштовувати стилі за допомогою властивостей, як для батьківського елементу (флекс-контейнера), так і для дочірніх елементів (флекс-нащадків). Окрім цього, буде вивчено, як встановлювати та використовувати бібліотеку Font Awesome, яка дозволяє легко і швидко інтегрувати популярні іконки в дизайн, покращуючи візуальне сприйняття сторінки. Протягом уроку буде здійснена верстка двох секцій сторінки, для десктопної та мобільної версій, з урахуванням адаптивності і використання Flexbox для правильного вирівнювання та розташування елементів на різних пристроях.