Бесплатный мини-курс: основы HTML и CSS за 7 дней

Когда я начинал возиться с uCoz-шаблонами, код казался стеной непонятных символов — правил наугад, копировал куски с форумов и молился, чтобы ничего не развалилось. Потом пришлось разбираться системно, и только тогда я понял: HTML и CSS — это не магия, а вполне логичная конструкция. Если вы хотите перестать бояться редактора шаблонов и наконец осознанно менять цвета, отступы и блоки — этот мини-курс как раз про это. За 7 дней вы получите понятную базу без перегруза теорией: научитесь читать структуру страницы, управлять внешним видом и делать аккуратные правки, не превращая сайт в «поехавшую» кашу.

Курс рассчитан на тех, кто только открывает для себя вёрстку. Достаточно уметь открыть браузер и любой текстовый редактор. Не нужно знать языки программирования, устанавливать тяжёлые IDE или разбираться в серверах. Особенно полезно тем, кто прямо сейчас хочет доработать готовый шаблон на uCoz, поправить виджеты или впервые заглянуть в «Исходный код» без паники.

Что даст курс за 7 дней

За неделю вы не станете верстальщиком уровня middle, но получите фундамент, который сразу можно применять. Я сам когда-то потратил кучу времени на методы «тыка», пока не освоил эти базовые вещи. После курса вы перестанете гадать и начнёте понимать, что именно делаете.

После курса вы сможете:

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

Кому этот курс особенно полезен

владельцам сайтов на uCoz, которые хотят доработать шаблон, а не переписывать его с нуля;
новичкам, которые путаются в HTML-тегах и CSS-правилах, но уже поняли, что без этого никак;
тем, кто уже пробовал «поправить цвет», но безрезультатно — потому что меняли не тот селектор или не там искали;
будущим веб-дизайнерам и верстальщикам, которым нужна база без лишней теории, чтобы сразу перейти к практике.

Как проходить курс: простой план

Главное правило, которое я вывел для себя ещё на заре работы с uCoz: не пытайтесь «прочитать всё за вечер». Эффект появляется, когда вы повторяете действия руками и сразу видите результат в браузере. Иначе информация просто выветрится.

Рекомендуемый формат:

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

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

Инструмент	Для чего нужен	Что выбрать новичку
Текстовый редактор	Написание HTML и CSS	VS Code — он бесплатный, лёгкий и подсвечивает ошибки. Можно и Блокнот, но удобнее с подсветкой синтаксиса.
Браузер	Проверка результата	Chrome, Edge или Firefox — в каждом есть инструменты разработчика, которые пригодятся позже.
Папка с проектом	Хранение файлов	Отдельная папка на диске, например «site-test». Внутри — index.html и style.css.
Терпение	Чтобы не паниковать из-за ошибок	Ошибки — это нормально, на них учишься быстрее всего. Я до сих пор иногда забываю закрыть скобку.

День 1. Что такое HTML и как он работает

HTML — это язык разметки, который отвечает за структуру страницы. Он говорит браузеру: «Вот заголовок, вот абзац, а вот картинка». Когда я правил первые uCoz-шаблоны, то часто искал нужный текст прямо в HTML-коде страницы и менял его — это работало, но я не понимал, почему иногда всё ломается. Понимание структуры всё ставит на свои места.

Проще всего представить HTML как каркас дома: стены, двери, окна расставлены по плану. А CSS — это отделка, цвет стен и форма ручек.

Основные понятия

Тег — команда браузеру, например <p> для абзаца. Теги бывают парные и одиночные.
Элемент — тег вместе с содержимым. <p>Привет</p> — это элемент.
Атрибут — дополнительная информация внутри тега, например href у ссылки или src у картинки.
Структура документа — порядок, в котором элементы расположены на странице. Браузер читает HTML сверху вниз и строит из этого «дерево».

Минимальный пример

<!DOCTYPE html>
<html>
<head>
  <title>Мой первый сайт</title>
</head>
<body>
  <h1>Добро пожаловать</h1>
  <p>Это моя первая страница.</p>
</body>
</html>

На что обратить внимание

h1 — главный заголовок страницы, на uCoz-сайтах это обычно название сайта или статьи;
p — обычный абзац, в котором лежит основной текст;
всё содержимое страницы находится внутри body — именно там вы будете менять видимые блоки;
head хранит служебную информацию: заголовок вкладки, подключение стилей и скриптов. В шаблонах uCoz там часто лежат мета-теги и ссылки на CSS-файлы.

День 2. Базовые теги, которые нужны в 80% случаев

Новичку не нужно заучивать весь справочник HTML. Достаточно освоить несколько тегов, которые встречаются в любом шаблоне. Я, когда разбирал чужие бесплатные шаблоны для uCoz, заметил, что 80% кода состояло из одних и тех же элементов: заголовков, абзацев, ссылок, картинок и контейнеров.

Самые полезные теги

Тег	Назначение	Где применяется
`h1`–`h6`	Заголовки разного уровня	Статьи, блоки, карточки — создают иерархию контента.
`p`	Абзац текста	Любой текстовый блок — в uCoz это вывод новостей, описаний, статей.
`a`	Ссылка	Кнопки, меню, переходы — с атрибутом `href`.
`img`	Изображение	Фото, иконки, баннеры — не забывайте про атрибут `alt`.
`ul`, `li`	Список	Меню, преимущества, пункты — в uCoz часто оборачивают навигацию в списки.
`div`	Контейнер	Обёртка для блоков — основа любой сетки.
`span`	Внутристрочный элемент	Подсветка части текста или иконка внутри строки.

Типовая ошибка новичка

Часто начинают использовать div вообще для всего — даже для обычного текста. Технически это работает, но код становится нечитаемым и неудобным для дальнейшей кастомизации. Если есть смысловой тег — лучше использовать его. Например, абзац должен быть p, а не div с текстом внутри. В uCoz-шаблонах старой школы я нередко встречал бесконечные вложенные div без классов — разобраться в таком было настоящим квестом.

День 3. Первое знакомство с CSS

CSS отвечает за внешний вид: цвета, шрифты, размеры, отступы, расположение элементов. Если HTML — это скелет, то CSS — это одежда и оформление. В контексте uCoz вы чаще всего будете добавлять или изменять CSS-правила в отдельном файле стилей или прямо в блоке «CSS-стили» панели управления.

Пример простого правила

h1 {
  color: #333;
  font-size: 24px;
}

Здесь h1 — селектор, то есть тот элемент, к которому применяется стиль. color задаёт цвет текста, font-size — размер шрифта. Каждое правило отделяется точкой с запятой, и весь блок оборачивается в фигурные скобки.

Как подключается CSS

Есть три основных способа, и я прошёл через все на практике:

встроенные стили прямо в HTML (атрибут style) — неудобно для постоянной работы, но иногда нужно для быстрой правки одного элемента;
стили внутри тега <style> в head — в uCoz-шаблонах иногда так подключают небольшие блоки стилей;
отдельный файл .css — правильный путь для любого проекта. В системе uCoz вы можете подключить свой CSS-файл через «Управление дизайном» или редактировать уже существующий.

Для нормальной работы лучше использовать отдельный файл. Так проще поддерживать проект, не путаться и видеть общую картину.

Базовые CSS-свойства, которые стоит выучить первыми

color — цвет текста;
background или background-color — фон;
font-size — размер шрифта;
font-weight — жирность (обычно 400 — normal, 700 — bold);
margin — внешний отступ;
padding — внутренний отступ;
border — рамка;
text-align — выравнивание текста (left, center, right, justify).

День 4. Отступы, размеры и поведение блоков

Именно на отступах чаще всего ломается вёрстка у новичков. Визуально кажется, что «что-то не так», хотя проблема часто в одном лишнем margin или padding. Помню, как я часами пытался выровнять блоки в uCoz-шаблоне, а оказывалось, что у родительского контейнера стоял margin-bottom в 20 пикселей, который я не замечал.

Простое объяснение

margin — расстояние снаружи блока, «отталкивает» соседей;
padding — расстояние внутри блока, от края до содержимого.

Представьте коробку: внутри лежит содержимое (текст или картинка). Между содержимым и стенками коробки — padding. Между одной коробкой и другой — margin.

Пример

.box {
  margin: 10px;
  padding: 15px;
  background: #f0f0f0;
}

Такой блок будет отступать от соседей на 10 пикселей со всех сторон, а внутри контент будет отодвинут от краёв на 15 пикселей.

Что важно запомнить

размеры лучше проверять в браузере через инструменты разработчика (F12) — там видно реальные отступы и размеры блока;
не стоит ставить отступы «на глаз» без понимания, откуда они идут. В uCoz-шаблоне часто уже есть базовые стили, которые могут конфликтовать с вашими;
если блоки съехали, сначала проверьте отступы — скорее всего где-то добавился лишний margin или не сброшен padding по умолчанию.

День 5. Классы, селекторы и как наводить порядок в коде

Когда элементов на странице много, привязываться только к тегам уже неудобно. Например, на странице может быть десять div, и все они должны выглядеть по-разному. В этот момент на помощь приходят классы. В uCoz-шаблонах вы увидите множество классов — это как раз для того, чтобы точечно управлять оформлением.

Что такое класс

Класс — это имя, которое вы даёте элементу, чтобы обращаться к нему в CSS. В HTML он задаётся атрибутом class, в CSS — через точку перед именем.

<!-- HTML -->
<div class="news-card">...</div>

/* CSS */
.news-card {
  background: #fff;
  border: 1px solid #ddd;
}

Почему это удобно

один и тот же стиль можно применить к нескольким блокам — просто добавьте им одинаковый класс;
код становится чище и понятнее: смотришь на класс и уже понимаешь, что это за блок;
проще менять дизайн: меняете одно правило в CSS — и все блоки с этим классом обновляются.

Виды селекторов, которые полезно знать

по тегу: p, h1, img — глобально, но мало контроля;
по классу: .note — самый ходовой вариант;
по идентификатору: #header — уникальный элемент, используется реже, так как id должен быть один на странице;
по вложенности: .menu a — выбирает все ссылки внутри элемента с классом menu. Это удобно, когда нужно стилизовать навигацию, не трогая остальные ссылки.

Типовая ошибка

Не стоит делать слишком сложные селекторы на старте. Чем длиннее и запутаннее цепочка, тем сложнее потом исправлять шаблон. Я видел в некоторых uCoz-шаблонах конструкции вроде body .wrapper .content .post .title span — это ад для поддержки. Новичку лучше писать просто и понятно, используя классы.

День 6. Практика: собираем маленький блок

Вот он, самый вкусный день, когда теория наконец превращается в видимый результат. Мы соберём небольшой блок, похожий на типичную карточку новости или виджета в uCoz. Это поможет закрепить всё, что прошли, и даст уверенность.

Пример простого блока

<div class="card">
  <h2>Заголовок</h2>
  <p>Краткое описание.</p>
  <a href="#">Подробнее</a>
</div>

<style>
.card {
  background: #f9f9f9;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  text-align: center;
}
.card h2 {
  color: #333;
  font-size: 20px;
}
.card a {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  background: #007bff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
}
</style>

Что тренировать

менять фон блока — попробуйте градиент или картинку;
добавлять рамку — border: 1px solid #ccc;;
настраивать скругление — border-radius;
изменять размер заголовка — через font-size и font-weight;
делать ссылку заметной — играть с padding, background и hover (псевдокласс появится позже, но можно добавить простой эффект при наведении).

Как проверить результат

откройте файл в браузере — просто перетащите index.html в окно;
меняйте только одно свойство за раз — так вы увидите, что именно влияет на вид;
после каждой правки обновляйте страницу (Ctrl+F5 для сброса кеша);
если что-то исчезло, проверьте закрывающие скобки и кавычки — это самая частая проблема.

День 7. Как не бояться править шаблон

К этому дню вы уже знаете, где искать структуру и как менять оформление. Теперь главное — не испортить рабочий сайт. Я с этим сталкивался не раз: правил шаблон на живом сайте, что-то ломалось, и посетители видели «голый» HTML. Поэтому выработайте привычку к безопасной работе.

Правило безопасной работы

Сначала сделайте копию файла или шаблона. В uCoz можно экспортировать текущий шаблон в текстовый файл — всегда делайте так перед правками.
Меняйте только один участок кода за раз. Не пытайтесь переписать всё сразу.
После правки сразу проверяйте страницу, желательно в отдельной вкладке или на локальной версии.
Если результат не нравится, откатывайте изменение — Ctrl+Z или восстановите из копии.
Не удаляйте непонятный блок, пока не выяснили его назначение. В uCoz-шаблонах есть служебные блоки, которые отвечают за вывод системных данных, их удаление может сломать функционал.

Что обычно ломают новички

забывают закрыть тег — особенно часто с div, a или ul;
ставят лишнюю фигурную скобку в CSS, и всё правило перестаёт работать;
меняют не тот селектор — например, пишут .heder вместо .header;
редактируют стиль, который переопределяется другим правилом с более высоким приоритетом;
путают margin и padding — в итоге блоки ведут себя непредсказуемо.

Мини-чек-лист перед сохранением

У всех HTML-тегов есть закрывающие пары, если они нужны.
В CSS у каждого правила есть закрывающая фигурная скобка }.
Класс написан без ошибок, и он действительно есть в HTML.
Изображение открывается и не битое — проверьте пути к файлам.
Страница читается на экране без «поехавших» блоков — проверьте при разных разрешениях окна.

Как применять знания на uCoz и в готовых шаблонах

Если вы работаете с uCoz, HTML и CSS дают практическую свободу. Можно не переписывать весь шаблон, а аккуратно вносить точечные улучшения, которые сразу меняют восприятие сайта. Я часто начинал именно с малого: менял цвет кнопки «Подробнее», подгонял отступы в боковой панели или правил шрифт заголовков.

Что можно исправить быстро

цвет кнопки — найти класс кнопки в CSS и сменить background;
шрифт заголовка — изменить font-family или font-size;
расстояние между блоками — поиграться с margin-bottom;
вид меню — убрать подчёркивание ссылок, добавить фоновую плашку;
ширину контентной области — часто это класс .wrapper или .container;
оформление карточек и виджетов — добавить тени, скругления, изменить отступы.

Важный нюанс

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

Частые ошибки новичков и как их избежать

Ошибка	Почему возникает	Как исправить
Код выглядит «кашей»	Нет структуры и отступов	Форматировать код, делать отступы, использовать автовыравнивание в редакторе.
Изменение не видно	Неверный селектор или кеш браузера	Проверить класс, обновить страницу с очисткой кеша (Ctrl+F5).
Блоки съезжают	Лишние отступы или неверный размер	Искать `margin`, `padding`, `width` — часто проблема в одном из них.
Всё стало слишком мелким	Случайно изменён базовый размер шрифта	Проверить общие стили у `body` или `html`, возможно, вы перебили `font-size` в процентах.
Кнопка не похожа на кнопку	Не задан фон, отступы, display	Добавить `display: inline-block`, `padding`, `background` и убрать подчёркивание у ссылки.

Что учить после мини-курса

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

Полезный маршрут обучения

семантическая разметка — использование тегов по назначению: header, footer, article и т.д. Это улучшает читаемость и SEO;
блочная модель CSS — глубже понять, как работают width, padding, border и margin вместе;
flexbox — современный способ выравнивания блоков, незаменим для меню и сеток;
адаптивная вёрстка — чтобы сайт хорошо выглядел на мобильных устройствах, без этого сейчас никуда;
работа с изображениями — адаптивные картинки, форматы, оптимизация;
основы типографики — выбор шрифтов, размеров, межстрочного интервала, чтобы текст было приятно читать;
псевдоклассы и псевдоэлементы — :hover, ::before, ::after позволяют добавлять декоративные элементы без лишней разметки;
простая сборка макета — сверстать небольшой одностраничный сайт по макету.

Хороший признак прогресса

Если вы перестали бояться открыть HTML-файл и уже примерно понимаете, что делает каждый блок, значит база действительно усвоена. Когда я впервые осознал, что могу зайти в код шаблона uCoz и сходу найти нужный кусок, чтобы заменить иконку или поправить отступ — это было невероятное чувство контроля.

Итог

Этот бесплатный мини-курс нужен не для галочки, а для того, чтобы вы начали уверенно ориентироваться в HTML и CSS. За 7 дней можно собрать понятный фундамент, научиться менять шаблоны аккуратно и перестать воспринимать код как набор магических символов. Главное — не просто читать, а повторять руками. Тогда даже простые уроки быстро превращаются в навык, который пригодится и для доработки uCoz-шаблонов, и для дальнейшего изучения вёрстки.

FAQ

Можно ли пройти курс без опыта в программировании?

Да. Для старта достаточно базовой уверенности в работе с компьютером и желания повторять действия руками. Никаких специальных знаний не требуется.

Сколько времени нужно на один день курса?

Обычно 20–40 минут хватает, если не просто читать, а сразу пробовать код в редакторе. Я рекомендую не затягивать сессию, чтобы не перегружать голову.

Нужно ли устанавливать сложные программы?

Нет. Для начала достаточно текстового редактора (VS Code, Блокнот) и браузера. Всё остальное — по желанию.

Что важнее сначала — HTML или CSS?

Сначала HTML, потому что он задаёт структуру. Без каркаса стили не к чему применять. Потом CSS, который отвечает за внешний вид.

Поможет ли этот курс, если я хочу править шаблон на uCoz?

Да. База HTML и CSS как раз помогает понимать, что вы меняете и как безопасно вносить правки. Вы перестанете действовать вслепую и сможете адаптировать шаблон под свои задачи.