Перейти к основному содержимому

Тест на готовность к веб-разработке

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Всем
Как проходить

Блоки идут в порядке "сеть → архитектура → HTML → CSS → JS". Если проваливается блок 1, имеет смысл сначала раздел "Сеть и интернет"; если 3–5 — главы HTML/CSS/JS. Разбор открывайте после своих ответов.

Профиль по вебу

После теста отметьте интерес к веб-направлению в Навигаторе новичка и профилей, чтобы увидеть баланс между frontend, backend и смежными сферами.

БлокМинимум перед углублением
1–2Понимаете путь запроса и роли фронта/бэка
3–5Можете набросать разметку, стили и простой скрипт

1 — Сеть и HTTP​

Вопросы​

  1. Пользователь вводит https://example.com/page — назовите четыре шага до отображения HTML (без мельчайших деталей TLS).
  2. Ошибка браузера DNS_PROBE_FINISHED_NXDOMAIN — что это значит простыми словами?
  3. Чем домен отличается от хостинга?
  4. Сервер отвечает 404 на /api/users, хотя "маршрут есть". Две правдоподобные причины.
  5. Форма логина отправляет пароль — какой HTTP-метод обычно выбирают и почему не GET?

Задачи​

Задача 1.
Сайт не открывается только у одного пользователя, у остальных работает. Две команды/действия для проверки DNS (названия достаточно).

Задача 2.
На хостинге лежит about.html, при открытии сайта виден список файлов, а не страница. В чём типичная причина и исправление?

Разбор: блок 1

Вопросы​

  1. DNS → IP; TCP-соединение; HTTP-запрос; ответ + разбор HTML/CSS/JS браузером.
  2. DNS не нашёл имя (опечатка, домен не существует, сбой DNS у клиента).
  3. Домен — адрес; хостинг — сервер/место, где лежат файлы и крутится приложение.
  4. Другой путь (/api/v1/users), другой порт/хост, фронт бьёт не туда; сервер не перезапущен; reverse proxy режет префикс.
  5. POST — данные в теле запроса, не в URL и не в истории браузера.

Задачи​

Задача 1.
nslookup example.com или dig example.com; смена DNS на 8.8.8.8 / 1.1.1.1 для проверки.

Задача 2.
Нет индексного файла (index.html). Переименовать главную страницу в index.html или настроить index в конфиге веб-сервера.

2 — Фронтенд, бэкенд, API​

Вопросы​

  1. Статический сайт и веб-приложение — в чём разница для пользователя?
  2. Что такое API между фронтом и бэком одной фразой?
  3. Заметки пропадают после F5. Какого компонента не хватает в архитектуре?
  4. POST на /api/login с другого origin — ошибка CORS. Кто должен разрешить запрос?
  5. SSR и CSR — где собирается HTML первой версии страницы?

Задачи​

Задача 1.
Опишите минимальный набор — UI (форма + список), HTTP-методы и эндпоинт, хранение для заметок после перезагрузки.

Задача 2.
Фронт на https://app.example.com, API на https://api.example.com. Какие заголовки CORS должен отдать бэкенд (названия, не обязательно все значения)?

Разбор: блок 2

Вопросы​

  1. Статика — одни и те же файлы всем; приложение — данные и UI меняются от действий и сервера.
  2. Договорённый набор URL и форматов обмена (часто JSON).
  3. Бэкенд + БД (или хотя бы серверное хранилище); одного localStorage для "настоящего" приложения мало.
  4. Сервер API — заголовки Access-Control-Allow-* (часто middleware cors).
  5. SSR — на сервере; CSR — в браузере после загрузки JS.

Задачи​

Задача 1.
Фронт: форма, fetch POST/GET /api/notes. Бэкенд — маршруты, модель { id, text }, SQLite/PostgreSQL.

Задача 2.
Access-Control-Allow-Origin (конкретный origin, не * с credentials), Access-Control-Allow-Methods, Access-Control-Allow-Headers; для preflight — ответ на OPTIONS.

3 — HTML​

Вопросы​

  1. Зачем теги <main>, <article>, <nav> вместо одних <div>?
  2. <img> без alt — кому это мешает?
  3. Как связать <label> с полем ввода?
  4. target="_blank" без rel="noopener" — какой риск?
  5. Незакрытый <div> внутри <p> — почему это плохо?

Задачи​

Задача 1.
Скелет статьи — шапка с <nav>, <main>, <article> с заголовком, автором, датой и абзацем текста (теги без CSS).

Задача 2.
Форма — email, пароль, "Войти", ссылка "Забыли пароль?" — с доступностью (label, type, required).

Разбор: блок 3

Вопросы​

  1. Смысл для SEO и скринридеров; не только "коробки".
  2. Скринридеры, нет текста при ошибке загрузки картинки.
  3. Атрибут for у label = id у input.
  4. Новая вкладка может получить window.opener — утечка контекста; noopener разрывает связь.
  5. Браузер "чинит" DOM непредсказуемо, ломается вёрстка и доступность.

Задачи​

Задача 1–2.
См. эталон в главе HTML или минимальный вариант:

<header><nav><a href="/">Главная</a></nav></header>
<main>
  <article>
    <h1>Заголовок</h1>
    <p><small>Автор, дата</small></p>
    <p>Текст.</p>
  </article>
</main>
<form action="/login" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <label for="password">Пароль</label>
  <input id="password" name="password" type="password" required>
  <button type="submit">Войти</button>
  <p><a href="/forgot">Забыли пароль?</a></p>
</form>

4 — CSS​

Вопросы​

  1. box-sizing: border-box — что меняется при width: 80%?
  2. Три способа подключить CSS к странице — какой предпочтителен для проекта?
  3. Зачем @media (max-width: …)?
  4. Одна строка карточек на десктопе, столбец на телефоне — Flexbox или Grid достаточно для сетки карточек?
  5. Почему злоупотребляют !important?

Задачи​

Задача 1.
.panel — 80% ширины родителя, padding 20px, border 2px, margin 10px — одно правило с учётом box-sizing.

Задача 2.
Сетка карточек: 1 колонка < 768px, 2 колонки 768–1023px, 3 колонки ≥ 1024px — только CSS (имена классов любые).

Разбор: блок 4

Вопросы​

  1. В 80% входят padding и border, а не "раздувают" блок наружу.
  2. Внешний файл <link>; инлайн — для редких исключений.
  3. Адаптивная вёрстка под ширину экрана.
  4. Grid (grid-template-columns) удобнее для 2D-сетки; flex тоже возможен с wrap.
  5. Ломает каскад, усложняет переопределение и поддержку.

Задачи​

Задача 1.

.panel {
  box-sizing: border-box;
  width: 80%;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 10px;
}

Задача 2.

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

5 — JavaScript​

Вопросы​

  1. Что такое DOM?
  2. Скрипт в <head> без defer — что может пойти не так?
  3. let и const vs устаревший var — одно ключевое отличие области видимости.
  4. Зачем addEventListener вместо onclick = …?
  5. fetch возвращает Promise — что проверить кроме response.json()?

Задачи​

Задача 1.
Кнопка #toggle, блок #content: по клику показать/скрыть (JS; лучше через класс .hidden в CSS).

Задача 2.
fetch('/api/status') → текст в #status; обработать !response.ok и catch.

Разбор: блок 5

Вопросы​

  1. Дерево узлов HTML в памяти; JS меняет узлы — меняется страница.
  2. Скрипт выполнится до построения DOM — getElementById вернёт null.
  3. var — функциональная область и hoisting; let/const — блочная.
  4. Несколько слушателей, removeEventListener, не затирает чужой обработчик.
  5. response.ok, статус, сетевые ошибки в catch.

Задачи​

Задача 1.

const btn = document.getElementById('toggle');
const box = document.getElementById('content');
btn.addEventListener('click', () => box.classList.toggle('hidden'));

Задача 2.

fetch('/api/status')
  .then((response) => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.text();
  })
  .then((data) => {
    document.getElementById('status').textContent = data;
  })
  .catch((err) => {
    document.getElementById('status').textContent = `Ошибка: ${err.message}`;
  });
Содержание