Урок 7.2 · Интерфейсы и сайты с нуля · Модуль 7. Персонаж и движение · По подписке
Цель урока: Научиться располагать персонажа в нужной точке сцены и ставить слои друг на друга.
Нужно знать заранее: Урок 7.1
Объяснение
Зачем это нужно:
Пока персонаж стоит в обычном потоке страницы, он ведёт себя как абзац: следующий блок встаёт под ним, а сдвинуть героя вправо или вниз нечем. На сцене всё иначе: фон, земля и герой лежат друг на друге, и каждый стоит там, где ему сказали.
Как это работает:
Сцена — это обычный блок с position: relative. Он становится «системой координат»: всё, что внутри него позиционировано, отсчитывается от его левого верхнего угла.
.stage { position: relative; width: 320px; height: 200px; }
Персонаж внутри сцены — position: absolute. Тогда он выходит из общего потока и слушается координат:
.hero { position: absolute; left: 24px; bottom: 40px; }
left — сколько пикселей от левого края сцены, bottom — сколько от нижнего. Можно было бы задать top, но для героя, который стоит на земле, удобнее bottom: тогда он «привязан» к земле, а не к небу.
Земля — тоже абсолютный блок внутри сцены:
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: #4ade80; }
left: 0 и right: 0 вместе растягивают блок на всю ширину сцены. Земля выше, чем место героя: 48 против 40. Так ноги оказываются на линии травы, а не висят над ней.
Слои. Если герой должен быть поверх фона, а подсказка — поверх героя, порядок задаёт z-index: чем больше число, тем выше слой. Работает только у позиционированных элементов — то есть у тех, кому задан position.
Компьютер без страха — Файлы, браузер, пароли, мошенники, документы и деньги в интернете простыми словами. Бесплатно и без оплаты.
Если уже случилось — Деньги ушли с карты, пропала симка, взломали аккаунт, потерялись документы — порядок действий по шагам и куда звонить.
Какой компьютер нужен — Чек-лист по уровням: для учёбы ничего покупать не нужно, для своего проекта — 16 ГБ и SSD, для работы — 32 ГБ. Плюс нейросети и устаревание железа.
Без кода: ставить задачу — Как объяснить задачу программисту и принять работу. Кода нет ни строчки.
Профессии и языки — Кто такие программисты, зачем столько языков и что делать после курса.
Потренироваться
Практикум: задачи из жизни — Та же команда урока — на работе, дома и в документах. 63 задачи с проверкой вывода и без регистрации.
Игры-тренажёры — Найти ошибку в чужом коде, прочитать, что делает программа, и увидеть, что случится, если нажать клавишу.
Симулятор: от задания до сдачи — Пройти путь целиком: папка, терминал, файл, сохранение, запуск, проверка по критерию приёмки. Два сценария и две системы.
Мастерская экрана — Проверить цвета и раскладку страницы: контраст, шаблоны, конструктор.
Колесо фортуны — Одна прокрутка в день: скидка на подписку или дни доступа.
Словари и юмор
Словарь программиста — Слова из уроков и кода: парсинг, функция, хеш, компиляция.
Словарь руководителя — Слова из работы простыми словами: скоуп, дедлайн, MVP, бэклог.
Корявые задачи — Юмор: как ставят задачи и что из этого получается. С моралью.
Сайт, оплата и помощь
Родителям — Возраст, время на уроки, безопасность в сообществе, деньги и результат — что важно знать до оплаты.