Про курс
Фронтенд –– невіддільна частина будь-якого сайту. Фронтендер –– людина, яка робить так, щоб користувачі могли взаємодіяти зі створеним вебдизайнером інтерфейсом. А HTML і CSS –– основа фронтенду.
На курсі з вивчення HTML і CSS отримаємо базу, щоб самостійно розробляти інтерфейси з огляду на сучасні технології, процеси та підходи. Розберемося з особливостями створення користувацького інтерфейсу сайтів –– HTML, CSS, основами роботи в графічних редакторах. Навчимося робити сайт доступним на екранах різного розміру та за різних умов, а ще оптимізувати свою роботу для вищої продуктивності.
Встигнемо не лише вивчити HTML і CSS, а й здобудемо навички, які допоможуть самостійно занурюватися у сферу ще глибше та ефективно реагувати на зміни у фронтенді. Адже потреби й вимоги користувача ростуть, технічні можливості розширюються, тренди змінюються, а фронтенд розробник повинен усе це відстежувати, вивчати та вміти використовувати.
весна 2025
курс триває 3 місяці
7 500 грн/міс.
7 875 грн/міс. при оплаті частинами22 500 грн при оплаті всього курсу
15 місць
кожен студент отримує регулярний фідбек
Програма курсу
-
Вступ у HTML і CSS
- — Особливості та складники HTML.
- — Будова HTML тегу, скелет HTML сторінки.
- — CSS і його функції.
- — Правила побудови таблиць стилів.
- — CSS селектори, значення кольорів та розмірів.
- — Підключення CSS на HTML сторінку.
- — Ознайомлення з VSCode, Git, Figma.
-
Посилання та зображення
- — Види посилання та його складники.
- — Шлях до ресурсу.
- — Атрибути посилань.
- — Види, формати й атрибути зображень.
- — Можливості SVG.
- — Теги для гіперпосилань, зображень, групи зображення та підпису.
- — Chrome DevTools для інспектування коду в браузері.
-
Основи типографіки
- — Завдання й основні поняття типографіки.
- — Групи правил для тексту та шрифтів.
- — Підключення шрифтів на сторінку.
-
CSS
- — Блокова модель.
- — Правила –– display, float, z-index, overflow.
- — Стилізація зображень.
- — Селектори, їхня пріоритетність.
- — Позиціювання елементів.
- — Стилізація посилань.
-
Списки й таблиці
- — Теги для різних видів списків.
- — Лічильники.
- — Списки визначень –– dt, dd, dl.
- — Основні теги для таблиць.
- — Стилізація списків і таблиць.
-
Теги для групування, семантика
- — Особливості тегів div і span.
- — Семантика HTML, види блоків сайту.
-
Flexbox
- — Стилі для батьківських та дочірніх елементів.
- — Вирівнювання блоків.
- — Побудова «колонок».
-
Grid
- — Групи правил для grid елементів.
- — Відмінності між grid та flex.
- — Побудова «колонок» і колонковий дизайн.
-
Responsive Design
- — Складники та основні прийоми адаптивного дизайну.
- — Container Query.
- — Дублювання HTML для різних медіа.
-
Форми та їхня стилізація
- — Сутність форм, груп та підписів.
- — Текстові поля і їхні типи.
- — Селекти, чекбокси, кнопки та радіокнопки.
- — Валідація форм.
- — Додаткові типи полів для введення даних у формах.
- — Стилізація елементів форм.
-
Системи іменування класів
- — Функції систем іменування класів та архітектури CSS.
- — Ознайомлення з методологіями –– BEM, SMACSS, Atomic CSS, OOCSS.
- — Поділ сторінки на структурні складники.
Курс для вас, якщо ви
Початківець
прагнете вивчати HTML, CSS з нуля, щоб зробити перші кроки у front-end розробці та зверстати свої перші сторінки
Дизайнер/ка сайтів
бажаєте пройти курс верстки сайтів
Світчер/ка
хочете змінити нинішню професію й вивчати HTML, щоб перейти в ІТ
English
Intermediate і вище
Математика
на хорошому шкільному рівні
Час
8+ годин на тиждень для виконання домашніх завдань
Як відбувається навчання
Вебінари та відеолекції
Вебінари з куратором та групою відбуватимуться щовівторка та щочетверга о 19:30.
Real-life завдання
У нас діє Practicult — культ практики. Тому ви виконуватимете багато складної домашки з реальних робочих буднів. Have fun & survive.
Курсовий проєкт
Під час курсу ви зробите великий проєкт. Адже принцип курсу — все як у житті.
Регулярний фідбек
У нас немає базових і преміум режимів. Тільки преміум, завжди. Отримайте від кураторів усе. І так, десята ітерація — це нормально.
Сертифікат за здобутки
Наші сертифікати справді цінують на ринку. Тому ми видаємо їх лише тим студентам, які виконали щонайменше 70% домашніх завдань та захистили курсовий проєкт.
ГРАФІК
Старт
весна 2025
Вебінари
щовівторка та щочетверга о 19:30
Мова викладання
українська
Запитання
Чи потрібні якісь навички для вступу на курс?
Online HTML CSS –– це базовий курс для людей без досвіду в галузі. Основи HTML, CSS та все потрібне вивчатимемо з нуля. Проте ми цінуємо ваш час і хочемо переконатися, що курс буде для вас корисним, а зусилля принесуть результат.
Тому для вступу необхідно поспілкуватися з менеджером, який сконтактує з вами впродовж 72 годин. Одразу після інтерв'ю ви отримаєте відповідь та рекомендації для вступу. Тоді ж ви дізнаєтесь деталі щодо оплати курсу. Важливо: місце в групі бронюється тільки після внесення оплати.
Якщо ви отримаєте відмову –– не засмучуйтеся. Ми надішлемо також список корисних посилань. Ознайомтеся з цими матеріалами, а відтак сміливо подавайтеся на курс знову.
Який софт будемо використовувати на курсі?
Щоб ефективно засвоїти HTML CSS уроки та закріпити знання на практиці, знадобиться браузер і будь-який текстовий редактор з підсвіткою коду, наприклад, VSCode. Як встановити редактор і працювати з ним, розповість куратор чи кураторка.
Як відбувається комунікація на курсі та в якому форматі куратори дають фідбек?
Уся комунікація на курсі відбувається на платформі Slack (робочий чат групи, канали для домашніх завдань і корисних посилань). Куратори дають фідбек у вигляді коментарів до домашніх завдань та обговорення на вебінарах.
Чи записуватимуться вебінари?
Так, але краще виділіть час, щоб долучатися до них особисто — буде цікаво.
А сертифікат буде?
Буде, якщо ви докладете зусиль. Щоб отримати сертифікат, потрібно виконати щонайменше 70% домашніх завдань, отримати фідбек та «зараховано» від куратора, а також здати й захистити курсові проєкти. Дедлайном для здачі та зарахування робіт є дата випуску або захисту перед замовником.
Що, як мені не сподобається?
Ми зможемо повернути вам гроші протягом 7 днів від початку курсу, якщо ви передумаєте.
Що таке HTML і CSS?
HTML і CSS –– основа вебсторінок.
HTML (HyperText Markup Language) –– це мова розмітки, що дає змогу створювати структурні елементи сторінки, як-от заголовок, список, а також додавати зображення, форми тощо за допомогою тегів. Тобто HTML верстка є скелетом сайту.
CSS (Cascading Style Sheets) –– це мова стилю вебсторінки, що формує її зовнішній вигляд –– колір, розмір елементів та інші візуальні ефекти. Також це базові технології, що їх опановують студенти, що прийшли навчатися на HTML курси.
Чи варто вивчати HTML і CSS?
Якщо плануєте далі розвиватися у фронтенд розробці, то спочатку слід саме вивчити HTML і CSS. Бо нашаровувати знання мов програмування, фреймворків і бібліотек ви будете саме на основи HTML і CSS.
Що пишуть на HTML і CSS?
Базово CSS & HTML –– це два кити, на яких тримається будь-який вебсайт. Тому верстка HTML CSS –– обов'язковий скіл для тих, хто хоче працювати з вебсайтами та фронтендом.
Що робить верстальник сайтів?
Верстальник сайту, або фронтенд розробник, відповідальний за видиму для користувачів частину сайту. Він створює інтерфейс на основі макета від вебдизайнера. Утім, верстка HTML –– це не лише про суто технічне втілення готового макета, а й про те, щоб готовий сайт був функціональним та зручним і зрозумілим для користувача.
Скільки вчитися на верстальника?
Щоб опанувати HTML і CSS з нуля, вам знадобиться щонайменше три місяці інтенсивного навчання на курсі. Програма HTML навчання сформована так, щоб студенти багато практикувались, а після завершення курсу могли самостійно верстати прості сайти. Але це дуже умовний термін, адже щоб засвоїти всі уроки HTML, CSS, ви матимете доступ до них ще впродовж року.
Які ще курси для розробників я можу пройти?
Якщо ви засвоїли HTML і CSS уроки й хочете продовжити прокачувати свої хард скіли як фронтенд розробника, радимо курс по JS та курс React JS. Або ж одразу реєструйтеся на річний курс front-end.
Якщо думаєте про навчання програмування у напрямі бекенд, обирайте Пайтон онлайн, або вашим фокусом може стати мова Go.
Також залежно від планів щодо професійного розвитку зверніть увагу на таке навчання –– QA курс, SQL курс онлайн, Математика для data science, Linear Algebra та Learn Algoritmika.
