Веб-дизайн: Создание сайтов

Создание полноценных сайтов и воплощение всех своих идей в едином Web-проекте
HTML
CSS
Создание сайтов
Программирование
ВОЗРАСТ
13+ лет
ТРЕБОВАНИЯ
Пользователь компьютера
УРОВЕНЬ
Базовый
ПРОДОЛЖИТЕЛЬНОСТЬ
32 урока
Записаться на курс

О курсе

Web Design — это погружение ребенка в мир Web-разработки, ребята изучат языки разметки и стилей, научатся связывать сайт с базой данных, создадут макеты и сделают свой полноценный сайт

ТЕМЫ
  • Создание макетов в Figma
  • Базы данных и движки сайтов
  • Верстка сайтов

Пример проекта

1 / 5
Результаты курса
Изучение HTML для создания разметки сайта
Результаты курса
Изучение CSS для стилизации
Результаты курса
Работа с анимацией на сайтах
Результаты курса
Создание базы данных для работы с пользователем
Результаты курса
Изучение и работа с PHP и JavaScript
Больше проектов в HUB

Ксения Комарова, 13 лет, изучает Веб-дизайн

Родители часто спрашивают про 

Веб-дизайн: Создание сайтов

Программа курса

Модуль 1. Введение в HTML

Урок 1: Введение в HTML. Ребята узнают, что такое HTML страница, и попробуют создать свою первую верстку, используя простейшие теги <p><img><h1>, а также поймут, что такое теги верхнего уровня

Урок 2: Мультимедиа и встраивание. Ребята научатся использовать теги мультимедии: <img>, <video>, <audio>

Урок 3: Фреймы и разметка страницы, изучение тега <iframe> и встраивание элементов на свой сайт, а также структура сайт

Урок 4: Знакомство с CSS. Ребята изучат основы CSS и применят свои первые стили на страницу

За первый модуль ученики создадут веб-страницы с интеграцией мультимедиа-контента, изучат основы стилизации элементов.

Модуль 2. Основы CSS

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

Урок 6: Блочная модель CSS. Блочная и строчная модель элементов, что такое display и все свойства блоков

Урок 7: Ссылки и свойства фона. Тег <a>, и внутренние, и внешние ссылки, изучение настройки фона и работа со стилями

Урок 8: Позиционирование. Поток документа и позиции элементов, свойство position и фиксация

Во втором модуле студенты освоят фундаментально важные темы для достижения профессионального оформления сайта, создадут первые веб-страницы в современном дизайне

Модуль 3. Прототипирование и основы UX / UI

Урок 9: Введение в дизайн. Что такое UХ- и UI-дизайн, в чем их отличие

Урок 10: Анализ поисковых запросов. Изучение поисковиков и работы интернета, как поднять свой сайт в поиске и что на это влияет

Урок 11: Макет итогового проекта: знакомство с Figama, основы макетирования

Урок 12: Flexbox. Ребята изучат важнейшее свойство в CSS – флекс-сетки – и как их использовать

Ученики изучат основы разработки дизайна сайта, анализа целевой аудитории, подбора востребованной тематики для собственных проектов. В конце модуля разработают дизайн своего будущего проекта, опираясь на современные дизайнерские концепции и собственные исследования целевой аудитории

Модуль 4. Верстка макета

Урок 13: Верстка сайта по макету, работа с VSC. Знакомство с редактором и работа над своим первым проектом

Урок 14: Завершение проекта. Доработка и завершение проекта

Урок 15: Публикация проекта. Что такое GitHub и как опубликовать свой сайт? Подключение Яндекс.Метрики

Урок 16: Презентация проектов. Подводим небольшой итог, что мы сделали за 4 модуля

Студенты создадут свой первый сайт, опубликуют его в интернете, подключат обратную связь от пользователей, сделают доступным в поисковых системах. Для детей старше 14 лет с согласия родителей доступно подключение приема платежей на сайте

Модуль 5. Углубленный CSS

Урок 17: Псевдоклассы и псевдоэлементы. Ребята изучат важные псевдоклассы и псевдоэлементы и разберут реальные кейсы

Урок 18: Трансформации. Изучение трансформаций, как сделать интерактив с пользователем и добавить движений

Урок 19: Анимации. Свойство animation и как работают анимации в CSS

Урок 20: Блочная модель: PRO, добавляем в проект все, что узнали за модуль. Все что нужно знать про блоки, различие margin и padding. На этом уроке ребята дополнят к своему проекту все, что изучили за этот модуль

Студенты углубятся в изучение CSS и улучшат свой проект

Модуль 6. Адаптивная верстка, сетки и формы

Урок 21: Grid-layout. Второе важное свойство CSS – грид-сетки. В чем отличие от флексов? Где использовать и как применять?

Урок 22: Переменные в CSS. Переменная root, которая изменит наш сайт до неузнаваемости

Урок 23: Адаптивная и отзывчивая верстка. Как сделать сайт адаптивным? В чем отличие от отзывчивости и что лучше использовать?

Урок 24: Взаимодействие с информацией пользователя. Формы, как отправить информацию о пользователе на сервер

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

Модуль 7. Движки сайтов и основы PHP

Урок 25: Локальный сервер и знакомство с PHP. Изучение PHP для работы с сайтом, взаимодействие с HTML

Урок 26: Углубление в PHP. Изучение циклов и массивов, как создать свой php сайт

Урок 27: Wordpress. Движки сайтов и Wordpress, как создать сайт из блоков PHP

Урок 28: Движок сайта и натяжка своего проекта на движок. Положим на Wordpress свой проект и улучшим его

Ученики изучат хостинги и php, а также перенесли свой проект на движок

Модуль 8. Подготовка итогового проекта

Урок 29: Доработка проекта, alert, prompt, переменные, консоль. Знакомство с JS и доработка проекта по чек-листу

Урок 30: Доработка проекта, работа с формами, готовый код на проверку правильности ввода. Добавление бургер меню на JS на сайт и работа над проектом

Урок 31: Доработка проекта, бургер меню, карусель, фишки из JS. Завершаем проект, добавляем карусель

Урок 32: Представление проектов

За все модули ребята дорабатывают свой проект, что позволяет им создать хороший продукт

Программа курса

Онлайн-курс Scratch состоит из 6 модулей от 4 до 7 уроков  в каждом.

Веб-дизайн: Создание сайтов

Первые проекты

Ученики поймут, как программировать движение спрайтов с помощью координат, условий и циклов в Scratch. Создадут свои проекты в школе волшебства Кодвартс.

Урок 1: Основы Scratch

Урок 2: Движения спрайтов

Урок 3: Магический графический редактор

Урок 4: Кто такие баги?

Урок 5: Коддич — настоящее соревнование волшебников-программистов

Веб-дизайн: Создание сайтов

Анимация и звуки в Кодвардсе

Ученики познакомятся с событиями в Scratch, запустят скрипты последовательно и параллельно. Узнают о принципах анимации и как менять костюмы спрайтам. Напишут программу для уникального музыкального приложения.

Урок 1: Скретч-события

Урок 2: Принципы анимации

Урок 3: Работаем с фонами и музыкой

Урок 4: Создание магической музыкальной группы

Веб-дизайн: Создание сайтов

Магия разработки игр в Scratch

Ученики выяснят, какие игровые жанры самые распространенные. Запрограммируют полноценную игру, разработанную в соответствии с правилами выбранного жанра.

Урок 1: Какие бывают игры?

Урок 2: Собственные блоки: зачем нужны и как создавать

Урок 3: Жанр приключение: написание сценария игры

Урок 4: Что такое RPG?

Урок 5: Учимся придумывать персонажей

Урок 6: Дебаггинг экшн-игр

Урок 7: Коддич

Веб-дизайн: Создание сайтов

Роль сторителлинга в процессе разработки игр

Ученики научатся придумывать авторские истории и адаптировать их в игры на скретч. Начнут тестировать свои проекты и следить за стабильностью программ. Создадут сюжетную игру.

Урок 1: Гейм-техники — ингредиенты отличной игры

Урок 2: Игры для начинающих

Урок 3: Взаимодействия в играх

Урок 4: Счет в игре: учимся работать с переменными

Урок 5: Бонус-уровни. Учимся усложнять игры

Урок 6: Ищем баги

Урок 7: Коддич: финал

Веб-дизайн: Создание сайтов

Продвинутый Scratch

Ученики познакомятся с такими дополнениями в Scratch, как «Перо», «Музыка», «Видео распознавание» и «Текст в речь». Узнают, как их применять на практике. Воплотят в жизнь свои Scratch-проекты с удивительными возможностями.

Урок 1: Дополнения и расширения

Урок 2: Учимся распознавать видео

Урок 3: Создание клонов спрайта

Урок 4: Дизайн программы

Урок 5: И снова отладка

Веб-дизайн: Создание сайтов

Хакатон. Финальные проекты

Ученики поймут, как выстраивать этапы реализации проекта, напишут сюжет игры, запрограммируют свой уникальный проект, протестируют его и расскажут об его особенностях.

Урок 1: Как планирование сделает твой проект самым-самым?

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

Урок 3: Зачем нужны тестирование и обратная связь?

Урок 4: Секреты успешной демонстрации

Образовательный процесс, интересный ребёнку и понятный вам

Интерактивная образовательная платформа

Платформа Kodland разработана для обучения детей востребованным цифровым навыкам. Все задания интерактивные. Когда ученик создаёт проект, она автоматически дает подсказки и хвалит за успехи!

Поддержка наставника

Преподаватели программы формируют для детей доверительную атмосферу, вовлекают и поддерживают самых юных студентов. Поэтому ваш ребёнок не останется один на один с непонятной темой.

ХАБ

Хаб ― это среда, где юный программист может реализовывать свои проекты и делать их публичными. Площадка позволяет изучать и обсуждать работы других. Читайте подробнее на сайте: https://hub.kodland.org/ru

Удобный график для родителей

Онлайн-формат позволит родителям сэкономить время на дороге до места проведения занятий.

Прокачка софт-скиллов

Учёба в Kodland улучшает как технические навыки, так и «мягкие». Мы обучаем детей Scratch для развития их креативного, пространственного и критического мышления, способности работать в команде и цифровой грамотности.

Бесплатный пробный урок

Мы знаем, что сегодня цифровой мир ― это огромное количество направлений. Детям, порой, сложно самостоятельно определить, что бы они хотели изучить из сферы IT. Чтобы им было проще это сделать, мы проводим бесплатный пробный урок.

1

Знакомимся со студентом

Наши преподаватели начинают вводные занятия с того, что устанавливают связь с детьми и узнают об их интересах.

2

Выбираем направление

Как только преподаватель узнает больше об учащемся и его текущих навыках работы с компьютером, необходимо выяснить, какое направление подойдет лучше всего!

3

Делаем практическое задание

В последние 20 минут пробного занятия ребёнок начнет создавать свой проект: игру, мультфильм или рисунок!
Teachers have a tremendous influence on the results of the company's development, so we are looking not just for good programmers, but also for those who know how to teach children.
Alexander Nosulich
Founder & CEO
Попробовать