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

[Аноним]

Ссылка на картинку

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

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

Программа:

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