На изучение направления на базовом уровне без дополнительных тем потребуется
от 86 до 106 часов.
На углубленном уровне с дополнительными темами и собственными проектами -
от 110 до 130 часов.
1. Введение в HTML (2-4 часа)Учащиеся в этом разделе знакомятся с базовыми принципами и правилами работы с языком разметки HTML.
- Выбор и установка текстового редактора.
- Создание первого HTML-документа и его запуск в браузере.
- Изучение тегов для форматирования текста на веб-страницах.
- Основы редактирования текста в текстовом редакторе.
- Синтаксис и распространённые ошибки.
- Первый проект с использованием HTML.
К концу прохождения модуля ученик изучит основы работы с текстовым редактором, познакомится с тегами для форматирования текста, научится создавать нумерованные и маркированные списки на страницах. Итоговый проект включает в себя практические задания, основанные на ранее полученных знаниях.
2. Ссылки и изображения (8-10 часов)Учащиеся знакомятся с особенностями добавления контента на свои веб-страницы, а также изучают особые приёмы работы со ссылками и изображениями.
- Способы добавления ссылок и изображений на веб-страницу.
- Практические задания на использование ссылок и изображений на веб-страницах.
- Дополнительные возможности при работе со ссылками.
- Создание нескольких проектов по теме для закрепления полученных знаний.
- Дополнительные возможности редактирования изображений для Windows и MacOS.
Наши курсы по созданию сайтов для детей завешают этот модуль двумя созданными сайтами "Электронная газета" и "Профиль в социальной сети". Также в модуле ученику предлагается продолжить выполнение собственного проекта на основе полученных знаний. Помимо выполнения проектов ученик получит знания в важной теме "Ссылки и изображения", которая необходима для создания навигации и красочного контента на страницах, а также потренирует свои навыки на практических заданиях.
3. Таблицы (4-6 часов)Учащиеся знакомятся со способами добавления таблиц на веб-страницы, а также оттачивают свои навыки на практических заданиях.
- Основы работы с таблицами в HTML.
- Группировка ячеек таблицы.
- Упражнения для закрепления пройденного теоретического материала.
В результате изучения модуля "Таблицы" ученик научится добавлять и редактировать таблицы на веб-страницах. Также учащемуся будет продемонстрирован метод верстки веб-страницы с помощью таблицы. Итоговым проектом является набор практических заданий, основанный на ранее полученных знаниях. Ученик также предложено продолжить выполнение своего собственного проекта.
4. Основы CSS (12-14 часов)Учащиеся знакомятся с языком для создания стилей CSS и учатся работать с его базовыми понятиями. В этом разделе ученик получает доступ к справочникам по основным CSS свойствам, а также создаёт такие глобальные проекты как:"Сайт кофейни", "Сайт компьютерных игр".
- Знакомство с языком стилей CSS.
- Способы подключения CSS к HTML и их взаимодействие.
- CSS свойства для форматирования текста.
- Основы блочной вёрстки веб-страниц.
- Знакомство с селекторами в CSS.
- Работа со шрифтами.
- Применение полученных знаний при выполнении заданий "Проекты по теме".
По итогам изучения модуля обучающийся получит навыки работы с языком стилей CSS. Данный модуль обладает большим количеством теоретического материала и практических заданий для отработки полученных знаний. На протяжении всего модуля ученик выполняет не только типовые задания, но и полноценные проекты. Некоторые из них являются логически законченными сайтами, например, итоговый проект "Сайт кофейни".
5. Формы (8-10 часов)Учащиеся знакомятся с таким понятием как "Форма на веб-странице". Учатся создавать поля для ввода данных, различные кнопки, "чекбоксы". Данные возможности языка HTML позволяют добавлять на веб-страницы поля для входа в аккаунт или регистрации.
- Знакомство с формами.
- Текстовые поля, выпадающие списки, важные атрибуты.
- Стилизация форм с помощью CSS.
- Практические задания на добавление форм.
- Загрузка сайта на GitHub.
В результате изучения модуля ученик овладеет навыками добавления элементов форм на веб-страницы. А также научится создавать полноценные формы регистрации и входа на страницу.
На этом этапе ученик может осуществить переход на JavaScript, если он не нуждается в изучении дополнительных особенностей языков HTML и CSS. Для этого необходимо выполнить тест.6. Продвинутый CSS (12-14 часов)Учащиеся знакомятся с более сложными приёмами работы с языком CSS и изучают современные продвинутые способы стилизации веб-страниц. На этом этапе ученик создаёт большое количество как собственных проектов, так и проектов по заданному шаблону.
- Позиционирование элементов.
- Резиновый фон и способ его создания.
- Блочная верстка макета страницы.
- Сложные селекторы в CSS.
- Псевдоэлементы и их применение.
- Правильное использование цветов при оформлении сайтов.
- CSS переменные.
- Медиазапросы.
- Особенности создания горизонтального меню.
- Создание галереи на CSS.
- Разбор и исправление наиболее популярных ошибок.
По итогам изучения данного модуля учащийся получит знания о более сложных и современных приемах языка CSS, научится создавать такие механизмы как "Резиновый фон", "Горизонтальное меню" и "Галерея на CSS". Данный модуль расширяет понятие о том, насколько важен и какими возможностями обладает язык CSS.
7. Анимация (4-8 часов)Учащиеся знакомятся с основными принципами создания анимации на веб-страницах. Также выполняются проекты по анимации изображений и текста на сайтах.
- Основные понятия при работе с анимацией в CSS.
- Анимация текста.
- Анимация картинки с помощью псевдоэлементов.
- Изучение CSS-переменных.
- Проект Спиннер Pacman.
В результате изучения данного модуля ученик овладеет базовыми и продвинутыми навыками создания анимации на веб-страницах, а также закрепит свои знания на практических проектах.
8. HTML5 (8-10 часов)Учащиеся знакомятся с новыми возможности пятой версии HTML, а также учатся применять новые теги на веб-страницах с помощью практических заданий и проектов по теме.
- Новые теги в HTML5.
- Практические задания на применение тегов HTML5.
- Проект по теме для закрепления полученных знаний.
- Разбор и исправление наиболее популярных ошибок.
В результате изучения модуля ученик познакомится с новыми тегами, используемыми в пятой версии языка HTML. Для закрепления полученных знаний используется большое количество как практических заданий, так и заданий по построению полноценных сайтов.
9. Флексбоксы (10-12 часов)Данный блок посвящен технологии построения макетов для веб-страниц - Flexbox. Учащиеся изучают основы работы этой технологии, создают большое количество макетов и сайтов на основе Flexbox.
- Как работает Flexbox.
- Справочники и теоретический материал.
- Практические задания для закрепления полученных знаний.
- Анимированная фотогалерея.
- Создание адаптивных сайтов.
- Проекты по теме для создания портфолио и закрепления полученных знаний.
- Разбор и исправление наиболее популярных ошибок.
После изучения данного модуля ученик будет готов к построению макетов сайтов с помощью технологии Flexbox, которая позволяет задавать гибкое позиционирование для элементов на странице. Также на протяжении всего модуля ученик будет создавать большое количество проектов и полноценных сайтов.
10. Гриды(Grid System) (8-10 часов)Учащиеся знакомятся с принципами построения макетов сайтов с помощью системы гридов.
- Введение в гриды.
- Теоретический материал по основам работы с Grid System.
- Создание адаптивных сайтов с помощью Grid System.
- Практические задания для закрепления полученных знаний.
- Проекты по теме для создания портфолио.
- Разбор и исправление наиболее популярных ошибок при работе с Grid System.
В результате изучения модуля ученик получит знания в области создания макетов веб-страниц с использованием Grid System. Данная технология является одной из самых популярных при построении макетов сайтов. Для закрепления полученных знаний используются как обычные практические задания, так и задания, основанные на построении полноценных сайтов.
11. Bootstrap (4-6 часов)Учащиеся знакомятся с библиотекой стилей Bootstrap и используют эти знания для построения стилей для сайтов.
- Знакомство с Bootstrap.
- Bootstrap и Grid System.
- Практическое задание по построению сайта с помощью Bootstrap.
По итогам изучения модуля ученик научится работать со сторонней библиотекой Bootstrap, которая позволяет добавлять готовые элементы на веб-страницы и создавать типовые стили для них.