Курсы Frontend Developer: HTML и CSS

Наш курс надасть вам глибоке розуміння складних тем та поглибить ваші знання, дозволяючи розвивати вас як фахівця в галузі фронтенд-розробки.

Програма курсу

Основні моменти

• Введення в курс Front-end Guru
• Що таке React?
• Ініціалізація робочого середовища
• Розуміння Virtual DOM
• Розуміння JSX

Components

• React Elements
• React Components
• Основні механізми компонентів (props, children, state)
• Component Life-cycle Hooks
• Pure (Functional) Components

UI

• Interpolation
• Conditional rendering
• Rendering Lists
• Container vs Presentational Components
• UI as a Tree

Events

• Responding to Events
• Event Handling Props
• Mouse and Touch Event Handling
• Keyboard Event Handling
• Drag'n'Drop Event Handling

State

• Understanding State
• useState Hook
• Storing Structures in State

React Hooks

• State Hooks
• Context Hooks
• Ref Hooks
• Effect Hooks
• Performance Hooks
• Other Hooks
• Your Own Hooks

Integration

• Connecting to an external system (API)
• Connecting to an external system (three.js)
• Using MobX State Management

Forms

• Describing Forms
• Handling Inputs
• Updating State
• Using formik for form management
• Using Yup for form validation schemas

Routing

• Використання бібліотеки React Router
• Defining Routes
• Router Properties Passing

React Advanced

• Server Components
• Server Side Rendering
• React.lazy()
• React.memo()
• React.Suspense()
• Error Boundaries
• CSS-in-JS
• Using TypeScript (+ alternatives, Flow, ReScript)

Testing

• React Testing Library
• Using Harness
• Unit-testing
• e2e testing
• GitHub Actions for testing automation

Особливості курсу

• Допомога ментора
• Практика
• Сертифікат про проходження курсу
• Чат спільноти
• Вебінари та додаткові матеріали
• Заняття з англійської
• Стажування для найкращих студентів

Викладачі курсу

Андрій Дорошенко - Senior Front-end Developer

Програма курсу

Основні моменти

• Привітання
• Технології та інструменти
• Git/GitHub/VsCode Git intergration

HTML

• Введення в HTML
• HTML: Основні елементи
• HTML: Семантична верстка та доступність
• HTML: Браузерні/клієнтські стилі

CSS. Частина 1

• Вступ до CSS
• Селектори
• Робота з текстом
• Робота зі шрифтами
• Робота з кольором
• Градієнти, тіні
• Робота з фоном (фоном)
• Переходи (Transitions)
• Трансформації (Transforms)
• Анімації (Animations)
• Фільтри (Filters)

CSS. Частина 2

• Блочна модель
• Позиціонування елементів, проблематика
• Floats, clearfix
• Flexbox
• Grid
• Медіа-запити, адаптивна верстка
• Препроцесори
• Фреймворки (Bootstrap, Tailwind)

Робота з графікою

• SVG
• SVG-анімації
• Адаптивна графіка
• Тег <picture>
• Тег <canvas>
• Оптимізація графіки, WebP

Особливості курсу

• Допомога ментора
• Практика
• Сертифікат про проходження курсу
• Чат спільноти
• Вебінари та додаткові матеріали

Викладачі курсу

Андрій Дорошенко - Senior Front-end Developer

Програма курсу

Модуль 1. Введення в Web-розробку

Урок 1. Вступне слово

Роль Front-end розробника.

Урок 2. Як встановити Visual Studio Code

Етапи встановлення Visual Studio Code.

Урок 3. Що таке HTML

• Базові теги
• Що таке "тег"
• Списки, заголовки, абзаци й звичайні тексти

Урок 4. Базовий CSS

• Інлайнові стилі
• Стилі прописані в середині тегу <style></style>
• Підключення зовнішнього файлу зі стилями

Урок 5. Шрифти

• Що таке шрифти
• Стандартні системні шрифти
• Загальні імена сімейств
• Специфічні імена сімейств
• Властивості шрифтів
• Зовнішні шрифти та @font-face

Модуль 2. Семантика та стилізація елементів

Урок 6. Базові властивості елементів

• Атрибут class
• Використання margin та padding
• Використання devTools panel
• Block та inline елементи, вирівнювання контенту
• Вирівнювання по центру, box-sizing та margin collapse

Урок 7. Семантична структура HTML-сторінки

Урок 8. Базовий адаптив

Урок 9. Селектори CSS та їх пріоритетність

• Селектори
• Псевдокласи
• Специфічність

Модуль 3. Взаємодія з посиланнями, картинками, створення форм

• Урок 10. Використання URLS та стилізація посилань в HTML та CSS
• Урок 11. Використання картинок на HTML сторінці та керування їх розмірами
• Урок 12. Медіа запити, responsive image та responsive background
• Урок 13. Форми

Модуль 4. Вирівнювання елементів та препроцесори

• Урок 14. Позиціонування
• Урок 15. FlexBox
• Урок 16. BEM методологія
• Урок 17. Препроцесор SASS
• Урок 18. Трансформації та анімації
  • Ransition
  • Transform
  • Animation
  • Cubic-bezier
• Урок 19. Сітка (Grid)

Модуль 5. Базовий JavaScript

Урок 20. Вступ до JavaScript

• Короткий огляд JavaScript
• Запуск першого скрипта
• Створення файлу js
• JavaScript код в HTML
• Змінні в JavaScript
• Створення та назви змінних: "let", "const" і "var"
• Правила надання назв змінним, ключові слова
• Застосування змінних у JavaScript
• Коментарі
• Ключові слова
• Літерали
• Вирази

Урок 21. Типи даних та оператори в JavaScript

• Типи даних
• Оператори в JavaScript

Урок 22. Functions

• Оголошення функції
• Локальні змінні
• Зовнішні змінні
• Параметри
• Значення за замовчуванням
• Повернення значення
• Вибір імені функції

Урок 23. Умовні оператори

• Інструкція "if"
• Перетворення до логічного типу
• Блок "else"
• Умовний оператор "?"

Урок 24. Loops

• Цикл "for"
• Вбудоване оголошення змінної
• Пропуск частин "for"

Модуль 6. Типи даних

Урок 25. Робота з рядками

Урок 26. Робота з масивами

• Оголошення
• Отримання останніх елементів за допомогою "at"
• Методи pop/push, shift/unshift
• Багатовимірні масиви
• toString

Урок 27. Робота з числами

• Числові літерали (decimal, binary, octal, hexadecimal)
• Пріоритети операторів в js
• Які існують числа в js (Infinity, BigNumber, NaN)
• Конвертація рядка в число (Number(), +string, 123 + string, parseInt(), parseFloat())
• Округлення чисел
• Генерація випадкових чисел

Урок 28. Цикл While

• Цикл "do…while"
• Переривання циклу: "break"
• Перехід до наступної ітерації: continue
• Мітки для break/continue

Урок 29. Робота з рядками (поглиблено)

• Кодування рядка
• Порівняння рядків
• Методи редагування рядків (.repeat(), .padStart(), padEnd())
• Спецсимволи
• Довжина рядка
• Доступ до символів
• Зміна регістру
• Пошук підрядка

Урок 30. Функції (поглиблено)

• Rest Arguments
• Function Declaration, Expression and Arrow
• Switch Case, Switch True

Модуль 7. Поглиблений JavaScript

Урок 31. Перетворення типів в JS

• Перетворення типів
• Як порівнювати різні типи в js

Урок 32. Логічні оператори. Як логічні оператори працюють

• || (АБО)
• && (І)
• ! (НЕ)
• Оператор нульового злиття (??)

Урок 33. Об'єкти

• Навіщо потрібні об'єкти?
• Створення, читання, редагування, видалення значень об'єкта
• Перевірка значень об'єкта
• Перебір по об'єкту
• Як працюють об'єкти, const and Object
• Порівняння об'єктів
• null vs undefined
• Об'єкти як аргументи
• Клонування об'єктів
• Деструктуризація об'єктів
• Функція як об'єкт
• Методи об'єктів
• Computed properties

Урок 34. Методи масивів

• Мутуючі та немутуючі методи масивів
• Копіювання масивів
• Деструктуризація масивів

Урок 35. Колбеки

• Колбеки та колбеки у циклі
• Таймери(таймаут, інтервал) та Event Handlers("click", "contextmenu"…)
• Обробники подій
• Доступ до елемента через this

Модуль 8. Особливості JavaScript

Урок 36. Замикання (Closures)

• Область видимості та лексичне оточення
• Замикання
• Функція у циклі
• Function яка повертає a function
• Функція з декількома батьками

Урок 37. Наслідування

• Прототипне наслідування
• proto
• Методи в прототипах

Урок 38. Конструктори

• Що таке конструктори
• Успадковування в прототипах
• this в деталях

Урок 39. Класи

• Синтаксис класів, статичні поля та методи
• Вбудовані класи об'єктів (приклад - new Date())
• Наслідування класів
• instanceOf
• JS модулі

Особливості курсу

• Особистий кабінет та ком'юніті
• Прямі ефіри
• Практикуючі ментори
• Уроки з HR
• Практичний досвід на реальному проєкті
• Модуль із працевлаштування
• Підготовка до співбесіди
• Проєкт в портфоліо
• Сертифікат про проходження курсу
• 2 пакети навчання

Викладачі курсу

Юрій Лісовенко - Практикуючий Front-end Developer

Курси "Розробка сайтів" допомагають учням освоїти ази сайтобудування, створювати сторінки й ресурси на мові програмування, просувати проєкти в пошукових системах.

Програма курсу

Теми:

• Налаштування середовища оточення. Перша HTML-сторінка
  • Класифікація сайтів
  • Етапи створення
  • Встановлення та налаштування редактора коду
• Керуємо комп'ютером. Основні теги
• Базовий CSS
• Робота з макетом
• Layout. HTML-разметка
• Сітки

Курс дає дитині можливість:

• Втілити в життя свої ідеї за допомогою IT-технологій
• Ознайомитися з усіма етапами створення сайту
• Вивчити основні поняття веб-програмування
• Отримати практичні навички створення нескладних сайтів
• Навчитися розробляти індивідуальні та командні проєкти
• Розвинути здібності аналізувати і виправляти помилка
• Отримати навички успішної презентації проєкту

Особливості курсу

• Для дітей від 14 років
• Тривалість курсу 32 уроки
• Групові заняття в Zoom
• Зручний графік занять
• Не витрачаєте час на дорогу
• Можливість індивідуального навчання
• Проєкт в портфоліо
• Сертифікат про проходження курсу

Викладачі курсу

• Евеліна - Python, Front End, Minecraft
• Сергій - Python, Front End
• Максим - Java, Python, C/C++

Програма курсу

Знайомство з адаптивною версткою

• Введення в медіазапити
• Знайомство з адаптивною версткою
• Огляд популярних CSS-бібліотек
• Знайомство з bootstrap - CSS-framework
• Основні відмінності Bootstrap 3 і 4 версій
• Grid - система сіток
• Інші можливості Twitter Bootstrap
• Практика

HTML5: дата-атрибути й інші корисні можливості HTML5

• Що таке дата-атрибути
• Що можна зробити за допомогою дата-атрибутів
• Вбудовані атрибути
• Як застосовувати дата-атрибути зі сторонніх скриптів
• Якорі. Плавне прокручування
• Практика

Сучасні методології верстки сторінки

• Верстка Flex box
• Напрямок розміщення елементів
• Вирівнювання елементів по вертикалі і горизонталі
• Вирівнювання тексту всередині блоку
• Властивості: flex-flow, flex-grow, flex-basis, order
• Практика

HTML5 та селектори

• Які селектори перейшли з HTML4/HTML
• Які нові селектори з'явилися в HTML5
• Уявлення про контекстні селектори
• Характеристика псевдокласів
• Характеристика псевдоелементів
• Що таке спрайти
• Що входить в поняття "роловери"
• Практика

Характеристика доступності сайту. Методика формування сайтів, що будуть зручними для подальшого використання

• Usability
• Які задачі стоять перед користувачами
• Якими принципами варто користуватися під час формування інтерфейсів для сайтів
• Accessibility
• Знайомство з технічним начинням, яке сприяє перегляду тексту
• Обмежені можливості користувачів: які вони
• Практика

HTML та CSS: складне застосування

• Відносне та абсолютне позиціонування елементів
• Фіксоване позиціювання елементів
• Як поводять себе дочірні компоненти в позиціонуванні
• Як відбувається обрізання блоку
• Як відбувається переповнення блоку: overflow
• Підтримка властивості overflow в різних браузерах
• Яким чином відбувається введення зовнішніх ресурсів
• За допомогою яких механізмів вводиться векторна графіка
• Іконка сайту
• ICO-формат
• Які характерні ознаки підтримки піктограм у сфері всіляких браузерів
• Практика

Методика сумісності веб-сторінок та всіляких браузерів

• Умовні коментарі - це
• Які скрипти використовуються для підтримки селекторів
• Які скрипти використовуються для видозміни у поведінці браузерів, що вже застаріли
• Огляд фільтрів
• Практика

Методика використання атрибутів CSS3

• Суть градієнтів
• Суть анімації
• Знайомство з веб-шрифтами
• Яким чином відбувається багатоколонна верстка
• Фонові механізми
• Алгоритм закруглення вузлів
• Знайомство зі зразком блоків Flаsh
• Введення в технології, що підтримуються браузером
• Практика

Макетна верстка

• Алгоритм нарізання макету із файлу, що підтримує psd-формат
• Процедура вибору розмірів
• Процедура вибору типів верстки
• Механізм верстки
• Практика

Введення в типові рішення

• Що в собі містять фреймворки
• Характеристика CMS-шаблонів
• Як відбуваються JavaScript-рішення
• Знайомство з динамічним CSS
• Практика

Особливості курсу

• Викладачі практики
• Корпоративне навчання
• Можливість навчатися у вихідні
• Можливість влаштуватися у провідні IT-компанії
• Індивідуальне навчання

Викладачі курсу

• Володимир - Програміст
• Ігор - Програміст
• Володимир - Програміст
• Олексій - Програміст

Програма курсу

Введення в веб-технології

• Призначення технологій
• Стек розробки для сайту
• Принцип роботи "клієнт-сервер"
• Консоль розробника
• Текстовий редактор і IDE
• Що таке HTML & CSS & JS і їх взаємодія
• Практика

Характеристика стандартів веб

• Введення в стандарти W3C
• Знайомство з документацією
• Зміст DOCTYPE, відмінності в різних версіях HTML
• Unicode - стандарт
• Кодування сторінки
• Що собою являє HTTP-протокол
• Як відбувається валідація документа HTML
• Практика

HTML5-елементи. Введення в схематизацію сторінки

• Характеристика секцій. Знайомство з основними тегами
• Введення в "підвал"
• Введення в "шапку"
• Бічна колонка
• Практика

Знайомство з центральними поняттями HTML

• Базові принципи верстки
• Знайомство з поняттям тега і атрибута
• Обов'язкова структура будь-якої веб-сторінки
• Поняття малих і блокових елементів веб сторінки
• Поняття парних і непарних тегів
• Семантичні теги
• Спецсимволи
• Робота з тегами і атрибутами
• Робота з посиланнями і якорями
• Робота з різними системами квітів в HTML
• Робота з зображеннями
• Нумеровані і маркеровані списки
• Робота з блоками (div)
• Таблиці
• Практика

Введення в гіперпосилання

• Гіперпосилання у WWW
• Що собою являють зовнішні гіперпосилання
• Що собою являють внутрішні гіперпосилання
• Ознайомлення з видами адреси у WWW
• Які додаткові атрибути вміщають гіперпосилання
• Практика

Введення в CSS. Характеристика каскадних таблиць стилів

• Огляд CSS
• Правила написання стилів
• Способи додавання CSS в HTML-сторінку
• Зовнішні таблиці стилів
• Відносні і статичні одиниці вимірювання
• Робота зі шрифтами (сімейства, стилі, розміри, насиченість)
• Робота з межами елементів (межа, радіус, тіні)
• Робота з відступами і розмірами елементів
• Градієнти
• Робота з властивостями float і clear
• Робота з фоном (зображення і колір, розміри, прозорість)
• Селектори
• Просунуті селектори
• Пріоритети стилів
• Перезапис стилів
• Псевдокласи, псевдоелементи
• Робота з анімацією елементів
• Практика

Фрейм та введення внутрішніх даних

• Про що говорить історія фреймів
• Зв'язок гіперпосилань та фреймів
• Які фрейми заведено називати вбудованими
• Практика

Форми та передача інформації, що належить користувачам

• Веб-форми
• Знайомство з компонентом form
• Які атрибути він має
• Елементи форм (input, textarea)
• Атрибути placeholder, name, value
• Операції з кнопками
• Операції з текстовими полями
• Введення в перемикачі checkbox, radio
• Знайомство з додатковими атрибутами компонентів форми
• Практика

CSS та макетування

• Як слід оформлювати межі компонента
• Як реалізовуються внутрішні та зовнішні відступи
• Характеристика розмірів компонента
• Як реалізовується видимість компонента
• Які компоненти можна назвати плаваючими
• Практика

CSS та HTML: додаткові можливості

• Яким чином можна вбудовувати відеофайли
• Яким чином можна вбудовувати аудіофайли
• Практика

Введення в метаінформацію

• Характеристика метаінформації
• Яким чином її використовують
• Введення в компонент meta
• Що входить в його атрибути
• Введення в пояснювальну метаінформацію
• Практика

Хостинг. Реалізація підтримки сайту

• Хостинг - це
• Домени і даменні зони. Хостингові і доменні панелі
• Як відбувається пошук хостеру
• Які можливості має хостер
• FTP-клієнт
• Яким чином відбувається його використання
• Знайомство з CMS: Joomla, WordPress
• Практика

Результат після проходження курсу:

• Верстка веб-сторінок, що відповідають стандартам відносно певного макета дизайну
• Створення, модифікація та оптимізація сторінок та стилів документів
• Вміння встановлювати, в якому стандарті HTML написаний той чи інший документ
• Легке керування та робота з кодами
• Багато цікавих потайних можливостей HTML та CSS, яким вас навчать наші спеціалісти

Особливості курсу

• Викладачі практики
• Корпоративне навчання
• Можливість навчатися у вихідні
• Можливість влаштуватись у провідні IT-компанії
• Індивідуальне навчання

Викладачі курсу

• Володимир - Програміст
• Ігор - Програміст
• Володимир - Програміст
• Олексій - Програміст

У цьому курсі ви ознайомитеся з теоретичними та практичними аспектами фронтенд-розробки та навчитесь створювати власні веб-сайти.

Програма курсу

Модуль 1. Основи створення та стилізації веб-сторінок

Ми познайомимось із поняттями Web, HTML та CSS і створимо власну веб-сторінку.

Модуль 2. Деталі стилізації веб-сторінок

Ми поглибимо наші знання з CSS та навчимось керувати зовнішнім виглядом елементів та їхнім розташуванням на сторінці.

Модуль 3. Створення інтерактивних веб-сторінок з JavaScript

Ми познайомимось з JavaScript та можливостями його застосування в веб-розробці. З'ясуємо, як працюють сучасні інтерактивні веб-інтерфейси.

Модуль 4. Елементи сучасної фронт-енд розробки

Ми розберемо декілька задач, які доводиться вирішувати при розробці повноцінного веб-застосування. Попрацюємо з bootstrap та спробуємо отримати дані зі сторонніх серверів. А також обговоримо поточний стан галузі веб-розробки й окреслимо напрямки подальшого розвитку.

Особливості курсу

• Досвідчений лектор-програміст
• Навчальні відео до 10 хвилин
• Проміжні тести
• Сертифікат видається безкоштовно
• 4 модулі

Викладачі курсу

Сергій Денисов - Практик з багаторічним досвідом у розробці

Студенти вивчать мову розмітки сторінок HTML, каскадні таблиці стилів CSS, основи мови JavaScript. Підготують матеріали для розміщення на власному сайті. Розроблять сайт, протестують його та розмістять на хостингу в інтернеті. Виконають та захистять індивідуальний або командний підсумковий проєкт із створення іміджевого чи то новинного сайту-блогу, інтернет-оглядача тощо.

План курсу

Технічні навички

WEB-простір

Принципи функціонування інтернету (клієнт-серверна модель, протоколи, стандарти, сервера). Типізація сайтів мов.

HTML та CSS

Проєктувати інтерфейси користувача, створювати кросбраузерну, адаптивну верстку і вносити зміни в існуючу.

JavaScript

За допомогою JavaScript будемо створювати інтерактивні інтерфейси, розробляти серверну частину сайтів.

Розробка

Навчимося розробляти логіку роботи клієнтської частини web-сайтів, тестування і розміщення в інтернеті. Навчальні проекти: іміджевий і новинний сайт (блог), інтернет-оглядач.

Проєктний підхід

Пройдемо повний цикл проєктування та створення гри "по-дорослому": від ідеї та плану до взаємодії з командою та презентації власних проєктів батьками.

English

Освоїмо технічну термінологію та базову IT-лексику, а також навчимося працювати у програмах з англійським інтерфейсом.

Соціальні навички

Впевненість

Сформуємо впевненість у собі та своїх здібностях, навчимося бути проактивним, не бояться робити помилки, а аналізувати їх та швидко приймати рішення.

Самостійність

Освоїмо інструменти самоорганізації. Навчимося самостійно ставити цілі, планувати та керувати своїм часом.

Емоційний інтелект

Навчимося керувати своїми емоціями. Логічно та послідовно вибудовувати свою мову та аналізувати поведінку інших людей, робити правильні дії.

Самопрезентація

Зможемо впевнено та вільно виступати на публіці. Завойовувати довіру, цікаво та лаконічно презентувати себе чи свій проєкт.

Працювати в команді

Комунікувати з усіма членами команди, брати на себе відповідальність за результат, знаходити компроміси та позитивно вирішувати конфлікти.

Креативність

Розвинемо вміння генерувати безліч ідей з нестандартним підходом, навчимося бачити проблеми під іншим кутом і вирішувати їх унікальним способом.

Бізнесові навички

Бізнес мислення

Зрозуміємо, що таке бізнес та як він влаштований в інтернеті. Дізнаємося як формується бюджет проєкту і з чого він складається: пошук ідеї, формування бізнес-моделі та складання свого бізнес-плану.

Управління фінансами

Розберемося, що таке гроші та як ними користуватися. Навчимося розрізняти, планувати, контролювати свої доходи та витрати. Чи зможемо ефективно розпоряджатися засобами та розвивати в собі навички управлінця.

Стратегічне планування

Глобалізація економіки та автоматизація виробництва сприяють створенню нових бізнес-моделей. Дізнаємося, які напрями та професії будуть затребувані у найближчі 10 років: стратегія блакитного океану, штучний інтелект, кібербезпека та Meta-всесвіт.

Особливості курсу

• Навчання через практику
• Щотижневі лабораторії Skills Lab
• Фіксація результату
• Онлайн-підтримка викладача
• Онлайн-консультації
• Можливість офлайн навчання
• Захист випускного проєкту
• Гейміфікація
• Особистий кабінет
• Бонуси за активність на курсі
• Домашні завдання
• Звітність для батьків
• Невеликі групи

Програма курсу

Вивчаємо:

• pug cli
• Генерація тегів
• Генерація вкладених тегів
• Блокові та рядкові теги
• Текст
• Атрибути
• Конструкція switch case
• Цикли
• Вставка jvascript коду
• Коментарі
• Умови
• Тип документу
• Інклуди (includes)
• Успадкування шаблонів
• Інтерполяція змінних
• Міксини
• Застосування pug в express.js
• Виведення масивів

Спринти

• Знайомство з Pug. Pug CLI. Структура сторінки, теги, атрибути та хитрощі
• Як використовувати Pug в online sandbox Codepen.io
• Pug Includes - розбиття сторінки на файли
• Підключення сторонніх скриптів у Pug, на прикладі JavaScript
• Змінні в Pug, умови
• Pug і цикли

Чому потрібно вчити Pug? Все просто:

• Збільшує швидкість написання HTML
• Спрощує написання HTML
• Зменшує кількість bug у коді HTML
• Отримуєте гнучкість генерації HTML
• Значно спрощуєте взаємодію коду з сервером
• Можете розбити сторінку на файли
• Використовувати один і той самий код декілька разів
• Полегшуєте вхід у фреймворки

Вимоги до проходження курсу:

• Базові навички роботи з комп'ютером
• Базові знання html + css

Особливості курсу

• 8 спринтів 30 тасок
• Допомога та підтримка
• Розбір та усунення багів
• Доступ без обмежень по часу