Frontend — это всё, что пользователь видит и с чем взаимодействует в браузере: страницы, кнопки, формы, анимации. Три столпа веб-разработки — HTML (структура), CSS (оформление) и JavaScript (интерактивность). В этом курсе мы научимся создавать страницы с нуля и делать их живыми.
| Технология | Назначение | Пример |
|---|---|---|
| HTML | Структура страницы: заголовки, абзацы, ссылки, формы | <h1>Привет</h1> |
| CSS | Внешний вид: цвета, шрифты, отступы, расположение блоков | color: blue; |
| JavaScript | Поведение: реакция на клики, ввод, изменение содержимого | alert("Привет!") |
Страница загружается в браузере: сначала HTML создаёт «скелет», CSS его раскрашивает, JavaScript добавляет интерактивность.
По умолчанию в курсе предполагается работа в CodeSandbox — рекомендуемой онлайн-платформе для веб-разработки. Создаёшь проект, редактируешь HTML/CSS/JS в браузере, результат сразу виден в превью. Не требует установки.
Альтернативы для локальной работы:
.html.DevTools — инструменты разработчика: F12 или правый клик → «Просмотреть код». Вкладка Console — здесь выполняется и отображается вывод JavaScript.
Создай файл index.html со следующим содержимым:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</
Сохрани файл и открой его в браузере. Ты увидишь заголовок и абзац.
<meta charset="utf-8"> говорит браузеру, что текст в файле записан в кодировке UTF-8. Это нужно, чтобы русские буквы (и другие символы) отображались правильно. Без этой строки вместо «Привет» могут появиться «кракозябры».
Код JavaScript можно писать прямо на странице внутри тега <script>:
<body>
<h1>Привет</h1>
<script>
alert("Привет, мир!")
const answer = prompt("Как тебя зовут?", "Гость")
console.log("Пользователь ввёл:", answer)
</script>
</body>alert() — показывает окно с сообщением.prompt() — показывает поле ввода, возвращает введённый текст или null, если нажали «Отмена».console.log() — выводит данные в консоль DevTools (F12 → Console). Пользователь на странице это не видит.JavaScript в <script> выполняется при загрузке страницы, сверху вниз. Его также можно вводить вручную в консоли DevTools (F12 → Console) — удобно для экспериментов.
prompt() и числаprompt() всегда возвращает строку. Если нужно число:
const x = prompt("Введи число")
console.log(x + 1) // "51" — склейка строк!
const num = Number(prompt("Введи число"))
console.log(num + 1) // 6 — правильное сложениеСоздай страницу с <script>, который:
alert("Добро пожаловать!")promptимя]!»Добавь второй prompt для возраста. Выведи в консоль: «Тебя зовут [имя], тебе [возраст] лет».
Спроси два числа через prompt, преобразуй их в числа и выведи в консоль их сумму.
Мы познакомились с Frontend: HTML задаёт структуру, CSS — вид, JavaScript — поведение. Создали первую страницу с правильной кодировкой UTF-8 и написали простой скрипт с alert, prompt и console.log. На следующем уроке углубимся в HTML: теги, заголовки, абзацы, списки и ссылки.
<meta charset="utf-8"> — русский текст будет отображаться некорректно.prompt() без кавычек в первом аргументе: prompt(Введи имя) — возникнет ошибка.prompt() — вместо него будет строка, а сложение даст склейку ("5" + 1 → "51").console.log() не показывает текст на странице.Создай HTML-файл card.html с:
<h1> с твоим именем<p> с кратким описанием о себе (2–3 предложения)<meta charset="utf-8"> в <head><script>, который спрашивает у посетителя: «Как тебя зовут?» и выводит в консоль: «Рад тебя видеть, [имя]!»Добавь в <script> на странице:
prompt("Твой любимый цвет?") — сохрани ответ в переменную colorprompt("Твоё любимое число?") — сохрани в number (преобразуй в число!)color], твоё число: [number]»результат]»Используй confirm("Ты готов учиться программировать?"). Результат сохрани в переменную. Выведи в консоль: true или false в зависимости от ответа пользователя.
Спроси у пользователя три числа через prompt. Преобразуй их в числа и выведи в консоль:
Спроси имя через prompt. Если пользователь нажал «Отмена» (null), выведи в консоль: «Вы отменили ввод». Иначе выведи: «Привет, [имя]!».
Подсказка: проверь if (name === null) { ... } else { ... }.
Спроси два числа и знак операции (+, -, * или /). В зависимости от знака выполни операцию и выведи результат в консоль. Используй if / else if.
Спроси возраст. Выведи в консоль категорию: