Курс «Веб-дизайн для детей и подростков»

Курс веб-дизайна для детей и подростков на платформе школы Kodland. Это уникальная возможность освоить создание современных сайтов. Учащиеся изучают основы веб-разработки, включая языки HTML, CSS, PHP и JavaScript, работают с графическим редактором Figma. Курс состоит из 32 уроков, в ходе которых дети проходят все этапы разработки веб-сайта: от проектирования макета до его публикации.

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

Основные темы курса «Веб-дизайн для детей и подростков»:

1. Создание макетов в Figma.
2. Верстка сайтов.
3. Работа с базами данных и движками сайтов.

Выбор Kodland для изучения веб-дизайна — это возможность получить интерактивное обучение, поддержку наставников и развитие как технических, так и мягких навыков. Запишитесь на курс и станьте частью сообщества креативных детей и заботливых родителей.

Модуль 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 модуля.

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

• Урок 17: Псевдоклассы и псевдоэлементы. Ребята изучат важные псевдоклассы и псевдоэлементы и разберут реальные кейсы.
• Урок 18: Трансформации. Изучение трансформаций, как сделать интерактив с пользователем и добавить движений.
• Урок 19: Анимации. Свойство animation и как работают анимации в CSS.
• Урок 20: Блочная модель: PRO, добавляем в проект все, что узнали за модуль. Все что нужно знать про блоки, различие margin и padding. На этом уроке ребята дополнят к своему проекту все, что изучили за этот модуль.

Модуль 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 свой проект и улучшим его.

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

• Урок 29: Доработка проекта, alert, prompt, переменные, консоль. Знакомство с JS и доработка проекта по чек-листу.
• Урок 30: Доработка проекта, работа с формами, готовый код на проверку правильности ввода. Добавление бургер меню на JS на сайт и работа над проектом.
• Урок 31: Доработка проекта, бургер меню, карусель, фишки из JS. Завершаем проект, добавляем карусель.
• Урок 32: Представление проектов.

• Формат
  В группе с наставником
  Живые вебинары / Вебинары в записи
  Обучение в ЛК на сайте автора
• Демодоступ
• Количество уроков
  32
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой
• Сопровождение
  Куратором
• Общение с группой
  Форум или чат внутри ЛК
• Техническая поддержка
  В рабочее времяЧат в вкЧат в мессенджереЭлектронная почта