[НТМLAcademy] НТМLи CSS. Профессиональная вёрстка сайтов. 7 сентября — 8 ноября 2020

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени. Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в GitHub Desktop и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, анимацией, ретиновой графикой, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник. Спойлер: Программа курса Неделя 1 Раздел 1 Старт Вводная лекция Познакомимся с участниками и процессом на курсе, рассмотрим устройство веба и ваше место в профессии, подготовим инструменты для работы. Как проходит курс. Обзор личных проектов. Техническое задание и критерии качества. Структура курса. Авторы, кураторы, наставники. Работа с наставником. Защита личного проекта. Кто и как делает сайты. Из чего состоит сайт в интернете: сервер, браузер, вёрстка. Кто делает сайты: дизайн, вёрстка, бэкенд. Ответственность верстальщика: удобство, доступность, перфоманс. Инструменты и процесс. Редакторы и инспекторы графики: Figma, Photoshop. Редакторы кода, браузеры, отладчики. Система контроля версий. Процесс работы над проектом. Раздел 2 Введение в HTML Основы семантичной разметки Проанализируем макет перед вёрсткой, узнаем синтаксис HTML и базовую структуру страницы, посмотрим как работает спецификация и разберём сложные случаи разметки. Создание страниц по макету. Анализ макета. Структура проекта. Синтаксис HTML Парные и одиночные теги. Вложенность и дерево документа. Типы атрибутов. Базовая структура страницы. Метаданные и подключение ресурсов. Контент страницы. Теги для вывода и подключения. Семантика и спецификации. Стандарты и спецификации. Категории тегов. Разбор правил вкладывания. Неочевидные сложности разметки. Альтернативные средства просмотра. Поисковики, скринридеры, режимы чтения. Визуальное против смыслового. Вторая неделя Раздел 3 Введение в CSS Основы современных стилей Разделим макет на блоки, создадим структуру стилей, погрузимся в основы CSS, поработаем с типографикой и подключим шрифты. Устройство и логические части макета. Выделение блоков из макета. Уникальные и повторяющиеся блоки. Создание переменных для цветов. Файлы и структура для блоков. Создание отдельных файлов для блоков. Импорт глобальных и блочных стилей. Подключение стилей на страницу. Погружение в стили для блоков. Разделение контента и интерфейса. Именование классами и по тегам. Селектор, блок правил, свойство-значение. Сложные и простые селекторы. Почему используются классы. Наследование, каскад, специфичность Какие свойства наследуются, какие нет. Чем font-size отличается от background-color. Каскадирование и специфичность. Размеры и центрирование макета. Измерение блоков в Figma. Центрирование макета с помощью значения auto. Шрифты. Использование системных шрифтов. По...