Видеокурс: Основы создания сайтов:
HTML и CSS для начинающих

Выучи основы HTML и CSS и научись создавать сайты с нуля!
Подробные уроки в видео-формате с домашними заданиями и практикой.

Пройти обучение
  • Автор: Дмитрий Валак
  • Видео: 59
  • Длит.: 13 часов 09 минут
  • Заданий: 12
  • Макеты: 2

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

- Курс разработан для настоящих новичков

- Для тех, кто хочет изучить создание сайтов на HTML и CSS

- Для тех, кто уже начал изучать, но идет тяжело

дата выхода
2019
август

программа

Основы HTML и CSS

10 часов 20 минут
Урок 1.
Введение
02:19
Урок 2.
Установка редактора Brackets
02:28
Урок 3.
HTML теги (теория)
11:37
Урок 4.
Создание скелета HTML документа
06:14
Урок 5.
HTML теги форматирования текста (h1-h6, p, br, em, i, b, strong и др.)
14:55
Урок 6.
CSS селекторы и свойства (теория)
12:45
Урок 7.
Свойства для стилизации текста
25:37
Задание
Работа с текстом
Урок 8.
Инструменты разработчика - DevTools
09:20
Урок 9.
Изображения и ссылки (img, a)
18:46
Урок 10.
Растровая и векторная графика, форматы изображений (png, jpg, svg)
18:46
Задание
Работа с изображениями и ссылками
Урок 11.
HTML Таблицы (table, tr, td, th, tbody и др.)
24:02
Задание
Создание таблиц
Урок 12.
Блочные и строчные элементы (div, span)
20:05
Урок 13.
Работа с фоном. Часть 1
22:05
Урок 14.
Работа с фоном. Часть 2
12:09
Задание
Работа с фоном
Урок 15.
Справочники
02:16
Урок 16.
Наименование классов
10:03
Урок 17.
Создание простой HTML страницы (практика)
27:06
Урок 18.
HTML формы (form, input, textarea, button)
28:05
Задание
Создание формы (практика)
Урок 19.
Псевдоклассы
20:11
Урок 20.
Границы (border, outline)
22:00
Урок 21.
Создание формы регистрации (практика)
26:34
Урок 22.
Позиционирование (relative, static, absolute, fixed)
28:21
Урок 23.
Позиционирование (практика)
09:42
Задание
Позиционирование
Урок 24.
Псевдоэлементы (before, after, first-letter, first-line)
16:10
Урок 25.
HTML5 теги (header, nav, footer, article и др.)
17:54
Урок 26.
CSS3 свойства
23:26
Урок 27.
Основы flexbox
26:58
Задание
Работа с flexbox
Урок 28.
Доработка страницы (HTML5, CSS3, flexbox)
20:26
Урок 29.
Селекторы, псевдоклассы
16:34
Задание
Селекторы, псевдоклассы
Урок 30.
Приоритеты селекторов
13:00
Урок 31.
Единицы измерения (em, rem)
12:11
Задание
Создание кнопок (em, rem)
Урок 32.
HTML теги (abbr, code, cite, blockquote и др.)
12:29
Урок 33.
Стилизация кода (HTML, CSS)
20:12
Задание
Стилизация кода
Урок 34.
Вертикальное выравнивание (vertical-align)
03:11
Урок 35.
Обтекания (float, clearfix)
15:34
Урок 36.
Видимость элементов (display, opacity, visibility)
09:40
Урок 37.
Специальные символы
05:07
Урок 38.
Префиксы (-webkit-, -moz-, -ms-)
05:41
Урок 39.
Вставка видео и аудио (video, audio, source)
12:31
Урок 40.
Google fonts, локальные шрифты
15:43
Задание
Работа со шрифтами
Урок 41.
Основы адаптивной верстки (media queries)
26:01
Задание
Адаптация блоков
Урок 42.
Цвета (HEX, rgb, rgba)
05:56
Урок 43.
Возможности Brackets и плагины
12:55

Верстка адаптивного сайта с нуля

2 часа 49 минут
Урок 1.
Введение
04:23
Урок 2.
Основы работы с Photoshop
12:33
Урок 3.
Основы работы с Abode XD
06:31
Урок 4.
Подготовительные работы
05:48
Урок 5.
Верстка шапки сайта
13:46
Урок 6.
Верстка текстового блока
11:43
Урок 7.
Верстка фотографии
03:45
Урок 8.
Верстка контактов
10:24
Урок 9.
Верстка страницы "Об авторе"
03:02
Урок 10.
Верстка страницы "Контакты"
13:52
Урок 11.
Адаптация сайта под разные устройства. Часть 1
11:17
Урок 12.
Адаптация сайта под разные устройства. Часть 2
12:50
Урок 13.
Favicon, мета-теги
06:11
Урок 14.
Кроссбраузерная и валидная верстка
04:54
Урок 15.
Домен и хостинг. Размещаем сайт в интернете
32:55
Урок 16.
Что делать дальше? План развития
15:53

Адаптивный сайт который вы сделаете сами с нуля

Вы самостоятельно сделаете свой первый адаптивный сайт-портфолио, повторяя действия на экране и закрепляя знания, которые вы получите в уроках.

index.html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Создание сайтов</title>
</head>
<body>
    <h1>Привет, мир!</h1>
</body>
</html>

Макет для самостоятельной практики

Данный уникальный макет вы получите дополнительно, для самостоятельной практики. Макет в формате XD для программы Adobe XD.

Тут должно быть много воды продающего текста

Который рассказывает как круто создавать сайты и как вам нужен мой курс

Нужен персональный наставник?

Персональный наставник будет помогать вам в течение месяца - отвечать на все ваши вопросы, проверять задания, а так же созваниваться с вами один раз в неделю. Индивидуальный подход к каждому ученику!
Дмитрий Валак Свободных мест: 2
Дмитрий Валак

Front-end разработчик. Практик верстки сайтов. Работал в нескольких ИТ компаниях и наработал более 10 000 часов в верстке сайтов различной сложности.

Обучил уже не одну тысячу учеников. Веду свой канал на ютубе.

Александр Василевский Свободных мест: 5
Александр Василевский

Всегда готов помочь начинающим верстальщикам. Многие знают Александра по нашему чату в телеграме, как человека, который всегда поможет советом и поможет разобраться в сложной ситуации.

Работает в ИТ компании уже несколько лет и сверстал уже не один десяток сайтов.

Оформить заказ

Вы проходите обучение сами, выполняете задания и практику самостоятельно без проверки наставника
Вы проходите обучение вместе с наставником. Наставник ответит на все ваши вопросы, проверит задания, даст советы и поможет в трудную минуту.
Для работы с наставником прочитайте условия. Оплачивая курс, вы автоматически соглашаетесь с ними.