Пошаговый курс для тех, кто хочет понять, как создаются современные сайты и приложения. Простым языком — с примерами из жизни, аналогиями и комментариями к каждой строке кода.
HTML (HyperText Markup Language — язык разметки) задаёт структуру любой веб-страницы. Это основа всего.
<!DOCTYPE html> <!-- Говорим браузеру: это HTML5 --> <html lang="ru"> <!-- Корневой тег. Язык — русский --> <head> <!-- Паспорт страницы --> <meta charset="UTF-8"> <!-- Кодировка (кириллица, эмодзи) --> <title>Моя страница</title> <!-- Текст во вкладке --> </head> <body> <!-- Начало видимой части --> <h1>Привет, мир!</h1> <!-- Главный заголовок --> <p>Это мой первый сайт</p> <!-- Абзац текста --> </body> </html>Запомни: HTML — не язык программирования, а язык разметки. Он не считает и не принимает решения. Он лишь описывает, что именно находится на странице: заголовок, абзац, картинка, ссылка.
CSS (Cascading Style Sheets — каскадные таблицы стилей) отвечает за внешний вид: цвета, расположение, размеры, анимации.
CSS работает через селекторы — шаблоны-подсказки, которые говорят: «найди элемент с таким именем и измени его внешний вид».
class="btn"
(класс — как метка на одежде: можно повесить на любую вещь)
id="main"
(ID — как паспорт: уникальный, только один такой)
/* Выбираем элемент с class="card" */ .card { background: #ffffff; /* Белый фон */ padding: 20px; /* Отступ внутри 20px */ border-radius: 12px; /* Скруглённые углы */ box-shadow: 0 4px 12px /* Лёгкая тень под элементом */ rgba(0,0,0,0.1);
transition: 0.3s; /* Плавная анимация 0.3 сек */ } /* При наведении мыши — поднимаем карточку */ .card:hover { transform: translateY(-4px); /* Сдвиг вверх 4px */ box-shadow: 0 8px 24px /* Тень сильнее */ rgba(0,0,0,0.15);
}Flexbox и Grid — два мощных инструмента CSS для раскладки. Flexbox — как раскладывать книги в одну полку (одна линия). Grid — как расставлять мебель по комнате (сетка строк и столбцов).
JavaScript — язык программирования, который понимает каждый браузер. Он делает страницу живой: реагирует на клики, загружает данные, анимирует.
// Находим кнопку по её ID на странице const btn = document.getElementById('myBtn');
// Находим параграф для вывода текста const output = document.getElementById('output');
// Счётчик кликов — начинаем с нуля let count = 0;
// «Повешали» обработчик: «при клике на кнопку...» btn.addEventListener('click', () => {
count++; // Увеличиваем счётчик на 1 output.textContent = // Меняем текст на странице: `Нажато ${count} раз!`; // подставляем число
});const — константа, значение нельзя переписать (как запечатанный конверт).
let — переменная, значение можно менять (как записная книжка).
В современном JS почти всегда используй const, если значение не меняется.
Responsive Design — сайт автоматически подстраивается под размер экрана: одна колонка на телефоне, две — на планшете, три — на мониторе.
Основной инструмент — media query (медиа-запрос). Это условие: «Если экран шире 768px — примени эти стILES».
/* Сначала — стили для телефона (mobile-first) */ .grid { display: grid;
grid-template-columns: 1fr; /* 1 колонка */ gap: 20px;
} /* Экран шире 768px — 2 колонки */ @media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr;
} } /* Экран шире 1200px — 3 колонки */ @media (min-width: 1200px) { .grid { grid-template-columns: 1fr 1fr 1fr;
} }Золотое правило: пиши стили «mobile-first» — сначала для маленького экрана,
потом добавляй min-width для больших. Так код проще читать и поддерживать.
Когда вы открываете сайт, браузер отправляет запрос на сервер и получает ответ. Весь обмен идёт по правилам — протоколам.
HTTP (HyperText Transfer Protocol — протокол передачи данных). Данные передаются открытым текстом — без шифрования.
:80 — стандартный «номер двери»
HTTPS (HTTP Secure) — то же самое, но данные зашифрованы с помощью SSL/TLS-сертификата.
:443 — «номер защищённой двери»
// ===== HTTP (небезопасно) ===== // Данные летят открытым текстом — как открытка fetch('http://example.com/api/user')
.then(res => res.json());
// ===== HTTPS (безопасно!) ===== // Данные зашифрованы — как запечатанный конверт fetch('https://example.com/api/user')
.then(res => res.json());
// Разница — всего 4 буквы: "http" → "https" // Но безопасность — на порядок выше!Правило: всегда используй https://
даже на localhost. Многие браузеры блокируют HTTP-запросы на HTTPS-страницах.
API — это «мост» между фронтендом и бэкендом. REST — способ организации этого моста.
«Официант, принесите меню» — запросить список
«Хочу заказать борщ» — добавить новый элемент
«Замените салат на суп» — изменить элемент
«Отмените заказ» — удалить элемент
// fetch() — встроенная функция для запросов // async/await — работаем с кодом, который занимает время async function getUsers() { // Отправляем GET-запрос (просим данные) const response = await fetch(
'https://api.example.com/users' // ↑ обрати внимание: https, не http!
);
// Превращаем ответ из JSON в объект JS const data = await response.json();
// Выводим данные в консоль console.log(data);
// Проходим по списку пользователей data.forEach(user => { // Добавляем имя в список на странице document.getElementById('list')
.innerHTML += `<li>${user.name}</li>`;
});
} getUsers(); // Вызываем — начинаем загрузкуJSON — формат данных, похожий на JS-объект:
{"name": "Анна", "age": 20}. 99% современных API обмениваются именно JSON.
React — JavaScript-библиотека от Meta для создания интерфейсов. Ты описываешь, как должна выглядеть страница, а React обновляет её сам.
// Импортируем хук useState из библиотеки import { useState } from 'react';
// Компонент — функция, возвращающая JSX export default function Counter() { // useState(0) создаёт переменную = 0 // count — текущее значение // setCount — функция для его изменения const [count, setCount] = useState(0);
return (
{/* JSX — HTML-подобный синтаксис */} <div className="counter"> <h2>Счётчик: {count}</h2> {/* Клик → setCount увеличивает count */} <button onClick={() => setCount(count + 1)}>
Нажми меня
</button> </div>
);
}Другие фреймворки: Vue.js (проще для начала), Angular (от Google, для крупных проектов), Svelte (компилируется без Virtual DOM). React — самый востребованный на рынке труда.
Деплой — размещение сайта на реальном сервере, чтобы его видел весь мир. Написал код → загрузил → получил ссылку.
Фреймворки не понимаются браузером напрямую.
npm run build собирает проект, оптимизирует, сжимает файлы.
Vercel или Netlify — бесплатные платформы. Подключи GitHub — сайт обновляется автоматически.
Купи домен (mysite.ru), привяжи к хостингу. SSL-сертификат (HTTPS) — бесплатно.
Готово! После деплоя сайт доступен по ссылке
https://mysite.vercel.app
— делись с друзьями!
Каркас
Стили
Логика
Адаптив
Протоколы
Данные
Фреймворк
Запуск
Каждый шаг — новый навык. Начни с HTML, практикуйся на маленьких проектах. Через несколько месяцев ты сможешь создавать полноценные веб-приложения!