Курс Front-end (HTML/CSS + JS)

Знайомство, вступна інформація.

• Перший кодінг.
• Знайомство
• Що таке 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.Випуск.