CSS
? СРАЗУ (до JavaScript):
✔ Доступность (ARIA, роли, alt, фокус)
Обучает тебя писать правильные HTML-структуры.
Это база.
✔ Микроразметка Schema.org
Мелочь, но тоже HTML. Учится быстро.
✔ Forms API (HTML-формы)
Пока без JS. Нужно понять основные атрибуты, типы полей.
✔ Flexbox
Обязательно до JS. Это основной инструмент для layout.
✔ Grid
Тоже до JS — второе ядро современного CSS.
✔ Positioning (absolute, relative, sticky)
Это важно для понимания того, как работает реальная верстка.
✔ Z-index + stacking context
Это одна из самых частых ошибок новичков — зато изучается быстро.
✔ Specificity (приоритеты селекторов)
Это критично. Без этого CSS ломается.
✔ Псевдоклассы/псевдоэлементы
Стилизация интерфейсов — это всё до JS.
✔ Адаптивная верстка
- mobile-first
- fluid units
- breakpoints
Без этого ты не фронтендер.
✔ Переменные CSS
Нужны и в обычной верстке, и в анимациях, и в темах.
✔ Transition/Animation (basic)
До JS ты можешь научиться плавным hover-эффектам.
Сложные анимации → уже после JS, когда поймёшь динамику страницы.
✔ Сложные layout-паттерны
Типа Holy Grail Layout, Masonry, Sidebar + Content.
Тоже до JS.
✔ BEM
Это архитектура CSS.
Учится до JS.
✔ SCSS/SASS
Это расширение CSS, не логика.
Учится до JS, но после того, как базовый CSS станет уверенным.
✔ LESS
Так же, как SCSS — можно учить в любой момент после понимания CSS.
✔ Bootstrap
Это библиотека, НЕ технология.
Можно учить когда угодно.
Лучше после того, как ты уверена в CSS.
✔ Tailwind
Я рекомендую изучать позже, когда:
- ты понимаешь CSS
- ты понимаешь BEM
- у тебя есть опыт Flex/Grid
Иначе Tailwind превращает новичков в клипперов, которые не понимают, что пишут.
? Итог: Tailwind — после CSS, но до JS или после — не важно.
?
? ПОСЛЕ JavaScript:
Продвинутые анимации
Dark Mode переключение через JS
Продвинутая работа с формами
Performance в CSS
Dynamic CSS через JS
Стейт-управление форм, ошибок и валидации
Goal Accomplishment Criteria
Первый этап
-
ЭТАП 1. HTML — ПОЛНЫЙ ФУНДАМЕНТ
⏱ 5–7 ч
-
Full Stack → Раздел 1 «Введение» (~14 мин, деталей уроков нет в PDF)
-
Full Stack → Раздел 2 «HTML5» (уроки 4–24) — 2 ч 30 мин + практика 2–3 ч
-
Полный курс по вёрстке → Раздел 3 «HTML Основные теги» (уроки 63–79) — 52 мин
-
Книга Peter Cook → стр. 9–16 (HTML) — ~1 ч
-
-
ЭТАП 2. CSS — БАЗА
⏱ 10–13 ч
-
Full Stack → Раздел 3 «CSS3» — 3 ч 9 мин + практика 3–4 ч
-
Полный курс по вёрстке → Раздел 4 «CSS» — 2 ч 31 мин + практика 2–3 ч
-
Книга Peter Cook → стр. 34–43 (CSS units, selectors) — 1–1.5 ч
-
-
ЭТАП 3. BOOTSTRAP
⏱ 5–7 ч
-
Full Stack → Раздел 6 «Bootstrap» — 2 ч 54 мин + практика 2–3 ч
-
Закрепление: повтор макета без Bootstrap — ~1 ч
-
-
ЭТАП 4. БОЛЬШАЯ ПРАКТИКА (МАКЕТ №1)
⏱ 15–20 ч
-
Макет первый — 7 ч 38 мин + практика 6–8 ч
-
CSS практика — 1 ч 53 мин + практика 1–2 ч
-
Media Queries — 43 мин + практика ~1 ч
-
Адаптация макета — 1 ч 26 мин + практика 1–2 ч
-
Новые фичи CSS — 49 мин + практика ~1 ч
-
-
ЭТАП 5. FLEXBOX + EVERY LAYOUT (1)
⏱ 6–9 ч
-
Flexbox — 34 мин + практика 1–2 ч
-
Every Layout → стр. 1–до Grid — 4–6 ч
-
-
ЭТАП 6. GRID + EVERY LAYOUT (2)
⏱ 10–14 ч
-
CSS Grid — 1 ч 24 мин + практика 2–3 ч
-
Продвинутый Grid — 1 ч 40 мин + практика ~2 ч
-
Grid Project — 2 ч 49 мин + практика 2–3 ч
-
Every Layout → Grid–конец книги — 3–4 ч
-
-
ЭТАП 7. CSS АРХИТЕКТУРА + SCSS
⏱ 3–4 ч
-
БЭМ — 18 мин + практика ~45 мин
-
SCSS / SASS — 32 мин + практика 1–1.5 ч
-
-
ЭТАП 8. GIT / GITHUB / СБОРКА
⏱ 8–10 ч
-
Git и GitHub — 4 ч 7 мин + практика 3–4 ч
-
GitHub Pages (7 мин) + Vite (35 мин) + практика ~1 ч
-
-
ЭТАП 9. SVG (БАЗА)
⏱ 4–6 ч
-
? Peter Cook → стр. 1–63 + практика ~2 ч
-
-
ЭТАП 10. WORDPRESS
⏱ 18–22 ч
-
? WordPress (разделы 1–16) — 13 ч 42 мин + практика 4–6 ч
-
-
ЭТАП 11. SVG + ЭФФЕКТЫ
⏱ 10–14 ч
-
? Peter Cook → стр. 64–127 — 3–4 ч
-
Campesato → стр. 1–247 — 4–6 ч
-
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
