Код на пальцах: от понимания к практике

Практический курс для начинающих разработчиков, направленный на устранение страха перед написанием кода. Программа охватывает HTML, CSS и JavaScript с подробным разбором примеров и реальными задачами.

1. Основы HTML: семантическая структура, формы и разбор примеров «до и после»

Основы HTML: семантическая структура, формы и разбор примеров «до и после»

Добро пожаловать в курс «Код на пальцах: от понимания к практике». Если вы когда-либо смотрели на исходный код сайта и видели там бесконечные наборы непонятных символов, то эта статья для вас. Мы начнем с самого фундамента — HTML.

Представьте, что создание сайта — это строительство дома. HTML (HyperText Markup Language) — это не обои и не мебель (это задача CSS), и не электрика с водопроводом (это JavaScript). HTML — это железобетонный каркас, стены и перекрытия. Если каркас кривой, никакой красивый фасад это не исправит.

В этой статье мы научимся писать чистый, понятный и «семантический» код, который любят и поисковики, и браузеры.

Анатомия HTML-документа

Прежде чем переходить к сложным вещам, давайте разберем базовый скелет любой страницы. Это тот минимум, без которого браузер не поймет, что перед ним веб-сайт.

Разбор по строкам:

  • <!DOCTYPE html> — Это паспорт документа. Он говорит браузеру: «Я использую современный стандарт HTML5, обрабатывай меня соответственно».
  • <html lang="ru"> — Корневой элемент. Атрибут lang="ru" подсказывает браузеру и поисковикам, что основной контент на русском языке.
  • <head> — Это «мозг» страницы. Всё, что находится здесь, пользователь не видит на экране (кроме заголовка вкладки). Здесь живут настройки, кодировки и подключения стилей.
  • <meta charset="UTF-8"> — Критически важная строка. Она включает поддержку кириллицы и спецсимволов. Без неё ваш текст может превратиться в набор кракозябр.
  • <body> — Это «тело» страницы. Всё, что вы видите в окне браузера (текст, картинки, кнопки), пишется строго внутри этих тегов.

    • Семантика: почему <div> — это не панацея

    Новички часто совершают одну и ту же ошибку: они используют тег <div> для всего подряд. <div> (division) — это просто пустая коробка без смысла. Когда весь сайт состоит из дивов, это называется «div soup» (суп из дивов).

    Семантическая верстка — это использование тегов, которые объясняют смысл содержимого. Это важно для: * SEO: Поисковые роботы лучше понимают структуру сайта. * Доступности: Скринридеры (программы для незрячих) могут корректно читать сайт, сообщая пользователю: «Это навигация», «Это статья», «Это подвал».

    !Визуальная структура семантических тегов HTML5, показывающая их расположение на типичной веб-странице.

    Основные семантические теги:

    * <header> — «шапка» сайта или вводная часть статьи. * <nav> — блок с навигационными ссылками. * <main> — основное, уникальное содержимое страницы (должен быть только один на странице). * <section> — смысловой раздел контента (например, «О нас», «Контакты»). * <article> — самостоятельный материал (новость, пост в блоге), который имеет смысл даже в отрыве от сайта. * <aside> — боковая панель или дополнительная информация (реклама, ссылки на похожие статьи). * <footer> — «подвал» сайта (копирайты, контакты).

    Пример №1: Структура страницы

    Давайте посмотрим, как превратить «суп из дивов» в качественную разметку.

    ДО (Плохая практика)

    Здесь непонятно, где что находится. Для робота это просто набор одинаковых коробок.

    ПОСЛЕ (Хорошая практика)

    Теперь каждый тег говорит сам за себя.

    Разбор изменений:

  • Заменили <div class="top-bar"> на <header>. Теперь ясно, что это вводная часть.
  • Обернули ссылки в <nav>. Браузер знает: здесь навигация.
  • Основной контент поместили в <main>, а сам пост — в <article>.
  • Заголовок поста стал <h1> (самый важный заголовок), а текст — параграфом <p>.
  • Подвал стал <footer>, а копирайт обернут в <small> (тег для мелкого текста или юридических примечаний).

    • Формы: диалог с пользователем

    Формы — это способ получения информации от пользователя. Регистрация, поиск, комментарии — всё это формы.

    Главный тег — <form>. Внутри него живут элементы управления.

    Ключевые элементы форм:

    * <input> — универсальное поле ввода. Его вид зависит от атрибута type: * type="text" — обычный текст. * type="email" — проверка на формат email. * type="password" — скрывает символы точками. * type="checkbox" — галочка. * type="radio" — выбор одного варианта из нескольких. * <label> — подпись к полю. Критически важен! Он связывает текст с полем ввода. Если нажать на текст лейбла, курсор активируется в поле. * <button> — кнопка отправки.

    Пример №2: Форма входа

    ДО (Неудобно и недоступно)

    Пользователь не понимает, что куда вводить, если плейсхолдер исчезнет. Скринридер не прочитает назначение полей.

    ПОСЛЕ (Профессионально)

    Построчный разбор:

  • <form action="..." method="post">: Обернули всё в форму. action говорит, куда слать данные, method — как (скрытно).
  • <label for="username">: Атрибут for совпадает с id="username" у инпута. Это создает жесткую связь. Клик по слову «Имя пользователя» активирует поле ввода.
  • type="password": Теперь при вводе пароля видны только точки.
  • required: Браузер не даст отправить форму, если поле пустое.
  • minlength="8": Валидация прямо в HTML — пароль не может быть короче 8 символов.
  • <button type="submit">: Это именно кнопка, которая умеет отправлять форму (по нажатию Enter или клику).

    • Практическое задание: Блок с тремя колонками

    В рамках этого модуля ваша задача — создать HTML-структуру для блока новостей, который в будущем (в уроке по CSS) станет тремя колонками. Пока что они будут идти друг под другом, и это нормально.

    ТЗ (Техническое задание):

  • Создайте секцию <section>.
  • Внутри неё добавьте главный заголовок <h2> с текстом «Последние новости».
  • Создайте три элемента <article> внутри секции.
  • В каждой статье должны быть:
    • * Картинка <img> (используйте заглушку или любой URL). * Заголовок новости <h3>. * Короткий текст <p>. * Ссылка «Читать далее» <a>.

    Попробуйте написать этот код самостоятельно в редакторе (например, VS Code или онлайн в CodePen). В следующем уроке мы научимся раскрашивать эти блоки и выстраивать их в ряд с помощью CSS.

    Помните: HTML — это про смысл. Если вы смотрите на код и понимаете, что это за данные, значит, вы всё делаете правильно.

    2. Магия CSS: блочная модель, адаптивность, работа с цветом и переменными

    Магия CSS: блочная модель, адаптивность, работа с цветом и переменными

    Приветствую вас во втором модуле курса «Код на пальцах». В прошлой статье мы построили «скелет» нашего сайта с помощью HTML. Но давайте будем честны: пока он выглядит скучно. Черный текст, белый фон, всё идет в один столбик. Настало время нарядить наш скелет, добавить красок и научить его вести себя прилично на экранах мобильных телефонов.

    CSS (Cascading Style Sheets) — это каскадные таблицы стилей. Если HTML отвечает за то, что находится на странице, то CSS отвечает за то, как это выглядит.

    Как обратиться к элементу: Селекторы

    Чтобы покрасить стену, нужно сначала указать маляру, какую именно стену красить. В CSS для этого используются селекторы.

    Представьте, что вы обращаетесь к группе людей:

  • По тегу: «Эй, люди!» (обращение ко всем элементам типа p, div, h1).
  • По классу: «Эй, люди в красных кепках!» (обращение к элементам с атрибутом class="red-cap"). Это самый частый способ.
  • По ID: «Эй, Иван Петров!» (обращение к уникальному элементу с id="ivan"). Используется редко, так как ID должен быть уникальным на странице.

    • Пример кода

    Разбор: * h1, .news-card, #main-logo — это селекторы. * Внутри фигурных скобок { ... } пишутся правила. * Правило состоит из свойства (color) и значения (blue), разделенных двоеточием. В конце строки всегда ставится точка с запятой.

    Блочная модель: Всё есть коробка

    Это самая важная концепция в верстке. Запомните: каждый элемент на странице — это прямоугольная коробка.

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

    !Диаграмма блочной модели: Контент, Внутренний отступ, Граница, Внешний отступ.

  • Content (Контент): Текст или картинка внутри.
  • Padding (Внутренний отступ): Пространство между контентом и рамкой. Это «воздух» внутри коробки. Если у элемента есть фон, padding тоже закрасится.
  • Border (Граница): Рамка вокруг элемента.
  • Margin (Внешний отступ): Пространство снаружи рамки. Оно отталкивает другие элементы от нашего. Margin всегда прозрачный.

    • Проблема размеров и её решение

    Новички часто путаются: если вы задали блоку ширину width: 200px и добавили padding: 20px, то реальная ширина блока станет 240px (200 + 20 слева + 20 справа). Это ломает верстку.

    Чтобы этого избежать, мы используем магическое свойство:

    Теперь, если вы скажете «ширина 200px», браузер сам ужмёт контент, чтобы вместе с отступами и рамками блок занимал ровно 200px.

    Цвета в вебе: Больше, чем просто «Red»

    Писать color: red можно, но профессионалы используют более точные инструменты.

    1. HEX (Шестнадцатеричный код)

    Самый популярный формат. Начинается с #, за которым идут 6 символов (от 0 до F). Первые два — красный, вторые — зеленый, третьи — синий. * #000000 — черный. * #FFFFFF — белый. * #FF5733 — приятный оранжевый.

    2. RGB и RGBA

    rgb(Red, Green, Blue). Значения от 0 до 255. rgba добавляет четвертый параметр — Alpha (прозрачность) от 0 до 1. * rgba(0, 0, 0, 0.5) — полупрозрачный черный.

    3. HSL (Hue, Saturation, Lightness)

    Самый понятный для человека формат. * Hue (Оттенок): Круг цветов от 0 до 360 (0 — красный, 120 — зеленый, 240 — синий). * Saturation (Насыщенность): % (0% — серый, 100% — яркий цвет). * Lightness (Светлота): % (0% — черный, 50% — нормальный, 100% — белый).

    Пример: hsl(200, 100%, 50%) — ярко-голубой.

    CSS-переменные: Удобство и порядок

    Представьте, что у вас на сайте используется один и тот же синий цвет в 50 местах. Если заказчик скажет: «Давайте сделаем его чуть темнее», вам придется менять код в 50 местах.

    Переменные решают эту проблему. Вы задаете цвет один раз в начале файла и используете ссылку на него.

    Разбор:

  • --название-переменной: Имя всегда начинается с двух дефисов.
  • var(--название): Функция для подстановки значения.
    • Теперь, изменив --main-color в одном месте, вы перекрасите весь сайт.

    Адаптивность: Медиазапросы

    Раньше сайты верстали фиксированно: 1000 пикселей в ширину. На телефоне это выглядело мелко и неудобно. Сегодня мы используем медиазапросы (@media), чтобы менять правила игры в зависимости от ширины экрана.

    Логика: Браузер читает код сверху вниз. Сначала он применяет мобильные стили. Если экран шире 768px, он перезаписывает их правилами внутри @media.

    Практическое задание: Верстаем три колонки

    В прошлом уроке мы создали HTML для новостей. Теперь превратим их в красивую сетку из трех колонок. Для этого мы используем технологию Flexbox — современный способ расставлять элементы.

    Шаг 1: Подготовка HTML (вспоминаем прошлый урок)

    У нас была <section>, внутри которой три <article>.

    Шаг 2: Пишем CSS

    Построчный разбор ключевых моментов:

  • display: flex; на родителе (section) заставляет дочерние элементы (article) встать в ряд.
  • gap: 20px; создает «канавки» между элементами без лишних margin.
  • flex: 1 1 300px; — это умная настройка размера. Она говорит: «Карточка может расти, может сжиматься, но её базовая ширина — 300px». Если места для трех карточек по 300px не хватит, они перенесутся.
  • @media (max-width: 600px) — если экран узкий (телефон), мы меняем направление оси flex-direction на column. Карточки встанут друг под другом.

    • Попробуйте добавить этот код к вашему HTML из прошлого урока. Вы увидите, как простой список превратился в профессиональную сетку новостей. В следующем уроке мы оживим всё это с помощью JavaScript!

    3. JavaScript для начинающих: синтаксис, манипуляция DOM и создание интерактивных элементов

    JavaScript для начинающих: синтаксис, манипуляция DOM и создание интерактивных элементов

    Добро пожаловать в третий модуль курса «Код на пальцах». Мы уже построили каркас дома (HTML) и сделали евроремонт (CSS). Но наш дом пока «мертвый»: свет не включается, двери не открываются автоматически, а лифт не едет. Чтобы оживить его, нам нужно провести электричество и настроить умную систему управления. В веб-разработке эту роль играет JavaScript.

    JavaScript (или просто JS) — это язык программирования, который заставляет сайт реагировать на действия пользователя. Если HTML — это существительные (заголовок, картинка), CSS — прилагательные (красный, большой), то JavaScript — это глаголы (скрыть, показать, посчитать, отправить).

    В этой статье мы разберем основы языка, научимся находить элементы на странице и менять их свойства по щелчку пальцев (или мыши).

    Где живет JavaScript?

    Как и CSS, код JavaScript можно писать прямо в HTML-файле, но профессионалы выносят его в отдельный файл с расширением .js. Чтобы подключить его к странице, используется тег <script>.

    Лучшее место для этого тега — перед закрывающим тегом </body>. Почему? Потому что браузер читает код сверху вниз. Если скрипт загрузится раньше, чем HTML-элементы, он попытается управлять тем, чего еще нет на странице, и выдаст ошибку.

    Азбука синтаксиса: Переменные и Типы данных

    Прежде чем управлять сайтом, нужно выучить базовые слова.

    Переменные: Коробки для данных

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

    В современном JS есть два основных способа создать переменную:

  • let — для коробок, содержимое которых может меняться (например, счет в игре).
  • const — для коробок, которые запечатываются навсегда (например, ссылка на кнопку, которая никуда не денется).

    • Типы данных: Что лежит в коробке?

    Компьютеру важно знать, что именно вы храните:

    * String (Строка): Текст. Всегда пишется в кавычках (одинарных '...' или двойных "..."). * Пример: 'Привет, мир!' * Number (Число): Просто цифры, без кавычек. Можно считать. * Пример: 42, 3.5 * Boolean (Булево значение): Логический переключатель. Только два варианта: правда или ложь. * Пример: true (истина), false (ложь).

    Функции: Рецепты действий

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

    Когда браузер дойдет до строчки sayHello();, он выполнит код внутри фигурных скобок, и пользователь увидит всплывающее окно.

    DOM: Карта вашего сайта

    Теперь самое интересное. Как JavaScript понимает, что нужно изменить именно тот самый заголовок или ту самую кнопку? Для этого существует DOM (Document Object Model).

    !Визуализация структуры DOM, показывающая иерархию элементов на веб-странице.

    Для браузера ваша страница — это не просто текст, а дерево объектов. JS умеет лазить по этому дереву и хватать нужные ветки.

    1. Поиск элемента

    Самый универсальный метод поиска — document.querySelector(). В скобках мы пишем CSS-селектор (как мы делали в прошлом уроке).

    2. Манипуляция (Изменение)

    Когда мы нашли элемент и положили его в переменную, мы можем делать с ним что угодно.

    Важно: В JS свойства стилей пишутся слитно в верблюжьем регистре (backgroundColor), а не через дефис, как в CSS (background-color).

    События: Реакция на действия

    Скрипт бесполезен, если он срабатывает сам по себе при загрузке. Мы хотим, чтобы магия происходила, когда пользователь нажимает кнопку. Это называется событие (Event).

    Мы используем метод addEventListener («слушатель событий»). Он работает как вахтер, который ждет определенного сигнала.

    Синтаксис:

    элемент.addEventListener('событие', функция);

    Пример: Кнопка-счетчик

    Давайте создадим кнопку, которая считает клики по ней.

    HTML:

    JavaScript:

    Разбор по строкам:

  • Мы нашли кнопку и сохранили её в константу btn.
  • Завели переменную count (используем let, так как число будет меняться).
  • Сказали кнопке: «Слушай клик». Когда клик произойдет, запусти функцию внутри.
  • Внутри функции мы берем текущее число, прибавляем 1 и обновляем текст кнопки.

    • Практическое задание: Темная тема

    В предыдущих уроках мы говорили о CSS-переменных. Теперь мы объединим знания HTML, CSS и JS, чтобы создать переключатель темной и светлой темы. Это классическая задача для начинающего фронтендера.

    Шаг 1: HTML

    Нам нужна кнопка и какой-то контент.

    Шаг 2: CSS

    Мы зададим цвета через переменные. А для темной темы создадим специальный класс .dark-theme, который будет переопределять эти переменные.

    Шаг 3: JavaScript

    Самая магия здесь. Нам не нужно вручную менять цвета каждому элементу. Нам достаточно добавить класс dark-theme тегу <body>, и CSS сам перекрасит всё, что использует переменные.

    Результат: При нажатии на кнопку у <body> появляется класс .dark-theme. Браузер видит это, считывает новые значения переменных из CSS и меняет белый фон на темный, а черный текст на белый. Нажимаем еще раз — класс исчезает, тема возвращается.

    Попробуйте реализовать это в своем редакторе. Это ваш первый полноценный интерактивный интерфейс!

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

    4. Практическая лаборатория: верстка колонок, плавная прокрутка и переключатель тем

    Практическая лаборатория: верстка колонок, плавная прокрутка и переключатель тем

    Добро пожаловать в четвертый модуль курса «Код на пальцах: от понимания к практике». Мы прошли долгий путь: изучили фундамент HTML, научились красить стены с CSS и провели электричество с помощью JavaScript. Теперь пришло время собрать все эти знания воедино.

    В этой статье мы не будем учить новые сложные теории. Мы займемся чистой практикой. Мы создадим мини-проект, который часто встречается в реальной жизни: секцию с карточками услуг (колонки), навигацию с плавной прокруткой и, самое вкусное, — кнопку переключения темной темы, которая запоминает выбор пользователя.

    Откройте свой редактор кода (VS Code, Sublime Text или онлайн-песочницу CodePen). Мы начинаем строительство.

    Этап 1: Подготовка фундамента (HTML)

    Нам нужна страница, на которой есть «шапка» с навигацией и кнопкой темы, а также основной блок с контентом, который мы будем выстраивать в колонки.

    !Схема структуры страницы: шапка, контент из трех колонок и подвал.

    Напишем структуру. Обратите внимание на использование семантических тегов и классов, которые нам понадобятся в CSS и JS.

    Разбор ключевых моментов:

  • Ссылка-якорь: <a href="#features">. Символ # означает, что ссылка ведет не на другую страницу, а к элементу с id="features" на этой же странице.
  • Кнопка темы: Мы дали ей id="theme-toggle", чтобы легко найти её через JavaScript.
  • Контейнер карточек: Мы обернули три <article> в один общий div с классом cards-container. Это критически важно для работы Flexbox.

    • Этап 2: Магия CSS и переменные

    Теперь самое интересное. Мы настроим цвета через переменные (Custom Properties). Это позволит нам менять тему сайта, изменив всего пару значений в одном месте.

    Настройка переменных и базовых стилей

    Что здесь происходит? Мы объявили переменные в :root. Когда мы добавим класс .dark-theme к тегу <body>, значения переменных перезапишутся. Поскольку body использует var(--bg-body), он автоматически перекрасится.

    Верстка колонок (Flexbox)

    В HTML у нас карточки идут друг под другом. Давайте выстроим их в ряд и сделаем адаптивными.

    Почему это работает? Свойство flex: 1 1 300px — это универсальная формула адаптивности. Она говорит браузеру: «Попытайся сделать ширину карточки 300 пикселей. Если места много — растяни её. Если места мало (телефон) — сожми её, но если совсем тесно — перенеси на новую строку».

    Этап 3: Плавная прокрутка

    Вы заметили ссылку «Преимущества» в шапке? Если нажать на неё сейчас, страница резко дернется вниз к секции. Это выглядит грубо. Исправим это одной строчкой CSS.

    Теперь, когда вы нажмете на ссылку, браузер плавно прокрутит страницу до нужного места. Это работает нативно, без сложных скриптов.

    Этап 4: Оживляем переключатель тем (JavaScript)

    У нас есть кнопка с луной (🌙), есть CSS-классы. Осталось связать их. Наша задача: при клике на кнопку добавлять или убирать класс .dark-theme у элемента <body>.

    !Логика работы переключателя тем: Клик -> JS -> Класс CSS -> Смена переменных.

    Откройте файл script.js:

    Разбор кода:

    * document.getElementById('theme-toggle') — самый быстрый способ найти элемент, если у него есть ID. * classList.toggle('dark-theme') — этот метод делает всю грязную работу за нас. Нам не нужно писать условия «если класс есть, то удали...». Toggle работает как выключатель света. * textContent — меняет текст внутри кнопки. Мы меняем эмодзи, чтобы подсказать пользователю, что произойдет при следующем нажатии.

    Этап 5: Проверка результата

    Сохраните все файлы и откройте index.html в браузере.

  • Проверьте колонки: Сузьте окно браузера. Карточки должны перестраиваться: сначала 3 в ряд, потом 2, потом 1 друг под другом. Это и есть адаптивность.
  • Проверьте прокрутку: Нажмите на «Преимущества» в меню. Страница должна плавно скользить вниз.
  • Проверьте тему: Нажмите на луну. Фон должен стать темным, текст светлым, а луна превратиться в солнце. Переход должен быть плавным благодаря transition в CSS.

    • Заключение

    Поздравляю! Вы только что создали функциональный прототип современного сайта. Вы использовали: * Семантический HTML для структуры. * CSS Flexbox для сложной сетки. * CSS Variables для управления цветом. * JavaScript для интерактивности.

    Это тот самый набор навыков, который требуется от Junior Frontend разработчика. В следующем модуле мы углубимся в работу с формами и валидацию данных, чтобы пользователи могли отправлять вам сообщения.

    А пока — экспериментируйте! Попробуйте добавить третью цветовую тему или сделать 4 колонки вместо 3. Код в ваших руках.