Перетворюйте дизайн на продуману адаптивну верстку разом з IT СТОЛИЦЯ.
Сторінка схожа на макет, доки заголовок короткий, карток рівно три, а вікно браузера має звичну ширину. Потім змінюється текст — і блоки розсуваються; на телефоні з’являється зайве прокручування; виправлення однієї кнопки впливає на інші. Курси HTML та CSS Advanced допоможуть перейти від знайомства з тегами й стилями до обґрунтованих рішень у верстці. Це поглиблений рівень для тих, хто вже створює прості сторінки та хоче впевненіше працювати з макетами.
Підсумок повної програми — адаптивна верстка мінісайту онлайн-журналу: головної сторінки, тематичної добірки та публікації. Ви підготуєте спільні елементи навігації, картки матеріалів і оформлення довгого тексту, перевірите їх у погоджених браузерах та опишете знайдені обмеження. Результат включає HTML і CSS, підготовлені зображення та перелік перевірок. Навчання доступне в Києві й онлайн; завершений проєкт передбачає всі модулі та самостійне закріплення.
Навчіться бачити вимоги за зовнішнім виглядом макета
У Figma видно композицію, але далеко не завжди показано всі можливі ситуації. Що станеться з карткою без фотографії? Як розташувати меню з довшими назвами? Де закінчується бажаний розмір заголовка й починається проблема з читанням? На поглибленому курсі ви вчитиметеся ставити ці питання до написання основних стилів.
Робота починається з розбору макета: повторюваних блоків, правил вирівнювання, відступів, типографіки та поведінки на різних екранах. Далі ви визначаєте, де доречний Flexbox, де потрібен CSS Grid і які розміри мають залежати від вмісту. Це допомагає будувати сторінку, яку можна змінювати без постійного додавання окремих винятків.
| Ситуація в майбутньому інтерфейсі | Що ви навчитеся передбачати |
|---|---|
| Заголовки карток мають різну довжину | Перенесення тексту, мінімальні розміри та вирівнювання елементів |
| Той самий блок стоїть у широкій і вузькій колонці | Адаптацію компонента до доступного простору |
| Навігацією користуються без миші | Порядок переходів, видимий фокус і доступність дій |
| Змінюється спільний стиль | Перевірку впливу на всі сторінки, де використовується компонент |
Зберіть кілька сторінок на спільній основі
У навчальному онлайн-журналі різні сторінки мають узгоджений вигляд: шапку, навігацію, картки, текстові стилі й підвал. Ви працюватимете з повторним використанням CSS, зрозумілими назвами класів і змінними для кольорів, відступів та розмірів. Зміна спільного елемента стане приводом перевірити весь невеликий проєкт.
Окрему увагу приділимо змісту, який важко вмістити в ідеальний макет: довгому заголовку, великій цитаті, фотографії іншого формату, додатковому пункту меню. Ви перевірятимете верстку на таких прикладах і пояснюватимете обраний спосіб виправлення. Важливо розуміти причину поведінки блока, щоб застосувати рішення в іншому місці.
Мінісайт дає практику для ширшого кола задач: корпоративних сторінок, каталогів, блогів і промосторінок. Результат курсу — статична верстка. Система публікації матеріалів, особисті кабінети, пошук на сервері та приймання заявок потребують окремої розробки й до цієї програми не входять.
Отримуйте пояснення на рівні конкретного рішення
В інтернеті легко знайти приклад сітки. Складніше зрозуміти, чому саме у вашому блоці з’явилося переповнення або чому правило CSS перестало застосовуватися. Цінність роботи з викладачем — у розборі таких ситуацій на коді: що вплинуло на розмір, яке правило перемогло в каскаді, чому елемент перекрив сусідній.
Практичні завдання поєднують роботу з поясненням і самостійне перенесення прийому в інші умови. Наприклад, після розбору сітки ви змінюєте кількість карток і довжину тексту. Після оформлення стану фокуса проходите навігацію клавіатурою. Після зміни спільного класу перевіряєте три сторінки.
Такий підхід розвиває вміння аргументувати правки. Замість випадкового підбору значень ви зможете показати причину проблеми, пояснити вибране рішення та продемонструвати результат перевірки. Саме ці дії роблять вашу роботу зрозумілішою для дизайнера, розробника й замовника.
Перевірте, чи відповідає Advanced вашому досвіду
Для старту потрібно вміти створити HTML-документ, підключити CSS, працювати з класами, посиланнями, зображеннями та простими формами. Також знадобиться розуміння блокової моделі й початковий досвід адаптації сторінки. Якщо ці дії поки потребують покрокового повторення, спочатку варто опрацювати HTML Basic.
Advanced буде корисний верстальникам на початку практики, вебдизайнерам із базовими навичками коду та тим, хто вже зібрав кілька простих сторінок. Особливо доречне навчання, якщо ви хочете братися за складніші макети, але поки витрачаєте забагато часу на локальні виправлення.
Для практики потрібні комп’ютер, редактор коду, браузери та доступ до погодженого макета у Figma. Платні можливості інструментів не вважаються автоматично включеними в навчання; необхідні доступи визначаються до відповідного завдання.
Оберіть середовище для уважної роботи з макетом
На цьому рівні важливо мати час для порівняння варіантів і самостійних змін між заняттями. Онлайн-формат дає змогу працювати зі своїми файлами без поїздок; навчання в Києві — організувати практику в аудиторії. Заздалегідь оцінити простір допоможе фотогалерея центру.
Якщо знайомитеся з нами вперше, перегляньте інформацію про навчальний центр IT СТОЛИЦЯ. Далі можна перейти до змісту програми й визначити, які завдання ви хочете навчитися виконувати впевненіше.
Програма курсу HTML та CSS Advanced — 12 модулів
Навчання побудоване навколо верстки кількох пов’язаних сторінок. Основні прийоми ви застосовуєте в проєкті; додаткові можливості розглядаєте на окремих прикладах. Кожен модуль містить роботу з викладачем і самостійне завдання. Кількість модулів не дорівнює кількості занять: повний план має залишати час на перевірку та виправлення роботи.
Модуль 1. Аналіз макета та планування верстки
Зміст роботи
Читання макета у Figma: структура сторінок, повторювані блоки, відступи, шрифти, зображення та стани елементів. Визначення того, що задано дизайном, а що потребує уточнення. План файлів і ресурсів. Перелік вимог до майбутньої верстки та умов її перевірки.
Практичні завдання
З викладачем: розберете головну сторінку онлайн-журналу, виділите спільні компоненти та складете послідовність роботи.
Самостійно: проаналізуєте сторінку публікації, знайдете відсутні в макеті стани й сформулюєте запитання до дизайну.
Результат: план реалізації з переліком сторінок, компонентів і перевірюваних вимог.
Модуль 2. Семантика багатосторінкового інтерфейсу
Зміст роботи
Змістова структура головної сторінки, добірки та статті. Основний вміст, навігаційні області, заголовки, публікації, цитати й підписи до ілюстрацій. Порядок читання документа. Посилання для переходу та кнопки для дії. Зрозумілі назви навігації й перехід до основного вмісту.
Практичні завдання
З викладачем: підготуєте HTML-структуру статті та спільної навігації, перевірите логіку читання без оформлення.
Самостійно: розмітите тематичну добірку й узгодите навігацію між сторінками.
Результат: пов’язані HTML-сторінки зі зрозумілою структурою та коректним призначенням елементів.
Модуль 3. Каскад і організація CSS
Зміст роботи
Специфічність, успадкування, порядок правил і причини конфліктів. Назви класів за роллю компонента, підхід BEM, змінні CSS для повторюваних значень. Розділення загальних стилів, компонентів і варіантів. Ознайомлення з шарами каскаду на невеликому прикладі.
Практичні завдання
З викладачем: розберете конфлікт стилів картки та організуєте її базовий вигляд і варіант для іншого розділу.
Самостійно: приберете дублювання кольорів і відступів, зміните спільний параметр та перевірите наслідки.
Результат: зрозуміла структура CSS, у якій легше знаходити й обґрунтовано змінювати потрібні правила.
Модуль 4. Flexbox для компонентів із різним наповненням
Зміст роботи
Розподіл доступного простору, базовий розмір елемента, зростання та стискання. Перенесення, проміжки, вирівнювання, мінімальна ширина дочірніх блоків. Навігація, метадані публікації та картки з неоднаковим текстом. Вплив візуального переставляння на порядок взаємодії.
Практичні завдання
З викладачем: налаштуєте шапку та картку, що зберігають зручне розташування за різної довжини вмісту.
Самостійно: перевірите довгу назву розділу, додатковий елемент і вузький контейнер; усунете переповнення.
Результат: компоненти з передбачуваною поведінкою під час зміни тексту та доступної ширини.
Модуль 5. CSS Grid для структури сторінки
Зміст роботи
Колонки, рядки, проміжки, області та автоматичне розміщення. Гнучкі сітки з repeat, minmax і auto-fit. Поєднання Grid для загального макета та Flexbox усередині компонентів. Ознайомлення із subgrid для узгодження вкладених елементів.
Практичні завдання
З викладачем: створите композицію головної сторінки з головним матеріалом, добіркою карток і додатковою колонкою.
Самостійно: зміните кількість публікацій та перебудуєте сітку для тематичної сторінки.
Результат: кілька компонувань на CSS Grid із поясненням вибору розмірів і правил розміщення.
Модуль 6. Адаптивність сторінки та окремого компонента
Зміст роботи
Підхід mobile-first і точки зміни компонування, обрані за потребами вмісту. Медіазапити, гнучкі розміри, функції min, max і clamp. Запити до ширини контейнера. Збереження змістового порядку блоків під час адаптації та перевірка проміжних ширин.
Практичні завдання
З викладачем: адаптуєте головну сторінку й налаштуєте картку, що змінює вигляд залежно від ширини її контейнера.
Самостійно: перевірите проміжні розміри вікна, збільшення тексту та довгі фрагменти вмісту.
Результат: верстка пристосовується до доступного простору за зрозумілими правилами.
Модуль 7. Типографіка та графіка для адаптивного сайту
Зміст роботи
Довжина рядка, міжрядковий інтервал, перенесення й масштабування заголовків. Підключення вебшрифтів, запасні шрифти та font-display. Зображення через srcset, sizes і picture. Пропорції, кадрування, SVG та резервування місця під медіа.
Практичні завдання
З викладачем: оформите довгу публікацію, налаштуєте головне зображення й перевірите сторінку до завершення завантаження шрифту.
Самостійно: підготуєте варіанти зображення для картки та перевірите різні пропорції фотографій.
Результат: читабельна типографіка та підготовлена графіка, поведінку яких ви можете перевірити й пояснити.
Модуль 8. Доступність і стани елементів інтерфейсу
Зміст роботи
Керування клавіатурою, видимий фокус, контраст і зрозумілі підписи. Стани наведення, натискання, недоступності та помилки. Нативні елементи форми, групування полів і зв’язок пояснення з полем. Використання details і summary. Межі оформлення CSS та логіки JavaScript.
Практичні завдання
З викладачем: оформите навчальну форму зворотного зв’язку та блок додаткової інформації, перевірите взаємодію без миші.
Самостійно: підготуєте приклади станів полів і виправите непомітний фокус або недостатньо зрозумілу підказку.
Результат: елементи інтерфейсу мають продумані стани; навчальна форма не підключається до серверного приймання даних.
Модуль 9. Позиціювання, шари та доречний рух
Зміст роботи
Позиціювання відносно блока, sticky-елементи, контексти накладання та z-index. Взаємодія з overflow і прокручуванням. Переходи, трансформації та коротка CSS-анімація. Урахування налаштування зменшеного руху через prefers-reduced-motion.
Практичні завдання
З викладачем: створите бічний зміст публікації, перевірите його поведінку під час прокручування та розберете конфлікт шарів.
Самостійно: додасте стриманий ефект до компонента й забезпечите варіант зі зменшеним рухом.
Результат: позиціювання та ефекти підтримують користування сторінкою й не перекривають важливий вміст.
Модуль 10. Кросбраузерність і запасні варіанти оформлення
Зміст роботи
Визначення браузерів і пристроїв, які потрібно підтримувати. Перевірка сумісності можливостей за документацією. Поступове покращення оформлення, feature queries через @supports і базові варіанти стилів. Відмінність між емуляцією ширини та перевіркою в іншому браузері.
Практичні завдання
З викладачем: перевірите компонент у доступних погоджених браузерах і підготуєте оформлення на випадок відсутності потрібної можливості.
Самостійно: складете перелік перевірок, зафіксуєте розбіжність і повторно перевірите її після виправлення.
Результат: перевірена сумісність у визначених умовах і чесний перелік того, що залишилося неперевіреним.
Модуль 11. Технічна якість і підготовка верстки до передавання
Зміст роботи
Перевірка HTML, посилань, метаданих і доступності. Аналіз зайвих ресурсів, розмірів зображень і дублювання CSS. Відкладене завантаження другорядних зображень. Ознайомлення з Lighthouse та читання його рекомендацій разом із ручними перевірками. Організація файлів і коротка інструкція до проєкту.
Практичні завдання
З викладачем: знайдете кілька конкретних проблем у верстці та порівняєте результат до й після виправлення.
Самостійно: підготуєте файли для передавання, перевірите шляхи й опишете порядок зміни спільних стилів.
Результат: упорядкований проєкт із поясненнями та підтвердженими виправленнями.
Модуль 12. Завершення проєкту та перевірка змін
Зміст роботи
Об’єднання головної сторінки, тематичної добірки та публікації. Узгодження спільних компонентів. Порівняння з макетом у погоджених умовах. Перевірка різного наповнення, навігації та адаптації. Представлення рішень і визначення обмежень готової верстки.
Практичні завдання
З викладачем: розберете підсумковий проєкт за критеріями якості та визначите потрібні доопрацювання.
Самостійно: внесете зміну до спільного компонента, перевірите всі три сторінки й представите результат із поясненнями.
Результат: завершений комплект адаптивної верстки мінісайту, опис структури та перелік виконаних перевірок.
Представляйте роботу через рішення, які ви можете пояснити
Коли показуєте верстку дизайнеру або потенційному замовнику, корисно продемонструвати більше, ніж гарний перший екран. Відкрийте довгу публікацію, змініть ширину вікна, пройдіть навігацію клавіатурою. Покажіть, що відбувається після заміни заголовка та як спільне правило впливає на кілька сторінок. Так стає видно ваш підхід до роботи.
Навчальний проєкт можна оформити як кейс: поставлене завдання, макет, ваші рішення, перевірені умови та знайдені обмеження. Додайте зображення результату, файли й коротке пояснення найважливіших правок. Вказуйте, які частини виконали самостійно та де працювали з допомогою викладача.
Для пошуку перших завдань із верстки такий кейс допомагає предметно говорити про свої вміння. Курс не визначає рішення роботодавця й не присвоює професійного рівня автоматично. Ви отримуєте основу для демонстрації навичок, яку можна розвивати наступними роботами.
Завершуйте проєкт за зрозумілими критеріями
Фінальна перевірка охоплює три сторінки та спільні елементи. У повній програмі важливо залишити час для виправлень після розбору, щоб знайдені проблеми стали частиною навчання.
- Відповідність макету: композиція, типографіка й відступи узгоджені з погодженими вимогами.
- Стійкість до наповнення: довші заголовки, додаткові картки й інші пропорції фотографій не руйнують компонування.
- Адаптивність: перевірені вузькі, широкі та проміжні розміри; важливі дії залишаються доступними.
- Доступність: навігація працює з клавіатури, фокус помітний, структура й підписи зрозумілі.
- Сумісність: зазначено, у яких браузерах і умовах проведено перевірку та які розбіжності знайдено.
- Підтримка: спільні стилі організовані послідовно, а зміни перевірені на всіх пов’язаних сторінках.
Самостійна фінальна зміна допомагає оцінити перенесення знань: наприклад, потрібно додати варіант картки для вузької колонки й зберегти початковий вигляд в іншому розділі. Ви пояснюєте, що змінили, чому це працює та як перевірили суміжні елементи.
Обирайте обсяг за роботою, яку хочете завершити
Для повного мінісайту потрібні всі етапи: від аналізу макета до перевірки трьох сторінок. Якщо обираєте частину програми, підсумковий результат обмежується погодженими темами та вправами.
У пакеті START можна зосередитися на ключових для вас питаннях: наприклад, сітках і поведінці компонентів. Це часткове проходження програми.
Пакет STANDARD дає більше простору для поєднання тем і практики. До початку навчання важливо визначити, які сторінки, компоненти та перевірки увійдуть до вашого плану.
Пакет MAXIMUM призначений для повної програми обраного рівня. Для нового плану Advanced потрібно погодити достатній час на фінальне збирання, розбір і доопрацювання проєкту.
Зіставляйте загальну вартість із кількістю та тривалістю зустрічей, обсягом роботи з викладачем і самостійною практикою. Уточніть, які результати входять у вибраний план і як узгоджуються додаткові заняття, якщо вони знадобляться.
У правилах оформлення та оплати навчання описано наступні організаційні кроки. Окремо перевірте чинні акційні умови, які можуть стосуватися вашого запису.
Зробіть навчання частиною своїх робочих планів
Щоб практика не залишалася між іншими справами, оберіть у розкладі навчального центру зручний час і передбачте окремі проміжки для самостійної верстки. На Advanced саме повторна робота з макетом допомагає побачити, які рішення ви вже приймаєте впевнено.
Якщо навчання потрібне команді, корисно визначити спільну задачу: узгодити стилі, покращити адаптацію або навчитися перевіряти готові сторінки за єдиними критеріями. Ознайомитися з організаціями, які співпрацювали з центром, можна в розділі «Наші клієнти». Формат і наповнення корпоративного навчання погоджуються окремо.
Що варто з’ясувати про HTML та CSS Advanced
Чи потрібно вміти створювати дизайн у Figma?
Потрібно навчитися читати погоджений макет: визначати розміри, відступи, шрифти, компоненти та ресурси. Проєктування дизайну з нуля не є метою цього курсу. Відсутні стани чи правила адаптації ви вчитиметеся помічати й уточнювати до реалізації.
Чи обов’язковий JavaScript для проходження програми?
Основна практика виконується на HTML і CSS. Програмування JavaScript не є вимогою для старту. Водночас ви розбиратимете, де можливостей розмітки та стилів достатньо, а де потрібна окрема логіка: наприклад, для пошуку, фільтрації даних або складної інтерактивної навігації.
Чому основу програми не побудовано навколо Bootstrap або Tailwind?
Мета рівня — навчитися самостійно визначати структуру й правила компонування, розбирати каскад та перевіряти поведінку елементів. Ця база допоможе надалі працювати з різними бібліотеками. Поглиблене вивчення конкретного CSS-фреймворку потребує окремого навчального завдання.
Чи повинна сторінка виглядати абсолютно однаково в усіх браузерах?
Критерії сумісності визначають заздалегідь: доступність вмісту, працездатність елементів і прийнятне відтворення дизайну в обраному наборі браузерів. Незначні відмінності відображення шрифтів або стандартних полів можливі. Важливо відрізняти їх від помилок, що заважають користуванню.
Чи достатньо перевірити мобільний вигляд у вузькому вікні?
Це корисна частина перевірки адаптивності, але вона не відтворює всі особливості телефона: сенсорне керування, екранну клавіатуру та поведінку конкретного браузера. У проєкті потрібно зазначати, що перевірено на реальному пристрої, що — в режимі емуляції, а що ще потребує перевірки.
Чи можна розбирати власну верстку?
Такий варіант варто погодити до початку відповідного модуля. Потрібно оцінити доступність файлів, складність проєкту й відповідність задач програмі Advanced. Повне виправлення стороннього сайту не входить у навчання автоматично; для практики можна обрати конкретний компонент або проблему.
Як зрозуміти, що вже потрібен рівень Professional?
Якщо ви самостійно переносите макет у підтримувану адаптивну верстку, пояснюєте компонування та системно перевіряєте зміни, можна розглядати складніші методології й інструменти. Порівняйте свої завдання зі змістом HTML та CSS Professional. Орієнтиром мають бути вміння та прогалини, які хочете опрацювати.
Зафіксуйте навчальний результат
Після успішного завершення програми та виконання її вимог можна отримати сертифікат IT СТОЛИЦЯ. Електронний сертифікат безкоштовний, друкований із ламінуванням замовляється за окрему оплату. Формати й умови описані в розділі про документ після навчання.
Сертифікат підтверджує проходження програми центру та не присвоює державної професійної кваліфікації. Поруч із ним варто показувати навчальний кейс: саму верстку, ваші пояснення й результати перевірок.
Беріться за макети з розумінням того, як їх реалізувати
Якщо прості сторінки вже вдаються, наступний крок — навчитися працювати з різним вмістом, спільними компонентами та вимогами до якості. Поглиблена практика допоможе перетворити знайомі властивості CSS на інструменти для конкретних задач.
Запишіться на курси HTML та CSS Advanced в IT СТОЛИЦЯ і попрацюйте над версткою, яку зможете пояснити, перевірити та передати для подальшої розробки.
