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

Урок охоплює основи налаштування середовища для розробки. Спочатку ознайомимося з процесом встановлення та налаштування редактора коду, який є основним інструментом для написання коду. Далі ви налаштуєте систему контролю версій за допомогою 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 для правильного вирівнювання та розташування елементів на різних пристроях.

Урок охоплює усі тонкощі роботи з CSS Grid Layout, що є ще одним потужним інструментом для верстки адаптивних макетів. Буде вивчено властивості, що контролюють створення сітки – чіткої та неявної, її розміщення всередині контейнера, а також властивості, що можна застосовувати для контролю розміщення елементів сітки. Ознайомлення розпочнеться з аналізу верстки ІІІ-ої секції макету, де буде проаналізовано структуру та стилі, а також написано узагальнений каркас стилів, який ляже в основу подальшої роботи. Урок також включатиме верстку IV-ої секції макету для десктопної та мобільної версій, з використанням Grid для коректного розміщення елементів на сторінці. Окрім того, буде здійснена верстка карток продукту та їх загальної обгортки, стилі буде винесено в окремий файл задля подальшого їх застосування в інших секціях макету. Окрім цього буде створено JavaScript код для контролю користувачем кількості карток на сторінці, тобто їх поява та зникнення при взаємодії з кнопкою.

Урок охоплює вивчення першого інтерактивного елементу на сторінці — слайдера. Під час уроку буде розглянуто сутність, мету та різновиди слайдерів, які дозволяють додавати динамічні елементи на сторінку, покращуючи взаємодію користувача з сайтом. Окрім цього, буде проаналізовано використання популярних JavaScript-бібліотек для створення слайдерів, зокрема Glide.js, яку буде інтегровано в проєкт. Після підключення бібліотеки буде здійснено її кастомізацію та ініціалізацію. Особлива увага буде приділена налаштуванню адаптивності слайдера, щоб він коректно працював на різних пристроях, зокрема на мобільних. Завершення уроку передбачає верстку V секції макету та написання стилів для різних розмірів екранів.

Урок призначений для розгляду однієї з найважливіших навичок у розробці — перевикористання стилів у проєкті, що допомагає зберегти чистоту та лаконічність коду. Під час уроку буде здійснено аналіз верстки VI секції, де будуть виокремлені вже існуючі блоки, що дозволить зручно повторно використовувати стилі для інших елементів на сторінці. Особливу увагу буде приділено технікам позиціонування елементів на сторінці, зокрема властивостям CSS, таким як position, top, bottom, left, right і z-index, які дозволяють точніше керувати розташуванням елементів відносно інших на сторінці. Після цього буде здійснено аналіз верстки VII секції та створення її html-структури. Завершення уроку передбачає написання стилів для VII секції, де на практиці буде використано щойно вивчені властивості позиціонування.

Урок призначено для створення наступного, але не менш важливого інтерактивного елементу на сторінці, а саме - модальних вікон, які використовуються для відображення додаткової інформації або форм на сторінці. Буде вивчено принципи верстки модальних вікон, написано відповідні стилі для їхнього коректного відображення на різних екранах та інтерактивних ефектів. Окрім цього, буде написано JavaScript-скрипт код для відкриття та закриття модальних вікон, що дозволить користувачам керувати їхнім відображенням. Важливою частиною уроку є робота з формами, де буде проаналізовано верстку IX-ої секції та розглянуто основи створення форм для збору даних від користувачів. Частиною розробки IX-ої секції буде та написання коду для валідації поля форми та інтеграція бібліотеки EmailJS, що дозволить відправляти дані форми без використання серверної частини.

Урок призначений завершенню верстки, а саме верстки підвалу сайті – footer, що є важливою частиною будь-якої сторінки. В процесі роботи буде здійснено аналіз верстки footer, написано відповідну верстку та стилі, що дозволять створити елементи в ньому. Після завершення верстки буде розглянуто процес публікації готової сторінки на GitHub Pages, що дозволить демонструвати створений проєкт онлайн. Буде визначено мету файлу README.md та покроково розглянуто етапи його створення.

Урок призначений для додаткового удосконалення сторінки, зокрема додавання карток продукту в кілька секцій, заповнюючи їх інформацією з JavaScript масиву. Це дозволить динамічно генерувати контент на основі даних, що зберігаються в масиві, імітуючи додавання на сторінку інформації, яка містить тільки у файлі скрипту, наприклад після запиту, що значно спрощує редагування сторінки. Також буде проаналізовано функціонування корзини, створено додаткові стилі для її оформлення. Однією з важливих частин уроку стане написання JavaScript коду для роботи корзини, який дозволить додавати продукти, видаляти їх зберігаючи інформацію в localStorage. Для покращення вражень користувача буде встановлена бібліотека для відображення спливаючих повідомлень, що дозволить створювати повідомлення про його дії на сайті, зокрема про помилку при діях на сторінці. Отже, урок націлений на збільшення інтерактивності інтерфейсу.