HTML & CSS — с нуля до профессионала

Структура документа, текст, ссылки, изображения, списки, таблицы, формы, семантика и база доступности. Инструменты: VS Code, Live Server, первый взгляд на DevTools.

• 1 Урок 0: Добро пожаловать на Theia AI +50 XP
• 2 Урок 1.1: Что такое HTML. Структура документа. Инструменты +50 XP
• 3 Урок 1.2: Заголовки и параграфы +50 XP
• 4 Урок 1.3: Ссылки и изображения +50 XP
• 5 Урок 1.4: Списки +50 XP
• 6 Урок 1.5: Таблицы +50 XP
• 7 Урок 1.6: Формы — часть 1 +50 XP
• 8 Урок 1.7: Формы — часть 2 +50 XP
• 9 Урок 1.8: Семантические теги +50 XP
• 10 Урок 1.9: Доступность — база +50 XP
• КР: На заказ +100 XP

Селекторы, каскад, цвета, типографика, блочная модель, единицы измерения, позиционирование, псевдоклассы. Плюс рабочий процесс: Git и DevTools — с этого модуля вся работа ведётся через репозиторий.

• 1 Урок 2.1: Подключение CSS. Селекторы. Каскад и специфичность +50 XP
• 2 Урок 2.2: Git basics — init, add, commit, push +50 XP
• 3 Урок 2.3: DevTools для верстальщика +50 XP
• 4 Урок 2.4: Цвета и типографика +50 XP
• 5 Урок 2.5: Блочная модель +50 XP
• 6 Урок 2.6: Единицы измерения +50 XP
• 7 Урок 2.7: display и поток документа +50 XP
• 8 Урок 2.8: position +50 XP
• 9 Урок 2.9: Псевдоклассы и псевдоэлементы +50 XP
• 10 Урок 2.10: Переменные CSS и организация кода +50 XP
• КР: На заказ +100 XP

Одномерная раскладка: оси, направление, перенос, выравнивание, управление размерами элементов. Навбары, карточки, центрирование, сайдбары.

• 1 Урок 3.1: Что такое Flexbox. Оси +50 XP
• 2 Урок 3.2: flex-direction и flex-wrap +50 XP
• 3 Урок 3.3: justify-content и align-items +50 XP
• 4 Урок 3.4: flex-grow, flex-shrink, flex-basis, order +50 XP
• 5 Урок 3.5: align-self, gap, вложенные контейнеры +50 XP
• 6 Урок 3.6: Практика — навбар, карточки, центрирование, сайдбар +50 XP
• КР: На заказ +100 XP

Двумерная раскладка: строки и колонки одновременно. fr, repeat, auto-fill/auto-fit, именованные области, выравнивание, изображения в сетке.

• 1 Урок 4.1: Что такое Grid. Колонки и строки +50 XP
• 2 Урок 4.2: fr, repeat(), auto-fill/auto-fit, minmax() +50 XP
• 3 Урок 4.3: grid-column, grid-row, span +50 XP
• 4 Урок 4.4: grid-template-areas. Именованные зоны. Subgrid +50 XP
• 5 Урок 4.5: Выравнивание в Grid. aspect-ratio и object-fit +50 XP
• 6 Урок 4.6: Flex vs Grid — практика выбора +50 XP
• КР: На заказ +100 XP

Mobile-first, media/container queries, адаптивные изображения и типографика, темизация через переменные, современные селекторы, переходы, трансформации, анимации.

• 1 Урок 5.1: Mobile-first подход. Viewport. Breakpoints +50 XP
• 2 Урок 5.2: Media queries. prefers-color-scheme и prefers-reduced-motion +50 XP
• 3 Урок 5.3: Container queries +50 XP
• 4 Урок 5.4: Адаптивные изображения +50 XP
• 5 Урок 5.5: Адаптивная типографика: clamp(), calc(), min(), max() +50 XP
• 6 Урок 5.6: CSS-переменные и темизация: продвинутый уровень +50 XP
• 7 Урок 5.7: :is(), :where(), :has(). Нативная вложенность +50 XP
• 8 Урок 5.8: transition, transform, filter +50 XP
• 9 Урок 5.9: animation, @keyframes. Производительность +50 XP
• КР: На заказ +100 XP

БЭМ, организация стилей и @layer, обзор SCSS, работа с Figma, кроссбраузерность, производительность и SEO, деплой на GitHub Pages.

• 1 Урок 6.1: Методология БЭМ +50 XP
• 2 Урок 6.2: Организация стилей. Reset. @layer +50 XP
• 3 Урок 6.3: SCSS — обзорно +50 XP
• 4 Урок 6.4: Работа с Figma. Pixel-perfect вёрстка +50 XP
• 5 Урок 6.5: Кроссбраузерность +50 XP
• 6 Урок 6.6: Производительность и SEO-база +50 XP
• 7 Урок 6.7: Публикация — деплой на GitHub Pages +50 XP