- Кількість кредитів 3,5
- Тип Обов'язковий
- Семестр 3
- Рівень вищої освіти Бакалавр
- Підсумковий контроль Екзамен
⚡Квест: Перетвори Figma-макет на чистий Pixel-Perfect код!
Вмієш малювати інтерфейси, але хочеш навчитися їх оживляти? Настав час перекласти дизайн на мову заліза! Опануєш суворий HTML5 та каскадні стилі CSS3. Навчишся будувати складні адаптивні сітки за допомогою Flexbox та CSS Grid, підкориш препроцесори SASS/SCSS та методологію BEM.
🚀Збудуй свій перший залізобетонний фронтенд!
🛠Стек: HTML5, CSS3, SASS/SCSS, BEM, VS Code, Lighthouse, GitHub.
🎒В рюкзак: Повністю адаптивна багатосторінкова вебплатформа, задеплоєна на GitHub Pages.
⚡Квест: Опануй семантичну верстку, підкори CSS Grid та створюй адаптивний Pixel-Perfect фронтенд!
🌐Опис місії
Будь-який крутий веб-інтерфейс починається з валідного структурованого каркаса. Цей квест — твій міст між графічним дизайном у Figma та реальним кодом, який розуміють браузери. Забудь про хаотичне копіювання стилів навмання та застарілі табличні макети. Ми навчимо тебе будувати інтерфейси за суворими індустріальними критеріями: від розрахунку математичної ваги CSS-селекторів до оптимізації критичного шляху рендерингу (CRP) сторінки. Ти дізнаєшся, як автоматизувати рутину через препроцесори, писати семантичний код під SEO-роботів та створювати «гумові» інтерфейси, що ідеально виглядають на будь-якому пристрої!
🛠Твій інструментарій
Core Layout Technologies: HTML5 (семантична розмітка), CSS3, препроцесор SASS/SCSS.
Architecture & IDEs: Методологія BEM (Block-Element-Modifier), VS Code (Prettier, Stylelint, Live Server).
Diagnostics & Audit: Browser DevTools (інспектування DOM), W3C HTML/CSS Validators, Lighthouse (метрики Core Web Vitals).
Deployment Platforms: GitHub Pages (автоматичне розгортання статичного сайту в мережі).
🚀Що прокачаєш (Суперсили)
Flexbox & CSS Grid Alchemy: Навчишся комбінувати одновимірні та двовимірні layout-систем для збірки асиметричних інтерфейсних сіток будь-якої складності.
SASS Architecture: Прокачаєш створення гнучких дизайн-систем за допомогою SCSS-змінних, вкладених структур, параметризованих міксинів та функцій.
Mobile First Strategy: Навчишся адаптувати макети під будь-які роздільні здатності екранів через медіазапити (Media Queries) та відносні одиниці виміру (rem, vh/vw).
Web Accessibility (A11y): Реалізуєш повноцінну клавіатурну навігацію та інтегруєш ARIA-атрибути для коректної роботи екранних дикторів (скрінрідерів).
🎒Що покладеш у рюкзак (Портфоліо)
Фінальним артефактом стане твій індивідуальний інженерний проєкт — Адаптивна, семантично валідна багатосторінкова вебплатформа, повністю ідентична складному дизайн-макету:
Figma Layout Inspection Report: Аналітичний звіт про експорт та оптимізацію графічних активів (SVG-спрайти, AVIF/WebP формати).
Modular SASS/BEM Grid CSS: Чистий, масштабований код стилів за методологією BEM без дублювання логіки.
Lighthouse Performance Audit: Офіційний звіт інструменту Lighthouse з найвищими оцінками (близько 100%) за параметрами Performance, Accessibility, Best Practices та SEO.
GitHub Pages Deployment Pipeline: Живе посилання на твій працюючий сайт, розгорнутий через хостинг GitHub Pages.
💼Твій майбутній тайтл
Цей семестр дає міцний технологічний фундамент для кар'єрного старту у фронтенді:
Junior HTML/CSS Developer / Layout Engineer.
Junior Front-end Developer (UI-верстка).
Content Manager / Webmaster (з глибоким розумінням валідації W3C та SEO).
