Зачем программировать в паре

В парном программировании один человек пишет код (водитель), второй смотрит и подсказывает (штурман). Роли можно менять. Так меньше ошибок «по невнимательности», идеи проверяются сразу, а знания передаются между участниками без долгих лекций.

Плюсы: быстрее находите баги, лучше понимаете чужой код, учитесь формулировать мысли и договариваться. В удалённой работе программистом умение работать в паре (через экран, через код-ревью и обсуждение в GitHub) очень ценится - задачи часто делают в ветках и объединяют через Pull Request.

Почему важно уметь работать в GitHub

Большинство компаний хранят код в Git (часто на GitHub или аналогах). Удалённые разработчики создают ветки, пушат изменения, открывают Pull Request и проходят код-ревью. Без умения работать в репозитории, ветках и PR попасть в команду сложно.

Сегодня вы создадите общий репозиторий, поработаете в разных ветках и смёржите результат - это минимальный набор, который пригодится на собеседованиях и в реальных проектах.

Клавиатура пианино: макет

В первой части занятия вы вместе верстаете клавиатуру пианино по макету. Используйте уже пройденное: flexbox для ряда белых клавиш и позиционирование (relative/absolute) для чёрных клавиш поверх белых.

Белые клавиши - одинаковой ширины, в один ряд. Чёрные - уже и короче, расположены над стыками белых по классическому рисунку: группа из двух, пропуск, группа из трёх, пропуск, группа из двух и т.д.

Макет клавиатуры пианино для вёрстки

Как сверстать клавиатуру по шагам

Договоритесь, кто ведёт набор (водитель), кто подсказывает (штурман). Можно меняться каждые 5–10 минут.

• Создайте контейнер с фиксированной шириной (или max-width) и тонкой рамкой - «корпус» клавиатуры.
• Внутри - блок для белых клавиш: display: flex, без переноса. Каждая белая клавиша - один flex-элемент с одинаковой flex: 1 (или равной шириной), высота одинаковая, разделители - границы или тонкие div.
• Контейнер для белых клавиш сделайте position: relative. Чёрные клавиши - дочерние элементы с position: absolute, размещайте их по left (в процентах или calc) над нужными стыками, сверху отступ, ширина меньше белой.
• Чёрных клавиш в одной октаве: 2 + 3 + 2 (и при необходимости ещё одна справа). Центрируйте каждую чёрную клавишу над стыком двух белых.

Структура HTML

Один из вариантов: обёртка .piano, внутри .piano-whites с несколькими .key-white, затем внутри той же обёртки (или внутри .piano-whites с position: relative) блоки .key-black с абсолютным позиционированием. У каждой чёрной клавиши задайте left так, чтобы она оказалась по центру между двумя белыми - например, для первой чёрной между 1-й и 2-й белой можно взять left примерно 8–10% от ширины контейнера (зависит от количества белых).

После того как сделаете вёрстку, можно загрузить index.html в блоке практики и проверить по критериям (наличие контейнера, белых клавиш во flex, чёрных с absolute).

Что такое Git и системы управления версиями

Система управления версиями (VCS) хранит историю изменений файлов: кто, когда и что поменял. Можно откатиться к любой версии, сравнить изменения, работать над разными задачами в параллельных ветках и объединять результат.

Git - распределённая VCS: у каждого разработчика есть полная копия истории. Коммиты сохраняют снимок изменений, ветки позволяют вести несколько линий разработки (например feature/header и feature/gallery), а слияние (merge) объединяет их. GitHub - хостинг репозиториев с веб-интерфейсом, Pull Request и код-ревью.

Как вы будете работать во второй части

Создаёте один репозиторий на GitHub. Для совместной работы владелец репозитория отправляет приглашение соавторам (в GitHub: Settings → Collaborators → Add people) - после принятия приглашения они смогут пушить в репозиторий. Ветка main (или master) - общая основа. Каждый участник создаёт свою ветку от main (например feature/header, feature/gallery), делает в ней коммиты и отправляет (push). Затем в интерфейсе GitHub открывается Pull Request - предложение влить свою ветку в main. После проверки (и при необходимости разрешения конфликтов) ветка сливается в main.

Выберите проект для совместной работы

Ниже - кнопки с названиями проектов. Нажмите на проект - откроется описание и разделение труда по веткам с расширенным списком заданий. Создайте репозиторий, договоритесь, кто какую ветку ведёт, и выполните задания. В конце откройте Pull Request и смёржите ветки в main.

Можете также придумать свой проект для совместной работы (любая тема: блог, визитка, каталог) и сами распределить задачи по веткам - главное, договориться о структуре файлов и классах до начала работы.

Pull Request - это…

Выберите верное утверждение.

Проверка вёрстки клавиатуры пианино

Загрузите index.html с вёрсткой клавиатуры пианино (белые клавиши во flex, чёрные с позиционированием по макету). Нажмите «Проверить» - сервер вернёт баллы и комментарии. Порог зачёта - 70 баллов.