Основы фронтенд-разработки: с нуля до первого проекта

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

1. Введение в веб-технологии: семантическая верстка на HTML5 и основы стилизации CSS3

Введение в веб-технологии: семантическая верстка на HTML5 и основы стилизации CSS3

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

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

Как работает веб: краткий экскурс

Прежде чем писать код, важно понять, что происходит, когда вы вводите адрес сайта в браузере. Интернет работает по модели «Клиент-Сервер».

* Клиент — это ваш браузер (Chrome, Firefox, Safari). Он отправляет запрос. * Сервер — это удаленный компьютер, который хранит файлы сайта. Он отправляет ответ.

Когда сервер присылает файлы, браузер выступает в роли переводчика: он читает код и превращает его в красивую картинку, которую вы видите на экране.

!Визуализация процесса обмена данными между браузером пользователя и удаленным сервером.

HTML5: Скелет вашего сайта

HTML (HyperText Markup Language) — это язык гипертекстовой разметки. Это не язык программирования в привычном смысле (здесь нет переменных или циклов), это язык структуры.

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

Пример анатомии тега:

Здесь: * <p> — открывающий тег (обозначает абзац). * class="text" — атрибут (дополнительная информация о теге). * Привет, мир! — содержимое. * </p> — закрывающий тег.

Структура HTML-документа

Любой современный сайт начинается с базового шаблона. Давайте посмотрим на минимально необходимый код:

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

  • <!DOCTYPE html> — сообщает браузеру, что мы используем современный стандарт HTML5.
  • <html> — корневой элемент, контейнер для всего кода.
  • <head> — «голова» сайта. Здесь хранится техническая информация, которая не видна на странице (кодировка, заголовок вкладки, подключение стилей).
  • <body> — «тело» сайта. Всё, что вы напишете здесь, пользователь увидит в окне браузера.

    • Семантическая верстка: почему это важно?

    В старых версиях HTML разработчики часто использовали тег <div> (обычный блок) для всего подряд. Это работало визуально, но создавало проблемы для поисковиков (Google, Яндекс) и людей с ограниченными возможностями.

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

    HTML5 представил набор семантических тегов, которые описывают структуру страницы:

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

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

    > Использование правильных тегов помогает скринридерам (программам для незрячих) корректно читать ваш сайт. Это называется доступностью (Accessibility).

    Подробнее о семантике можно прочитать в документации MDN Web Docs.

    CSS3: Добавляем стиль

    Если HTML — это скелет, то CSS (Cascading Style Sheets) — это кожа и одежда. CSS отвечает за цвета, шрифты, отступы и расположение элементов.

    Синтаксис CSS

    CSS состоит из правил. Каждое правило имеет селектор (к чему применяем стиль) и блок объявлений (что именно меняем).

    * p — селектор (выбираем все абзацы). * color — свойство. * red — значение.

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

  • По тегу: h1 { ... } — применится ко всем заголовкам h1.
  • По классу: .button { ... } — применится ко всем элементам с атрибутом class="button". Классы начинаются с точки.
  • По ID: #logo { ... } — применится к одному уникальному элементу с id="logo". ID начинается с решетки.

    • > Хорошей практикой считается использование классов для стилизации. ID лучше оставлять для уникальных элементов или для JavaScript, так как ID имеет слишком высокий приоритет, который сложно переопределить.

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

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

    Этот «ящик» состоит из четырех слоев (от центра наружу):

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

    • !Визуальное представление блочной модели CSS: контент, внутренние отступы, границы и внешние отступы.

    Пример кода для понимания отступов:

    Практика: Собираем всё вместе

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

    HTML:

    CSS:

    В этом примере мы использовали семантический тег <article>, так как карточка товара — это самостоятельная единица контента. Мы задали классы для гибкой стилизации и использовали свойства блочной модели (padding, width, border) для оформления.

    Заключение

    Сегодня вы сделали первый шаг в веб-разработке. Мы разобрали: * Как браузер получает данные от сервера. * Структуру HTML-документа и важность семантических тегов. * Основы синтаксиса CSS и концепцию блочной модели.

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

    Попробуйте самостоятельно создать HTML-файл на своем компьютере и поэкспериментировать с тегами и стилями. Практика — лучший учитель!

    2. Программирование на JavaScript: синтаксис, типы данных, функции и работа с объектами

    Программирование на JavaScript: синтаксис, типы данных, функции и работа с объектами

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

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

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

    Подключение JavaScript

    Прежде чем писать код, нужно понять, куда его вставлять. Как и CSS, JavaScript можно писать прямо в HTML или в отдельном файле. Профессиональный стандарт — использовать отдельный файл с расширением .js.

    Для подключения скрипта используется тег <script>. Обычно его ставят перед закрывающим тегом </body>, чтобы HTML успел загрузиться до начала выполнения скрипта.

    Переменные: Хранение данных

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

    Переменная — это именованная область памяти, «коробка», в которую можно положить значение.

    !Метафора переменной: коробка с именем (названием переменной) и содержимым (значением).

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

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

    • > Существует старый способ объявления через var, но в современной разработке его стараются избегать из-за неочевидного поведения области видимости.

    Правила именования

    Имена переменных должны быть понятными. Используйте стиль camelCase (верблюжий регистр): первое слово с маленькой буквы, каждое следующее — с большой.

    * Хорошо: userAge, shoppingList, isMenuOpen * Плохо: u, x, peremennaya

    Типы данных

    В коробку-переменную можно положить разные вещи. В JavaScript существует 8 основных типов данных. Мы рассмотрим самые важные из них.

    1. Числа (Number)

    Используются для математических операций. В JS нет разделения на целые и дробные числа — все они имеют тип Number.

    2. Строки (String)

    Текст, заключенный в кавычки. Можно использовать одинарные ', двойные " или обратные ` ` кавычки.

    3. Булевый тип (Boolean)

    Логический тип, который имеет всего два значения: true (истина) и false (ложь). Используется для принятия решений.

    4. Null и Undefined

    Это специальные типы, обозначающие «пустоту», но с разным смыслом.

    * undefined — «значение не присвоено». Если вы создали переменную let x;, но ничего в нее не положили, она будет undefined. * null — «значение отсутствует». Это намеренное указание на то, что здесь ничего нет.

    Операторы

    С данными можно производить действия с помощью операторов.

    Арифметические операторы

    * Сложение: + * Вычитание: - Умножение: * Деление: / * Остаток от деления: %

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

    Используются для проверки условий. Результатом всегда будет true или false.

    * Больше/Меньше: >, < * Больше или равно/Меньше или равно: >=, <= * Строгое равенство: === (проверяет и значение, и тип) * Строгое неравенство: !==

    > В JavaScript есть оператор нестрогого равенства ==, который пытается приводить типы (например, 5 == "5" вернет true). Новичкам и профессионалам рекомендуется всегда использовать строгое равенство ===, чтобы избежать ошибок.

    Условные конструкции

    Программы редко бывают линейными. Часто нам нужно выполнить код только при определенном условии. Для этого используется конструкция if (если) ... else (иначе).

    Функции: Строительные блоки

    Функция — это блок кода, который можно определить один раз и вызывать многократно. Это похоже на рецепт или мини-программу внутри программы.

    Объявление функции

    Здесь name — это параметр (переменная, которая примет значение при вызове).

    Вызов функции

    Возврат значения

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

    !Функция принимает аргументы, обрабатывает их и возвращает результат.

    Стрелочные функции

    В современном JS часто используется более короткий синтаксис:

    Объекты: Моделирование реальности

    До сих пор мы работали с простыми типами данных. Но что, если нам нужно описать пользователя, у которого есть имя, возраст и адрес? Создавать три разные переменные (userName, userAge, userAddress) неудобно.

    Здесь на помощь приходят Объекты.

    Объект — это коллекция свойств. Свойство состоит из ключа (имени) и значения. Это похоже на анкету или картотеку.

    Создание объекта

    Доступ к свойствам

    Получить данные из объекта можно двумя способами:

  • Через точку (самый частый способ): user.name
  • Через квадратные скобки: user["age"]

    • Методы объекта

    Объекты могут содержать не только данные, но и действия. Функции, помещенные внутрь объекта, называются методами.

    Ключевое слово this здесь ссылается на сам объект robot. Это позволяет методу иметь доступ к данным внутри своего объекта.

    Заключение

    Сегодня мы заложили фундамент программирования на JavaScript. Мы узнали:

    * Как создавать переменные (let, const) и почему важны типы данных. * Как управлять потоком программы с помощью условий (if/else`). * Как упаковывать логику в функции для повторного использования. * Как структурировать сложные данные с помощью объектов.

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

    Для закрепления материала рекомендую открыть консоль браузера (F12 -> вкладка Console) и попробовать написать несколько переменных и функций самостоятельно. Удачи!

    3. Интерактивность и асинхронность: манипуляции с DOM и взаимодействие с сервером через API

    Интерактивность и асинхронность: манипуляции с DOM и взаимодействие с сервером через API

    Поздравляю! Вы уже прошли большой путь. У вас есть структура страницы (HTML), красивое оформление (CSS) и понимание логики программирования (JavaScript). Но пока что эти части существуют немного обособленно. Ваш JavaScript-код умеет считать числа в консоли, но он еще не умеет менять текст на странице или реагировать на нажатие кнопки.

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

    DOM: Мост между кодом и браузером

    Когда браузер загружает вашу HTML-страницу, он не просто рисует картинку. Он создает в памяти сложную древовидную структуру, которая называется DOM (Document Object Model) — Объектная Модель Документа.

    Представьте, что DOM — это карта вашего сайта, понятная для JavaScript. Каждый тег, каждый атрибут и каждый кусочек текста превращается в объект (узел дерева), который мы можем найти, изменить или удалить.

    !Схематичное изображение DOM-дерева, показывающее вложенность HTML-элементов.

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

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

    Допустим, у нас есть такой HTML:

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

    Изменение элементов

    Когда элемент найден и сохранен в переменную, мы можем менять его свойства. Помните объекты из прошлой статьи? DOM-элементы — это тоже объекты.

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

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

    Чтобы элемент отреагировал, мы должны «повесить» на него слушатель событий с помощью метода addEventListener.

    Синтаксис выглядит так: элемент.addEventListener('событие', функция);

    Пример с кнопкой:

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

    Самые популярные события: * click — клик мышью. * submit — отправка формы. * input — ввод текста в поле. * scroll — прокрутка страницы.

    Асинхронность: Как не заморозить браузер

    JavaScript — однопоточный язык. Это значит, что он может делать только одну вещь за раз. Представьте, что вы стоите в очереди в кассу. Если человек перед вами решит заполнять сложные документы в течение 10 минут, вся очередь встанет. Никто не сможет купить продукты, пока он не закончит.

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

    Чтобы этого избежать, JavaScript использует асинхронность.

    Аналогия с рестораном

  • Синхронный подход: Официант принимает заказ, идет на кухню, ждет 20 минут, пока повар приготовит еду, приносит её вам, и только потом идет к следующему столику. Это неэффективно.
  • Асинхронный подход: Официант принимает заказ, передает его на кухню и сразу идет обслуживать другие столики. Когда кухня сообщает («Эй, заказ готов!»), официант возвращается и приносит еду.

    • В JS роль «кухни» выполняют Web API (таймеры, запросы к серверу), а роль «официанта» — цикл событий (Event Loop).

    Взаимодействие с сервером: API и Fetch

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

    API (Application Programming Interface) — это набор правил, по которым одна программа (ваш сайт) может общаться с другой программой (сервером).

    !Визуализация процесса обмена данными, где API выступает посредником между браузером и сервером.

    Формат JSON

    Сервер и браузер должны понимать друг друга. Самый популярный язык общения — это JSON (JavaScript Object Notation). Это текстовый формат, который выглядит почти как объекты JavaScript, но ключи всегда в двойных кавычках.

    Пример JSON:

    Метод fetch()

    Для отправки запросов в современном JS используется функция fetch(). Она возвращает специальный объект — Promise (Обещание). Обещание говорит: «Я пока не знаю результат, но я обещаю вернуть его позже (успех или ошибку)».

    Чтобы работать с обещаниями удобно, мы используем ключевые слова async и await.

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

    Пример получения данных:

    Практика: Создаем генератор фактов о котах

    Давайте объединим DOM, события и API в мини-проекте. Мы сделаем кнопку, при нажатии на которую будет загружаться случайный факт о котах.

    Шаг 1: HTML Создадим контейнер для факта и кнопку.

    Шаг 2: JavaScript Напишем логику.

    Разбор кода:

  • Мы выбрали элементы через querySelector.
  • Создали асинхронную функцию loadFact.
  • Внутри функции мы сначала меняем текст на "Загрузка...", чтобы интерфейс был отзывчивым.
  • Используем await fetch(...) для получения данных.
  • Используем await response.json() для парсинга ответа.
  • Записываем полученный факт в textContent нашего блока.
  • Блок try...catch нужен для безопасности: если сервер сломается или пропадет интернет, мы не «упадем» с ошибкой, а выведем понятное сообщение.

    • Заключение

    Сегодня вы перешли важный рубеж. Ваш код перестал быть замкнутой системой. Теперь вы умеете:

    * Находить и изменять элементы на странице через DOM. * Реагировать на действия пользователя с помощью событий. * Понимать разницу между синхронным и асинхронным кодом. * Получать данные с сервера, используя fetch и async/await.

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

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

    4. Современные фреймворки: введение в React, Vue и компонентный подход к разработке

    Современные фреймворки: введение в React, Vue и компонентный подход к разработке

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

    Однако, когда проект становится большим — например, социальная сеть или интернет-магазин — ручное управление DOM (то, что мы делали через document.querySelector) превращается в кошмар. Код становится запутанным, сложным для поддержки и склонным к ошибкам. Этот стиль часто называют «спагетти-кодом».

    Сегодня мы узнаем, как современные разработчики решают эту проблему с помощью фреймворков и библиотек, таких как React и Vue, и разберем главную концепцию современной разработки — компонентный подход.

    Почему «чистого» JavaScript недостаточно?

    Представьте, что вы строите дом.

    * Чистый JS (Vanilla JS) — это когда вы сами лепите каждый кирпич из глины, сами пилите доски из бревен и сами куете гвозди. Это дает полный контроль, но занимает уйму времени. * Фреймворки и библиотеки — это использование готовых заводских панелей, стеклопакетов и модулей. Вы просто собираете дом из надежных, проверенных блоков.

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

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

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

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

    Компонент — это кирпичик вашего приложения. Это может быть кнопка, карточка товара, шапка сайта или форма обратной связи. Компонент содержит в себе всё необходимое: и структуру (HTML), и стили (CSS), и логику (JS).

    !Визуализация того, как страница разбивается на независимые компоненты.

    Преимущества компонентов:

  • Переиспользование: Вы создаете компонент «Кнопка» один раз и используете его в 50 местах на сайте. Если нужно поменять цвет всех кнопок, вы меняете его только в одном файле.
  • Разделение ответственности: Логика корзины находится в компоненте корзины, а логика поиска — в компоненте поиска. Они не мешают друг другу.
  • Удобство тестирования: Легче проверить работу одной маленькой кнопки, чем всего сайта целиком.

    • Знакомство с гигантами: React и Vue

    На рынке существует «большая тройка» инструментов: React, Vue и Angular. Мы сосредоточимся на первых двух, так как они наиболее дружелюбны к новичкам и популярны в 2024 году.

    React.js

    React — это библиотека, разработанная компанией Facebook (Meta). Это самый популярный инструмент в мире фронтенда.

    Главная особенность React — использование JSX. Это синтаксис, который позволяет писать HTML прямо внутри JavaScript. Поначалу это выглядит странно, но очень быстро становится удобным.

    Пример компонента на React (счетчик кликов):

    Обратите внимание: мы не ищем кнопку через querySelector. Мы просто говорим: «При клике увеличь count на 1». React сам обновит текст в абзаце <p>.

    Подробнее можно почитать в официальной документации React.

    Vue.js

    Vue (читается как «вью») — это фреймворк, созданный разработчиком Эваном Ю. Он славится своей простотой и элегантностью.

    Vue использует подход Single File Components (однофайловые компоненты). Весь код компонента лежит в одном файле с расширением .vue, который разделен на три понятные секции:

  • <template> — HTML-разметка.
  • <script> — Логика JS.
  • <style> — Стили CSS.

    • Пример того же счетчика на Vue:

    Vue автоматически понимает, что если изменилась переменная count, нужно обновить текст на странице.

    Документация доступна на официальном сайте Vue.

    Virtual DOM: Секрет производительности

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

    Секрет кроется в технологии Virtual DOM (Виртуальный DOM).

    Настоящий DOM (структура страницы в браузере) очень «тяжелый». Каждое изменение в нем заставляет браузер пересчитывать размеры элементов и перерисовывать экран. Это ресурсоемкая операция.

    React и Vue создают легкую копию DOM в памяти JavaScript. Когда данные меняются (например, счетчик увеличился с 0 до 1):

  • Фреймворк обновляет Виртуальный DOM (это происходит мгновенно).
  • Фреймворк сравнивает новую версию Виртуального DOM со старой.
  • Он вычисляет минимально необходимые изменения (в нашем случае — поменять только одну цифру текста).
  • Он точечно вносит это изменение в реальный DOM.

    • !Иллюстрация процесса оптимизации рендеринга через Virtual DOM.

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

    Что выбрать: React или Vue?

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

    | Характеристика | React | Vue | | :--- | :--- | :--- | | Порог входа | Средний. Нужно понять JS и JSX. | Низкий. Похож на обычный HTML+JS. | | Гибкость | Очень высокая. Вы сами выбираете библиотеки для всего. | Средняя. Многое уже встроено «из коробки». | | Рынок труда | Огромное количество вакансий. | Вакансий меньше, но конкуренция ниже. | | Экосистема | Гигантская, поддерживается Meta. | Большая, поддерживается сообществом. |

    Заключение

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

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

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

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

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

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

    Кроме того, в реальной разработке над одним проектом часто трудятся десятки людей. Как они не мешают друг другу? Как они объединяют свой код?

    В этой, заключительной статье курса, мы разберем «джентльменский набор» профессионального разработчика: систему контроля версий Git, менеджеры пакетов NPM, сборщики проектов и процесс публикации сайта в интернет (деплой).

    Git: Машина времени для вашего кода

    Представьте, что вы пишете курсовую работу. Вы сохраняете файл как diploma.doc. Потом вносите правки и сохраняете как diploma_final.doc. Потом научный руководитель просит исправить введение, и появляется diploma_final_v2.doc. Через неделю папка забита файлами, и вы уже не помните, где и что меняли.

    В программировании эта проблема решается с помощью систем контроля версий. Самая популярная из них — Git.

    Что такое Git?

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

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

    * Репозиторий (Repository): Папка вашего проекта, за которой следит Git. Хранилище всех версий. * Коммит (Commit): Точка сохранения. Это снимок состояния всех файлов в определенный момент времени с вашим комментарием (например, «Добавил шапку сайта»). * Ветка (Branch): Параллельная вселенная проекта. Вы можете создать отдельную ветку для экспериментов, сломать там всё, и это никак не повлияет на основную версию сайта.

    !Визуализация потока данных в Git: от изменений в файле до отправки на удаленный сервер.

    Базовые команды

    Работа с Git обычно происходит в терминале (консоли). Вот минимальный набор команд для выживания:

  • git init — превращает текущую папку в репозиторий Git. С этого момента слежка началась.
  • git add . — говорит Git: «Я хочу сохранить изменения во всех файлах» (подготовка к снимку).
  • git commit -m "Сообщение" — делает снимок (коммит) с описанием того, что вы сделали.
  • git status — показывает, какие файлы изменились и готовы ли они к коммиту.

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

    Если Git — это инструмент на вашем компьютере, то GitHub (или GitLab, Bitbucket) — это веб-сервис, где хранятся ваши репозитории. Это «облако» для кода.

    Зачем нужен GitHub:

  • Бэкап: Если сгорит ноутбук, код останется на сервере.
  • Портфолио: Работодатели смотрят ваш профиль на GitHub, чтобы оценить ваши навыки.
  • Командная работа: Несколько программистов могут отправлять свой код в один удаленный репозиторий.

    • Чтобы отправить код на GitHub, используются команды: * git push — «толкнуть» изменения с вашего компьютера на сервер. * git pull — «стянуть» свежие изменения с сервера к себе (если кто-то другой обновил код).

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

    Раньше JavaScript жил только в браузере. Но в 2009 году появилась платформа Node.js, которая позволила запускать JS прямо на компьютере или сервере. Вместе с ней пришел NPM (Node Package Manager).

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

    package.json

    В корне любого современного JS-проекта лежит файл package.json. Это «паспорт» проекта. В нем написано: * Название и версия проекта. * Список зависимостей (dependencies) — библиотек, которые нужны проекту для работы.

    Когда вы скачиваете чужой проект, в нем обычно нет папки с самими библиотеками (она слишком тяжелая). Вы просто пишете в консоли команду:

    NPM читает package.json, идет в интернет, скачивает все нужные библиотеки и складывает их в папку node_modules.

    > Папка node_modules может весить сотни мегабайт. Никогда не отправляйте её в Git! Для этого создают специальный файл .gitignore, где пишут, какие папки Git должен игнорировать.

    Сборка проекта: От кода к продукту

    В предыдущей статье мы говорили о React и Vue. Мы писали код в файлах .jsx или .vue, использовали современный синтаксис. Но вот проблема: браузеры (особенно старые) не понимают эти форматы напрямую. Им нужен старый добрый HTML, CSS и обычный JS.

    Здесь на сцену выходят сборщики (Bundlers). Самые популярные сегодня — Vite (очень быстрый и современный) и Webpack (классический, мощный).

    Что делает сборщик?

  • Транспиляция: Переводит современный JS в старый стандарт, понятный всем браузерам (с помощью инструмента Babel).
  • Компиляция: Превращает файлы .vue или .jsx в обычный JavaScript.
  • Минификация: Удаляет из кода все пробелы, комментарии и сокращает имена переменных, чтобы файлы весили меньше и сайт грузился быстрее.
  • Бандлинг (Bundling): Собирает сотни ваших маленьких файлов-компонентов в один или два итоговых файла.

    • Обычно для запуска сборки используется команда:

    После её выполнения в папке проекта появляется папка dist (или build). В ней лежит готовый к публикации сайт: оптимизированный, сжатый и понятный браузеру.

    !Иллюстрация того, как сборщик превращает исходный код разработчика в готовые файлы для браузера.

    Деплой: Публикация в интернет

    Ваш сайт собран. Теперь нужно, чтобы его увидели люди. Процесс размещения сайта на удаленном сервере называется деплой (deployment).

    Раньше это было сложно: нужно было покупать сервер, настраивать Linux, копировать файлы через FTP. Сейчас всё изменилось. Существуют сервисы, которые делают это автоматически и бесплатно для небольших проектов.

    Лидеры индустрии для фронтенда: * Vercel (создатели Next.js). * Netlify. * GitHub Pages.

    Как выглядит современный деплой?

    Это похоже на магию. Процесс называется CI/CD (Continuous Integration / Continuous Delivery), но в простом варианте это работает так:

  • Вы регистрируетесь на Vercel или Netlify.
  • Даете сервису доступ к вашему GitHub.
  • Выбираете нужный репозиторий из списка.
  • Нажимаете кнопку «Deploy».

    • Всё! Сервис сам: * Скачает ваш код с GitHub. * Установит зависимости (npm install). * Запустит сборку (npm run build). * Возьмет файлы из папки dist и разместит их на своих серверах. * Выдаст вам красивую ссылку (например, my-project.vercel.app).

    Самое приятное: теперь каждый раз, когда вы будете делать git push (отправлять изменения на GitHub), Vercel увидит это и автоматически обновит ваш сайт. Это занимает 1-2 минуты.

    Заключение курса

    Поздравляю! Вы завершили курс «Основы фронтенд-разработки». Давайте вспомним наш путь:

  • Мы построили каркас с помощью HTML.
  • Навели красоту, используя CSS.
  • Добавили логику и интерактивность на JavaScript.
  • Научились общаться с сервером через API.
  • Узнали о силе компонентов в React и Vue.
  • И сегодня освоили инструменты для сохранения (Git) и публикации (Deploy) вашей работы.

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

    Что дальше? Практика. Придумайте идею своего проекта — блог, список задач, сайт с прогнозом погоды — и реализуйте её от начала до конца. Ошибайтесь, гуглите решения, читайте документацию. Именно так становятся профессионалами.

    Удачи в мире кода! Ваш первый проект уже ждет вас.