Бесплатно · 8–14 лет · 16 уроков

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

Шестнадцать уроков, после которых у тебя будет собственная страница в интернете — с твоим текстом, картинками, кнопками и анимацией. Код пишешь слева, результат появляется справа сразу же. Ничего скачивать и устанавливать не нужно.

Пройдено уроков0 / 16
1Урок 1. Твоя первая страницаСейчас ты напишешь свою первую строчку кода — и она тут же появится на экране справа.+20 XP2Урок 2. Заголовки: от главного к мелкомуЗаголовков в HTML целых шесть штук. Разберёмся, зачем так много и какой когда нужен.+20 XP3Урок 3. Картинки на страницеСтраница из одного текста скучная. Добавим картинку — и сразу станет похоже на настоящий сайт.+25 XP4Урок 4. Ссылки: как страницы связаны между собойИнтернет называется «сетью» именно из-за ссылок: они связывают страницы в одну паутину.+25 XP5Урок 5. Списки: маркированные и нумерованныеСписки — самый быстрый способ превратить кашу из текста в понятную страницу.+20 XP6Урок 6. Первый CSS: красим страницуHTML построил стены. Пора клеить обои — включаем CSS.+25 XP7Урок 7. Шрифты и размер текстаОдин и тот же текст разным шрифтом читается совсем по-разному. Научимся управлять этим.+25 XP8Урок 8. Рамки, скругления и тениТри свойства, которые превращают скучный прямоугольник в красивую карточку.+25 XP9Урок 9. Отступы: margin и paddingСамая частая путаница у новичков — margin и padding. Разберёмся раз и навсегда.+30 XP10Урок 10. Классы: стилизуем то, что нужноА что, если два абзаца должны выглядеть по-разному? Для этого и придумали классы.+30 XP11Урок 11. Блоки в ряд: знакомство с flexПока все блоки падают друг под друга. Научим их вставать в ряд.+30 XP12Урок 12. Кнопки и наведение мышиКнопка, которая никак не реагирует на мышку, кажется сломанной. Сейчас починим.+30 XP13Урок 13. Градиенты: фон с переходом цветаОдин цвет — скучно. Сделаем фон, который плавно перетекает из одного цвета в другой.+30 XP14Урок 14. Анимация: оживляем страницуЗаставим элементы двигаться сами — без единой строчки JavaScript.+35 XP15Урок 15. Чтобы было красиво и на телефонеБольше половины людей заходят на сайты с телефона. Проверим, как твоя страница выглядит у них.+35 XP16Урок 16. Финал: собираем страницу-визиткуПятнадцать уроков позади. Пора собрать всё вместе и сделать страницу, которую не стыдно показать.+60 XP
Рекламное место · 970×120

О курсе

HTML и CSS — это первое, что стоит выучить любому будущему программисту, и вот почему: результат виден мгновенно. Написал строчку — на экране появилась картинка. Ребёнку не нужно три недели изучать теорию, чтобы что-то заработало, и именно поэтому интерес не успевает угаснуть.

Что такое HTML и CSS простыми словами

HTML — это разметка: она говорит браузеру, что на странице заголовок, что абзац, а что картинка. Представь дом: HTML — это стены, двери и окна. CSS — это оформление: цвета, шрифты, отступы, тени. В том же доме CSS — это обои, мебель и свет. Дом можно построить без обоев, а вот обои без стен не наклеишь — поэтому сначала HTML, потом CSS.

Как устроен курс

  • Каждый урок — это маленькая теория и одно задание, которое проверяется автоматически;
  • код пишется в редакторе прямо на странице, результат обновляется сам;
  • если застрял — есть подсказки, а в крайнем случае готовое решение;
  • за решённые задания начисляется опыт, открываются значки и звания;
  • в конце курса страница-визитка скачивается настоящим HTML-файлом — её можно открыть на любом компьютере и показать друзьям.

Что понадобится

Только браузер. Ни установок, ни регистрации, ни почты. Прогресс сохраняется в самом браузере — поэтому продолжать удобнее на том же устройстве, а перенести его на другое можно кодом переноса на главной странице раздела.

С какого возраста

Ориентир — 8–14 лет и умение читать. Ребёнку 8–9 лет первые уроки лучше пройти вместе со взрослым: не потому, что сложно, а потому, что вдвоём веселее и есть кому показать результат. С 10 лет дети обычно проходят курс полностью самостоятельно.

Частые вопросы

С какого возраста ребёнку можно учить HTML?

Обычно с 8 лет — как только ребёнок уверенно читает и печатает. HTML не требует математики и абстрактного мышления: это набор понятных слов-команд, а результат виден сразу, поэтому он даётся легче, чем «настоящие» языки программирования.

Нужно ли что-то устанавливать на компьютер?

Нет. Все уроки работают прямо в браузере: редактор кода и окно результата находятся на странице урока. Понадобится только устройство с интернетом — подойдёт и планшет, и телефон, хотя на компьютере набирать код удобнее.

Это правда бесплатно?

Да, весь раздел бесплатный и без регистрации. Мы не просим ни почту, ни телефон, ни имя ребёнка и поэтому не собираем о детях никаких персональных данных. Раздел сделан журналом «Дом Маркетинга» как открытый проект.

Сохранится ли прогресс, если закрыть страницу?

Да, прогресс и написанный код хранятся в памяти самого браузера. Если открыть курс на другом устройстве или в режиме инкогнито, прогресс там будет пустым — перенести его можно кодом переноса на главной странице раздела.

Что ребёнок сможет делать после курса?

Сверстать простую страницу с нуля: заголовки, текст, картинки, ссылки, списки, кнопки, разноцветный фон, аккуратные отступы и адаптацию под телефон. Этого достаточно, чтобы сделать личную страницу, страничку для школьного проекта или начать изучать JavaScript.

Раздел бесплатный и сделан агентством «Дом Маркетинга». Если вам нужен сайт или продвижение для бизнеса — это как раз то, чем мы занимаемся в рабочее время.

Перейти в агентство