Скидки на курсы ждут в личном кабинете. Нажмите тут
Поддержка куратора Демо-доступ Домашние задания

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

от Kodland
Веб-дизайн: Создание сайтов
Формат
Онлайн
Уровень
Для новичков
Документ
Сертификат
Программа

Программа будет интересна ученикам средней школы и старших классов. Ребятам расскажут о тегах в 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
Базы данных и движки сайтов
Верстка сайтов
О школе
Kodland
12 курсов
Kodland

Ученики онлайн-школы Kodland осваивают востребованные цифровые навыки, которые помогают разрабатывать игры, мультфильмы и сайты. Образовательные программы по веб-дизайну, гейм-дизайну, программированию и 3D-моделированию подходят детям разных возрастов. Заниматься в Kodland можно с 6 лет. Также в ходе обучения ребята развивают креативное, критическое и пространственное мышление, учатся быть ответственными и работать в команде.

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

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

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

Оставить отзыв
Оставьте свой отзыв
Так вы сделаете рейтинг школ более точным и поможете другим выбрать хороший курс

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