From f4c3da0a64fce666d1647c5b3a542fa0d7c84235 Mon Sep 17 00:00:00 2001 From: emil28092005 Date: Fri, 30 Oct 2026 11:37:15 +0300 Subject: [PATCH] =?UTF-8?q?README:=20=D0=BC=D1=83=D0=B6=D1=81=D0=BA=D0=B8?= =?UTF-8?q?=D0=B5=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B2=D0=BC=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=BE=20=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BB(=D0=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- color-parade/README.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/color-parade/README.md b/color-parade/README.md index ea765ea..e7da441 100644 --- a/color-parade/README.md +++ b/color-parade/README.md @@ -20,7 +20,7 @@ https://git.shanaty.ru/pub/design_hse_study/color-parade/ Эмиль Шанаев, группа БРИЦП262, 1 модуль, 2026. -## Что я научился(ась) делать +## Что я научился делать - Раскладывать страницу по макету из Figma сеткой, а не абсолютным позиционированием: плитки, карточки событий и блок мерча — это `grid`. @@ -39,7 +39,7 @@ https://git.shanaty.ru/pub/design_hse_study/color-parade/ ### Инструменты -| Инструмент | Для чего использовал(а) | Уровень помощи | +| Инструмент | Для чего использовал | Уровень помощи | | --- | --- | --- | | GPT Astra | Каркас страницы, сетки и адаптив по макету | 3 | | DeepSeek 4.1 Flash | Объяснял свойства CSS, помогал с ошибками и с черновиками текстов | 2 | @@ -55,45 +55,45 @@ https://git.shanaty.ru/pub/design_hse_study/color-parade/ #### Запись №1 · 21.10.2026 -- **Что я хотел(а) сделать:** сверстать страницу по макету из Figma — шапку, +- **Что я хотел сделать:** сверстать страницу по макету из Figma — шапку, обложку с флагом, бегущую строку, три цветные плитки, тёмный блок о фестивале, карточки событий и мерч. -- **Что я спросил(а):** попросил собрать каркас лендинга по макету и сразу +- **Что я спросил:** попросил собрать каркас лендинга по макету и сразу сделать адаптив под телефон. - **Что ответил ИИ:** выдал HTML-разметку по секциям и CSS с переменными цветов, сетками и тремя медиазапросами. -- **Что я изменил(а) сам(а):** поправил размеры и отступы заголовков, переделал +- **Что я изменил сам:** поправил размеры и отступы заголовков, переделал фото-стопку в блоке «О фестивале» и обрезку картинок, убрал лишние обёртки, подогнал брейкпоинты под свои 1050, 800 и 520 px. -- **Как я понял(а), что это работает:** открыл страницу в браузере и сузил окно +- **Как я понял, что это работает:** открыл страницу в браузере и сузил окно до 375 px — по горизонтали ничего не вылезает, меню переносится, плитки встают в колонку. #### Запись №2 · 21.10.2026 -- **Что я хотел(а) сделать:** получить фотографии для концепта, потому что +- **Что я хотел сделать:** получить фотографии для концепта, потому что реального фестиваля не было. -- **Что я спросил(а):** попросил сгенерировать кадры фестиваля красок, стену с +- **Что я спросил:** попросил сгенерировать кадры фестиваля красок, стену с плакатами и мерч в этой айдентике. - **Что ответил ИИ:** сделал изображения 3072×2048, которые пришлось обрезать под пропорции блоков. -- **Что я изменил(а) сам(а):** выбрал кадры, обрезал их до 3:2, сжал в JPEG и +- **Что я изменил сам:** выбрал кадры, обрезал их до 3:2, сжал в JPEG и выставил `object-position`, чтобы в карточках не резались лица. -- **Как я понял(а), что это работает:** вставил картинки в макет и проверил, +- **Как я понял, что это работает:** вставил картинки в макет и проверил, как они смотрятся под текстом на широком и узком экране. #### Запись №3 · 27.10.2026 -- **Что я хотел(а) сделать:** довести страницу до сдачи — проверить доступность +- **Что я хотел сделать:** довести страницу до сдачи — проверить доступность и мелочи, которые не видно на скриншоте. -- **Что я спросил(а):** что ещё стоит добавить в статичную страницу для +- **Что я спросил:** что ещё стоит добавить в статичную страницу для доступности и удобства. - **Что ответил ИИ:** предложил skip-link, `aria-labelledby` у секций, `focus-visible` и `prefers-reduced-motion`. -- **Что я изменил(а) сам(а):** добавил skip-link и подписи секций, поправил alt +- **Что я изменил сам:** добавил skip-link и подписи секций, поправил alt у декоративных картинок (у них теперь пустой alt и `aria-hidden`), проверил, что фокус видно на тёмном фоне. -- **Как я понял(а), что это работает:** прошёл по странице клавишей Tab, +- **Как я понял, что это работает:** прошёл по странице клавишей Tab, включил в DevTools эмуляцию `prefers-reduced-motion` и посмотрел, что прокрутка и кнопки перестают анимироваться.