Курс Front-end (HTML/CSS + JS)
- Online
- Для начинающих
- Frontend
![]() |
|
Образовательный центр: | Lemon School |
---|---|
Формат: | Курс |
Язык обучения: | Ukrainian |
Длительность обучения: | 4 месяцев |
Начало курса: | 13.01.2026 |
Стоимость обучения: | 15 500 UAH за курс |
При оплаті відразу за весь курс ціна - 13 950 UAH.
Від PSD-макету до адаптивного документа, разом з HTML5 та каскадними таблицями стилів CSS3. Так, це твій шлях до кар’єри у розробці — з 0 до junior front-end з заробітком від $800
Програма курсу
Модуль 1 - HTML5, CSS3. BEM. Bootstrap5. Адаптивна верстка. Верстка навчального проєкту
Заняття 1. Знайомство, вступна інформація. Перший кодинг
- Знайомство
- Що таке IT загалом і яке місце займає front-end у веб-розробці
- Етапи розробки проекту
- Огляд інструментів для розробки
- Структура документа HTML
- Основні теги
- CSS властивості
Заняття 2. Принципи роботи HTML та CSS. Figma. Практика
- Внутрішні стиль
- Три методи підключення CSS
- Рендеринг сторінок
- Блокові-малі
- Особливості HTML5. Поняття кросбраузерності та валідності
- Figma для fornt-end розробника
- CSS властивості
Заняття 3. Специфіка CSS. FTP. Практика
- Селектори
- Специфіка css
- Значення селектора, вага від типу звернення
- Посилання. Багатосторінкові сайти
- FTP. Робота із сервером
- Коментування коду
- CSS властивості
Заняття 4. Шляхи, імпорт скидання стилів. Методологія BEM. Практика
- Абсолютний та відносний шлях
- Імпорт стилів
- Скидання стилів за замовчуванням
- CSS reset
- Зображення як частина контенту
- Методологія БЕМ. Неймінг класів. Призначення, актуальність, плюси та мінуси
- CSS властивості
Заняття 5. Таблиці, flexbox layout. Практика. Робоче оточення
- Верстка таблиць
- Flexbox layout
- Робоче оточення або що має бути встановлене. Приклади використання
- CSS властивості
Заняття 6. Flexbox layout. Псевдоелементи. Позиціонування елементів
- Flexbox layout
- Позиціонування елементів, властивість position, static, relative, absolute, fixed, sticky: детальний розгляд кожної поведінки
- Псевдоелементи after та before
- Навичка гуглити
- CSS властивості
Заняття 7. Стани :hover, :active, :focus. Спрайти. Квіткоутворення
- CSS псевдоклас :hover, :active, :focus. Порядок зйомки
- Концепція спрайт. Технічне застосування. Призначення, актуальність, плюси та мінуси
- Семантична верстка
- Верстка навігація соціальних мереж із застосуванням спрайтів
- Квіткоутворення. rgb. hex. Альфаканал та непрозорість
- Навичка гуглити
- CSS властивості
Заняття 8. Шрифти, змінні css, функція calc()
- Підключення шрифтів. Що таке безпечні шрифти?
- google fonts огляд, застосування
- Псевдоклас: root
- Використання змінних у CSS. Призначення, актуальність, плюси та мінуси
- Функція calc() математичні операції CSS
- Навичка гуглити
- CSS властивості
Заняття 9. Псевдокласи. Селектори атрибутів
- Псевдокласи: first,: last,: nth-child. Приклади використання практично
- Звернення до силектора, різноманітність методів
- Синтаксис селекторів атрибутів
- Вендорні префікси
- Адаптивний шрифт (px, rem, em, vw). Робота з макетами
- CSS властивості
Заняття 10. Форми. Javascript старт. JQuery. jQuery-Mask
- Форми. Призначення, принцип роботи
- Атребути тега input
- Теги для верстки форм
- Стилізація елементів форм
- Що таке JQuery
- Презентація плагіна jQuery-Mask.js
- Реалізація маски введення телефону засобами jQuery-Mask.js
- CSS властивості
Заняття 11. Стилізація тега select. jQuery Nice Select. Градієнти. Паралакс
- Презентація плагіна jQuery Nice Select
- Підключення до проєкту jQuery Nice Select
- Стилізація checkbox/radio
- Лінійні і радіальні градієнти. Приклади використання
- Паралакс
- CSS властивості
Заняття 12. Гумова верстка. Медіазапит
- Верстка таблиці тегів
- Гумова верстка, приклади та правила
- Медіа-запити. Використання медіавиражень. Актуальні брекпоінти
- mobile/desctop first. Призначення, актуальність, плюси та мінуси
- Адаптуємо таблицю тегів
Заняття 13. Фреймворк bootstrap5 знайомство
- Презентація фреймворку bootstrap5
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки bootstrap5. Система сіток
Заняття 14. bootstrap5 адаптивна верстка
- Поглиблене вивчення системи сіток та структури розмітки
- Адаптація. Детальний аналіз застосування шести точок скидання фреймворку
- Кастомізація компонентів під потреби проекту
Модуль 2 - Анімація. Робота з плагінами jQuery. SVG
Заняття 15. Властивість перетворення. Анімація
- Детальний аналіз якості transform і його значень
- Ключові кадри Keyframes
- Keyframes + transform
- Анімація "Розкадрування"
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 16. SVG. Анімація SVG. Слайдер slick.js
- SVG у HTML. Вступ
- Стилізація об’єктів SVG
- Анімація SVG об’єктів
- Анімація по заданій траекторії
- Презентація сладера
- Підключення. Застосування. Натсройка. Стилізація
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 17. Анімація wow.js та animate.css. aos.js. Слайдер slick.js
- Презентація бібліотеки wow.js Підключення. Розбір атребутів
- Застосування
- Презентація бібліотеки animate.css Підключення. Розбір атребутів
- Застосування
- Презентація бібліотеки aos.js Підключення. Розбір атребутів
- Застосування
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 18. fullPage.js
- Презентація jqeary плгін fullPage.js
- Підключення. Розбір атребутів. Застосування
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 19. jquery.multiscroll.js
- Презентація jqeary плагін jquery.multiscroll.js
- Підключення. Розбір атребутів. Застосування
- Застосування фреймворку bootstrap у розмітці лекції
Заняття 20. Start VanillaJS. Фреймворк PaperCSS
- Фреймворк PaperCSS
- Презентація фреймворку PaperCSS
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки bootstrap5. Система сіток
- Практичне застосування PaperCSS
Заняття 21. Javascript. Фреймворк Neomo. Робота DOM деревом. Цикл forEach. Отримання атрибутів. Рух миші. Реалізація складного інтерактивного SVG об'єкта
- Фреймворк Неомо
- Презентація фреймворку Neomo
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки Neomo. Система сіток
- Практичне застосування Neomo
Заняття 22. Javascript. Фреймворк Bulma. Конструкція if, else if, else. Медіавирази. window, onload, onresize, innerWidth
- Фреймворк Bulma
- Презентація фреймворку Bulma
- Підключення. Вивчення розмітки та breakpoints
- Використання компонентів
- Розсмілення класів
- Структура розмітки Bulma. Система сіток
- Практичне застосування Bulma
Заняття 23. Бібліотека lottie.js, анімація на json
- Що таке json і навіщо він потрібний
- Бібліотека lottie.js
- Презентація фреймворку lottie.js
- Підключення
- Практичне застосування lottie.js
- Реалізація анімації із застосуванням формату json
Модуль 3 - JS, Git, Gulp, Sass. Верстка проєкту
Заняття 24. Git, Node.js, Gulp, Sass, Include. Видача складання проєкту. Старт проєкту
- Що таке node.js, npm, Gulp. Принципи взаємодії
- Огляд популярних плагінів для Gulp
- Ідеальність верстки. PerfectPixel
- Огляд плагінів
- Що таке Git. Принципи роботи. Git Bush
- git clone, add, commit, push
- Верстка проєкту
Заняття 25. Git, Gulp, Sass.URL-encoder for SVG. Генератор HTML-дерева. Верстка проєкту
- Синтаксис scss. Переваги та актуальність
- git branch, checkout, gitk, відкат комміту
- Переміщення файлами в командному рядку
- Генератор HTML-дерева
- URL-code для SVG
- Верстка проекту
Заняття 26. Git, Gulp, Include. Верстка проєкту
- Include. Преимущества и актуальность
- Git merge
- Верстка проекта в разных ветках, мёрж веток
Заняття 27. Git, Gulp, API. Оптимізація зображень. Верстка проєкту. VSC-Configure Users Snipets
- VSC – Configure Users Snipets. Створення власних сніпетів
- Підключення API TinyPNG
- Верстка проєкту
- GitHub Pages
- Командна робота з гітом
Заняття 28. Git, Gulp, мовна панель vannila.js таби. Верстка проєкту
- Мовна панель vannila.js
- Верстка проекту
- Командна робота з гітом
- Підготовка до співбесіди
- code review учнів
Заняття 29. Git, Glup, vannila.js таби. Верстка проєкту
- Таби vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 30. Git, Glup, vannila.js burder-menu. Верстка проєкту
- Burger-menu vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 31. Git, Glup, vannila.js акордеон. Верстка проєкту
- Акордеон vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 32. Git, Glup, vannila.js scroll-to-top. Верстка проєкту
- Кнопка scroll-to-top vannila.js
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 33. Git, Gulp, vannila.js fixed-header. Верстка проєкту
- vannila.js fixed-header
- Верстка проєкту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 34. Git, Glup, vannila.js відстеження блоку на сторінці. Верстка проєкту
- vannila.js відстеження блоку на сторінці. Заклик до дії
- Верстка проекту
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття 35. Заняття з Program Manager
- Принцип управління проєктами/продуктами в ІТ Комунікація та ролі у класичному менеджменті
- Особливості команди та комунікації в Agile
- SCRUM як методологія трансформер Estimates або як оцінювати завдання
- Kanban
Заняття 36. Оптимізація проєкту. Pagesspeed оптимізація. Markup Validation Service. Генератор HTML-дерева. Верстка проєкту
- Pagespeed оптимізація
- Оптимізація СSS
- Оптимізація JS
- Оптимізація зображень
- Знайомство із сервісом validator.w3.org
- Виправлення помилок HTML
- Контроль класнеймінгу методології BEM
Заняття 37. Огляд популярних фреймворків та CMS
React, Angular, Vue, Wordpres, Opencart. Карта росту
Заняття 38. Розмова з кар'єрним менеджером
- Як і де шукати роботу для початківця і які інструменти при цьому використовувати
- Як правильно зробити резюме і яка інформація у ньому є надважлива, а що буде зайвим
- Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці
- 7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше
- Q&A
Особливості курсу
- Безкоштовна IT англійська
- Додаткові матеріали
- Кар'єрний менеджер
- Лекція Project Manager
- Діджитал диплом для Linkedin
Викладачі курсу
- Дмитро Максюта - Senior Front-end Developer
- Ростислав Суслов - Middle Front-end Developer
- Євген Велигора - Middle Front-end Developer
Категории курса
Читайте нас в Telegram, чтобы не пропустить анонсы новых курсов.