RU
EN

We use cookies (and other similar technologies) to improve your experience on our site. By using this website you agree to our Cookie Policy.You can change your preferences at any time.

для детей 12—15 лет
Начальный уровень

Создание сайтов

Научимся создавать сайты, работать с изображениями, элементами дизайна и графики. Совместим интерес к творчеству с программированием.

Бесплатный урок
bg course
Что за курс
Курс поможет ребятам получить навыки в сфере web-дизайна и верстки сайтов. Они смогут создавать сайты средней сложности: от идеи и структуры до реализации и размещения в сети.
bg window

Чему научатся дети

На курсе «Создание сайтов» мы научим ребят

Создавать макеты сайта с помощью специальных инструментов
Создавать HTML документы
Работать с CSS стилями
Применять базовые элементы JavaScript
Дисциплине, проектной работе в команде, выступлениям
В конце курса ребята будут презентовать сайт, полностью сделанный ими. На нём они смогут продемонстрировать свои навыки.
bg vector

План обучения и проекты

1 модуль

Введение в HTML

Введение в язык HTML. Понимаем внутреннюю организацию веб-страницы

1) Введение в язык HTML. Понимаем внутреннюю организацию веб-страницы

2) Оформляем текст средствами HTML

3) Знакомимся с секционными элементами HTML5

4) Изучаем базовый синтаксис CSS, селектор тега и основные правила для оформления текста

Результат: дети понимают роль CSS в веб-разработке, разделение ролей между HTML и CSS, умеют пользоваться правилами для оформления текста и цвета фона; понимают модель RGB, знают типы шрифтов и умеют подключать внешние шрифты из Google Fonts

+
-
2 модуль

Основы CSS

Селекторы класса и идентификатора. Учимся применять CSS-правила точечно к конкретным элементам

1. Селекторы класса и идентификатора. Учимся применять CSS-правила точечно к конкретным элементам

2. Изучаем блочную модель элемента и рассматриваем ее составляющие

3. Учимся работать с расширенными настройками фона. Создаем простой эффект параллакс

4. Позиционирование элементов страницы

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

+
-
3 модуль

Прототипирование и основы UX / UI

UX/UI. Введение в дизайн. Понимаем, что такое UX дизайн и как его нужно разрабатывать.

1. UX/UI. Введение в дизайн. Понимаем, что такое UX дизайн и как его нужно разрабатывать.

2. Основы прототипирования в Figma. Учимся использовать его базовые инструменты.

3. Знакомство с законами UI, основанных на психологии человека. 

4. Разработка первого профессионального макета

Результат: дети учатся создавать структуру сайта, правильно организовывать пространство для макетирования, создавать модульную и колоночную сетку для экранов макетирования; ребята самостоятельно работают над макетом своей первой главной страницы.

+
-
4 модуль

Верстка макета

Изучаем Flexbox и Grid позиционирование на основе блочной и модульной сетки.

1. Изучаем Flexbox и Grid позиционирование на основе блочной и модульной сетки.

2. Знакомимся с float, fixed, sticky и мультиколоночной версткой

3. Применяем фреймворки для быстрой и удобной верстки. Изучаем самый популярный фреймворк для верстки макетов Bootstrap.

4. Верстка первого проекта

Результат: готовый проект на основе созданного в третьем модуле макета на выбранную тему. Ребята презентуют полученный результат и выкладывают в HUB.

+
-
5 модуль

Углубленный CSS

Знакомимся с селекторами в CSS

1. Знакомимся с селекторами в CSS

2. Стилизация блоков в CSS. Осваиваем основные команды CSS для стилизации блоков.

3. Изучаем основные команды, отвечающие за эффекты в оформлении элементов в CSS.

4. Правила организации вашего CSS. Практическая работа

Результат: Дети научатся правильно писать CSS-документы, комментировать блоки. Ребята организуют работу со своим проектом. 

+
-
6 модуль

Адаптивная верстка и анимация в CSS

Принципы адаптивной верстки, медиазапросы. Адаптация сайта под разные экраны.

1. Принципы адаптивной верстки, медиазапросы. Адаптация сайта под разные экраны.

2. Анимация в CSS. Создание анимированных элементов. 

3. Препроцессор SASS, что это такое и зачем он нужен. 

4. Формы в языке HTML. Знакомство с тегом Form и элементами формы.

Результат: дети научатся использовать свойства CSS для «резиновой» верстки, создадут несколько анимированных элементов и напишут CSS используя синтаксис SСSS.

+
-
7 модуль

Введение в JavaScript

Введение в JavaScript. Знакомство с библиотекой jQuery

1. Введение в JavaScript. Знакомство с библиотекой jQuery

2. Методы и условия в jQuery. Учимся использовать методы и условия в jQuery.

3. Эффекты анимации и события jQuery

4. Массивы и циклы в jQuery. Используем циклы для решения некоторых задач.

Результат: дети научатся пользоваться циклами и напишут программы, позволяющие обрабатывать информацию введенную пользователем.

+
-
Финал

Продвинутые инструменты JS и презентация проекта

jQuery UI. Библиотека с типовыми решениями для Web-разработчиков

1. jQuery UI. Библиотека с типовыми решениями для Web-разработчиков

2. Drag and Drop. Создаем мини-игру

3. Встраиваем аналитику и другие полезные сервисы на сайт

4. Финальное занятие. Разбираем тем, которые мы изучили, отвечаем на вопросы детей, смотрим их проектные работы.

Результат: довольные дети, готовые собственные проекты

+
-

Работы учеников

Мы уверены, что учитьcя на практике эффективнее. Поэтому у нас нет скучных лекций, и на занятиях дети создают реальные игры и программы.

window btn
Марат
Ремушев
13 лет
Flappy bird
PYTHON

Flappy Bird — мой первый игровой проект на PyGame! Нажимайте «пробел» и прыгайте!

Елена
Дорошко
12 лет
Сайт про животных
WEB

Собрала 17 фактов о животных на сайте. Нажимайте Пуск и читайте :)

Иван
Баюшкин
14 лет
Fishing Simulator
PYTHON

Игра где вы сможете побыть рыбаком на причале или на лодке. На причале есть 5 видов рыб

Артем
Гончаров
11 лет
Майнкрафт
SCRATCH

Привет! ты попал в Minecraft 2D

window btn
window bg
Хотите посмотреть больше работ на нашей обучающей платформе?
Смотреть ещё

Преподаватели

window btn
Преподаватель Python

Александр Хархота

Навыки
Python
WEB
Chat Bot
Образование
Сибирский государственный университет телекоммуникаций и информатики

Достижения
Преподаватель федерального проекта Кампус-2019 и Кампус-2020; Автор программы по созданию чат-ботов и искусственного интеллекта для детей
window btn
Преподаватель WEB Design

Панфилов Алексей

Навыки
Python
Robotics
WEB
Образование
Петрозаводский Государственный Университет. Физический факультет, автоматизированные системы обработки информации и управления.
Достижения
Организатор и главный судья международных робототехнических соревнований Roboskills, член национального методического комитета Innopolis Open по направлению Future Engineers
window btn
Преподаватель unity

Константин Кламбоцкий

Навыки
Python
Unity
Computer Science
Образование
Механико-математический факультет Новосибирского государственного университета

Достижения
Второе место по России в конкурсе "разработка мобильных приложений в дополненной реальности" от Epson
<>

Что должен уметь ребёнок

Чтобы приступить к занятиям ученику должен иметь базовые навыки:

Владеть мышкой
Уметь читать и писать на русском
Владеть базовыми знаниями английского
Иметь минимальный опыт взаимодействия с компьютером
bg window
photo bg window

Как проходят уроки

1
Повторяем тему прошлого урока и разбираем домашнее задание.
2
Разбираем новую тему и группа под контролем преподавателя решает первые задачи.
3
Ученики самостоятельно решают усложненные задачи и в конце часто идут игровые задания.
4
В конце урока преподаватель с группой подводят итоги, повторяют все что успели пройти и готовятся к следующему уроку.
32
урока в курсе
90
минут урок идёт
weekend
12
человек в группе

Запишитесь на пробный урок

За 40 минут пробного урока ребёнок и родители смогут понять: подойдут ли занятия программированием, а методист поможет подобрать направление подходящее для студента.






Спасибо за вашу заявку
Наши менеджеры обработают её и свяжутся с вами в ближайшее время для уточнения деталей. Вы сможете задать им все интересующие вопросы и назначить удобное для вас время занятия.
Давайте узнаем друг друга получше! Почитать о курсах и полезных советах из сферы IT можно в наших социальных сетях
Oops! Something went wrong while submitting the form.