Домашние задания по веб-дизайну
162 заданий: от первого тега <h1> до flexbox, анимаций, JavaScript-игр и своего сайта-портфолио. Пиши код прямо на странице и сразу смотри результат. 128 задач проверяются автоматически.
Живой просмотр
Пиши HTML и CSS — страница обновляется прямо во время набора.
Автопроверка
Нажми «Проверить» — и сразу узнаешь, всё ли сделано верно.
Всё сохраняется
Код и отметки о выполнении хранятся в твоём браузере.
Ответы и подсказки
Застрял? Открой подсказку или посмотри решение.
Начинающий web-дизайнер
HTML и CSS: теги, стили, flexbox, анимации, адаптивность и grid.
Первая страница: теги
VS Code, структура HTML, заголовки, абзацы, списки
+4 новых2Браузер, ссылки, таблицы, формы
Консоль разработчика, a, table, form, input
+4 новых3Основы CSS
color, font-size, margin, padding, border
+2 новых4Структура сайта и селекторы
div, class, id, внутренние ссылки, vh и vw, GitHub
+3 новых5Сайт в интернете и position
GitHub Pages, position: relative, absolute, fixed, sticky
+3 новых6Flexbox
display: flex, flex-direction, justify-content, flex-wrap
+2 новых7:hover и inline-block
inline-block, :hover, transition, transform
+1 новых8Промежуточный проект
Собираем всё изученное в один сайт
+1 новых9Вёрстка по макету
Превращаем рисунок-макет в настоящую страницу
+3 новых10Псевдоклассы и псевдоэлементы
:hover, :focus, :nth-child, ::before, ::after, формы
+3 новых11Анимация в CSS
@keyframes, animation, linear-gradient
+3 новых12Цвета в веб-дизайне
HEX, RGB, HSL, прозрачность, готовые палитры
+2 новых13Параллакс и SVG
background-attachment: fixed, svg, circle, rect
+3 новых14Адаптивный дизайн
@media, flex-wrap, meta viewport
+1 новых15CSS-фреймворки: Bootstrap
Готовые классы, сетка, кнопки, темы Bootswatch
+3 новых16CSS Grid
display: grid, grid-template-columns, grid-template-areas
Продвинутый web-дизайнер
JavaScript: переменные, массивы, условия, циклы, функции, DOM, игры и canvas.
Введение в JavaScript
console.log, alert, первые шаги с DOM
+3 новых18Типы данных: числа и строки
let, числа, строки, slice, typeof
+2 новых19Массивы
push, pop, shift, unshift, индексы, length
+2 новых20Объекты
Ключи и значения, вложенные объекты, for...in
+3 новых21Условия и сравнения
if / else, prompt, Number, boolean, null
+3 новых22Циклы
while, for, break, перебор массива
+3 новых23Функции
function, return, параметры, стрелочные функции
+3 новых24DOM, часть 1
querySelector, textContent, innerHTML, style
+3 новых25DOM, часть 2: события
createElement, append, remove, addEventListener
+2 новых26DOM, часть 3: координаты
Координаты мыши, прокрутка, размеры элементов
+3 новых27Интерактивные программы
setTimeout, setInterval, Math.random, игры
+2 новых28ООП: объекты и классы
Конструкторы, классы, методы, this
+2 новых29Canvas: рисуем кодом
getContext, fillRect, arc, lineTo, рисование циклами
+1 новых30–31Создаём игру
Собираем всё изученное в настоящую игру
32Библиотеки и Figma
Figma, выбор палитры, популярные JS-библиотеки
Дизайн-проект
Свой сайт-портфолио: макет в Figma, BEM, Sass, адаптивная вёрстка и публикация.