1С:КЛУБ ПРОГРАММИСТОВ И РОБОТОТЕХНИКИ КОСТРОМА

Программа 1-ого модуля курса
«СОВРЕМЕННАЯ WEB РАЗРАБОТКА»

Если подростка интересует только создание сайтов и ничего, кроме создания сайтов, - этот курс определенно для него!
В ходе изучения двух модулей происходит знакомство с разметкой сайта, различными стилями его оформления, элементами сайта, его внутренним устройством и прочим, прочим, прочим…
В настоящее время в компании «БизнесСофт» можно изучить 2 модуля по WEB-разработке.
За 12 занятий первого модуля подростки пишут свою игру «Пятнашки», изучая при этом HTML, CSS и JavaScript.
При этом изучается структура сайта, разметка сайта, элементы сайта, управление элементами сайта, всплывающие окна, условия, размещение картинок, оформление сайта, тестирование сайта.
Итогом прохождения первого модуля становится игра «Пятнашки», встроенная в окно веб-браузера.

1. HyperText Markup Languare (устройство webстраниц).
1.2 Редактор Brackets (скачивание, установка)
1.3 Hello, world!
1.4 Структура HTML (html, head, meta, title, body, заголовки, абзацы, форматирование).
1.5 Задания: профиль (списки, картинки), галерея изображений (ссылки, таблицы).

2. Cascading Style Sheets.
2.1 Стили.
2.2 Hello,CSS.
2.3 Структура стилей (селектор тегов, селектор классов, селектор идентификаторов, комбинирование селекторов).
2.4 Редактирование «на лету».
2.5 Задания: Jumbotron (цвет фона, div, span, размеры, отступы и поля, центрирование, границы), меню (display, псевдоклассы, зазоры).

3. CSS. Выравнивание и эффекты.
3.1 Выравнивание с FlexBox Layout (flex-wrap, justiny-content, align-content, align-items).
3.2 Трансформации (поворот, масштабирование, перекос, перемещение).
3.3 Переходы.
3.4 Задания: анимации (селектор дочерних элементов), конвертер температур – вёрстка (текстовые поля, кнопки, специальные символы, специальные цвета, прозрачность, box-sizing).

4. JavaScript. DOM, перемещенные функции.
4.1 Предпосылки (Java?).
4.2 Chrome Developer Tools.
4.3 JavaScript (переменные, DocumentObject Model, функции, события).
4.4 Поиск ошибок
4.5 Задания: конвертер температур – функциональность (строки и числа), максимум (модуль числа).

5. JavaScript. Условные конструкции и циклы.
5.1 Типы данных (функции, логический тип).
5.2 Условные конструкции (операторы сравнения, if, логические операторы (конъюнкция, дизъюнкция, отрицание, приоритеты, короткое замыкание).
5.3 Циклы (while, for).
5.4 Задания: минимум, шахматная доска (алгоритм, создание элементов, изменение стилевых свойств элементов, делимость, HTML и CSS).

6. JavaScript. Структуры данных.
6.1 Словари (создание, использование, изменение, итерирование).
6.2 Массивы (создание, использование, изменение, итерирование).
6.3 Примитивы и объекты.
6.4 Задания: комбинирование структур, игра «Викторина» (порядок подключения скриптов, множественные классы, радиальный градиент, вычисления в CSS, пример файла с вопросами, HTML и CSS).

7. Jquery.
7.1 Предпосылки.
7.2 Подключение.
7.3 Синтаксис.
7.4 Функциональность (события, hide, show и toggle, html и attr, append и prepend, css, width и height, addClass, removeClass и toggleClass, parent, children и siblings).
7.5 Задания: головоломка (создание элементов, обратный вызов), список дел – функциональность (remove, определение нажатой клавиши, val).

8. Bootstrap.
8.1 Предпосылки.
8.2 Подключение.
8.3 Функциональность (разметка, выравнивание, кнопки, списки, панели, модальные окна).
8.4 Задания: список дел – вёрстка (форма курсора, события документа), список дел – подтверждение удаления (всплывание событий).

9. CSS. Позиционирование.
9.1 Нормальный поток.
9.2 float (clear).
9.3 position (relative, absolute, fixed, z-index).
9.5 Задания: целевая страница (полезные ресурсы), расширение Beautify.

10 Зачёт.
10.1 Список вопросов (CSS, JavaScript).

1.1 Игра «Пятнашки». Начало.
11.1 Игровое поле.
11.2 Плитка (createCellNull, setCellOffset, appendCell).
11.3 Костяшки.
11.4 События.
11.5 Логика (позиция свободной ячейки, between, tileClick, алгоритм на естественном языке, алгоритм на терминах программы).
11.6 Анимация.

12. Игра «Пятнашки». Завершение.
12.1 Перемещение костяшек (случайные числа, эмуляция нажатия).
12.2 Поздравительное сообщение
12.3 Тестирование