Про що курс Front-end(HTML/CSS + JS)
Курс Front-end(HTML/CSS + JS) — це доволі легкий спосіб увійти до IT-індустрії. Під час навчання ви познайомитеся з останньою версією мови HTML5 і стилів CSS3. Завдяки цим технологіям ви зможете створювати стильні інтерактивні веб-сторінки, які будуть основою майбутнього сайту.
В курсі ви охопите всі аспекти створення сайту: від макетів у PSD-форматі до адаптивного документа. Головний наголос під час навчання буде ставитися на практику та виконання домашніх завдань.
Програма курсу Front-end(HTML/CSS + JS)
38
Занять
19:00 - 21:00
Час занять
4,5
Місяці
Курс Front-end(HTML/CSS + JS) — це доволі легкий спосіб увійти до IT-індустрії. Під час навчання ви познайомитеся з останньою версією мови HTML5 і стилів CSS3. Завдяки цим технологіям ви зможете створювати стильні інтерактивні веб-сторінки, які будуть основою майбутнього сайту.
В курсі ви охопите всі аспекти створення сайту: від макетів у PSD-форматі до адаптивного документа. Головний наголос під час навчання буде ставитися на практику та виконання домашніх завдань.
Програма курсу Front-end(HTML/CSS + JS)
38
Занять
19:00 - 21:00
Час занять
4,5
Місяці
-
Знайомство, вступна інформація
Перший кодінг.
Знайомство
Що таке 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.Випуск.
https://kiev.lemon.school/uk/html-css-frontend