</>ВебмастерскаяСОБЕРИ СВОЙ ПЕРВЫЙ САЙТ Автосохранение
11 КЛАСС · 35 МИНУТ

Страница, которая похожа на тебя

Собери блоки, подружи их с Flexbox и добавь свой стиль.

Пять шагов до своего сайта0 / 5
HTML · структура
СТРУКТУРА СТРАНИЦЫ↕ drag & drop
+ Перетащи блок сюда
ДОБАВИТЬ БЛОК
Сохранено в браузере
ЖИВОЙ ПРЕДПРОСМОТР

Твоя будущая страница

Палитра
Изменения видны сразу720 px
CSS · ОБЩИЙ СТИЛЬ

Создай свой класс

Один класс можно назначить разным блокам. Измени правило — обновятся все элементы с этим классом.

Так будет выглядеть твой блок

  
ВСТРОЕННАЯ БИБЛИОТЕКА
Картинка для твоей истории
Выбери готовое фото. Оно станет настоящим элементом <img> — загружать файлы с компьютера не нужно.
Фотографии уже включены в мастерскую. Источники: Unsplash.

  
ТВОЯ КОЛЛЕКЦИЯ
Мои проекты
Работы автоматически сохраняются в этом браузере. Можно закрыть страницу и продолжить позже на этом же компьютере.
Чтобы работа пережила очистку школьного браузера или переезд на другой компьютер, сохрани код проекта отдельно.

  
СОХРАНИ СВОЮ РАБОТУ
Страница готова к просмотру
Посмотри результат на большом экране или сохрани переносимый код, чтобы продолжить позже на другом компьютере.

  
ПЕРЕНОСИМЫЙ ПРОЕКТ
Код твоего проекта
Код содержит страницу и её настройки.

  
Мой первый сайт

  
КОРОТКАЯ ПАМЯТКА
Сайт собирается из понятных вещей
<>
HTML — что есть
Заголовки, текст, карточки, ссылки и картинки. Перетаскивай блоки и вкладывай их в контейнеры.
#
CSS — как выглядит
Фон, шрифт, отступы, скругления. Класс позволяет применить один стиль сразу к нескольким элементам.
↔
Flexbox — как расположено
Включается у родительского контейнера. Управляет расположением его прямых дочерних блоков.
Ряд и колонка
flex-direction: row выстраивает блоки по горизонтали, column — по вертикали. gap задаёт расстояние. justify-content выравнивает по главной оси, align-items — по поперечной. Перенос wrap помогает блокам поместиться на узком экране.
Подробнее о Flexbox в MDN ↗
Картинки и сохранение
Фото выбираются из готовой библиотеки. Автосохранение хранит проект в этом браузере; кнопка «Сохранить» делает контрольную версию. Через «Результат → Код проекта» можно скопировать работу и открыть её позже без загрузки файлов.
JavaScript доступен как дополнительное задание через «+» в проводнике.