Web-основы

HTML, CSS и всё что нужно бэкендеру

Уровень: Начальный · около 8 ч · после курса: Свёрстаешь адаптивную страницу, разберёшься в DevTools и поймёшь, что именно делает фронтенд

Чему научишься

  • Структурировать HTML семантически
  • Применить CSS Grid и Flexbox
  • Понять как браузер делает запросы (DNS → TCP → TLS → HTTP)
  • Использовать DevTools для дебага
  • Написать базовый JS для проверки бэкенда

Уроки курса (16)

Модуль 1 · HTML и CSS

Структура страницы, селекторы, Flexbox, Grid

  1. Как работает веб: клиент, сервер, HTTP - Браузер, сервер и почему всё начинается с запроса
  2. HTML: структура страницы - Теги, семантика и почему <div> - не решение на всё
  3. CSS: селекторы и базовые стили - Как сделать красиво и не сломать всё одним правилом
  4. Flexbox: выравнивание и распределение свободного места - Ряды и колонки, которые наконец-то слушаются
  5. Grid: двумерные раскладки страниц - Сетка, которая делает макет понятным

Модуль 2 · Адаптив, формы и DevTools

Mobile-first, валидация форм, инструменты браузера

  1. Адаптив: mobile-first, media queries - Чтобы сайт не превращался в кашу на телефоне
  2. DevTools: инспектор, сеть, консоль - Как дебажить фронт без гадания
  3. Формы и валидация - GET/POST глазами браузера и почему required - это не защита

Модуль 3 · JavaScript

Синтаксис, DOM, Promise/fetch, Node.js

  1. JavaScript: синтаксис, типы, функции - Базовый JS глазами бэкендера - без воды и без React
  2. JS и DOM: события, манипуляция страницей - querySelector, addEventListener и почему innerHTML - это XSS
  3. JS: Promise, async/await и fetch - Асинхронность, fetch к своему backend и обработка ошибок без шаманства
  4. Node.js: JS вне браузера - npm, скрипты автоматизации и куда расти дальше в JS

Модуль 4 · HTTP-уровень и проект

URL-encoding, cookies, кеширование и финальный лендинг

  1. URL, encoding и безопасность на уровне веба - XSS, CSRF и почему нельзя доверять input
  2. Cookie, session, localStorage - Где хранить состояние и что не надо хранить никогда
  3. HTTP-кэширование - Как браузер экономит трафик и ускоряет загрузку
  4. Мини-проект: лендинг курса + деплой - Собираем лендинг курса и выкладываем в интернет