Основы веб-разработки: HTML и CSS
Структура страницы, теги, стили и первая вёрстка своими руками
Чему вы научитесь
- Понимать структуру HTML-документа и как браузер рендерит страницу
- Использовать семантические теги, ссылки, картинки, списки, таблицы и формы
- Подключать CSS, работать с селекторами, специфичностью, цветом и шрифтами
- Разбираться в блочной модели, Flexbox и Grid
- Делать страницу адаптивной с помощью медиа-запросов
О курсе
Подробный старт в веб-разработке, рассчитанный на несколько недель практики. Разберём, как устроена веб-страница и как браузер её показывает; освоим семантические теги HTML, ссылки, картинки, списки, таблицы и формы; научимся подключать CSS, работать с селекторами, цветом, шрифтами и блочной моделью; освоим современную раскладку на Flexbox и Grid и сделаем страницу адаптивной. Каждая тема — развёрнутое объяснение с наглядной схемой, разобранный пример кода и практика с проверкой ответов. В финале соберёте полноценную страницу-визитку.
12 недель · 6 ч/нед
8 разделов · 30 шагов · практика после модулей
Итоговый проект и сертификат после завершения.
Базовый: 2/5
нужна регулярная практика
План программиста
Сквозная траектория: Python, JavaScript, TypeScript, React, backend, SQL, тесты, Docker и портфолио.
Как устроено обучение
Методическая подача
структурные схемы, разборы примеров, контрольные вопросы и карты применения
реалистичные учебные ситуации, где теория сразу переводится в решение
понятие, пример, самостоятельное действие, обратная связь, перенос в проект
итоговая работа с критериями качества и понятным результатом для портфолио
Учебный микс
13 визуальных материалов · 54% по предмету
требуется ручная ревизия: слишком много общих или нерелевантных схем
Профессиональная программа
Измеримые результаты
- Писать небольшие программы на Python с ясной структурой данных и функций.
- Использовать тестовые примеры, обработку ошибок и разбиение задачи на модули.
- Понимать алгоритмическую сложность на уровне практического выбора решения.
- Оформлять итоговый проект с README, сценариями запуска и проверкой результата.
Входной уровень
- Базовая компьютерная грамотность
- Готовность регулярно писать код и исправлять ошибки
Проверка знаний
- Входная самопроверка: что уже понятно и где есть пробелы.
- Короткая практика после каждого модуля с немедленной проверкой.
- Промежуточный мини-проект, где несколько тем соединяются в одну задачу.
- Итоговая работа с критериями: точность, объяснение, самостоятельность, применимость.
Итоговый проект
Консольное приложение или мини-сервис: чтение данных, обработка, отчёт, тесты и документация.
Академическая база
Университетская вводная программа по Python и вычислительному мышлению.
Учебник, связанный с MIT 6.0001.
Когнитивная наука обучения: предзнания, практика, перенос, обратная связь.
Курс строится от результатов обучения к заданиям и проверке.
Практика извлечения, интервальные повторения и смешанная практика.
Программа курса
8 разделов · 30 уроков- Карта пониманияБесплатно8 мин
- Что рисовать и фиксироватьБесплатно8 мин
- Ритм практики и повторенияБесплатно8 мин
- Проверка учебного маршрутаБесплатно10 мин
- 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 мин
- Источники и лицензииБесплатно6 мин
Отзывы
Пока нет отзывов.