Курси Frontend Developer: HTML та CSS

Добірка кращих курсів Frontend Developer, що познайомлять вас з сучасними практиками розробки сайтів. Ви зможете засвоїти з нуля основні технології для верстки сайтів: HTML, CS, JavaScript та Bootstrap. Досвідчені Frontend розробники також знайдуть для себе підходящі навчальні програми.
Читати далі

Порівняння усіх курсів

Фільтр
Курс
Формат
Online
Початок навчання
15.02.2025
Тривалість
99 годин
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
3 700 UAH за місяць
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
PeaPod
  • Frontend
Подробиці

На базі курса ви отримаєте знання з HTML, CSS, вивчите базу мови програмування JavaScript та створите свої перші проєкти: портал новин та список справ (to do list). Програма складена за принципом збільшення складності та передбачає багато практичних завдань.

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

Модуль 1. Введення в основи Front-end розробки. Мова розмітки HTML, CSS

  • Вивчення синтаксису мови розмітки HTML
  • Структура (скелет) HTML документа
  • Заголовки, параграфи, посилання, зображення, форми, таблиці в HTML
  • Вивчення основ мови CSS
  • Адаптивність та кросбраузерність. Media-запити
  • Робота над практичним завданням з HTML та CSS. Основи HTML5

Модуль 2. Технологія Flexbox

  • Структура документа HTML5. Вивчення тегів в HTML5
  • Практичні завдання HTML5+CSS
  • Технологія Flexbox. Верстання учбового макета сайту

Модуль 3. Технологія GRID CSS. Бібліотека Bootstrap

  • Базова сітка GRID CSS. Рядки і стовпці. Вирівнювання вмісту. Нумерація ліній сітки
  • Верстання макету Landing-page
  • Бібліотека Bootstrap. Розробка проєкта із використанням Bootstrap

Модуль 4. Основи JavaScript

  • Типи даних, змінні, числа, строки, введення в об'єкти
  • Масиви в JavaScript. Методи роботи із масивами
  • Функції в JavaScript. Робота із функціями
  • Об'єкти в JavaScript. Копіювання, створення, деструктуризація

Модуль 5. Введення в DOM. Атрибути елементів. Маніпуляція DOM елементами

  • Введення в події браузеру. Властивості і методи подій
  • Практична робота. Проєкт "список справ" (To do list)

Модуль 6. Асинхронність в JavaScript. Робота з AJAX. Promises-об'єкти

  • Введення в AJAX. POST-запити. Відладка в AJAX CORS. Обробка помилок
  • Введення в Promises
  • Практична робота. Розробка новинного порталу

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

  • Онлайн навчання у режимі реального часу
  • Доступ до записів уроку
  • Робота над портфоліо
  • Підтримка у чаті від викладачів
  • Доступ до матеріалів курсу
  • Сертифікат
  • Індивідуальний підхід

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

Олександр Левицький - Python backend and frontend developer

Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
4 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
25 000 UAH за курс
Вечірні заняттяВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Main Academy
  • Frontend
Подробиці

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

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

Git control version

  • Знайомство з git control version
  • Установка Git
  • Початкова настройка Git
  • Створення Git-репозиторію
  • Робота з віддаленими репозиторіями
  • Основи розгалуження та злиття
  • Управління гілками
  • Робота з гілками
  • Віддалені гілки

Photoshop & Figma

  • Знайомство з Photoshop
  • Формати графічних файлів
  • Робота з інструментами
  • Зміна розміру зображення
  • Фільтри
  • Нарізка та експорт макета веб-сайту + HTML
  • Знайомство з Figma
  • Реєстрація у Figma
  • Експорт зображення
  • Розбір отримання стилів у Figma
  • Шари у Figma
  • Клон макета у Figma

HTML & HTML5, Optimization

  • Знайомство з HTML
  • Структура HTML-документа
  • Заголовки, блокові та малі теги
  • Робота зі списками
  • Зображення, iframe, посилання
  • Таблиці, Форми
  • Відео, аудіо
  • Нові теги в HTML5

Пошукова оптимізація

  • Сторонні та внутрішньосторінкові завдання
  • Мета теги
  • Контент використання
  • Ключові слова
  • Якірний текст
  • Теги заголовків
  • Атрибут зображення alt & title
  • 301 Redirect, canonical, 404
  • Robots.txt
  • Meta "robots"
  • sitemap.xml

CSS & CSS3

  • Знайомство з CSS
  • Синтаксис
  • Підключення css файлу
  • Селектори CSS element, id, class
  • Селектори угруповання
  • CSS background, background position CSS
  • Комбінатор
  • text properties, fonts
  • Псевдо-елементи, псевдо-класи
  • Lists properties
  • padding, margin, border
  • position, display, float, z-index
  • CSS3 box-sizing property
  • Градієнт
  • CSS3 2D та 3D
  • CSS3 Animation
  • @keyframes
  • CSS3 Flexbox

Front-End Framework

  • BootStrap 4.0
  • Plugins Owlcarousel
  • Plugins Fancybox

JavaScript базовий

  • Огляд мови JavaScript
  • Огляд інструментарію засобів налагодження коду
  • Команди Console
  • Знайомство Змінні
  • Літерали шаблону
  • Примітивні типи
  • Типи даних. Оператори
  • Метод для String()
  • Об'єкт Math
  • Призначення деструктуризації
  • Вікна діалогів
  • Використання innerHTML
  • Використання If/Else
  • Операція вибору першого певного операнда (??)
  • Умовний доступ до властивостей
  • Switch
  • For (in & of, await)
  • Оператор in
  • Оператори While та Do/While
  • ToLocaleString() метод
  • Масиви даних
  • Операція розповсюдження масиву
  • Array.of(), Array.form(), Array length, forEach()
  • Методи ітератора для масивів
  • Згладжування масивів за допомогою flat() та flatMap()
  • Об'єднання масивів за допомогою concat()
  • Організація стопок і черг за допомогою push(), pop(), shift() та unshift()
  • Робота з підмасивами за допомогою slice(), splice(), fill() та copyWithin()
  • Асоціативні масиви
  • Стандартний клас Object, методи роботи
  • Поняття функції
  • Поняття стрілкових функцій
  • Анонімні функції
  • Callback функції
  • Конструктор функції
  • Рекурсія функції
  • Аргумент функції
  • Поняття та використання замикання
  • Регулярний вираз
  • Робота з рядками, датами
  • Конструкція try…catch

JavaScript просунутий

  • Огляд об'єктної моделі W3C DOM
  • Об'єкт Window
  • Властивості Window
  • Методи Window
  • Location, Location методи
  • History
  • Navigator
  • Screen
  • Огляд подій елементів у моделі DOM
  • Посилання на об'єкти за ідентифікатором або ім'ям
  • innerHTML
  • Events
  • setTimeout() & setlnterval()
  • Форма Валідації
  • Події миші та клавіатури для елементів керування
  • jQuery

JavaScript просунутий

  • Взаємодія із сервером
  • HTTP методи
  • XMLHttpRequest: властивості, методи
  • Опис модуля за допомогою define та виконання за допомогою require
  • Формати передачі даних від сервера JSON
  • URL API
  • Promise Об'єкти
  • Promise властивості & методи
  • Symbol об'єкт
  • Promise властивості & методи
  • Cookies. Доступ до cookies.
  • Технологія Ajax та робота з HTTP протоколами
  • localStorage & sessionStorage
  • IndexedDB

Gulp

Робота збиранням проєкту Gulp.

Сертифікація

Ефективне працевлаштування

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

  • Вечірні заняття у режимі живих онлайн зустрічей
  • Велика кількість практичних завдань
  • Постійний фідбек від тренера
  • Навчальні проєкти
  • Сертифікат після успішного закінчення навчання
  • Кар'єрний тренінг з HR-фахівцями
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
9 тижнів
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Web Academy
  • Frontend
Подробиці

На Вас чекають живі онлайн-заняття, під час яких Ви вивчатимете основи Front-end розробки та одразу ж застосовуватиме знання на практиці. Разом із досвідченим Front-end Engineer Ви напишете свій код та проаналізуєте помилки.

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

Огляд курсу. Основи синтаксису HTML

  • Інструменти
  • Структура HTML-документа
  • HTML-теги та їх атрибути
  • Семантичні елементи HTML5

Основи синтаксису CSS

  • Види селекторів у CSS
  • Специфіка селекторів
  • Одиниці розмірів у CSS
  • Налаштування фону

Основи HTML форм, верстка простої форми реєстрації

  • Поля введення різних типів даних
  • Типи кнопок
  • Ідентифікатори та значення

CSS бокс модель / Flex box

  • Потік сторінки та управління ним
  • Відступи
  • Вирівнювання

Position

  • Види позиціонування
  • Верстка модального вікна

Grid layout

  • Види сіток
  • Верстка сітки товарів за допомогою grid
  • Властивість gap, відступ між грід елементами

Адаптивна верстка

  • Що таке адаптивна верстка?
  • Запити за допомогою Media queries
  • Приклад верстки адаптивного меню

Препроцессори / SCSS

  • Основи SCSS
  • Змінні та їх відмінність від CSS-змінних
  • Синтаксис

Практика верстки реального шаблону

  • Верстка шаблону
  • Підсумок CSS
  • Практика

Основи JavaScript

  • Синтаксис
  • Типи даних
  • Оператори

Функції | Основи DOM | Події в JS

  • Масиви
  • Функції
  • Додавання відкриття/закриття меню

Функції поглибленно | DOM в деталях

  • Методи масивів push | pop | shift | unshift | slice | splice
  • Селектори querySelector | querySelectorAll
  • Події миші, клавіатури, елементів управління, CSS

Динамічне створення елементів HTML за допомогою JS

  • document.createElement()
  • Перетворення массивів в елементи HTML
  • Створення списку завдань за допомогою localStorage

Асинхронна поведінка, контекст виклику

  • Залишкові параметри та оператор розширення
  • this|call|apply|bind
  • Рекурсія/стек

AJAX, взаємодія з сервером, promise

  • Поняття клієнт | сервер
  • Огляд інструментів для налагодження мережевих запитів
  • Асинхронна поведінка

Практика створення асинхронного компонента сторінки: генератор випадкового рецепту

  • Знайомство з API random food
  • Створення функцій-компонентів
  • Підключення до серверного API

Огляд бібліотеки React JS

  • Способи підключення
  • Ідея компонентів
  • createrReactApp

Приклад створення додатка за допомогою React JS

  • Огляд API themoviedb.org
  • setup оточення для розробки використовуючи createReactApp
  • Створення сторінки списку фільмів

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

  • Zoom-лекції та практикуми
  • Тренер та ментор в чаті групи
  • Перевірка і код рев'ю Д/З ментором з коментарями
  • Сертифікат по закінченню курсу (при успішному захисті фінального проекту і виконаних Д/З)
  • Підтримка клієнтського сервісу
  • Відеозаписи блоку "IT Career"
  • Участь в Web Academy Club

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

  • Ілля Литвинов - Senior Front-end Developer
  • Анастасія Бібік - React/React Native Developer
Подати заявку
Курс
Формат
Online
Початок навчання
01.03.2025
Тривалість
3 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
22 500 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Projector
  • Frontend
Подробиці

Базовий курс, який допоможе зробити перші кроки у вебпрограмуванні. А потім вирішити, куди розвиватися далі: пірнати у front-end чи обмежитися базовим набором для створення якісних вебінтерфейсів.

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

Інструменти розробки

  • Figma, VSCode
  • Термінал і робота з файловою системою
  • Системи контрол версій
  • Робота з Git

Вступ у HTML i CSS

  • Особливості та складники HTML
  • Будова HTML тегу, скелет HTML сторінки
  • CSS і його функції
  • Правила побудови таблиць стилів
  • CSS селектори, значення кольорів та розмірів
  • Підключення CSS на HTML сторінку

Посилання та зображення

  • Види посилання та його складники
  • Шлях до ресурсу
  • Атрибути посилань
  • Види, формати й атрибути зображень
  • Можливості SVG
  • Теги для гіперпосилань, зображень, групи зображення та підпису
  • Chrome DevTools для інспектування коду в браузері

Основи типографіки

  • Завдання й основні поняття типографіки
  • Групи правил для тексту та шрифтів
  • Підключення шрифтів на сторінку

CSS

  • Блокова модель
  • правила - display, float, z-index, overflow
  • Стилізація зображень
  • Селектори, їхня пріоритетність
  • Позиціювання елементів
  • Стилізація посилань

Списки й таблиці

  • Теги для різних видів списків
  • Лічильники
  • Списки визначень - dt, dd, dl
  • Основні теги для таблиць
  • Стилізація списків і таблиць

Теги для групування, семантика

  • Особливості тегів div і span
  • Семантика HTML, види блоків сайту

Flexbox

  • Стилі для батьківських та дочірніх елементів
  • Вирівнювання блоків
  • Побудова "колонок"

Grid

  • Групи правил для grid елементів
  • Відмінності між grid та flex
  • Побудова "колонок" і колонковий дизайн

Responsive Design

  • Складники та основні прийоми адаптивного дизайну
  • Media Query та Container Query
  • Дублювання HTML для різних медіа

Форми та їхня стилізація

  • Сутність форм, полів, груп полів та підписів до полів
  • Текстові поля та їхні типи
  • Селекти, чекбокси, кнопки та радіокнопки
  • Валідація форм
  • Додаткові типи полів для введення даних у формах
  • Стилізація елементів форм

Системи іменування класів

  • Функції систем іменування класів та архітектури CSS
  • Ознайомлення з методологіями - BEM, SMACSS, Atomic CSS, OOCSS
  • Поділ сторінки на структурні складники

Просунуті HTML/CSS фічі

  • transform
  • transition
  • animation
  • Сучасний HTML та CSS

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

  • Вебінари та відеолекції
  • Real-life завдання
  • Курсовий проєкт
  • Регулярний фідбек
  • Сертифікат за здобутки
  • Можна повернути кошти протягом 7 днів від початку курсу

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

  • Тетяна Мельник - Engineering Team Lead at Projector Institute
  • Ольга Шемена - Frontend Developer в BrainRocket
  • Юлія Євсєєнко - Frontend Developer at Infranomics
  • Леонід Костецький - Creative Director i Co-Founder в Emotion Agency / Куратор
  • Вікторія Комаровська - Frontend Tech Lead в 6-Systems Sixt Group
  • Василь Кошапов - Lead Frontend Developer в Limestone Digital
  • Вадим Васько - Frontend Developer в Software Service and Innovation
  • Андрій Кедись - Frontend Developer в Syndicode / Куратор
  • Владислав Єрмолаєв - Frontend Developer / Куратор
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
3 місяців
Рівень
Для досвідчених
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Todor Academy
  • React
  • Frontend
Подробиці

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

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

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

  • Введення в курс 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

Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
3 місяців
Рівень
Для досвідчених
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Todor Academy
  • Frontend
Подробиці

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

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

  • Введення в курс Front-End Pro
  • Що таке JavaScript?
  • Умовні конструкції
  • Цикли

Робота з даними

  • Типи даних
  • Приведення типів даних
  • Масиви та методи масивів
  • Об'єкти, JSON

Функції

  • Основи функцій
  • Ланцюжки областей видимості
  • Замикання
  • Чиста функція
  • Парадигма функціонального програмування

Об'єкти та класи

  • Об'єкти Advanced
  • Дескриптори властивостей та методи об'єктів
  • Прототипи
  • Парадигма об'єктно-орієнтованого програмування
  • Класи та екземпляри класів
  • Наслідування класів

JavaScript у браузері

  • Робота в контексті браузера
  • Web APIs
  • Dom API
  • Події браузера

Асинхронність

  • Таймери та асинхронна модель виконання
  • Цикл подій JavaScript
  • Promises
  • Async/await
  • Проблеми асинхронності та їх вирішення

Сучасні можливості JavaScript

  • Ітератори
  • Генератори
  • Робота з об'єктами та функціями
  • Шаблонні та теговані рядки

Взаємодія із серверною частиною

  • HTTP/HTTPs
  • XmlHttpRequest і fetch
  • REST
  • WebSockets
  • Server Sent Events (SSE)

Модульний JavaScript

  • Модулі CommonJS та ES2015
  • Збірник модульних проєктів Webpack, Rollup, Parcel
  • Пакети Node та npm
  • Налаштування модульного середовища розробника
  • Додаткові інструменти

TypeScript

  • Основи типізації
  • Типи
  • Абстрактні класи та інтерфейси

Тестування та патерни

  • Unit-тестування
  • Асинхронне тестування
  • e2e тестування
  • Паттерни проєктування

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

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

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

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

Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
2 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментора
Todor Academy
  • Frontend
Подробиці

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

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

  • Привітання
  • Технології та інструменти
  • 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

Подати заявку
Курс
Формат
Online
Початок навчання
Будь-який момент
Тривалість
-
Рівень
Для дітей
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
IT FUTURE ONLINE
  • Frontend
Подробиці

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

Знайомство та перші кроки

  • Принципи роботи Інтернету
  • Що таке гіпертекст
  • Специфікація мови HTML
  • World Wide Web Consortium (W3C)
  • Стандарти HTML

Що таке тег, атрибути тега

  • Правила оформлення HTML документа
  • Форматування заголовків та абзаців
  • Форматування тексту
  • Використання спецсимволів

Графіка у HTML

  • Формати зображень, які використовуються у WEB дизайні
  • Зображення як посилання та карта-зображення

Таблиці в HTML

Створення, форматування та способи застосування таблиць у HTML-документі.

Створення та редагування форм

Теги для створення та редагування форм та їх елементів (кнопки, поля вводу/виводу, checkbox, radio та ін.).

Синтаксис CSS

  • Специфікації CSS
  • Селектори, типи селекторів
  • Псевдоелементи та псевдокласи
  • Блоки оголошення стилів

Властивості CSS

  • Властивості для форматування тексту
  • Властивості для форматування фону та фонового малюнка
  • Властивості CSS для створення та редагування списків
  • Властивості CSS для створення та редагування таблиць

Верстка шаблону сайту

  • Способи позиціонування елементів (position та float)
  • Блокова верстка
  • Cтворення шаблону на основі графічної моделі

Підбір кольорових схем для оформлення сайту

Підбір кольорових схем для оформлення сайту.

Правила для відступів та рамок

Правила для відступів і рамок.

Адміністрація сайту

Адміністрація сайту.

Завантаження готового сайту на хостинг

  • Що таке хостинг, що таке доменне ім'я
  • Як правильно вибрати хостинг та доменне ім'я
  • Завантажуємо сайт на хостинг
  • Працюємо з адмінкою
  • Працюємо з FTP-сервером
  • Платні та безкоштовні хостинги (переваги та недоліки)

В рамках цього курсу ваша дитина:

  • Вивчить основи мови розмітки HTML та каскадні таблиці CSS
  • Отримає знання у галузі створення веб-сайтів та web-додатків
  • Створить адаптивний веб-сайт для свого портфоліо
  • Засвоїть мову програмування JavaScript, щоб створювати "живіші" сайти
  • Зможе самостійно встановлювати та налаштовувати CMS

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

  • Допомога ментора
  • Практика
  • 100% індивідуальне навчання
  • Проєкт в портфоліо
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
11 тижнів
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатМожливе працевлаштуванняСупровід ментораРеальний проект у портфоліо
1IT School
  • Frontend
Подробиці

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

Модуль 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

Подати заявку
Курс
Формат
Online
Початок навчання
Будь-який момент
Тривалість
2 місяців
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
Безкоштовно
Гнучкий графікСупровід ментора
EPAM
  • Frontend
Подробиці

Навчання включає теоретичні матеріали, практичні завдання і тести для покращення твоїх навичок. Цей формат дотримується правила "почни одразу після реєстрації": курс не має фіксованих дат початку/завершення. Учасники проходять весь навчальний процес у власному темпі, враховуючи поради щодо рекомендованих етапів або тривалості освітніх модулів, щоб зробити навчання збалансованим та продуктивним.

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

Git Basics

Web Fundamentals

  • HTML5 Basics
  • CSS Basics
  • CSS Layouts

JavaScript Basics

  • JS Intro
  • Data types
  • Operators and operands
  • Control flow
  • Loops and iterations
  • Functions

Що необхідно для успішного навчання

  • Рекомендований рівень англійської - не нижче В1
  • Досвід розробки на будь-якій мові програмування буде додатковою перевагою
  • Впевнені знання алгоритмів і структур даних, базових понять OOП допоможуть легше опанувати навчальну програму

Як долучитися до програми

  1. Зареєструйся
  2. За бажанням, пройди тест на визначення рівня англійської мови
  3. Перевір пошту
  4. Почни вивчати курс

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

  • Ти можеш навчатися в комфортному темпі та у зручний для тебе час
  • Це базова програма для кандидатів без попереднього досвіду та знань в ІТ
  • Ми надаємо тільки якісний контент, який відповідає актуальному стану ІТ-індустрії
  • Ця програма була розроблена експертами EPAM з різних країн та поєднує корисні й практичні знання для твоєї майбутньої кар'єри
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
32 занять
Рівень
Для дітей
Мова навчання
Ukrainian
Вартість
500 UAH за годину
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Академія Професій Майбутнього
  • Frontend
Подробиці

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

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

Теми:

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

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

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

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

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

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

  • Евеліна - Python, Front End, Minecraft
  • Сергій - Python, Front End
  • Максим - Java, Python, C/C++
Подати заявку
Курс
Формат
Online
Початок навчання
07.11.2024
Тривалість
30 тижнів
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
уточнюйте
Вечірні заняттяВидається диплом/сертифікатМожливе працевлаштуванняСупровід ментораРеальний проект у портфоліо
Levelup
  • Frontend
Подробиці

Пройдеш повний цикл створення web-проєкту. Навчишся створювати інтерактивні web-сторінки з використанням JavaScript. Отримаєш досвід використання фреймворків для створення користувальницьких інтерфейсів.

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

Введення

  • Про курс та результати на які слід очикувати
  • Коротка історія WEB (історія, w3c)
  • HTML, CSS, JS – що і для чого
  • Редактор коду Visual Studio Code

HTML

  • GIT
  • Основи HTML
  • Структура html-документа, основні теги, коментарі, спецсимволи
  • Таблиці
  • Форми, HTML5 форми
  • Атрибути
  • Списки
  • Теги, коментарі, doctype, форматування. Вкладеність
  • Посилання, навігація
  • Медіаконтент (img, audio, video)

CSS

  • Введення, література. Підключення стилів
  • Друкарня та шрифти
  • Відсутні та 'набивання'
  • Селектори нащадків та БЕМ-CSS
  • Стилізація форми
  • Властивості фону, спрайти
  • Підключення іконок та псевдоелементи
  • севдокласи та специфічні селектори
  • Градієнти, заокруглення кутів, тінь
  • Позиціювання
  • Абсолютне, відносне та фіксоване
  • Накладення (z-index)
  • Ідентифікатори, класи, селектори
  • Специфічність селекторів
  • Наслідування та каскадування
  • Величини в CSS
  • Форматування тексту, шрифти
  • Блочна модель
  • Резинова і адаптивна верстка
  • Властивості ширини та висоти (min, max)
  • Плаваючі елементи Float
  • Властивості фону, спрайти
  • Позиціонування
  • Накладення (z-index)
  • Flex
  • Коефіцієнт збільшення та фактор стиснення flex-елемента
  • Зміна порядку та вирівнювання flex-елементів
  • Блокова верстка сайту
  • Створення різних layouts
  • CSS анімація
  • Тривалість та 'ритм' виконання анімації
  • Затримка виконання анімації
  • Трансформація елементів
  • Переміщення. масштабування, обертання, прозорість
  • CSS 3D
  • CSS Grid. Шаблони рядів та колонок
  • Порядок та об'єднання колонок та рядів
  • Grid-зони
  • Препроцессори SASS/SCSS
  • Верстка під мобільні пристрої
  • CSS фреймфорк - Bootstrap
  • Сітка Bootstrap та побудова каркасу сторінки
  • Bootstrap компоненти та скрипти

JavaScript

  • Введення у JavaScript. Інструменти. Література
  • Парсер
  • Змінні
  • Типи даних
  • Null і undefined
  • Оператори (бінарні, унарні)
  • Оператори порівняння
  • Перетворення типів
  • Умовні оператори (if, тернарний)
  • Логічні оператори (і, або, не)
  • Цикли (while, for)
  • Конструкція switch
  • Функції та аргументи
  • Рекурсія, стек
  • Методи і властивості. Вступ
  • Семантика, строгий режим, валідація, налагодження
  • Масиви
  • Об'єкти і методи
  • Класи та ОВП
  • Об'єкти BOM (window, history, navigator, location, screen)

DOM та бібліотека jQuery

  • Дерево DOM
  • Робота з DOM з консолі
  • Навігація в DOM
  • Пошук: getElement* та querySelector*
  • Додавання та видалення вузлів
  • Запровадження. Сплив і перехоплення. Делегування подій
  • Події миші
  • Події форми
  • Події scroll, load, error, ready
  • Специфічні завдання та їх вирішення
  • Знайомство та робота з jQuery
  • Селектори
  • Атрибути (класи, дата, отримання значень, html)
  • Допоміжні функції
  • Виведення елементів у DOM - render items
  • Оптимізація використання ресурсів браузера та швидкість завантаження
  • Практика DOM
  • JS-анімація

HTML5 API

  • HTTP-протокол
  • Cookies
  • Інтерфейс Storage

Ajax

  • JSON
  • Підхід AJAX
  • XMLTttpRequest
  • Ajax практика
  • Інші способи мережевих запитів

JS - React

  • React основи
  • JSX та компоненти
  • Стан компоненту (state) та метод render
  • Передачі даних компоненту - props
  • Методи життєвого циклу
  • Монтування та демонтаж
  • React – обробка подій
  • Робота зі стилями компонентів
  • Клієнтський роутинг
  • React router
  • Мережеві запити в React
  • Робота React з API
  • Функції вищого ладу
  • React HOC
  • Контекст
  • Provider та Consumer
  • React без класів
  • Основні Хуки
  • Кастомні Хуки
  • Додаток на React

Project

  • Написання програми
  • Захист випускного проєкту

Після курсу ти зможеш:

  • Проєктувати інтерфейси користувача, створювати кросбраузерну, адаптивну верстку і вносити зміни в існуючу
  • Розробляти логіку роботи клієнтської частини та розуміти роботу серверної частини web-додатків
  • За допомогою JavaScript будеш створювати інтерактивні інтерфейси, розробляти серверну частину сайтів
  • Для структурування коду, об'єктного представлення вихідного HTML-документа та здійснювати асинхронне оновлення веб-сторінок
  • Використовувати повною мірою можливості бібліотеки для прискорення та спрощення процесу розробки
  • Аналізувати та керувати результатами своєї роботи використовуючи систему контролю версій Git & GitHub

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

  • Інтенсивна практика і розбір домашніх завдань
  • Можливість онлайн навчання + Відеозаписи всіх занять
  • Викускний проєкт для портфоліо, який ти презентуєш роботодавцям
  • Допомога у працевлаштуванні, оформленні резюме та підготовка до співбесіди
  • Кар'єрні івенти
  • Підтримка викладачів
  • Великий стек технологій
  • Можлива оплата курсу частинами

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

Дмитро Томчук - Front-end Developer (Angular developer)

Подати заявку
Курс
Формат
Online
Початок навчання
Будь-який момент
Тривалість
10 занять
Рівень
Для початківців, Для досвідчених
Мова навчання
Ukrainian
Вартість
5 900 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
IT-Столиця
  • Frontend
Подробиці

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

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

  • Введення в медіазапити
  • Знайомство з адаптивною версткою
  • Огляд популярних 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-компанії
  • Індивідуальне навчання

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

  • Володимир - Програміст
  • Ігор - Програміст
  • Володимир - Програміст
  • Олексій - Програміст
Подати заявку
Курс
Формат
Online
Початок навчання
Будь-який момент
Тривалість
10 занять
Рівень
Для досвідчених
Мова навчання
Ukrainian
Вартість
6 300 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
IT-Столиця
  • Frontend
Подробиці

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

Введення в методологію верстки

  • Відносно яких принципів оформлюється код
  • Введення в методологію БЕМ
  • Правила іменування класів по БЕМ
  • Введення в OOCSS
  • Практика

Введення в HALM-мову розмітки. Характеристика препроцесорів

  • Знайомство з мовою розмітки
  • Огляд процесора SASS
  • Огляд LESS-препроцесора
  • Знайомство з препроцесором Stylus
  • Практика

Введення в компонентну модель верстки

  • Що таке Google Polymer
  • Алгоритм імпортування файлів HTML
  • Web Components - це
  • Практика

Методика гнучких сторінок та проведення макетування

  • Flexible Box Layout
  • Процедура верстки
  • Практика

Характеристика CSS-фреймворків

  • Зміст Foundation
  • Зміст Bootstrap
  • Практика

Методика формування сайтів та участь в цьому процесі 3D

  • Введення 3D-ефектів сторінки
  • Що собою являє ефект Parallax
  • Практика

Знайомство з Git. Командна робота

  • Встановлення та налаштування системи контролю версій
  • Базові команди Git
  • Огляд веб-сервісів GitHub, GitLab і Bitbucket
  • Створення проєкту і заливка на GitHub
  • Практика

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

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

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

  • Володимир - Програміст
  • Ігор - Програміст
  • Володимир - Програміст
  • Олексій - Програміст
Подати заявку
Курс
Формат
Online
Початок навчання
Будь-який момент
Тривалість
10 занять
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
5 900 UAH за курс
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
IT-Столиця
  • Frontend
Подробиці

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

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

  • Призначення технологій
  • Стек розробки для сайту
  • Принцип роботи "клієнт-сервер"
  • Консоль розробника
  • Текстовий редактор і 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-компанії
  • Індивідуальне навчання

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

  • Володимир - Програміст
  • Ігор - Програміст
  • Володимир - Програміст
  • Олексій - Програміст
Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
9 місяців
Рівень
Для дітей
Мова навчання
Ukrainian
Вартість
уточнюйте
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
Junior IT
  • Frontend
Подробиці

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

План курсу

Що вивчають на курсі

  • Концепція WEB-програмування
  • Теги в HTML. Посилання та їх атрибути
  • Каскадні таблиці, стилі, способи застосування на WEB-сторінках
  • Правила та основні властивості CSS

Що учень буде вміти

  • Застосовувати бази властивостей елементів CSS
  • Створювати адаптивні сторінки WEB
  • Додати відео, аудіо, плейлисти на сторінку
  • Верстати заготівлі для майбутніх сайтів
  • Самостійно створювати повноцінні веб-сайти з елементами Javascript

Що учень матиме

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

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

  • Групи до 10 осіб
  • Програми розроблені з урахуванням віку дитини
  • Заняття записуються і завжди є можливість повторити матеріал
  • Дається домашнє завдання для самостійної роботи
  • В особистому кабінеті розміщені всі навчальні матеріали
  • Заняття проводяться за розкладом як у будні дні, так і у вихідні
  • Розклад та викладач протягом курсу навчання не змінюються
  • Викладачі - практикуючі IT фахівці з досвідом роботи з дітьми понад 3 роки
  • Сертифікат про проходження курсу
Подати заявку
Відеокурс / Платформа
Формат
Online
Початок навчання
Будь-який момент
Тривалість
-
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
Безкоштовно
Гнучкий графікВидається диплом/сертифікатРеальний проект у портфоліо
EdEra
  • Frontend
Подробиці

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подати заявку
Курс
Формат
Online
Початок навчання
Дата формується
Тривалість
-
Рівень
Для дітей
Мова навчання
Ukrainian
Вартість
2 790 UAH за місяць
Гнучкий графікВидається диплом/сертифікатСупровід ментораРеальний проект у портфоліо
IT-школа СМАРТ
  • Frontend
Подробиці

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

План курсу

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

WEB-простір

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

HTML та CSS

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

JavaScript

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

Розробка

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

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

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

English

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

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

Впевненість

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Навчання через практику
  • Щотижневі лабораторії Skills Lab
  • Фіксація результату
  • Онлайн-підтримка викладача
  • Онлайн-консультації
  • Можливість офлайн навчання
  • Захист випускного проєкту
  • Гейміфікація
  • Особистий кабінет
  • Бонуси за активність на курсі
  • Домашні завдання
  • Звітність для батьків
  • Невеликі групи
Подати заявку
Відеокурс / Платформа
Формат
Online
Початок навчання
Будь-який момент
Тривалість
68 занять
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
99 USD за курс
Гнучкий графік
Merge Academy
  • Frontend
Подробиці

Цей курс створений для того, щоб ти міг опанувати нову професію та почати свій шлях у IT. 4 пакети лекцій допоможуть тобі набути базових скілів, ознайомитися з мовами програмування та інструментами розробки.

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

Модуль 1. Git + HTML

Спочатку ознайомимось з мово розмітки HTML і системою контролю версій Git.

  • Що таке Front-end?
  • Git
  • HTML
  • HTML: Block, inline, semantic, list, media
  • HTML: form
  • HTML: table
  • HTML: SVG

Модуль 2. CSS

Тут вивчаємо мову стилів CSS і почнемо верстати.

  • CSS: Connection, syntax, common properties
  • CSS: Selectors
  • CSS: Pseudo, offsets, centring
  • CSS: Flex
  • CSS: Grid
  • CSS: Position + transform
  • CSS: BEM
  • CSS: Form
  • CSS: CSS Table & Aspect Ratio
  • CSS: Media queries
  • CSS: Animations and Transitions
  • CSS: Best practices
  • SCSS: Variables, Functions, Mixins
  • SCSS: Project structure & BEM
  • SCSS: Features & Best practices

Модуль 3. JavaScript

Опануємо ази мови програмування JavaScript.

  • NPM& Packing: packages & scripts
  • Operators and conditional branching
  • Loops and functions
  • Numbers and Strings
  • Objects
  • Arrays and array methods
  • Destructuring, Map, Set, JSON, Dates
  • Classes
  • Browser, window, DOM
  • DOM manipulations
  • Events
  • Errors, Timers, Promises
  • Fetch & localStorage
  • Modules, Libraries using
  • Best Practices

Модуль 4. React

Знайомимось з найпоширенішою бібліотекою Front-end розробника.

  • Components and props
  • Events handling
  • State and forms
  • lifecycle, conditional rendering, lists and keys
  • other react hooks
  • TODO app livecoding
  • Context and state management
  • Zustand and PokeAPI
  • Router
  • Storybook
  • Best practices

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

  • Відеозаписи лекцій
  • Додаткові матеріали
  • Навчання в чат-боті
  • HTML, CSS, JavaScript, React
  • Матеріали лишаються назавжди

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

Олександр Ратушний - СТО

Подати заявку
Відеокурс / Платформа
Формат
Online
Початок навчання
Будь-який момент
Тривалість
-
Рівень
Для початківців
Мова навчання
Ukrainian
Вартість
Безкоштовно
Гнучкий графікСупровід ментора
ITGid
  • Frontend
Подробиці

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

Вивчаємо:

  • 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 тасок
  • Допомога та підтримка
  • Розбір та усунення багів
  • Доступ без обмежень по часу
Подати заявку

Сторінки

Читайте нас в Telegram, щоб не пропустити анонси нових курсів.

Відгуки про курси

Гість   03.02.2026

Взагалі не рекомендую цю школу! Жахливий сервіс, де вас не попередять про зростання цін, клієнтоорієнтованість взагалі жах! На усі зауваження відповідь дають «зафіксував», коли провина саме лежить на школі та надані послуг.
Роблять усі умови, щоб ви сплатили пакетом, кажуть що якщо щось дитині не сподобається то повернуть кошти , але повертають вони 30% з того , що повинні. Звичайно, що це прописано у оферті на 9 сторінок, але при продажу кажуть зовсім інше і в тебе не виникає навіть сумнівів, що таке може бути!! Я проходила навчання раніше і в інших школах і усе було прозоро, відповідально і тд, а тут просто пробили дно.
Ще важливе зауваження- при підписані договору заявляли, що ціна закріплюється на весь період навчання, але потім раптом все змінилось і навчання подорожчало на 15%. Ось такий сервіс, тємкі муткі

Рекомендації: Не рекомендую
1
Середня: 1 (1 голос)
Курси Frontend
Ніна   13.07.2025

У школі сподобалося, що ніхто не тягне кота за хвіст. Все чітко, по темі і з купою практичних задач. Брала курс Front-end. Вперше написала сайт, який відкривається не тільки в мене на ноуті. Вдячна викладачу за терпіння.

Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
Курси Frontend
Наталя    25.06.2025
Після завершення курсів з Frontend маю тільки позитивні враження та приємні спогади, відносини на курсі були мега дружні. Викладачі вміло пояснюють теорію та одночасно надають можливість багато практикуватися, що дає нам неоціненний досвід. На додаток до цього, отримала Е-сертифікат і деякі цінні (навіть можна сказати таємні) професійні поради, що стали приємним бонусом для моїх знань та здобутків. Переглядала фоточки вашої школи, зараз ви інші)) за останні пару років ви стали кращі, змінились, змужніли, стали ще соліднішими - принаймні ті кого я впізнала на тих фото. Всім привіт і ДЯКУЮ!
Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
Курси Frontend
Sergio   11.06.2025

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

Плюси:Якісне навчання Стажування Я знайшов работу після навчання
Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
Курси Frontend
Дмитро   11.05.2025

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

Чесно кажучи, все це «айтішні» розповіді про басейни, більярди, фітнес-зали, гнучкий графік і круте ставлення на роботі здавалося мені вигадкою. Але вирішив ризикнути. Вступив на курс. І знаєте що? Вже через кілька тижнів зрозумів - це моє.

Було важко. Деякі речі давались із боєм. Але цікавість і підтримка менторів тримали на плаву. Найбільшим шоком стало те, що вже через два місяці після старту навчання мені запропонували пройти співбесіду на позицію верстальника в одній компанії. Пройшов. З першого разу. Після 10 років, де максимум що змінювалося — це розміри меблів.

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

Плюси:1. Дуже круті викладачі, які справді можуть пояснити складне просто. 2. Реальна підтримка та зворотний зв’язок. 3. Програма охоплює все, що потрібно для старту кар’єри джуна. 4. Можна знайти роботу ще до завершення курсу. 5. Курси мотивують не здаватися, навіть коли важко.
Рекомендації: Рекомендую
5
Середня: 5 (1 голос)
12.05.2025   Відповідь представника компанії

Дякуємо за ваш надзвичайно щирий і надихаючий відгук! 

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

Пишаємося, що ви змогли знайти своє місце в ІТ і вже працюєте за спеціальністю! Нехай далі буде ще більше професійних перемог, задоволення від роботи та впевненості у власних силах. Дякуємо, що обрали GoIT і поділилися своєю історією!

Курси Frontend