Придбаний [kiev.lemon.school] Курс Front-end(HTML/CSS + JS) (Ростислав Суслов)

[Квітка]

Про що курс 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

Місяці

1. 
   Знайомство, вступна інформація
   
   Перший кодінг.
   Знайомство
   Що таке IT загалом і яке місце займає front-end у веб-розробці.
   Етапи розробки проекту. Огляд інструментів розробки.
   Структура HTML документа. Основні теги CSS властивості
2. 
   Принципи роботи HTML та CSS. Figma. Практика.
   
   Внутрішні стиль.
   Три методи підключення CSS
   Рендеринг сторінок.
   Блокові-малі.
   Особливості HTML5. Поняття кросбраузерності та валідності
   Figma для fornt-end розробника
   CSS властивості
3. 
   Специфіка css. FTP. Практика.
   
   Селектори.
   Специфіка css. Фаг !important
   Значення селектора, вага від типу звернення
   Посилання. Багатосторінкові сайти
   FTP. Робота із сервером.
   Коментування коду
   CSS властивості
4. 
   Пути, импорт сбросс стилей. Методология BEM. Практика.
   
   Абсолютный и относительный путь
   Импорт стилей
   Сброс стилей по-умолчанию.
   CSS reset.
   Изображения, как часть контента
   Методология BEM. Нейминг классов. Назначенеие, актуальность, плюсы и минусы.
   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 cтарт. 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 адоптивна верстка
    
    Поглиблене вивчення системи сіток та структури розмітки.
    Адоптація. Детальний аналіз застосування шести точок скидання фреймворку
    Кастомізація компонентів під потреби проекту
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.
    Javascript start.
    Типи даних
    Взаємодія: alert, prompt, confirm. console.log()
    Змінні var, const, let
    метод queryselector()
    Стилі та класи
21. 
    Javascript. Фреймворк Neomo. Робота DOM деревом. Цикл forEach. Отримання атребутів. Рух миші. Реалізація складного інтерактивного SVG об'єкта
    
    Фреймворк Неомо.
    Презентація фреймворку Neomo
    Підключення. Вивчення розмітки та breakpoints.
    Використання компонентів.
    Розсмілення класів.
    Структура розмітки Neomo. Система сіток.
    Практичне застосування Neomo.
    Метод QuerySelectorAll отримання колекції.
    цикл forEach перебір масиву
    getAttribute повертає значення зазначеного data-* атрибутів
    рух миші: mouseover/out, mouseenter/leave
    властивість innerText
    Реалізація складного інтерактивного SVG об’єкта із застосуванням javascript
22. 
    Javascript. Фреймворк Bulma. Конструкція if, else if, else. медіавирази. window, onload, onresize, innerWidth.
    
    Фреймворк Bulma.
    Презентація фреймворку Bulma
    Підключення. Вивчення розмітки та breakpoints.
    Використання компонентів.
    Розсмілення класів.
    Структура розмітки Bulma. Система сіток.
    Практичне застосування Bulma.
    медіавираження в js. Призначення, актуальність, плюси та мінуси використання.
    Конструкція if, else if, else.
    onload
    resize та innerWidth
    практична робота Освоюємо “
23. 
    Бібліотека lottie.js, анімація на json
    
    Що таке json і навіщо він потрібний.
    Бібліотека lottie.js
    Презентація фреймворку lottie.js
    Підключення.
    Практичне застосування lottie.js
    Реалізація анімації із застосуванням формату json
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, Gulp, vannila.js Таби. Верстка проекту.
    
    Таби vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів
30. 
    Git, Gulp, vannila.js burger-menu. Верстка проекту.
    
    Burger-menu vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів
31. 
    Git, Gulp, vannila.js акордеон. Верстка проекту.
    
    Акордеон vannila.js
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів
32. 
    Git, Gulp, 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, Gulp, vannila.js відстеження блоку на сторінці. Верстка проекту.
    
    vannila.js відстеження блоку на сторінці. Заклик до дії.
    Верстка проекту.
    Питання по git, gulp
    Підготовка до співбесіди
    code review учнів
35. 
    Заняття з Program Manager
    
    Принцип управління проектами/продуктами в ІТ
    Комунікація та ролі у класичному менеджменті
    Особливості команди та комунікації в Agile
    SCRUM як методологія трансформер
    Estimates або як оцінювати завдання
    Kanban
36. 
    Оптимізація проекту. Pagespeed оптимізація. Markup Validation Service. Генератор HTML-дерева. Верстка проекту
    
    Pagespeed оптимізація
    Оптимізація СSS
    Оптимізація JS
    Оптимізація зображень
    Знайомство із сервісом validator.w3.org
    Виправлення помилок HTML
    Контроль класнеймінгу методології BEM
37. 
    Розмова з кар'єрним менеджером
    
    Як і де шукати роботу для початківця і які інструменти при цьому використовувати;
    Як правильно зробити резюме і яка інформація у ньому є надважлива, а що буде зайвим;
    Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці;
    7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше;
    Q&A.
38. 
    Огляд популярних фреймворків та CMS.Випуск.
    

https://kiev.lemon.school/uk/html-css-frontend

 

[4ks]

Готовий оплатити

 

[4ks]

Готовий оплатити.

 

[Anton_]

Готовий оплатити

 

[Zoroksana]

Готова оплатити

 

[Zoroksana]

Готова оплатити

 

[Anton_]

Готовий оплатити монетами