К основному контенту
secenta
← /programs
[ IT · Для начинающих ]

Веб-технологии: как устроен сайт

Полный вводный курс о том, как работает интернет и веб-страницы: от ввода URL до рендера, HTTP, HTML, CSS, JavaScript, API и основ безопасности.

Бесплатно3 нед4 ч4 модуля · 14 уроков1 бесплатный урок
[ Кому подойдёт ]

Кому подойдёт этот курс?

Программа рассчитана на разный старт — найдите себя.

Новичкам в теме

Начинаете с нуля — ведём от базовых понятий к первым рабочим навыкам, без пробелов.

Тем, кто меняет профессию

Входите в сферу из смежной области — даём понятный маршрут и структуру.

Самоучкам

Собираете разрозненные знания в цельную картину и закрепляете их обратной связью.

[ Результат ]

Чему вы научитесь

Навыки, которые останутся с вами после курса — основные выделены.

🌐
Понимание устройства веба
основная

Целостная модель работы интернета: клиент-серверная архитектура, путь запроса от URL до рендера, роли DNS, TCP, TLS.

📡
Протокол HTTP
основная

Методы, коды состояния, заголовки, тело запроса и ответа, идемпотентность, REST-подход к проектированию API.

📄
HTML и структура документа
основная

Семантическая разметка, основные теги, формы, корректная структура HTML-страницы.

🎨
CSS и оформление
основная

Селекторы, box-model, каскад и специфичность, базовые раскладки Flexbox и Grid.

⚙️
JavaScript и DOM
основная

Роль JS на клиенте, работа с DOM, обработка событий, обмен данными с сервером через fetch и JSON.

🍪
Состояние и базовая безопасность

Куки, сессии, localStorage, зачем нужен HTTPS и почему нельзя доверять клиенту.

[ Формат ]

Как проходит обучение?

Учитесь онлайн в удобном темпе — теория, проверка и практика в одном маршруте.

Конспекты и материалы

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

Тесты для самопроверки

Проверяете, что усвоили, сразу после темы — без зубрёжки.

Практика с проверкой

Выполняете задания и получаете обратную связь от преподавателя.

[ О программе ]

Подробнее о курсе

Бесплатный вводный курс платформы Secenta для тех, кто хочет понять, как на самом деле устроены сайты и веб-приложения. Мы пройдём весь путь от момента, когда вы вводите адрес в браузер, до отрисованной страницы: разберём DNS, TCP, TLS, протокол HTTP с его методами, кодами и заголовками. Затем построим понимание трёх китов фронтенда — HTML (структура и семантика документа), CSS (оформление, box-model, селекторы, каскад) и JavaScript (DOM, события, обмен данными с сервером через fetch). Вы узнаете, как браузер превращает код в пиксели (DOM, CSSOM, render tree), что такое API, JSON и REST, как работают куки, сессии и localStorage, в чём разница между статикой и динамикой, фронтендом и бэкендом. Завершим базовым пониманием веб-безопасности: зачем нужен HTTPS и почему нельзя доверять данным, пришедшим от клиента. Курс рассчитан примерно на 8 часов вдумчивой работы: чтение, интерактивные тесты, практические лабораторные стенды и итоговое задание с разбором реального сайта через инструменты разработчика. Подходит начинающим без опыта в программировании.

[ Программа · оглавление ]

4 модуля · 14 уроков

Как работает веб и HTTP

01 / модуль

Клиент-серверная модель, полный путь запроса от ввода URL до получения ответа, и подробный разбор протокола HTTP.

01
Что происходит при вводе URL
Клиент-серверная модель и весь путь запроса: DNS, TCP, TLS, HTTP и рендер страницы.
СтатьяБесплатно
02
HTTP: методы, коды и заголовки
Подробный разбор протокола HTTP: структура запроса и ответа, методы, коды состояния, заголовки и идемпотентность.
Статья🔒 после записи
03
Лаборатория: разбор HTTP через curl
Практика в терминале: отправляем запросы через curl, читаем заголовки, коды состояния и редиректы.
Статья🔒 после записи

HTML и структура страницы

02 / модуль

Как устроен HTML-документ: структура, семантические теги, основные элементы и формы для ввода данных.

01
Анатомия HTML-документа
Структура HTML-документа, доктайп, head и body, понятие тегов, атрибутов и вложенности.
Статья🔒 после записи
02
Семантика и основные теги
Семантические теги HTML5, основные элементы текста, ссылки, изображения, списки и таблицы.
Статья🔒 после записи
03
Формы: как сайт принимает данные
HTML-формы, типы полей ввода, методы отправки GET и POST, связь форм с серверной обработкой.
Статья🔒 после записи

CSS и оформление

03 / модуль

Как CSS оживляет внешний вид: селекторы, каскад и специфичность, box-model и современные раскладки.

01
Основы CSS и селекторы
Что такое CSS, способы подключения, синтаксис правил и виды селекторов.
Статья🔒 после записи
02
Box-model, каскад и раскладки
Блочная модель, каскад и специфичность, основы Flexbox и Grid для построения раскладок.
Статья🔒 после записи

JavaScript, DOM и взаимодействие с сервером

04 / модуль

Как JavaScript оживляет страницу: работа с DOM, события, обмен данными с сервером через fetch, API, JSON, куки и базовая безопасность.

01
JavaScript и DOM
Роль JavaScript на клиенте, что такое DOM и как JS изменяет страницу и реагирует на события.
Статья🔒 после записи
02
API, JSON и обмен данными
Что такое API и REST, формат JSON, как JavaScript обменивается данными с сервером через fetch.
Статья🔒 после записи
03
Состояние, куки и базовая безопасность
Куки, сессии и localStorage, статика против динамики, фронтенд против бэкенда, основы веб-безопасности.
Статья🔒 после записи
04
Лаборатория: знакомство с устройством веб-страницы
Практика на реальном веб-стенде: изучаем HTML, форму и ответы сервера через инструменты браузера, без эксплуатации.
Статья🔒 после записи
05
Задание: разбор HTTP реального сайта через DevTools
Самостоятельный разбор сетевых запросов реального сайта в инструментах разработчика с письменным отчётом.
Практика🔒 после записи
06
Итоговый зачётный тест
Итоговая проверка знаний по всему курсу: от пути запроса и HTTP до HTML, CSS, JavaScript, API и безопасности.
Тест🔒 после записи
[ Отзывы студентов ]

0 отзывов

Войдите, чтобы оставить отзыв.
Загрузка отзывов…