початківець і прагнете вивчати HTML, CSS з нуля
02
дизайнер/ка сайтів і бажаєте пройти курс верстки сайтів
03
світчер/ка й хочете вивчати HTML, щоб перейти в ІТ
For whoms
...тоді це метч!
Це курс із вивчення HTML і CSS для новачків у професії, щоб отримати базу й самостійно розробляти інтерфейси з огляду на сучасні технології, процеси та підходи.
Розберетеся з особливостями створення користувацького інтерфейсу сайтів — HTML, CSS, основами роботи в середовищах для програмування і графічних редакторах, а також із системою контролю версій Git. Навчитеся робити сайт доступним на екранах різного розміру та за різних умов. Здобудете навички, які допоможуть самостійно занурюватися у сферу ще глибше й ефективно реагувати на зміни у фронтенді.
навички,
які опануємо
hard skills
розуміння роботи браузера
знання HTML/CSS
уміння верстати сайти
обізнаність із принципами адаптивного дизайну
уміння забезпечити комфортну взаємодію з сайтом у різних браузерах
розуміння систем контролю версій на прикладі Git та GitHub
Навички
те, що
треба
soft skills
навички взаємодії із замовником
уважність до деталей
уміння виявляти й усувати технічні проблеми
тайм менеджмент
здатність швидко освоювати та засвоювати нові знання
обізнаність із сучасними інтерфейсними технологіями й трендами
програма курсу
від основ до перших проєктів
ГРАФІК ЗАНЯТЬ
вебінари — щовівторка та щочетверга о 19:30
01
інструменти розробки
Figma, VSCode
термінал і робота з файловою системою
системи контрол версій
робота з Git
02
вступ у HTML і CSS
02особливості та складники HTML
будова HTML тегу, скелет HTML сторінки
CSS і його функції
правила побудови таблиць стилів
CSS селектори, значення кольорів та розмірів
підключення CSS на HTML сторінку
03
посилання та зображеннявиди посилання та його складники
шлях до ресурсу
атрибути посилань
види, формати й атрибути зображень
можливості SVG
теги для гіперпосилань, зображень, групи зображення та підпису
hrome DevTools для інспектування коду в браузері
04
основи типографікизавдання й основні поняття типографіки
групи правил для тексту та шрифтів
підключення шрифтів на сторінку
05
CSSсписки й таблиці
теги для різних видів списків
лічильники
списки визначень — dt, dd, dl
основні теги для таблиць
стилізація списків і таблиць
07
теги для групування, семантика
особливості тегів div і span
семантика HTML, види блоків сайту
08
Flexboxстилі для батьківських та дочірніх елементів
вирівнювання блоків
побудова «колонок»
09
Grid
складники та основні прийоми адаптивного дизайну
Media Query та Container Query
дублювання HTML для різних медіа
11
форми та їхня стилізаціяфункції систем іменування класів та архітектури CSS
ознайомлення з методологіями –– BEM, SMACSS, Atomic CSS, OOCSS
поділ сторінки на структурні складники
13
просунуті HTML/CSS фічіtransform
transition
animation
сучасний HTML та CSS
ПОКА8+ годин на тиждень для виконання домашніх завдань
Studying process
інструмент — текстовий редактор з підсвіткою коду, наприклад, VSCode
Studying process
сертифікат за виконання домашніх завдань та успішний захист курсового проєкту
мова викладання — українська
вступ у HTML і CSS
03
посилання та зображення
посилання та зображення
види посилання та його складники
шлях до ресурсу
атрибути посилань
види, формати й атрибути зображень
можливості SVG
теги для гіперпосилань, зображень, групи зображення та підпису
hrome DevTools для інспектування коду в браузері
04
основи типографіки
05
CSS
06
списки й таблиці
07
теги для групування, семантика
08
Flexbox
09
Grid
10
Responsive Design
11
форми та їхня стилізація
12
системи іменування класів
13
просунуті HTML/CSS фічі
що на вас чекає
практичні завдання, щоб закріпити вивчену теорію, та фідбек від кураторів
8+ годин на тиждень для виконання домашніх завдань
інструмент — текстовий редактор з підсвіткою коду, наприклад, VSCode
Studying process
сертифікат за виконання домашніх завдань та успішний захист курсового проєкту
Studying process
мова викладання — українська