Web-розробка для школярів 12-17 років. Онлайн курс
Описание
Розробка видимої частини будь-якого сайту називається Front-end, і це область програмування, яка розвивається швидше за інші. Жоден сучасний веб-сайт і веб-додаток не обійдуться без Front-end розробника.
В рамках курсу Web-розробка для школярів студенти без досвіду в розробці вивчають HTML і CSS та JavaScript. Після успішного закінчення курсу студенти отримують достатньо знань і навичок для верстки сайту будь-якої складності.
ЦІЛІ КУРСУ
- Втілювати в верстку дизайн будь-якої складності
- Робити сайти, які однаково добре відображаються на будь-якому пристрої
- Помічати важливі дрібниці і писати код, який легко розширювати і підтримувати
- Навчитися розуміти структуру веб-сторінок
- Вивчити основи JavaScript
- Навчитись працювати з HTML та JavaScript
Вивчаємо такі технології: HTML5, CSS, SASS, Bootstrap, SVG, Git, Github, JavaScript, Json, jQuery, DOM.
| Дни недели занятий | |
|---|---|
| Время занятий | |
| Занятий в неделю | 2 заняття на тиждень |
| Длительность занятия | |
| Часы занятий | |
| Группы | |
| Возраст аудитории | Средняя школа, Старшеклассники |
| Вид подготовки | Базовый курс |
| Город | Онлайн |
| Преподаватель | специалист-практик |
| Учебные материалы | |
| Пробное занятие | |
| Документ об окончании | Сертифікат |
| Опции | Групповые занятия |
| Трудоустройство | Нет |
| Условия трудоустройства |
Запись на курс
Программа обучения
Основи 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
- Онлайн