Программирование

Основы веб-разработки: HTML и CSS

Структура страницы, теги, стили и первая вёрстка своими руками

4.8(0) 0 учеников 10 ч 26 шаговНачальный

Команда me_edu

Бесплатный курс платформы

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

Понимать структуру HTML-документа и как браузер рендерит страницу
Использовать семантические теги, ссылки, картинки, списки, таблицы и формы
Подключать CSS, работать с селекторами, специфичностью, цветом и шрифтами
Разбираться в блочной модели, Flexbox и Grid
Делать страницу адаптивной с помощью медиа-запросов

О курсе

Подробный старт в веб-разработке, рассчитанный на несколько недель практики. Разберём, как устроена веб-страница и как браузер её показывает; освоим семантические теги HTML, ссылки, картинки, списки, таблицы и формы; научимся подключать CSS, работать с селекторами, цветом, шрифтами и блочной моделью; освоим современную раскладку на Flexbox и Grid и сделаем страницу адаптивной. Каждая тема — развёрнутое объяснение с наглядной схемой, разобранный пример кода и практика с проверкой ответов. В финале соберёте полноценную страницу-визитку.

Программа курса

7 разделов · 26 уроков

1Видеолекция1 урок

HTML и CSS с нуля — быстрый стартБесплатно60 мин

2Как устроен веб4 урока

Браузер, HTML, структура документа

Что происходит, когда вы открываете сайтБесплатно7 мин
Структура HTML-документаБесплатно6 мин
Теги, атрибуты, вложенностьБесплатно6 мин
Практика: структура HTMLБесплатно12 мин

3Текст, ссылки, картинки, списки4 урока

Основные теги контента

Заголовки, абзацы, выделенияБесплатно6 мин
Ссылки и картинкиБесплатно6 мин
СпискиБесплатно6 мин
Практика: контентБесплатно12 мин

4Семантика, таблицы и формы4 урока

Структура и ввод данных

Семантические тегиБесплатно7 мин
ТаблицыБесплатно6 мин
Формы и поля вводаБесплатно6 мин
Практика: семантика, таблицы, формыБесплатно12 мин

5CSS: подключение и селекторы4 урока

Основы стилей

Что такое CSS и как его подключитьБесплатно6 мин
Селекторы: как выбрать элементыБесплатно7 мин
Цвет, шрифты, текстБесплатно6 мин
Практика: CSS и селекторыБесплатно12 мин

6Блочная модель и раскладка4 урока

Box model, Flexbox, Grid

Блочная модель (box model)Бесплатно7 мин
Flexbox: раскладка в ряд и колонкуБесплатно6 мин
Grid: сеткиБесплатно6 мин
Практика: раскладкаБесплатно12 мин

7Адаптивность и итоговая страница5 уроков

Медиа-запросы и сборка

Адаптивность: медиа-запросыБесплатно6 мин
Собираем страницу-визиткуБесплатно6 мин
MDN Web Docs — учебник по HTML/CSSБесплатно1 мин
Итоговая практикаБесплатно12 мин
Источники и лицензииБесплатно6 мин

Отзывы

Пока нет отзывов.