Знайомство, вступна інформація.
- Перший кодінг.
- Знайомство
- Що таке IT загалом і яке місце займає front-end у веб-розробці.
- Етапи розробки проекту. Огляд інструментів розробки.
- Структура HTML документа. Основні теги CSS властивості
Принципи роботи HTML та CSS. Figma. Практика.
- Внутрішні стиль.
- Три методи підключення CSS
- Рендеринг сторінок.
- Блокові-малі.
- Особливості HTML5. Поняття кросбраузерності та валідності
- Figma для fornt-end розробника
- CSS властивості”
Специфіка css. FTP. Практика.
- Селектори.
- Специфіка css. Фаг !important
- Значення селектора, вага від типу звернення
- Посилання. Багатосторінкові сайти
- FTP. Робота із сервером.
- Коментування коду
- CSS властивості
Пути, импорт сбросс стилей. Методология BEM. Практика.
- Абсолютный и относительный путь
- Импорт стилей
- Сброс стилей по-умолчанию.
- CSS reset.
- Изображения, как часть контента
- Методология BEM. Нейминг классов. Назначенеие, актуальность, плюсы и минусы.
- CSS свойства
Таблиці, flexbox layout. Практика. Робоче оточення
- Верстка таблиць
- Flexbox layout.
- Робоче оточення або що має бути встановлене. Приклади використання
- CSS властивості”
Flexbox layout. Псевдоэлементы. Позиционирование элементов
- Flexbox layout.
- Позиционирование элементов, свойство position. static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения
- Псевдоэлементы after и before.
- Навык гуглить.
- CSS свойства
hover, :active, :focus. Спрайти.
- CSS псевдоклас :hover, :active, :focus. Порядок зйомки.
- Концепція спрайт. Технічне застосування. Призначення, актуальність, плюси та мінуси.
- Семантична верстка
- Верстка навігація соціальних мереж із застосуванням спрайтів.
- Квіткоутворення. rgb. hex. Альфаканал та непрозорість
- Навичка гуглити.
- CSS властивості”
Шрифти, змінні css, функція calc()
- Підключення шрифтів. Що таке безпечні шрифти?
- google fonts огляд, застосування.
- Псевдоклас: root
- Використання змінних у CSS. Призначення, актуальність, плюси та мінуси.
- Функція calc() математичні операції CSS
- Навичка гуглити.
- CSS властивості
Псевдокласи. Селектори атрибутів
- Псевдокласи: first,: last,: nth-child. Приклади використання практично.
- Звернення до силектора, різноманітність методів.
- Синтаксис селекторів атрибутів
- Вендорні префікси.
- Адаптивний шрифт (px, rem, em, vw). Робота з макетами
- CSS властивості
Формы. Javascript cтарт. JQuery. jQuery-Mask
- Формы. Назначение, принцип работы.
- Атребуты тега input.
- Теги для вёрстки форм.
- Стилизация элементов форм
- Что такое JQuery.
- Презентация плагина jQuery-Mask.js
- Реализация маски ввода номера телефона средствами jQuery-Mask.js
- CSS свойства
Стилізація тега select. jQuery Nice Select. Градієнти. Паралакс
Презентація плагіна jQuery Nice Select
- Підключення до проекту jQuery Nice Select
- Стилізація checkbox/radio
- Лінійні та радіальні градієнти. Приклад використання.
- Паралакс.
- CSS властивості
Гумова верстка. Медіазапит.
- Верстка таблиці тегів.
- Гумова верстка, приклади та правила.
- Медіа-запити. Використання медіавиражень. Актуальні брекпоінти.
- mobile/desctop first. Призначення, актуальність, плюси та мінуси.
- Адаптуємо таблицю тегів
Фреймворк bootstrap5 знайомство
- Презентація фреймворку bootstrap5
- Підключення. Вивчення розмітки та breakpoints.
- Використання компонентів.
- Розсмілення класів.
- Структура розмітки bootstrap5. Система сіток.
bootstrap5 адоптивна верстка
- Поглиблене вивчення системи сіток та структури розмітки.
- Адоптація. Детальний аналіз застосування шести точок скидання фреймворку
- Кастомізація компонентів під потреби проекту
Властивість перетворення. Анімація.
- Детальний аналіз якості transform і його значень.
- Ключові кадри Keyframes.
- Keyframes + transform.
- Анімація “Розкадрування”.
- Застосування фреймворку bootstrap у розмітці лекції.
SVG. Анимация SVG. Слайдер slick.js
- SVG в HTML. Введение.
- Стилизация SVG объектов.
- Анимарование SVG объектов.
- Анимация по заданной траэктории
- Презентация сладера.
- Подключение. Применение. Натсройка. Стилизация
- Применение фреймворка bootstrap в разметке лекции
Анімація wow.js та animate.css. aos.js, Слайдер slick.js
- Презентація бібліотеки wow.js Підключення. Розбір атребутів. Застосування.
- Презентація бібліотеки animate.css Підключення. Розбір атребутів. Застосування.
- Презентація бібліотеки aos.js Підключення. Розбір атребутів. Застосування.
- Застосування фреймворку bootstrap у розмітці лекції.
fullPage.js
- Презентація jqeary плгін fullPage.js
- Підключення. Розбір атребутів. Застосування.
- Застосування фреймворку bootstrap у розмітці лекції.
jquery.multiscroll.js
- Презентація jqeary плгін jquery.multiscroll.js
- Підключення. Розбір атребутів. Застосування.
- Застосування фреймворку bootstrap у розмітці лекції.
Start VanillaJS. Фреймворк PaperCSS
- Фреймворк PaperCSS.
- Презентація фреймворку PaperCSS
- Підключення. Вивчення розмітки та breakpoints.
- Використання компонентів.
- Розсмілення класів.
- Структура розмітки bootstrap5. Система сіток.
- Практичне застосування PaperCSS.
- Javascript start.
- Типи даних
- Взаємодія: alert, prompt, confirm. console.log()
- Змінні var, const, let
- метод queryselector()
- Стилі та класи
Javascript. Фреймворк Neomo. Робота DOM деревом. Цикл forEach. Отримання атребутів. Рух миші. Реалізація складного інтерактивного SVG об'єкта
- Фреймворк Неомо.
- Презентація фреймворку Neomo
- Підключення. Вивчення розмітки та breakpoints.
- Використання компонентів.
- Розсмілення класів.
- Структура розмітки Neomo. Система сіток.
- Практичне застосування Neomo.
- Метод QuerySelectorAll отримання колекції.
- цикл forEach перебір масиву
- getAttribute повертає значення зазначеного data-* атрибутів
- рух миші: mouseover/out, mouseenter/leave
- властивість innerText
- Реалізація складного інтерактивного SVG об’єкта із застосуванням javascript
Javascript. Фреймворк Bulma. Конструкція if, else if, else. медіавирази. window, onload, onresize, innerWidth.
- Фреймворк Bulma.
- Презентація фреймворку Bulma
- Підключення. Вивчення розмітки та breakpoints.
- Використання компонентів.
- Розсмілення класів.
- Структура розмітки Bulma. Система сіток.
- Практичне застосування Bulma.
- медіавираження в js. Призначення, актуальність, плюси та мінуси використання.
- Конструкція if, else if, else.
- onload
- resize та innerWidth
- практична робота Освоюємо
Бібліотека lottie.js, анімація на json
- Що таке json і навіщо він потрібний.
- Бібліотека lottie.js
- Презентація фреймворку lottie.js
- Підключення.
- Практичне застосування lottie.js
- Реалізація анімації із застосуванням формату json
Git, Node.js, Gulp, Sass, Include. Видача складання проекту. Старт проекту
- Що таке node.js, npm, Gulp. Принципи взаємодії.
- Огляд популярних плагінів для Gulp.
- Ідеальність верстки. PerfectPixel.
- Огляд плагінів.
- Що таке Git. Принципи роботи. Git Bush.
- git clone, add, commit, push
- Верстка проекту.
Git, Gulp, Sass.URL-encoder for SVG. Генератор HTML-дерева. Верстка проекту.
- Синтаксис scss. Переваги та актуальність.
- git branch, checkout, gitk, відкат комміту
- Переміщення файлами в командному рядку.
- Генератор HTML-дерева
- URL-code для SVG.
- Верстка проекту.
Git, Gulp, Include. Верстка проекту
- Include. Переваги та актуальність.
- git merge
- Верстка проекту в різних гілках, мерж гілок.
Git, Gulp, API. Оптимізація зображень. Верстка проекту. VSC - Configure Users Snipets
- VSC – Configure Users Snipets. створення власних сніпетів.
- Підключення API TinyPNG
- Верстка проекту.
- GitHub Pages
- Командна робота з гітом
Git, Gulp, мовна панель vannila.js таби. Верстка проекту.
- Мовна панель vannila.js
- Верстка проекту.
- Командна робота з гітом
- Підготовка до співбесіди
- code review учнів
Git, Gulp, vannila.js Таби. Верстка проекту.
- Таби vannila.js
- Верстка проекту.
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Git, Gulp, vannila.js burger-menu. Верстка проекту.
- Burger-menu vannila.js
- Верстка проекту.
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Git, Gulp, vannila.js акордеон. Верстка проекту.
- Акордеон vannila.js
- Верстка проекту.
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Git, Gulp, vannila.js scroll-to-top. Верстка проекту.
- Кнопка scroll-to-top vannila.js
- Верстка проекту.
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Git, Gulp, vannila.js fixed-header. Верстка проекту.
- vannila.js fixed-header
- Верстка проекту.
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Git, Gulp, vannila.js відстеження блоку на сторінці. Верстка проекту.
- vannila.js відстеження блоку на сторінці. Заклик до дії.
- Верстка проекту.
- Питання по git, gulp
- Підготовка до співбесіди
- code review учнів
Заняття з Program Manager
- Принцип управління проектами/продуктами в ІТ
- Комунікація та ролі у класичному менеджменті
- Особливості команди та комунікації в Agile
- SCRUM як методологія трансформер
- Estimates або як оцінювати завдання
- Kanban
Оптимізація проекту. Pagespeed оптимізація. Markup Validation Service. Генератор HTML-дерева. Верстка проекту
- Pagespeed оптимізація
- Оптимізація СSS
- Оптимізація JS
- Оптимізація зображень
- Знайомство із сервісом validator.w3.org
- Виправлення помилок HTML
- Контроль класнеймінгу методології BEM
Розмова з кар'єрним менеджером
- Як і де шукати роботу для початківця і які інструменти при цьому використовувати;
- Як правильно зробити резюме і яка інформація у ньому є надважлива, а що буде зайвим;
- Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці;
- 7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше;
- Q&A.
Огляд популярних фреймворків та CMS.Випуск.
