Курс Front-end Beginning. HTML/CSS

Базовий курс, який допоможе зробити перші кроки у вебпрограмуванні. А потім вирішити, куди розвиватися далі: пірнати у front-end чи обмежитися базовим набором для створення якісних вебінтерфейсів.

Програма курсу

Інструменти розробки

• Figma, VSCode
• Термінал і робота з файловою системою
• Системи контрол версій
• Робота з Git

Вступ у HTML i CSS

• Особливості та складники HTML
• Будова HTML тегу, скелет HTML сторінки
• CSS і його функції
• Правила побудови таблиць стилів
• CSS селектори, значення кольорів та розмірів
• Підключення CSS на HTML сторінку

Посилання та зображення

• Види посилання та його складники
• Шлях до ресурсу
• Атрибути посилань
• Види, формати й атрибути зображень
• Можливості SVG
• Теги для гіперпосилань, зображень, групи зображення та підпису
• Chrome DevTools для інспектування коду в браузері

Основи типографіки

• Завдання й основні поняття типографіки
• Групи правил для тексту та шрифтів
• Підключення шрифтів на сторінку

CSS

• Блокова модель
• правила - display, float, z-index, overflow
• Стилізація зображень
• Селектори, їхня пріоритетність
• Позиціювання елементів
• Стилізація посилань

Списки й таблиці

• Теги для різних видів списків
• Лічильники
• Списки визначень - dt, dd, dl
• Основні теги для таблиць
• Стилізація списків і таблиць

Теги для групування, семантика

• Особливості тегів div і span
• Семантика HTML, види блоків сайту

Flexbox

• Стилі для батьківських та дочірніх елементів
• Вирівнювання блоків
• Побудова "колонок"

Grid

• Групи правил для grid елементів
• Відмінності між grid та flex
• Побудова "колонок" і колонковий дизайн

Responsive Design

• Складники та основні прийоми адаптивного дизайну
• Media Query та Container Query
• Дублювання HTML для різних медіа

Форми та їхня стилізація

• Сутність форм, полів, груп полів та підписів до полів
• Текстові поля та їхні типи
• Селекти, чекбокси, кнопки та радіокнопки
• Валідація форм
• Додаткові типи полів для введення даних у формах
• Стилізація елементів форм

Системи іменування класів

• Функції систем іменування класів та архітектури CSS
• Ознайомлення з методологіями - BEM, SMACSS, Atomic CSS, OOCSS
• Поділ сторінки на структурні складники

Просунуті HTML/CSS фічі

• transform
• transition
• animation
• Сучасний HTML та CSS

Особливості курсу

• Вебінари та відеолекції
• Real-life завдання
• Курсовий проєкт
• Регулярний фідбек
• Сертифікат за здобутки
• Можна повернути кошти протягом 7 днів від початку курсу

Викладачі курсу

• Тетяна Мельник - Engineering Team Lead at Projector Institute
• Ольга Шемена - Frontend Developer в BrainRocket
• Юлія Євсєєнко - Frontend Developer at Infranomics
• Леонід Костецький - Creative Director i Co-Founder в Emotion Agency / Куратор
• Вікторія Комаровська - Frontend Tech Lead в 6-Systems Sixt Group
• Василь Кошапов - Lead Frontend Developer в Limestone Digital
• Вадим Васько - Frontend Developer в Software Service and Innovation
• Андрій Кедись - Frontend Developer в Syndicode / Куратор
• Владислав Єрмолаєв - Frontend Developer / Куратор