[НТМL Academy] Старт во фронтенде

Robot · 14 Янв 2023

Чему вы научитесь:

изучите базовые конструкции языков HTML, CSS и JavaScript,
разберётесь с тегами и их параметрами, CSS-свойствами, селекторами и каскадностью,
изучите команды JavaScript, переменные условия, циклы,
попробуете себя в роли фронтендера:
- внесёте правки в вёрстку и скрипты страницы,
- сверстаете с нуля сайт из графического макета,
- напишете с нуля интерактивные компоненты по техническому заданию.

Программа:

Раздел 1. Знакомство с фронтендом
- Что такое HTML? Основные понятия: теги, одиночные и парные теги, атрибуты тегов.
- Что такое CSS? Основные понятия: CSS-свойства и их значения, CSS-правила, селекторы.
- Пробуем себя в роли верстальщика, вносим правки в содержание и оформление существующей веб-страницы.
- Отрабатываем приёмы стилизации по классам и миксование классов.
- Что такое JavaScript? Основные понятия: скрипт, программа, команда, переменная, консоль, методы, события и их обработчики.
- Приёмы для работы с элементами страницы: поиск элементов по селектору, управление списком классов, реагирование на событие, получение и изменение значений атрибутов.
- Пробуем себя в роли фронтендера, оживляем компонент для переключения тем и программируем уведомление в форме.
Раздел 2. Знакомство с HTML и CSS
- Doctype в HTML. Основные теги страницы html, head, body. Теги для описания служебной информации.
- Теги для описания смысловых разделов, навигации.
- Заголовки, параграфы, списки. Вложенные списки.
- Цитаты, фрагменты кода, дата и время.
- Нижний и верхний индекс, акцентирование внимания, важная информация.
- Универсальные теги div и span.
- Ссылки, адреса ссылок. Относительные и абсолютные адреса. Ссылка-якорь.
- Тег img, изображение. Обзор основных форматов. Управление размерами изображений.
- Теги figure и figcaption, демонстративный материал.
- Синтаксис CSS-правил, селекторов, свойств и значений. Обычные и составные свойства.
- Типы значений: абсолютные и относительные.
- Стили по умолчанию, каскад и конфликт свойств.
- Встроенные стили, атрибут style. Встраивание и подключение внешних стилей.
- CSS-свойства для управления текстовыми параметрами: семейство, размер и насыщенность шрифта, высота строки, цвет, курсив.
- Абсолютные и относительные размеры шрифта и высоты строк.
- Горизонтальное и вертикальное выравнивание текста, отступы.
- Управление пробелами и регистром символов, подчёркивание, зачёркивание и другие текстовые эффекты.
Раздел 3. Мастер-класс «Создание семантической разметки по макету»
- Что такое разметка и что такое разметка по макету. Качества хорошей разметки: валидность и семантичность.
- Пошаговый алгоритм создания разметки по макету.
- Разбираем примеры разметки страниц и отдельных компонентов на основе графического макета.
- Практикуемся самостоятельно делать разметку страницы по макету в тренажёре-мастерской.
- Работаем с учебным проектом: создаём разметку страницы.
Раздел 4. Базовые механики стилизации
- Селекторы по тегам, по классам и по id. Селекторы атрибутов.
- Контекстные, соседние и дочерние селекторы.
- Псевдоклассы. Псевдоклассы :nth-child, :hover, :focus, :link, :visited и :active.
- Динамические эффекты с помощью :hover.
- Наследование. Наследуемые и ненаследуемые свойства. Принудительное наследование. «Перекрёстное» наследование.
- Каскадирование. Специфичность селекторов. Расчёт значения специфичности.
- Управление цветом фона и фоновыми изображениями.
- Расположение, повторение и режим прокрутки фоновых изображений.
- Задание нескольких фонов. Эффекты с повторяющимся фоном.
- Использование растровых спрайтов.
Раздел 5. Мастер-класс «Экспорт графики и базовая стилизация по макету»
- Что такое стилизация по макету, какие задачи решаются во время базовой стилизации. Что такое экспорт графики.
- Графический редактором Figma. Интерфейсы редактора, инструменты редактора для экспорта графики и параметров стилизации из макета.
- Использование абсолютных и относительных путей в проекте.
- Пошаговые алгоритмы экспорта графики и выбора формата изображения.
- Примеры экспорта графики и параметров CSS-свойств из графического макета.
Раздел 6. Боксовая модель и позиционирование
- Боксовая модель и поток. Свойство display, управление типом бокса.
- Особенности блочных, строчных и блочно-строчных типов бокса.
- Ширина, высота, рамки, внутренние и внешние отступы боксов. Особенности внешних отступов блочных боксов.
- Стандартный режим расчёта размеров блочных боксов. Управление этим режимом с помощью box-sizing.
- Знакомство с семейством табличных боксов.
- Режимы позиционирования: статичное, относительное, абсолютное и фиксированное.
- Управление координатами позиционированных элементов.
- Точка отсчёта координат. Явная и неявная точка отсчёта.
- Свойство z-index, управление «глубиной» позиционированных элементов.
Раздел 7. Базовые механики построения сеток
- Сетка и макет страницы. Отличия сеток страниц от сеток компонентов (микросеток).
- Основные понятия гридов: грид-шаблон, грид-контейнер и грид-элемент.
- Описание грид-шаблонов, управление размерами грид-областей и отступами между ними.
- Создание ассиметричных грид-шаблонов. Грид-шаблоны с динамическим количеством колонок.
- Распределение грид-элементов по грид-областям, ручное и автоматическое. Режимы автозаполнения грид-контейнера.
- Управление выравниванием грид-элементов.
- Основные понятия флексов: флекс-контейнер, флекс-элемент, оси, флекс-ряды.
- Управление размерами и отступами флекс-элементов. Автоматические внешние отступы.
- Выравнивание флекс-элементов вдоль главной и поперечной осей.
- Многострочный флекс-контейнер, выравнивание флекс-рядов.
- Управление визуальным порядком флекс-элементов.
- Примеры вёрстки типовых сеток страниц и компонентов на флексах и гридах.
Раздел 8. Мастер-класс «Создание сеток страниц по макету с помощью флексбоксов»
- Выделим базовые типы сеток, способы их создания и тонкости, которые надо учитывать.
- Затем научимся комбинировать базовые типы для создания более сложных сеток страницы.
- Рассмотрим приемы для получения размеров, нужных для создания сеток, из редактора Figma.
Раздел 9. Мастер-класс «Вёрстка компонентов интерфейса по макету»
- Завершаем стилизацию страницы.
- Научимся строить сетки отдельных компонентов, стилизовать интерфейсные тексты.
- Разберемся с тонкостями стилизации текстового потока.
- Познакомимся с особенностями создания мелких декоративных элементов.
Раздел 10. Базовые механики «оживления» интерфейсов
- Условия. Булевы значения. Операторы сравнения: больше, меньше, равенство, строгое равенство, неравенство, строгое неравенство.
- Комбинирование условий с помощью операторов «логическое И» и «логическое ИЛИ».
- Проверка наличия класса у элемента с помощью classList.contains.
- Создание элементов с помощью createElement и добавление их на страницу с помощью append.
- Поиск элементов с помощью querySelectorAll, коллекции, доступ к элементам коллекции по индексу.
- Цикл for of. Перебор коллекций с помощью цикла.
- Добавление обработчиков событий внутри цикла.
- Работа с data-атрибутами.
- Обработка события отправки формы.
- Обработчик событий oninput, получение значений из текстовых полей, обработка текста во время ввода.
- Обработчик событий onchange, получение значений из раскрывающихся списков.
- Отличия onchange и oninput.
- Свойство checked. Получение значения чекбокса.
- Обработка событий прокрутки страницы. Работа с координатами прокрутки.
- Управление прокруткой c помощью метода scrollTo, плавная прокрутка.
- Управление стилями элемента с помощью style.
Раздел 11. Мастер-класс «Создание интерактивных компонентов интерфейса»
- Научимся создавать динамические страницы, которые реагируют на действия пользователя.
- Узнаем, как управлять элементами веб-страницы через JavaScript.
- Рассмотрим полезные свойства и методы элементов для работы с содержанием.
- Запрограммируем несколько типовых компонентов.