Полный курс по веб-разработке: Fullstack старт

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

1. Основы верстки: структура HTML5 и стилизация с помощью CSS3

Основы верстки: структура HTML5 и стилизация с помощью CSS3

Добро пожаловать в курс «Полный курс по веб-разработке: Fullstack старт»! Мы начинаем наше путешествие с фундамента, на котором держится весь интернет. Неважно, создаете ли вы простой блог или сложную социальную сеть, всё начинается с двух технологий: HTML и CSS.

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

Что такое веб-страница?

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

!Сравнение HTML как каркаса и CSS как оформления на примере строительства дома

HTML (HyperText Markup Language)

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

CSS (Cascading Style Sheets)

CSS — это каскадные таблицы стилей. Это язык, который описывает внешний вид документа, написанного на HTML. CSS отвечает за шрифты, цвета, отступы, расположение элементов и даже анимацию.

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

Любая веб-страница состоит из набора тегов. Тег — это ключевое слово, заключенное в угловые скобки. Большинство тегов являются парными: у них есть открывающая часть и закрывающая.

Пример базовой структуры:

Давайте разберем каждую строчку:

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

    • Вложенность и атрибуты

    HTML-элементы могут вкладываться друг в друга, как матрешки. Это создает древовидную структуру документа (DOM — Document Object Model).

    У тегов могут быть атрибуты, которые расширяют их функциональность. Атрибуты пишутся внутри открывающего тега.

    Пример ссылки с атрибутами:

    * <a> — тег ссылки (anchor). * href — атрибут, указывающий адрес назначения. * target="_blank" — атрибут, заставляющий ссылку открываться в новой вкладке. * Перейти в Google — контент тега, который видит пользователь.

    Семантическая верстка в HTML5

    В старых версиях HTML разработчики часто использовали тег <div> для всего подряд. <div> — это просто контейнер без смысловой нагрузки. Однако HTML5 принес нам семантические теги. Они говорят браузеру и разработчику о смысле содержимого.

    Почему это важно?

  • SEO (Search Engine Optimization): Поисковые роботы Google и Яндекс лучше понимают структуру страницы, если она размечена семантически.
  • Доступность (Accessibility): Люди с нарушениями зрения используют скринридеры. Эти программы могут навигировать по странице, прыгая от заголовка к меню или основной статье, только если использованы правильные теги.

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

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

    !Структура веб-страницы с использованием семантических тегов HTML5

    Основы CSS3: как добавить стиль

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

    Синтаксис CSS

    Правило CSS состоит из селектора и блока объявлений.

    p — Селектор. Он указывает, какие* элементы мы хотим стилизовать (в данном случае все абзацы). * color — Свойство. Что именно мы меняем. * red — Значение. На что мы меняем.

    Способы подключения CSS

    Существует три способа добавить стили на страницу, но профессиональным считается только один.

  • Инлайн-стили (Inline): Пишутся прямо в теге через атрибут style.
    • Пример:* <p style="color: red;">Текст</p> Вердикт:* Избегайте этого. Это засоряет код и усложняет поддержку.
  • Внутренние стили (Internal): Пишутся в теге <style> внутри <head>.
    • Вердикт:* Подходит для маленьких одностраничных сайтов или email-рассылок.
  • Внешние стили (External): Стили выносятся в отдельный файл с расширением .css и подключаются через тег <link>.
    • Вердикт:* Золотой стандарт. Разделение структуры (HTML) и оформления (CSS).

    Подключение внешнего файла:

    Основные селекторы

    Чтобы «попасть» стилями в нужный элемент, используются селекторы:

    * Селектор тега: h1 { ... } — применяет стили ко всем тегам <h1>. * Селектор класса: .button { ... } — применяет стили ко всем элементам с атрибутом class="button". Классы могут повторяться много раз на странице. * Селектор ID: #logo { ... } — применяет стили к элементу с id="logo". ID должен быть уникальным на странице.

    > Совет: Старайтесь использовать классы для стилизации. ID имеют слишком высокий «вес» специфичности, что может создать проблемы при переопределении стилей в будущем.

    Блочная модель (Box Model)

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

    Даже если вы видите круглую кнопку или текст, вокруг них существует невидимая прямоугольная область. Этот «ящик» состоит из четырех слоев:

  • Content (Контент): Собственно текст или изображение.
  • Padding (Внутренний отступ): Пространство между контентом и границей. Фон элемента распространяется и на padding.
  • Border (Граница): Рамка вокруг элемента.
  • Margin (Внешний отступ): Пространство снаружи границы, которое отталкивает другие элементы. Margin всегда прозрачен.

    • !Иллюстрация блочной модели CSS: Content, Padding, Border, Margin

    Пример кода для понимания:

    В данном примере полная ширина элемента на экране будет не 200px, а:

    Где — ширина контента, — левый и правый padding, — левый и правый border. Margin не влияет на размер самого элемента, но влияет на место, которое он занимает в потоке.

    Чтобы избежать сложной математики при расчете ширины, современные разработчики используют свойство:

    Это заставляет браузер включать padding и border в общую ширину (width), что делает верстку гораздо более предсказуемой.

    Практический пример

    Давайте соберем всё вместе. Создадим простую карточку товара.

    HTML:

    CSS:

    В этом примере мы использовали семантический тег <article>, классы для стилизации, настроили отступы и цвета. Псевдокласс :hover позволяет изменить стиль кнопки, когда пользователь наводит на неё курсор, добавляя интерактивности.

    Заключение

    Мы рассмотрели базу: структуру HTML5, семантику, синтаксис CSS и блочную модель. Это алфавит веб-разработки. Невозможно написать «Войну и мир» (или Facebook), не зная букв.

    В следующих статьях мы углубимся в более сложные темы, такие как позиционирование элементов, Flexbox и Grid, которые позволят создавать сложные макеты. Но помните: любой, даже самый сложный сайт, в своей основе состоит из простых «кирпичиков», которые вы изучили сегодня.

    Для более глубокого погружения в документацию рекомендую использовать MDN Web Docs — это самый авторитетный справочник для веб-разработчиков.

    2. Язык программирования JavaScript: оживление интерфейса и работа с DOM

    Язык программирования JavaScript: оживление интерфейса и работа с DOM

    В предыдущей статье мы построили «дом» (HTML) и покрасили его стены, расставили мебель и повесили шторы (CSS). Но наш дом всё ещё остаётся статичным макетом. В нём не включается свет, не течёт вода из крана, и двери не открываются автоматически. Чтобы вдохнуть в него жизнь, нам нужно провести электричество и настроить умную систему управления.

    В веб-разработке этой «искрой жизни» является JavaScript.

    Что такое JavaScript?

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

    С помощью JS вы можете: * Обновлять контент без перезагрузки страницы. * Анимировать изображения и графику. * Управлять мультимедиа (видео и аудио). * Реагировать на действия пользователя (клики, нажатия клавиш, прокрутку).

    > Важно: JavaScript и Java — это два совершенно разных языка программирования. Как шутят разработчики: «Java относится к JavaScript так же, как Сом к Сомали». У них разные цели, синтаксис и сферы применения.

    Подключение JavaScript к странице

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

    Лучшая практика — использовать внешний файл с расширением .js. Это позволяет отделить логику от разметки.

  • Создайте файл script.js в той же папке, что и ваш index.html.
  • Подключите его с помощью тега <script>.

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

    Основы синтаксиса: Переменные

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

    В современном стандарте JavaScript (ES6+) есть два основных способа создания переменных:

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

    • DOM: Объектная модель документа

    Чтобы JavaScript мог управлять HTML-элементами, браузер создает специальную структуру данных, которая называется DOM (Document Object Model).

    Когда браузер загружает страницу, он превращает ваш HTML-код в древовидную структуру объектов. Каждый тег, каждый кусок текста и каждый атрибут становятся «узлом» (node) в этом дереве.

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

    Благодаря DOM, JavaScript видит страницу не как простой текст, а как набор объектов, у каждого из которых есть свои свойства и методы.

    Поиск элементов на странице

    Чтобы взаимодействовать с элементом, его сначала нужно найти в DOM-дереве. Для этого существует метод document.querySelector().

    Он использует те же селекторы, что и CSS. Это очень удобно, так как вам не нужно учить новый синтаксис поиска.

    Предположим, у нас есть такой HTML:

    Мы можем найти эти элементы в JS:

    Теперь переменные title и button содержат ссылки на соответствующие элементы DOM. Мы «захватили» их и готовы ими управлять.

    Манипуляция элементами

    После того как элемент найден, мы можем делать с ним всё что угодно: менять текст, стили, классы или атрибуты.

    Изменение содержимого

    Свойство textContent позволяет читать или менять текст внутри элемента.

    Изменение стилей

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

    > Совет: Изменять стили напрямую через JS удобно для динамических значений (например, координаты анимации). Но для переключения состояний (активный/неактивный) лучше добавлять или удалять CSS-классы.

    Работа с классами

    Свойство classList позволяет добавлять, удалять и переключать классы.

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

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

    Событие — это сигнал от браузера: «Эй, что-то произошло!». Это может быть клик мышкой, нажатие клавиши, наведение курсора или отправка формы.

    Чтобы «поймать» этот сигнал, мы используем метод addEventListener (добавить слушатель событий).

    Синтаксис:

    Давайте разберем на примере кнопки:

    Когда пользователь кликнет по кнопке, браузер запустит функцию, которую мы передали вторым аргументом, и покажет всплывающее окно.

    Практика: Создаем интерактивный счетчик

    Давайте объединим всё изученное и создадим простой счетчик кликов. Это классическая задача для новичков, демонстрирующая работу с переменными, DOM и событиями.

    HTML:

    JavaScript:

    Что здесь происходит?

  • Мы нашли место, где отображается число (span с id count), и кнопку.
  • Завели переменную count в памяти компьютера.
  • При каждом клике мы меняем данные в памяти (count), а затем синхронизируем их с интерфейсом (textContent).

    • Это и есть суть современной веб-разработки: Состояние (данные) -> Логика -> Отображение (DOM).

    Заключение

    Сегодня мы сделали огромный шаг вперед. Мы превратили статичную верстку в живое приложение. Мы узнали, что такое DOM, как искать элементы, менять их свойства и реагировать на действия пользователя.

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

    Для более глубокого изучения методов работы с DOM рекомендую обратиться к разделу Manipulating documents на MDN Web Docs.

    3. Современный Frontend: введение в фреймворки и адаптивный дизайн

    Современный Frontend: введение в фреймворки и адаптивный дизайн

    Мы прошли долгий путь. Вы научились создавать структуру страницы с помощью HTML, стилизовать её через CSS и оживлять интерфейс, используя JavaScript. На этом этапе вы уже можете создавать функциональные сайты. Однако, если вы попробуете создать на «чистых» технологиях что-то масштабное — например, аналог Instagram или Trello — вы столкнетесь с проблемами.

    Код станет огромным, запутанным и сложным для поддержки. А если открыть ваш сайт на смартфоне, он, скорее всего, будет выглядеть мелко и неудобно. В этой статье мы решим эти две фундаментальные проблемы современного веба: сложность разработки и адаптивность под разные устройства.

    Адаптивный дизайн: сайт для всех устройств

    Раньше, в «нулевых», сайты делали фиксированной ширины (обычно 960 или 1024 пикселя). Если открыть такой сайт на телефоне, приходилось постоянно приближать и отдалять контент (зумить), чтобы прочитать текст. Сегодня более 60% трафика в интернете приходится на мобильные устройства. Игнорировать это нельзя.

    Адаптивный дизайн (Responsive Web Design) — это подход, при котором сайт автоматически подстраивается под размер экрана пользователя, будь то огромный монитор, ноутбук, планшет или смартфон.

    Viewport: окно в мир

    Чтобы браузер на телефоне перестал «притворяться» большим монитором и масштабировать страницу, нам нужно сообщить ему об этом. Это делается через специальный мета-тег в <head>:

    Эта строка говорит браузеру: «Ширина области просмотра должна быть равна реальной ширине устройства, а масштаб — 1:1».

    Медиа-запросы (Media Queries)

    Главный инструмент адаптивности в CSS — это медиа-запросы. Они позволяют применять определенные стили только при выполнении условий (например, если ширина экрана меньше 600 пикселей).

    Пример:

    В этом примере блок .container будет синим на компьютере, но как только вы уменьшите окно браузера до 768px или откроете сайт на планшете, он станет зеленым и займет всю ширину экрана.

    !Иллюстрация того, как один и тот же контент перестраивается с трех колонок на одну при изменении ширины экрана.

    Резиновая верстка и математика пропорций

    Адаптивность — это не только переключение макетов, но и использование относительных единиц измерения (проценты %, vw, vh, rem) вместо фиксированных пикселей.

    Когда мы верстаем «резиновый» макет, нам часто нужно перевести макет из Photoshop или Figma (где размеры в пикселях) в проценты. Для этого используется формула пропорции:

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

    Например, если у нас есть контейнер шириной 1000px, и внутри него должен быть блок шириной 300px:

    Где — ширина целевого блока, — ширина родителя, — результат деления. В CSS мы запишем это как width: 30%.

    Mobile First

    Современный стандарт разработки называется Mobile First. Это стратегия, при которой вы сначала верстаете сайт для мобильных устройств (самый простой и легкий интерфейс), а затем с помощью медиа-запросов min-width добавляете сложности и колонки для больших экранов.

    Это заставляет разработчика сразу фокусироваться на самом важном контенте, отбрасывая лишнее.

    Проблема «Ванильного» JavaScript

    Вернемся к программированию. В предыдущей статье мы писали код, который искал кнопку и вешал на неё событие. Это называется императивный подход: вы говорите браузеру как сделать то, что вам нужно (найди элемент -> измени стиль -> добавь класс).

    Представьте, что вы делаете список задач (To-Do List). На чистом (ванильном) JS вам нужно:

  • Отследить нажатие Enter.
  • Считать текст из поля.
  • Создать новый div.
  • Вставить в него текст.
  • Найти родительский список.
  • Добавить div в список.
  • Очистить поле ввода.

    • А теперь представьте, что задачу можно удалить, отредактировать, отметить выполненной, и всё это должно синхронизироваться с сервером. Код превращается в «спагетти» — запутанный клубок, в котором невозможно разобраться.

    Здесь на сцену выходят Фреймворки.

    Эра Фреймворков и Библиотек

    Современный Frontend держится на «трех китах»: React, Vue и Angular. Несмотря на различия, они решают одну задачу: упрощают создание сложных интерфейсов.

    Компонентный подход

    Главная идея современных фреймворков — компоненты. Вместо того чтобы писать одну огромную HTML-страницу, вы разбиваете интерфейс на независимые кирпичики.

    * Кнопка — это компонент. * Шапка сайта — это компонент. * Карточка товара — это компонент.

    Вы можете использовать компонент «Кнопка» в шапке, в подвале и в карточке товара. Если вы захотите изменить цвет всех кнопок на сайте, вы поменяете его только в одном файле компонента.

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

    Декларативный подход

    Фреймворки используют декларативный подход. Вы не говорите браузеру как менять DOM. Вы просто описываете, как интерфейс должен выглядеть в зависимости от данных (состояния).

    Пример логики на React (псевдокод): > «Если переменная isLoading равна true, покажи спиннер загрузки. Иначе покажи список товаров».

    Вам не нужно вручную удалять спиннер и создавать DOM-узлы товаров. Фреймворк сделает это сам, как только изменится значение переменной isLoading.

    Virtual DOM

    Почему фреймворки такие быстрые? Операции с реальным DOM (тем самым, который мы разбирали в прошлой статье) — это очень медленный процесс для браузера. Если вы меняете 100 элементов в списке, браузер перерисовывает страницу 100 раз.

    Библиотека React популяризировала концепцию Virtual DOM. Это легкая копия реального DOM, которая хранится в памяти.

  • Когда данные меняются, React обновляет Виртуальный DOM (это мгновенно).
  • Затем он сравнивает новую версию Виртуального DOM со старой.
  • Он вычисляет минимально необходимые изменения.
  • И только потом точечно обновляет реальный DOM.

    • Экосистема: Node.js и NPM

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

    Node.js

    Изначально JavaScript жил только в браузере. Но в 2009 году появился Node.js — платформа, которая позволила запускать JS на компьютере или сервере, вне браузера. В современной frontend-разработке Node.js используется не как сервер, а как инструмент для запуска утилит сборки.

    NPM (Node Package Manager)

    Представьте, что вам нужен календарь для сайта. Вы можете писать его месяц сами, а можете скачать готовый код, который написали другие программисты. NPM — это гигантский склад (реестр) готовых решений. Это как App Store, только для библиотек кода.

    С помощью одной команды в терминале вы можете установить React, библиотеку для графиков, утилиту для работы с датами и многое другое:

    Сборщики (Bundlers)

    Браузеры не умеют читать файлы .vue или .jsx (формат React), и они плохо справляются с тысячами мелких файлов. Поэтому используются сборщики, такие как Webpack или Vite.

    Сборщик берет все ваши сотни компонентов, картинок, стилей, библиотек из NPM, «перемалывает» их и выдает на выходе один оптимизированный файл bundle.js, который подключается к HTML-странице.

    Single Page Application (SPA)

    Благодаря фреймворкам появился новый тип сайтов — SPA (Одностраничные приложения).

    В классическом сайте при переходе по ссылке вы ждете, пока загрузится новая белая страница. В SPA (например, VK, Gmail, Trello) страница загружается один раз. Когда вы кликаете по меню, сайт не перезагружается — JavaScript просто подменяет контент в центре экрана. Это создает ощущение нативного приложения, которое работает мгновенно.

    Заключение

    Современный Frontend — это уже не просто верстка текста. Это полноценная инженерная дисциплина.

  • Мы используем адаптивный дизайн, чтобы охватить всех пользователей.
  • Мы используем фреймворки (React, Vue, Angular), чтобы управлять сложностью и разбивать интерфейс на компоненты.
  • Мы используем инструменты сборки (Node.js, NPM, Webpack), чтобы автоматизировать рутину.

    • В следующих частях курса мы перейдем на «темную сторону» — в Backend, чтобы узнать, где хранятся данные, как работают серверы и базы данных, и как соединить их с нашим красивым фронтендом.

    4. Основы Backend-разработки: серверная логика, API и работа с базами данных

    Основы Backend-разработки: серверная логика, API и работа с базами данных

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

    Чтобы сайт «запомнил» пользователя, сохранил его заказ или показал ленту новостей, нам нужно спуститься в машинное отделение веб-разработки. Добро пожаловать в мир Backend.

    Что такое Backend?

    Веб-разработку часто сравнивают с рестораном.

    * Frontend — это обеденный зал. Здесь красивый интерьер, удобные стулья, меню и музыка. Это то, что видит посетитель (пользователь). * Backend — это кухня и склад. Посетитель туда не заходит. Там кипит работа: повара (сервер) готовят блюда по рецептам (код), берут продукты из холодильника (база данных) и отдают готовый заказ официанту (API).

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

    !Аналогия работы веб-приложения: Frontend как зал ресторана, Backend как кухня.

    Клиент-серверная архитектура

    Весь интернет работает по простой схеме диалога между двумя участниками:

  • Клиент (ваш браузер или мобильное приложение) отправляет Запрос (Request).
  • Сервер (удаленный компьютер) обрабатывает его и отправляет Ответ (Response).

    • Когда вы вводите google.com в адресную строку, вы отправляете запрос. Сервер Google получает его, понимает, что вы хотите главную страницу, и отправляет вам HTML-код в ответ.

    Что такое сервер?

    Многие новички представляют сервер как некое абстрактное облако. На самом деле, сервер — это просто мощный компьютер, который подключен к интернету 24/7 и на котором установлены специальные программы.

    Серверную логику можно писать на разных языках программирования: Python, PHP, Java, Ruby, Go. Но так как мы изучаем Fullstack на базе JavaScript, мы будем использовать Node.js. Это среда, которая позволяет запускать JavaScript вне браузера, прямо на сервере.

    API: Язык общения

    Как клиент и сервер понимают друг друга? Ведь клиент может быть написан на JS, сервер на Python, а база данных вообще использовать SQL. Им нужен общий протокол общения.

    Здесь на сцену выходит API (Application Programming Interface). В контексте веба мы чаще всего говорим о REST API.

    API — это набор правил (контракт). Это меню в нашем ресторане. Вы не можете просто крикнуть на кухню «Сделай мне вкусно!». Вы должны выбрать блюдо из меню и сказать официанту конкретную фразу.

    HTTP-методы

    Общение происходит по протоколу HTTP с помощью специальных «глаголов» (методов). Вот основные четыре, которые покрывают 90% задач (их называют CRUD — Create, Read, Update, Delete):

  • GET — «Дай мне данные». (Пример: открыть страницу товара).
  • POST — «Возьми эти данные и сохрани». (Пример: регистрация или отправка комментария).
  • PUT / PATCH — «Обнови эти данные». (Пример: редактирование профиля).
  • DELETE — «Удали эти данные». (Пример: удаление поста).

    • Сервер, получив такой запрос, анализирует его и отправляет ответ с кодом состояния. Вы наверняка видели код 404 (Not Found). Это способ сервера сказать: «Я не нашел то, что ты просил».

    * 200 OK — Всё прошло успешно. * 400 Bad Request — Ошибка клиента (неверные данные). * 500 Internal Server Error — Ошибка на сервере (пожар на кухне).

    Базы данных: Память интернета

    Если сервер — это повар, то База Данных (БД) — это огромный, идеально организованный склад продуктов. Сервер не хранит данные в своей оперативной памяти вечно (иначе при перезагрузке всё бы стерлось). Он записывает их в базу данных.

    Существует два основных типа баз данных:

    1. Реляционные (SQL)

    Примеры: PostgreSQL, MySQL.

    Представьте их как набор строгих таблиц Excel, связанных друг с другом. У вас есть таблица Users и таблица Orders. Они связаны по ID пользователя. Это очень надежно и структурировано.

    2. Нереляционные (NoSQL)

    Примеры: MongoDB.

    Представьте это как шкаф с папками. В каждой папке лежит документ (обычно в формате JSON). В одной папке может быть записано имя и возраст, а в соседней — имя, возраст и список любимых фильмов. Это дает гибкость.

    !Различие между табличным хранением данных в SQL и документным в NoSQL.

    Логика на примере: Пагинация

    Давайте рассмотрим реальную задачу Backend-разработчика. Представьте, что в вашем интернет-магазине 10 000 товаров. Если клиент попросит «Покажи товары» (GET запрос), и мы отправим все 10 000 сразу, браузер клиента зависнет, а трафик закончится.

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

    Формула для расчета общего количества страниц выглядит так:

    Где: * — итоговое количество страниц. * — функция округления вверх до целого числа (потолок). Даже если у нас вышло 5.1 страницы, нам нужно 6 страниц, чтобы показать последний товар. * — общее количество товаров в базе данных. * — лимит товаров на одной странице (например, 20 штук).

    Когда Frontend запрашивает «Страницу номер 3», Backend должен пропустить определенное количество товаров и взять следующие. Количество товаров, которые нужно пропустить (), рассчитывается так:

    Где: * (Skip) — количество товаров, которые нужно пропустить в базе данных. * — номер текущей страницы, которую запросил пользователь. * — количество товаров на странице.

    Например, для 3-й страницы при лимите 20: . Мы пропускаем первые 40 товаров и берем следующие 20.

    Формат обмена данными: JSON

    Мы уже упоминали JSON в теме про JavaScript, но в Backend-разработке это король форматов. Именно в виде JSON сервер отправляет данные клиенту.

    Пример ответа сервера на запрос профиля пользователя:

    Frontend получает эту строку, превращает её в объект JavaScript и подставляет данные в HTML.

    Безопасность: Главное правило Backend

    Есть одна аксиома, которую вы должны запомнить навсегда: Никогда не доверяйте данным от клиента.

    Frontend находится в руках пользователя. Хакер может отключить валидацию в браузере, подделать запрос и отправить вам вместо возраста -50 или вместо имени вредоносный код.

    Задача Backend-разработчика — быть параноиком:

  • Проверять все входящие данные.
  • Никогда не хранить пароли в открытом виде (использовать хеширование).
  • Проверять права доступа (может ли этот пользователь удалить этот пост?).

    • Заключение

    Backend — это мозг вашего приложения. Он обрабатывает логику, хранит данные и защищает систему.

    Теперь у вас есть полная картина Fullstack-разработки:

  • HTML/CSS создают внешний вид.
  • JS (Frontend) оживляет интерфейс в браузере.
  • Node.js (Backend) принимает запросы и управляет данными.
  • База данных хранит информацию вечно.

    • В следующих материалах мы начнем соединять эти части воедино, создавая полноценное приложение.

    5. Инструменты профессионала: Git, командная строка и деплой проекта

    Инструменты профессионала: Git, командная строка и деплой проекта

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

    В этой статье мы превратимся из любителей в профессионалов. Мы освоим три кита современной разработки:

  • Командная строка — пульт управления компьютером без мышки.
  • Git — машина времени для вашего кода.
  • Деплой — публикация сайта в интернете.

    • Командная строка: Терминал

    Многие новички боятся черного экрана с мигающим курсором, напоминающего фильмы про хакеров. Но для разработчика Терминал (или Консоль) — это самый мощный инструмент.

    Почему не использовать обычные папки и мышку? Потому что серверы, на которых будут работать ваши сайты, часто вообще не имеют графического интерфейса (монитора и мыши). Умение работать с командной строкой — это базовый навык выживания в IT.

    !Сравнение графического интерфейса и командной строки.

    Основные команды

    Вам не нужно знать тысячи команд. Для начала достаточно пяти-шести. В Windows (PowerShell), macOS и Linux они очень похожи:

    * pwd (Print Working Directory) — «Где я?». Показывает текущую папку. * ls (List) — «Что здесь есть?». Показывает список файлов и папок. * cd <папка> (Change Directory) — «Зайди в папку». Например: cd my-project. * cd .. — «Выйди назад». Переход на уровень выше. * mkdir <имя> (Make Directory) — «Создай папку». * touch <файл> (в Windows иногда new-item) — «Создай файл».

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

    Git: Система контроля версий

    Представьте, что вы пишете курсовую работу. У вас на рабочем столе появляются файлы: * diploma.doc * diploma_final.doc * diploma_final_ispravleno.doc * diploma_TOCHNO_FINAL_v2.doc

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

    Git — это система контроля версий. Это ваша «машина времени». Она позволяет сохранять состояния проекта (снимки) и перемещаться между ними.

    > Важно различать: Git — это программа, установленная на вашем компьютере. GitHub (или GitLab) — это сайт в интернете, где хранятся ваши репозитории Git.

    Как работает Git?

    Git следит за изменениями в файлах. Процесс сохранения выглядит так:

  • Вы пишете код.
  • Вы говорите Git: «Я хочу сохранить эти файлы» (команда add).
  • Вы делаете «снимкок» (команда commit).

    • Каждый коммит имеет уникальный идентификатор (хеш) и комментарий автора.

    !Визуализация истории коммитов и ветвления в Git.

    Базовый сценарий работы

    Предположим, у вас есть папка с проектом. Вот что нужно сделать в терминале:

  • Инициализация: Превращаем обычную папку в репозиторий Git.
  • Добавление файлов: Говорим Git, какие файлы подготовить к сохранению (точка означает «все файлы»).
  • Создание коммита: Делаем снимок с описанием того, что мы сделали.

    • Теперь, если вы случайно удалите все файлы, вы сможете восстановить их одной командой.

    Ветки (Branches)

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

    Вы создаете ветку — копию проекта. Вы можете делать в ней что угодно: ломать, экспериментировать. Основная версия сайта (обычно ветка main или master) останется нетронутой. Когда новая функция будет готова и протестирована, вы делаете Merge (слияние) — объединяете ветку с основной.

    GitHub: Социальная сеть для кода

    Хранить Git только на своем компьютере ненадежно. Поэтому разработчики используют удаленные репозитории. Самый популярный сервис — GitHub.

    Это не просто хранилище. Это портфолио разработчика. Работодатели часто смотрят не на ваше резюме, а на ваш профиль GitHub: как часто вы пишете код, насколько он чистый и как вы работаете в команде.

    Чтобы отправить ваш локальный код на GitHub:

  • Создайте новый репозиторий на сайте GitHub.
  • Свяжите его с вашей папкой:
  • Отправьте код (Push):

    • Теперь ваш код в безопасности, и другие разработчики могут (если вы разрешите) помогать вам его улучшать.

    Деплой: Выход в свет

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

    Пока вы разрабатываете сайт, он доступен по адресу localhost (или 127.0.0.1). Это ваш компьютер. Никто из интернета не может зайти на ваш localhost.

    Статический vs Динамический деплой

    Выбор способа деплоя зависит от того, какой сайт вы сделали.

  • Статические сайты (Frontend only): Если у вас только HTML, CSS и JS (без базы данных и Node.js сервера), деплой элементарен. Файлы просто нужно положить на файловый хостинг.
    • Инструменты:* GitHub Pages, Vercel, Netlify. Цена:* Обычно бесплатно.

  • Динамические приложения (Fullstack): Если у вас есть Backend (Node.js, Python) и база данных, вам нужен полноценный сервер, который будет вычислять запросы.
    • Инструменты:* Heroku, DigitalOcean, AWS, Render. Цена:* Есть бесплатные тарифы, но для серьезных проектов нужно платить.

    Современный подход: CI/CD

    В профессиональной разработке никто не копирует файлы на сервер вручную через флешку или FTP. Используется CI/CD (Continuous Integration / Continuous Delivery) — непрерывная интеграция и доставка.

    Как это выглядит на практике (например, связка GitHub + Vercel):

  • Вы пишете код на своем компьютере.
  • Делаете git commit и git push на GitHub.
  • Vercel (хостинг) видит, что на GitHub появился новый код.
  • Vercel автоматически скачивает его, собирает проект и обновляет сайт.

    • Весь процесс от сохранения файла до обновления сайта у всех пользователей занимает 1-2 минуты и происходит без вашего участия.

    !Иллюстрация автоматического процесса доставки кода.

    Практический пример: Публикация сайта за 5 минут

    Давайте соберем все знания курса и опубликуем ваш первый проект.

    Шаг 1. Подготовка Убедитесь, что у вас есть файл index.html. Откройте терминал в папке проекта.

    Шаг 2. Git

    Шаг 3. GitHub Создайте репозиторий на GitHub. Скопируйте команды, которые он предложит, и вставьте в терминал (обычно это git remote add... и git push...).

    Шаг 4. Деплой на Vercel (или Netlify)

  • Зайдите на сайт Vercel.
  • Войдите через GitHub.
  • Нажмите "Add New Project".
  • Выберите ваш репозиторий из списка.
  • Нажмите "Deploy".

    • Через минуту вы получите ссылку вида my-project.vercel.app. Поздравляю! Теперь вы можете отправить эту ссылку друзьям, добавить её в портфолио или показать на собеседовании.

    Заключение

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

    Теперь вы обладаете полным набором навыков Fullstack-разработчика начального уровня:

  • Вы понимаете структуру (HTML/CSS).
  • Вы пишете логику (JS).
  • Вы знаете, как работают данные (Backend).
  • Вы умеете управлять кодом и публиковать его (Git/Deploy).

    • Это прочный фундамент. Дальше вас ждет углубление в каждую из этих областей, изучение паттернов проектирования и работа над сложными архитектурными решениями. Но база у вас уже есть.