Основы веб-разработки: HTML и CSS
Структура страницы, теги, стили и первая вёрстка своими руками
Чему вы научитесь
- Понимать структуру HTML-документа и как браузер рендерит страницу
- Использовать семантические теги, ссылки, картинки, списки, таблицы и формы
- Подключать CSS, работать с селекторами, специфичностью, цветом и шрифтами
- Разбираться в блочной модели, Flexbox и Grid
- Делать страницу адаптивной с помощью медиа-запросов
О курсе
Подробный старт в веб-разработке, рассчитанный на несколько недель практики. Разберём, как устроена веб-страница и как браузер её показывает; освоим семантические теги HTML, ссылки, картинки, списки, таблицы и формы; научимся подключать CSS, работать с селекторами, цветом, шрифтами и блочной моделью; освоим современную раскладку на Flexbox и Grid и сделаем страницу адаптивной. Каждая тема — развёрнутое объяснение с наглядной схемой, разобранный пример кода и практика с проверкой ответов. В финале соберёте полноценную страницу-визитку.
12 недель · 6 ч/нед
10 разделов · 34 шагов · практика после модулей
Итоговый проект и сертификат после завершения.
10+ лет · дети и подростки. возраст зависит от уверенности в чтении, логике и самостоятельной практике
Базовый: 2/5
нужна регулярная практика
План программиста
Сквозная траектория: Python, JavaScript, TypeScript, React, backend, SQL, тесты, Docker и портфолио.
Как устроено обучение
Методическая подача
структурные схемы, разборы примеров, контрольные вопросы и карты применения
реалистичные учебные ситуации, где теория сразу переводится в решение
понятие, пример, самостоятельное действие, обратная связь, перенос в проект
итоговая работа с критериями качества и понятным результатом для портфолио
Учебный микс
17 визуальных материалов · 76% по предмету
есть хороший визуальный каркас, но часть схем стоит уточнить
Профессиональная программа
Измеримые результаты
- Писать небольшие программы на Python с ясной структурой данных и функций.
- Использовать тестовые примеры, обработку ошибок и разбиение задачи на модули.
- Понимать алгоритмическую сложность на уровне практического выбора решения.
- Оформлять итоговый проект с README, сценариями запуска и проверкой результата.
Входной уровень
- Базовая компьютерная грамотность
- Готовность регулярно писать код и исправлять ошибки
Проверка знаний
- Входная самопроверка: что уже понятно и где есть пробелы.
- Короткая практика после каждого модуля с немедленной проверкой.
- Промежуточный мини-проект, где несколько тем соединяются в одну задачу.
- Итоговая работа с критериями: точность, объяснение, самостоятельность, применимость.
Итоговый проект
Консольное приложение или мини-сервис: чтение данных, обработка, отчёт, тесты и документация.
Программа курса
10 разделов · 34 урока- Карта пониманияОткрыто8 мин
- Что рисовать и фиксироватьОткрыто8 мин
- Ритм практики и повторенияОткрыто8 мин
- Проверка учебного маршрутаОткрыто10 мин
- От требования к тестуОткрыто14 мин
- Архитектура вместо набора синтаксиса14 мин
- Поток данных и состояниеОткрыто15 мин
- API и база данных16 мин
- Качество: тест, review, refactor, release14 мин
- HTML и CSS с нуля — быстрый стартОткрыто60 мин
- Что происходит, когда вы открываете сайтОткрыто7 мин
- Структура HTML-документаОткрыто6 мин
- Теги, атрибуты, вложенностьОткрыто6 мин
- Практика: структура HTMLОткрыто12 мин
- Заголовки, абзацы, выделенияОткрыто6 мин
- Ссылки и картинкиОткрыто6 мин
- СпискиОткрыто6 мин
- Практика: контентОткрыто12 мин
- Семантические тегиОткрыто7 мин
- ТаблицыОткрыто6 мин
- Формы и поля вводаОткрыто6 мин
- Практика: семантика, таблицы, формыОткрыто12 мин
- Что такое CSS и как его подключитьОткрыто6 мин
- Селекторы: как выбрать элементыОткрыто7 мин
- Цвет, шрифты, текстОткрыто6 мин
- Практика: CSS и селекторыОткрыто12 мин
- Блочная модель (box model)Открыто7 мин
- Flexbox: раскладка в ряд и колонкуОткрыто6 мин
- Grid: сеткиОткрыто6 мин
- Практика: раскладкаОткрыто12 мин
- Адаптивность: медиа-запросыОткрыто6 мин
- Собираем страницу-визиткуОткрыто6 мин
- MDN Web Docs — учебник по HTML/CSSОткрыто1 мин
- Итоговая практикаОткрыто12 мин
Отзывы
Пока нет отзывов.