3 000 курсов ждут вас в нашем каталоге. Выбирайте лучшее!

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

Благодаря курсу ребёнок научится создавать макеты в Figma и верстать сайты, узнает, как работать с базами данных и движками сайтов.
29 655 ₽ за курс
стоимость обучения
Уровень сложности
для новичков
Демо доступ
да
Формат обучения
онлайн
Домашние задания
да
Обратная связь
да
Документ по окончании
сертификат

Программа обучения

  • Основное
  • Содержание программы

Программа будет интересна ученикам средней школы и старших классов. Ребятам расскажут о тегах в HTML, селекторах CSS и о том, как использовать их при вёрстке страницы. Также преподаватель объяснит, как устроен PHP и как работают движки сайтов.

Обучение состоит из 8 тематических блоков и 32 уроков. Все занятия проходят на платформе школы.

Модуль 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: Представление проектов

Чему научат

галочка
Создание макетов в Figma
галочка
Базы данных и движки сайтов
галочка
Верстка сайтов

Преимущества курса

Творческий проект

Информация носит ознакомительный характер и может отличаться от указанной на сайтах школ-партнёров. Актуальную стоимость и описание программ вы можете узнать на сайте школы.