HTML/CSS

С помощью видеокурса HTML и CSS вы научитесь верстать адаптивные HTML страницы. Вы самостоятельно создадите портал КиноМонстр, работающий как на компьютерах, так и в мобильных устройствах. Освойте HTML и CSS за несколько часов и вы сможете создавать верстку собственных сайтов!

4.6 / 14

План курса


Free Level
Вводный урок
Подготовка компьютера к работе: Установим редактор кода и дополнительные инструменты.
00:08:05
Free Level
Задание 2: Тест
Пройдите тестирование
00:00:15
Free Level
Задание 3: Тест
Пройдите тестирование
00:00:15
Free Level
Базовая разметка
Вы узнаете как создается базовая разметка HTML страницы, из чего она состоит.
00:05:08
Free Level
HTML задание создать базовую разметку
Интерактивное упражнение
00:00:20
Free Level
Теги <h1>, <p>, <strong>
Изучим HTML теги <h1> - заголовок, <p> - параграф, <strong>
00:03:59
Free Level
Задание 7: Тест
Пройдите тестирование
00:00:15
Free Level
Упражнение тег <h1>
Интерактивное упражнение
00:00:40
Free Level
Упражнение тег <p>
Интерактивное упражнение
00:00:30
Free Level
Упражнение тег <strong>
Интерактивное упражнение
00:01:10
Free Level
Познакомимся с новыми html тегами
Вы узнаете как использовать теги <div>, <span>, а также рассмотрим базовый синтаксис CSS
00:08:12
Free Level
Упражнение <div>, <style>, css class
Интерактивное упражнение
00:02:00
Free Level
Упражнение <div>, <style>, css background-color
Интерактивное упражнение
00:01:00
Free Level
Задание 14: Тест
Пройдите тестирование
00:00:30
Free Level
Задание 15: Тест
Пройдите тестирование
00:00:30
Free Level
Теги <ul>, <li> и этапы создания веб-сайта
Изучим этапы создания профессиональных сайтов и познакомимся с тегами <ul>, <li>
00:07:49
Free Level
Подключение css стилей в отдельном файле.
Подключим CSS стили отдельным файлом, начнем создавать header главной страницы Киномонстр.
00:09:03
Free Level
Теги <ul>, <li>
Интерактивное упражнение
00:01:00
Free Level
CSS свойства: margin, padding, height, font-size и другие.
Продолжим писать стили для Header главной страницы, познакомимся с CSS свойствами: margin, padding, height, font-size и другими.
00:06:54
Free Level
Задание 20: Тест
Пройдите тестирование
00:00:10
Free Level
Задание 21: Тест
Пройдите тестирование
00:00:10
Free Level
CSS свойство Margin
Интерактивное упражнение
00:01:00
Free Level
Задание 23: Тест
Пройдите тестирование
00:00:15
Free Level
CSS свойство Padding
Интерактивное упражнение
00:01:00
Free Level
Тег <a>. Создание ссылки.
Интерактивное упражнение
00:02:00
Free Level
Задание 26: Тест
Пройдите тестирование
00:00:15
Free Level
Стилизация ссылок с помощью CSS
Закончим создавать верстку header и изучим как стилизовать ссылки
00:05:47
Free Level
Задание 28: Тест
Пройдите тестирование
00:00:15
Free Level
Задание 29: Тест
Пройдите тестирование
00:00:15
Free Level
CSS Свойство text-decoration
Интерактивное упражнение
00:01:00
Free Level
Создание горизонтальное меню
Начнем создавать горизонтальное меню и изучим новые css стили
00:07:37
Free Level
Задание 32: Тест
Пройдите тестирование
00:00:15
Free Level
Стилизация горизонтально меню
Создадим дополнительные стили для горизонтального меню и закончим его создание
00:05:25
Free Level
Задание 34: Тест
Пройдите тестирование
00:00:15
Free Level
Header и TOP menu
Интерактивное упражнение
00:02:00
Free Level
HTML Form. Создание форм.
Начнем создавать правый блок сайта, познакомимся с HTML формами и их свойствами.
00:07:22
Free Level
HTML Form
Интерактивное упражнение
00:01:00
Free Level
Right Block. Начнем создавать панель справа
Начнем создавать Right Block. Изучим теги form, border и другие
00:12:57
Free Level
Задание 39: Тест
Пройдите тестирование
00:00:15
Free Level
Right Block. Продолжение.
Создадим вторую панель правого блока сайта: Форму входа и ссылки
00:11:55
Free Level
Right Block. Часть 3
Закончим создавать правую панель сайта
00:10:42
Free Level
Right Menu
Интерактивное упражнение
00:05:00
Free Level
Footer. Часть 1
Начнем создавать footer, а также в структуру проекта добавим постеры фильмов
00:04:14
Free Level
Footer. Часть 2
Продолжим создавать нижний блок сайта Footer и напишем к нему стили
00:05:10
Free Level
Footer
Интерактивное упражнение
00:03:00
Free Level
Content главной страницы
В этом уроке создадим блоки с фильмами на главной странице
00:08:48
Free Level
Главная страница. Записи блога.
Завершим создание главной страницы
00:05:22
Free Level
Страница просмотра фильмов
Начнем создавать страницу просмотра фильмов
00:05:29
Free Level
Страница просмотра фильмов. Блок информации о фильме
Продолжим создавать страницу просмотра фильмов и создадим блок краткой информации о фильме
00:05:42
Free Level
Страница просмотра фильмов. Блок с описанием фильма
Продолжим создавать страницу просмотра фильмов и создадим блок с описанием фильма
00:05:02
Free Level
Страница просмотра фильмов. Блок с отзывами к фильму
Продолжим создавать страницу просмотра фильмов и создадим блок с отзывами к фильму
00:06:32
Free Level
Страница просмотра фильмов. Блок отзывы
Интерактивное упражнение
00:03:00
Free Level
Страница просмотра фильмов. Форма отправки отзывов к фильму
В этом уроке мы закончим создавать страницу просмотра фильмов
00:08:36
Free Level
Страница Фильмы
Создадим новую страницу films.html
00:13:37
Free Level
Страница Фильмы
Интерактивное упражнение
00:05:00
Free Level
Страница Рейтинг фильмов
В этом уроке создадим страницу Рейтинг фильмов и изучим новые css свойства и html теги
00:12:13
Free Level
Задание 57: Тест
Пройдите тестирование
00:00:15
Free Level
Страница Рейтинг фильмов
Интерактивное упражнение
00:05:00
Free Level
Адаптивная верстка. Инструменты разработчика
В этом уроке мы поговорим об инструментах frontend-разработчика
00:06:40
Free Level
Адаптивная верстка. Media queries, тэг viewport
В этом мы начнем изучать основы адаптивной верстки, изучим тэг VIEWPORT и изменим цвет header для мобильного устройства
00:09:35
Free Level
Адаптивная верстка. Правила адаптивной верстки
Продолжим создавать адаптивную версию сайта
00:11:48
Free Level
Задание 62: Тест
Пройдите тестирование
00:00:15
Free Level
Адаптивная верстка. Продолжение
Продолжим создавать адаптивную версию сайта. Напишем дополнительные css стили
00:09:45
Free Level
Адаптивная верстка. Заключительная часть
В этом уроке мы закончим создавать адаптивную версию сайта
00:11:40
показать все задания

Отзывы

22.06.2017
Arsen Yeghikyan

самый лучший курс по изучению html и css

22.06.2017
student_XDlL9_2U

Хорошие уроки.

21.06.2017
student_auMgOSeK

Я много раз перепроверял но в гугл хроме что то поменялось и адаптивная вёрстка не отображалась

21.06.2017
Владислав Петров

Отличный курс.

16.06.2017
Vaxo Kaxidze

cool!!

15.06.2017
Александр Кучук

Отличный курс!

15.06.2017
Семен Макаренко

Подробно, толково, разжевано все по полочкам.

13.06.2017
AngelEyes Eyes

Важные моменты, связанные с отображением элементов, как-то опускаются мягко говоря. И регулирование скорости просмотра видео надо добавить.

11.06.2017
Дмитрий Васюк

Много практики и можно повторить за преподавателем весь процесс создания верстки сайта, но не хватает теории, как по мне. Для старта - это лучший курс, именно для практики.

09.06.2017
Виталий Берсенёв

Все понятно и достаточно просто. Этот курс дал мне понять, что создание сайтов - это та сфера, в которой я хочу дальше работать. Спасибо большое за этот курс и надеюсь, что остальные курсы и темы освою так же легко!

Преподаватель

Sergey Nikonov
Сергей Никонов
- Опыт в веб-разработке более 10 лет

- Работал над высоконагруженными веб-проектами в крупных компаниях США и ЕВРОПЫ

- Провел несколько десятков оффлайн и онлайн семинаров на тему веб-разработки

Всего заданий: 64

Интерактивные задания: 18

Видеоуроки: 30

Тесты: 16


Продолжительность: ~5 часов
  • Armen
    2337 xp
    1
  • Leonid Zichkov
    2337 xp
    2
  • student_XDlL9_2U
    2337 xp
    3
  • Семен Макаренко
    2337 xp
    4
  • Arsen Yeghikyan
    2332 xp
    5
  • У вас 0 XP за курс HTML/CSS

    Бросить вызов?