Неделя 1 · CSS Meme Slider
🧭 ← Roadmap · Следующая →
🎯 Что строим
Слайдер на чистом HTML+CSS — без единой строчки JavaScript. Картинки мемов с подписями + контролы навигации + плавные анимированные переходы. Работает на desktop и mobile.
🏷 Required Skills (как заявлено в задании)
CSS animations · @keyframes · CSS transitions · Flexbox · CSS Grid · responsive design · media queries · pseudo-classes · relative units
🚫 Запреты (нарушишь — -100500)
| ❌ | Что нельзя | Что вместо этого |
|---|---|---|
| 🔴 | JavaScript | только HTML+CSS |
| 🔴 | CSS-фреймворки (Bootstrap, etc) | чистый CSS |
| 🔴 | CSS-препроцессоры (Sass) | чистый CSS |
| 🔴 | npm-пакеты | ничего |
| 🟡 | position: relative/absolute/fixed/sticky |
только static (нормальный поток) |
| 🟡 | top / left / right / bottom |
transform: translate, margin |
| 🟡 | float |
Flexbox / Grid |
| 🟡 | псевдоэлементы (::before, ::after) |
только псевдо-классы |
| 🟡 | px вне media queries |
rem, em, %, vh, vw, fr |
💡 Разрешено:
reset.css/normalize.css,gifкартинки,<header>/<h1>/<footer>и пр. семантические теги.
📚 Что изучить (по порядку)
⚠️ Идти строго по порядку. Каждый блок опирается на предыдущий. Не перепрыгивай — застрянешь в трюках с
:checkedесли не понимаешь поток и комбинаторы.
📥 Что должен знать ДО старта
Это первая задача bootcamp. Если HTML/CSS вообще не трогал — сначала пройди:
- Что такое CSS · Подключение стилей
- Структура документа · Семантическая разметка
- Селекторы
- CSS -- комментарии
1 · Блочная модель и нормальный поток
Зачем: задача требует, чтобы ВСЕ элементы остались в нормальном потоке (position: static, без float). Без понимания потока — невозможно.
- Блочная модель
- box-sizing -- content-box vs border-box
- display -- block, inline, inline-block, none · Display
- width и height
- Margin и Padding
- overflow -- управление переполнением · Overflow
- ⚠️ Прочитай и пойми, почему НЕ используем: Float и clear · Position
Self-check: объясни словами разницу между content-box и border-box. Что произойдёт если убрать display у <div>?
2 · Селекторы и каскад
Зачем: в задаче понадобятся редкие селекторы (:checked, +, ~). Без понимания каскада не разберёшься почему один стиль не работает.
- Каскад и специфичность
- Комбинаторы -- потомок, дочерний, соседний ← критично для трюка со слайдером
- Группировка и вложенность селекторов
- Атрибутные селекторы
- Наследование
Self-check: напиши селектор: «второй <li> внутри <ul> с классом nav». Что выберет ul.nav > li + li?
3 · Layout-движок (Flexbox + Grid)
Зачем: один из них (или оба вместе) будет каркасом слайдера. Без них — inline-block и слёзы.
Flexbox (одномерный):
- _MOC Flexbox — карта темы
- Основы Flexbox · CSS Flexbox · Flex-контейнер и flex-элементы
- display flex и inline-flex · Главная и поперечная оси
- justify-content -- выравнивание по главной оси
- align-items -- выравнивание по поперечной оси
- flex -- сокращённое свойство · flex-grow -- расширение
- Flexbox -- центрирование элементов ← сразу пригодится (центруем слайдер на странице)
- gap -- отступы между элементами
- Как Flexbox рассчитывает размеры
Grid (двумерный):
- _MOC Grid
- Основы Grid · Grid-контейнер и grid-элементы · display grid и inline-grid
- Grid template · grid-template-areas -- именованные области
- Единица fr -- дробные доли · minmax() -- границы размеров · repeat() -- повторение треков
Когда что:
- Flexbox vs Grid ← обязательно к прочтению
Self-check: что выбрать для раскладки «3 контрола в ряд» — Flexbox или Grid? А для «картинка слева, подпись справа, контролы снизу»?
4 · Относительные единицы
Зачем: задача требует везде использовать rem/em/%/vh/vw/fr. px разрешён ТОЛЬКО внутри media queries.
- Единицы измерения
- Viewport units —
vh,vw,vmin,vmax - Адаптивная типографика — почему шрифты в
rem
Шпаргалка (запомни):
| Единица | Относительно чего | Когда |
|---|---|---|
rem |
font-size у <html> (обычно 16px) |
размеры, отступы, шрифты |
em |
font-size родителя |
размеры внутри компонента |
% |
соответствующего свойства родителя | ширины блоков |
vh/vw |
1% высоты/ширины viewport | hero, full-screen |
fr |
доля свободного места в Grid | grid-template |
Self-check: чем rem лучше em для глобальных размеров? Что произойдёт с 1rem если поменять font-size на <html>?
5 · Media queries (адаптив)
Зачем: mobile-версия проверяется на 500px, desktop — на 1024px. Без media queries — никак.
- Media queries ← основа
- Mobile-first подход ← правильный подход (сначала мобила, потом расширяешь)
- Responsive Design -- принципы
- Responsive images -- CSS подходы
- Grid и media queries (если используешь Grid)
Self-check: напиши синтаксис media query «применить стили на экранах шириной до 500px включительно». Чем min-width лучше max-width в mobile-first подходе?
6 · Анимации и трансформации ⭐
Зачем: это сердце задачи. Все +15/+5/+5 баллов за плавные transition между слайдами/подписями.
- transition -- плавные переходы — для hover/active эффектов на контролах
- transform -- rotate, scale, translate — главное оружие: двигаем слайды через
translateX(НЕ черезleft:!) - Keyframes — для multi-step анимаций
- Практика анимаций
Зачем transform вместо top/left:
- Задача запрещает
positionиtop/left transformработает на композитном слое GPU — анимация плавная- Не вызывает re-layout (быстрее)
Self-check: в чём разница transition и animation? Что лучше анимировать transform: translateX чем left:?
7 · Псевдоклассы ⭐⭐⭐
Зачем: псевдокласс :checked + комбинатор ~ = главный трюк, как сделать слайдер БЕЗ JS. Тут запутаться легко — псевдо-элементы запрещены, псевдо-классы обязательны.
- Псевдоклассы —
:hover,:active,:focus,:checked,:nth-child - Псевдоэлементы ← прочитай чтобы знать что НЕ использовать (
::before,::after— забудь о них на эту задачу) - Функциональные селекторы —
:not,:is,:where - has() селектор — современный, опционально
Полезные на эту задачу:
- cursor — для
cursor: pointerна контролах (требование задачи) - user-select — отключить выделение текста на контролах
Self-check: «псевдокласс :hover» и «псевдоэлемент ::before» — в чём разница на пальцах? Что произойдёт если на radio button навесить + .slide?
8 · Архитектура слайдера без JS (направление, не решение)
Зачем: к этому моменту у тебя есть все блоки. Сложи их сам.
📝 Идея направления (не код, не решение — это компоновка):
«Слайдер без JS = состояние храним в HTML. Где? В скрытом
<input type="radio">. Как кликают? По<label>, связанному с input черезfor="". Как читаем состояние? Селектором:checked. Как влияем на другие элементы? Через комбинаторы+(следующий sibling) или~(любой следующий sibling).»
Дальше — ты сам собираешь:
- Сколько
radioнужно? - Где их разместить, чтобы могли «достать» до слайдов комбинаторами?
- Как анимировать переход — через
transitionнаtransform: translateX? - Как сделать индикатор активного слайда?
⚠️ Не гугли «CSS only slider» — там готовые решения. Сделаешь сам — получишь компаунд-эффект на всю последующую CSS-карьеру.
9 · Workflow (одинаковый для всех задач)
- Repo Workflow для bootcamp — публичный репо, ветки, папка
cssMemeSlider - gh-pages деплой — куда деплоить
- Git Commit Convention —
init:/feat:/fix:+ timestamp - PR Description Schema — обязательно список протестированных разрешений
- Cross-Check процесс — кто и как тебя оценивает
✅ Чек-лист критериев (100 баллов)
Repository & Submission · 30
- PR из
gh-pagesвmain, открытый не смержен (+5) - Папка
cssMemeSliderвgh-pages, деплой работает (+5) - ≥ 5 коммитов в истории (
+5) - Коммиты по convention + timestamp в скобках (
+5) - PR-ссылка засабмичена в rs app (
+5) - PR description по схеме + список тестированных разрешений (
+5)
Layout · 10
- Слайдер по центру с равными margin слева/справа (
+5) - Layout картинок/подписей/контролов как в дизайне (
+5)
Animations · 20
- Плавный animated transition между картинками (
+15) - Animated transition между подписями (
+5)
Content & Interaction · 15
- Подписи = текст (НЕ часть картинки) (
+5) - Кликабельная зона контрола больше визуального размера (
+5) - Интерактивные состояния:
hover,active, индикатор активного слайда,cursor(+5)
Responsive · 10
- Mobile-версия + корректный layout (
+10)
Code Quality · 15
- Только относительные единицы (кроме
pxв media queries) (+5) - Все компоненты в нормальном потоке:
position: static, безfloat(+5) - Нет псевдоэлементов (
+5)
🧠 Self-check перед коммитом
Не нажимай git push, пока не сможешь ответить:
- Зачем
transform: translateXлучше чемposition: absolute; left:? - Чем псевдо-класс отличается от псевдо-элемента (на пальцах)?
- Как
:checkedсвязан с переключением слайда? - Почему я не могу использовать
position: relativeна этом проекте? - Если я открою деплой на 320px ширины — какие компоненты могут сломаться?
- У меня в коммитах есть timestamp? Конвенция соблюдена?
- PR-description содержит список разрешений, на которых я проверял?
➡️ Что переходит в следующие задачи (compound forward)
После Slider в Shelter P1 переиспользуешь:
- Всё из блоков 1-5 (поток, селекторы, Flexbox/Grid, единицы, media queries)
-
- добавится семантика HTML и Figma
В Shelter P3:
- Блок 7 (псевдоклассы) поможет понять как JS-event'ы дополняют CSS-стили
В Async Race:
- Блок 6 (transform + transition) — будешь анимировать гонку машинок через
transform: translateX+requestAnimationFrame
📚 Внешние ресурсы
- 📄 Полное задание
- CSS Animations — MDN
- CSS Transitions — MDN
- CSS Transform — MDN
- @keyframes — MDN
- Complete Guide to Flexbox — CSS-Tricks
- Complete Guide to Grid — CSS-Tricks
- Using Media Queries — MDN
- Responsive Design — web.dev
- Pseudo-classes — MDN
- General sibling combinator (
~) — MDN - Adjacent sibling combinator (
+) — MDN