Web-розробка для школярів 12-17 років. Онлайн курс

Основи HTML

• Знайомство з редактором коду
• Починаємо ознайомлення з HTML
• Основні теги, їх будова та властивості

Основи СSS

• Cascading Style Sheets (CSS)
• Застосування стилів у контексті HTML5
• Cелектори
• Колір CSS
• Прозорість
• Стилізація шрифтів

СSS Block Model

• Основні елементи CSS
• Знайомство з block model

Block Layout. Властивість display

• Створення макета сторінки за допомогою блокової верстки
• Властивість display
• Вирівнювання плаваючих елементів

Робота з формами

• Форми у HTML
• Елементи форм
• Атрибути value та name
• Кнопки, текстові поля, напрямок тексту, поле пошуку
• Поле введення пароля. Мітки та автофокус
• Елементи для введення чисел
• Повзунок. Прапорці та перемикачі
• Елементи для введення кольорів, url, email, телефону
• Валідація форм

FlexBox

• Що таке FlexBox. Flex Countainer
• Напрямок flex-direction. Flex-Wrap
• Порядок елементів Flex-Flow
• Властивість order. Вирівнювання елементів
• justify-content. Вирівнювання елементів
• align-items і align-self. Вирівнювання рядків та стовпців
• align-content
• Управління елементами. flex-basis, flex-shrink та flex-grow
• Властивість flex

Створення макета FlexBox. Media Queries

Bootstrap

Animation

• Трансформації, переходи та анімації

CSS: Grid

Введення в JavaScript

• Що таке JavaScript
• Основи синтаксису
• Коментарі
• Підключення зовнішнього файлу JavaScript
• Консоль браузера та console.log
• Змінні та константи
• Типи даних

JavaScript

• Оператори порівняння
• Логічні операції 
• Операції присвоєння
• Умовні конструкції

JavaScript. JSON

• Робота зі String
• Масиви 
• Конвертування у JSON
• Оператор for, forEach
• Оператор while

JavaScript. Робота з DOM

• Функції
• Об’єкти DOM

jQuery

• Selectors
• Events
• DOM

jQuery Effects and Animation AJAX JSON

Cookie and localStorage

Робота з localStorage. setTimeout setInterval Promise

• localStorage. setTimeout, setInterval
• Promise: async/await

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

Сайт з даними

Canvas

• Малювання фігур
• Методи moveTo і lineTo
• Метод rect
• Fill, clip, arc, arcTo

Canvas Animation

• Комплексні фігури
• Малювання мишкою
• Canvas Animation

Slider

Canvas Animation. Сontrol object

Creating a game