Курс: "IT гений | Программирование для детей от 11-17 лет"

● Основы веб дизайна (теория) 
Изучите основы дизайна интерфейса, такие как принципы дизайна, типографика и шаблоны дизайна, чтобы создавать функциональные макеты.
● Figma с нуля
- Освоите инструменты для проектирования, прототипирования, анимации и верстки интерфейсов.
- Научитесь анализировать сайты с точки зрения улучшения дизайна и увеличения конверсии.
- Научитесь создавать различные интерфейсы.
● Знакомство с Figma; Инструменты Figma 
Разберётесь в интерфейсе и базовых настройках программы. Научитесь использовать геометрические фигуры, слои и текстовые поля. Соберёте свой первый прототип.
Узнаете, что такое фреймы и чем они отличаются от слоёв. Научитесь рисовать простые фигуры, добавлять цвет, эффекты и текст. Познакомитесь с основами прототипирования.
● Иконки, иллюстрации и картинки; 
Узнаете, как создавать собственные иконки и обрабатывать изображения, используя внутренние инструменты Figma. Сможете делать дизайн-макеты с нуля, не используя сторонние редакторы. 

● Вводный урок. HTML, CSS, JS 
Скачивание среды разработки. Знакомство с VS code. Тэги html, head, meta, title, body. Сохранение файла, его местоположение. Открытие файла HTML. Сохранение файла, скачивание файла, отправление файла. Горячие клавиши. Скоропечатание.
● Заголовки и абзацы. Картинка, как сохранить ссылку на картинку. Изменение размера картинки. Списки. Маркированный и пронумерованный список. Собрать вместе все пройденные тэги в один сайт на пройденную тематику.
● Выделение важной и дополнительной информации(курсив, жирный в двух вариантах). Ссылки. Картинки-ссылки. Создание цитатника. Таблицы. Название таблицы, добавление границ у таблицы. Строка таблицы. Ячейки-заголовки.  

Основы работы с языком CSS. Селектор. Изменение цвета. Выравнивание текста(Right, Left, Center). Логическое выделение текста, Размер шрифта, Тип шрифта. Межстрочный интервал, Красная строка текста. Свойство-сокращение font.

● Классы элементов. Тег span. Тег div для группировки тегов. Выбор элемента по уникальному id на CSS, Использование id на CSS. Выбор элемента по нескольким классам на CSS, Тег с заданным классом, Элемент с несколькими классами
● Родственные связи тегов, Наследование CSS свойств, Группировка селекторов, Селектор потомков, Дочерний селектор. Несколько селекторов слитно. 

Ширина и высота элементов, изменение фона. Фоновая картинка. Границы. Границы для разных сторон. Закругление границ и фона, Скругление для разных углов, Скругления в процентах.

Внешний отступ margin. Отступы margin для разных сторон. Несколько значений в margin. Внутренний отступ padding. Отступы padding для разных сторон. Несколько значений в padding.

Расширение элементов. Блочные элементы. Строчные элементы. Свойство display. Строчно-блочные элементы. Выравнивание блочных, строчных и блочно-строчных элементов. Абсолютное позиционирование. Относительное позиционирование. Абсолютное относительно родителя. Абсолютное относительно абсолюта. Абсолютное позиционирование относительно координат. Центрирование через absolute. Отрицательные значения absolute. Фиксированное позиционирование. Наложение элементов по оси Z

● Флекс элементы. Выравнивание флекс элементов. Размещение в ряд и в колонку.
● Главная и поперечная оси в флекс блоках. Выравнивание по главной оси. Выравнивание по поперечной оси. Значение center, stretch и свойства align-items. Выравнивание отдельного элемента. Порядок flex-блоков.

hover, focus, nth-child(), first-child(), last-child().

● Структурные блоки сайта на HTML. Специальные теги для элементов макета сайта. Создание меню на CSS. Простые одноколоночные макеты сайтов.
● Схема макетов с несколькими врапперами. Схема двухколоночного макета сайта. Схема трехколоночного макета сайта.
● 2 проекта: + адаптивная верстка
● 1-проект хороший лендинг страница с учителем
● 1-проект хороший лендинг страница самостоятельно