Англійська

Предмети

Тести

Записатися

Допомогти армії

Увійти

Курси “Створення сайтів: Frontend розробник” для дітей

Опануємо топову ІТ-професію та навчимо створювати сайти з нуля

Тривалість курсу: 8 місяців
Занять на тиждень: 2 заняття по 90 хв
Кількість занять на курсі: 64 уроки
Формат: онлайн
Що потрібно для навчання: комп’ютер з гарнітурою або ноутбук та гарний інтернет

Не «трави» — весняну знижку в травні забери!

Встигни придбати курс зі знижкою до -50% при першій оплаті

з 12.05 до 18.05

Підходить для
підлітків 13-16
років

Заняття тривають
90 хвилин

Знайомство з мовою
програмування
JavaScript + HTML/CSS

Занурення в
реальний світ
розробників

Як відбувається навчання на курсі

Програма розрахована на 64 заняття

Містить 8 модулів, кожен із яких формує у дитини компетенції дизайнера, веброзробника та SEO-аналітика.

Розберемо принципи мов, які використовуються у Frontend-розробці

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

Практика на кожному занятті

Кожен урок — вивчення чогось нового й миттєве закріплення теорії на практиці! Покроково вивчаємо стилізацію сторінки, використовуючи три мови програмування.

Створимо власне портфоліо сайтів

Після проходження курсу по створенню сайтів кожен учень матиме власне портфоліо із декількох різнотипних сайтів.

Видаємо сертифікат після завершення курсу

Який результат отримає дитина після завершення курсу

Опанує HTML-верстку та CSS-технології для створення адаптивних вебсторінок.

Використовуватиме дизайн-інструменти не лише для професійних, а й для повсякденних задач.

Навчиться додавати інтерактивні елементи за допомогою мови програмування JavaScript.

Опанує роботу з хостингами та файловими клієнтами, навчиться публікувати сайти в Інтернеті.

Вивчить основні принципи адаптивного, доступного та інклюзивного дизайну.

Програма курсу зі створення сайтів

Модуль 1

HTML & CSS Junior

8 тем

Перелік тем, які будете знати:

Web 2.0.Місце технологій HTML, CSS та JavaScript у розробці сучасних сайтів.
Текстові теги. Види тегів. Посилання.
Підключення CSS. Селектори та базові стилі.
Координати. Створення об'єктів на випадкових координатах. Проєкт Top-Down Shooter.

Показати більше темЗгорнути теми

HEX-кольори. Теги списків.
Додавання кнопок до сайту. Використання псевдокласів.
Google Fonts. Підключення шрифтів до сайту.
Проєктна робота.

Модуль 2

Прототипування Figma.

8 тем

Перелік тем, які будете знати:

Огляд сервісу Figma. Розробка вайрфрейму візитівки.
Створення макета візитівки. Застосування напрямних.
Додавання ефектів до об'єктів. Використання Drop Shadow для імітації 3D.
Події Onclick та While Hovering. Розробка клікабельного прототипу.

Показати більше темЗгорнути теми

Анімація у Figma. Робота з компонентами.
Тенденції в дизайні лендінгів. Основні елементи GUI. Розробка брендбуку.
Створення прототипу мобільного додатку. Основи адаптивного дизайну.
Проєктна робота. Розробка прототипу Landing Page.

Модуль 3

Розробка Landing Page

8 тем

Перелік тем, які будете знати:

Середовище Visual Studio Code. Структура директорії проєкту. Базова html-структура.
Способи підключення CSS. Введення до семантичної верстки. Оформлення блоку Header.
Flex-верстка. Оформлення першого екрана сайту.
Розробка мініблоків із застосуванням flex-технологій.

Показати більше темЗгорнути теми

Створення форми зворотного зв'язку.
Розробка нових сторінок. Перехід між сторінками та якорями.
API. Використання для зв'язку з API інших сайтів.
Проєктна робота. Оформлення блоку Footer.

Модуль 4

Графічний дизайн. Створення векторних ілюстрацій.

8 тем

Перелік тем, які будете знати:

Сервіс PhotoPea. Логотип в стилі кубізму (із використанням графічних примітивів).
Текст. Ефекти шарів.
ШІ для генерації зображень. Інструменти швидкого виділення.
Коригувальні шари. Створення ілюстрації в стилі попарт.

Показати більше темЗгорнути теми

Інструмент "Перо". Малювання маскоту бренду.
Створення векторної ілюстрації. Основи композиції та колористики.
Мокапи. Створення прототипу рекламної продукції.
Проєктна робота. Брендинг

Модуль 5

JavaScript. Створення функціональних сайтів.

10 тем

Перелік тем, які будете знати:

Способи підключення JavaScript скриптів. Команди вводу та виводу інформації. Змінні. Робота з консоллю.
Функції. Використання події браузера для виклику функцій. Проєкт "Guess The Number".
Маніпуляція DOM. Умовні оператори.
Реалізація адаптивності сайту. Зміна CSS-файлів залежно від параметрів пристрою.
Зберігання даних на стороні користувача. Local Storage.

Показати більше темЗгорнути теми

Створення анімацій методами JavaScript.
Масиви та об'єкти. Реєстрація нового користувача.
Предикати. Створення власних логічних операторів.
Константи. Валідація форм на стороні клієнта.
Проєктна робота. Розробка адаптивного дизайну для людей з інклюзіями зору.

Модуль 6

Публікація сайту в інтернеті. Принципи SEO-оптимізації та аналітики.

8 тем

Перелік тем, які будете знати:

Вебхостинги та домени. Завантаження сайту до GitHub Pages.
Основи роботи з метатегами. Оптимізація сайту для пошукових систем.
Основи SEO. Ключові слова та контентна оптимізація.
Google Analytics. Ключові показники аналітики, їх отримання в режимі реального часу.

Показати більше темЗгорнути теми

Мікророзмітка OpenGraph.
Використання FTP-протоколу для завантаження файлів на сервер. Робота з FileZilla.
Тестування доступності сайту. Додаткові способи краще адаптувати сайт для людей з інклюзіями.
Проєктна робота. Комплексна оптимізація сайту.

Модуль 7

Фреймворк Vue.js. Створення інтернет-магазину

10 тем

Перелік тем, які будете знати:

Налаштування середовища розробки. Vue CLI. Огляд структури проєкту.
Створення та рендеринг компонентів.
Створення шаблонів HTML-розмітки.
Створення масивів даних. Використання циклу v-for для їх відображення в шаблоні.
Парсинг. CSV таблиць. Інсталювання бібліотек до Vue. Бібліотека Papaparse.

Показати більше темЗгорнути теми

SPA. Роутинг між сторінками.
Фільтрація товарів та пошук у Vue.js. Застосування v-model.
Реалізація кошика покупок у Vue.js: керування станом через події та передача даних між компонентами.
Авторизація користувачів на сайті.
Проєктна робота.

Модуль 8

Курсовий проєкт

4 тем

Перелік тем, які будете знати:

Селф-менеджмент. Пошук референсу. Формування асетів сайту.
Створення прототипу сайту.

Показати більше темЗгорнути теми

Розробка фінальної версії сайту.
Публікація сайту на Dribbble. Пітчинг проєктів.

Запишіться на безкоштовне перше заняття

Обовʼязкове поле

Даю згоду на обробку персональних даних

Познайомимо з нашою онлайн-школою та платформою

Протестуємо здібності дитини й визначимо її рівень знань

Допоможемо створити її перший мініпроєкт

Підберемо оптимальний план занять та навчання

Результати учнів на курсі створення сайтів

Антон, 15 років
Сайт для грумінг-салону

Я давно цікавився створенням сайтів, і курси допомогли мені зрозуміти, як це працює. Тепер у мене є власна вебсторінка!

Антон, 15 років
Сайт для грумінг-салону

Віка, 16 років
Сайт для коворкінгу

Раніше я думала, що сайти можуть створювати тільки дорослі, а тепер у мене є свій сайт!

Назар, 14 років
Сайт для бронювання відпочинку

Було круто бачити, як звичайний код перетворюється на справжній сайт!

Катерина, 13 років
Сайт для платформи з вивчення англійської

На курсі я створила сайт з нуля — тепер знаю, як усе це працює зсередини!

Владислав, 13 років
Сайт для гри в стилі “клікер”

На курсах я дізнався, як зробити вебсторінку. Тепер можу самостійно створювати сайти та додавати анімацію!

Про JustTech

JustSmart — це онлайн-школа для дітей та підлітків, яка входить до складу сімейства продуктів JustTech.

428 500+ учнів розвиваються з нами

16500+ викладачів вибирають наші продукти

500+ співробітників у команді

7+ років на ринку

4 освітні продукти

Викладачі курсу, які допомагають досягти результату

У команді JustSmart — понад 50 викладачів, які надихають учнів досліджувати світ IT. Вони допомагають не просто вивчити код, а й розвивати креативність, логіку та інтерес до технологій.

Наші викладачі на курсі створення сайтів працюють із сучасними цифровими інструментами, щоб урізноманітнити навчання та розширити можливості учнів:

CodePen – для швидкого тестування та перегляду коду

Visual Studio Code – для роботи зі структурою проєкту

Figma – для створення інтерфейсів та візуального оформлення ігор і додатків

Олексій

Спеціалізація: HTML, CSS, базова вебструктура

Чого навчає учнів:

Як створити простий сайт з нуля
Робота з текстом, зображеннями та кольорами на сторінці
Основи адаптивного дизайну

рікДосвід викладання

Владислав

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

Чого навчає учнів:

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

роківДосвід викладання

Ростислав

Спеціалізація: сучасна верстка, робота з адаптивністю та макетами

Чого навчає учнів:

Як правильно верстати сайти за макетом
Використання інструментів типу Figma та PhotoPea
Принципи зручного дизайну та структури вебсторінки

роківДосвід викладання

Станіслав

Спеціалізація: інтерактивні сайти, анімація, основи JavaScript

Чого навчає учнів:

Як оживити сайт за допомогою анімацій і ефектів
Основи логіки для додавання взаємодії на сторінці
Робота з простими сценаріями для вебпроєктів

роківДосвід викладання

Що батьки та учні пишуть про наші курси створення сайтів

Задоволені, що познайомилися зі школою JustSmart та курсом створення сайтів. Вчитель доступно та терпляче пояснює матеріал на курсі “Створення сайтів”, менеджери підібрали розклад під наші побажання завжди готові допомогти якщо виникає якась проблема.

Yuliia Yuliia

18 грудня (Facebook)

Моя донька вивчає програмування в онлайн-школі JustSmart. Навчанням задоволені. Заняття проводяться у доступній, зрозумілій формі. Графік уроків дуже зручний. Вчитель дуже ввічливий та завжди готовий допомогти та додатково роз'яснити матеріал кожному учневі. Дуже задоволені!

Крістіна

21 грудня (Facebook)

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

Katakuri Charlotte

21 грудня (Facebook)

Періодично питаю у сина, чи будемо продовжувати навчання, він відповідає: ТАК! В цьому році ще почали курс зі створення сайтів. Синові дуже подобається формат уроків, завжди можна передивитися матеріали до уроку, завдання цікаві та практичні. Дякуємо за таку школу.

Тетяна Бічуріна Прохорова

18 грудня (Facebook)

Наша дитина здобуває знання з курсу Web-програмування в JustSmart. Викладач курсу Ярослав пояснює доступно та завжди на позитиві, не рахується з часом, коли викладачі інших онлайн-шкіл хвилина у хвилину закінчують заняття. Ярослав намагається передати знання, а не формально відчитати години та від'єднатися, що дуже цінне для нас як для батьків. Наша мета - знання, а не формальне відвідування курсу. Рекомендую курс Web-програмування в JustSmart.