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

Від 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