HTML/CSS

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

4.8 / 82

Поделитесь страницей с друзьями:

План курса


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
Premium Level
Задание 26: Тест
Пройдите тестирование
00:00:15
Premium Level
Стилизация ссылок с помощью CSS
Закончим создавать верстку header и изучим как стилизовать ссылки
00:05:47
Premium Level
Задание 28: Тест
Пройдите тестирование
00:00:15
Premium Level
Задание 29: Тест
Пройдите тестирование
00:00:15
Premium Level
CSS Свойство text-decoration
Интерактивное упражнение
00:01:00
Premium Level
Создание горизонтальное меню
Начнем создавать горизонтальное меню и изучим новые css стили
00:07:37
Premium Level
Задание 32: Тест
Пройдите тестирование
00:00:15
Premium Level
Стилизация горизонтально меню
Создадим дополнительные стили для горизонтального меню и закончим его создание
00:05:25
Premium Level
Задание 34: Тест
Пройдите тестирование
00:00:15
Premium Level
Header и TOP menu
Интерактивное упражнение
00:02:00
Premium Level
HTML Form. Создание форм.
Начнем создавать правый блок сайта, познакомимся с HTML формами и их свойствами.
00:07:22
Premium Level
HTML Form
Интерактивное упражнение
00:01:00
Premium Level
Right Block. Начнем создавать панель справа
Начнем создавать Right Block. Изучим теги form, border и другие
00:12:57
Premium Level
Задание 39: Тест
Пройдите тестирование
00:00:15
Premium Level
Right Block. Продолжение.
Создадим вторую панель правого блока сайта: Форму входа и ссылки
00:11:55
Premium Level
Right Block. Часть 3
Закончим создавать правую панель сайта
00:10:42
Premium Level
Right Menu
Интерактивное упражнение
00:05:00
Premium Level
Footer. Часть 1
Начнем создавать footer, а также в структуру проекта добавим постеры фильмов
00:04:14
Premium Level
Footer. Часть 2
Продолжим создавать нижний блок сайта Footer и напишем к нему стили
00:05:10
Premium Level
Footer
Интерактивное упражнение
00:03:00
Premium Level
Content главной страницы
В этом уроке создадим блоки с фильмами на главной странице
00:08:48
Premium Level
Главная страница. Записи блога.
Завершим создание главной страницы
00:05:22
Premium Level
Страница просмотра фильмов
Начнем создавать страницу просмотра фильмов
00:05:29
Premium Level
Страница просмотра фильмов. Блок информации о фильме
Продолжим создавать страницу просмотра фильмов и создадим блок краткой информации о фильме
00:05:42
Premium Level
Страница просмотра фильмов. Блок с описанием фильма
Продолжим создавать страницу просмотра фильмов и создадим блок с описанием фильма
00:05:02
Premium Level
Страница просмотра фильмов. Блок с отзывами к фильму
Продолжим создавать страницу просмотра фильмов и создадим блок с отзывами к фильму
00:06:32
Premium Level
Страница просмотра фильмов. Блок отзывы
Интерактивное упражнение
00:03:00
Premium Level
Страница просмотра фильмов. Форма отправки отзывов к фильму
В этом уроке мы закончим создавать страницу просмотра фильмов
00:08:36
Premium Level
Страница Фильмы
Создадим новую страницу films.html
00:13:37
Premium Level
Страница Фильмы
Интерактивное упражнение
00:05:00
Premium Level
Страница Рейтинг фильмов
В этом уроке создадим страницу Рейтинг фильмов и изучим новые css свойства и html теги
00:12:13
Premium Level
Задание 57: Тест
Пройдите тестирование
00:00:15
Premium Level
Страница Рейтинг фильмов
Интерактивное упражнение
00:05:00
Premium Level
Адаптивная верстка. Инструменты разработчика
В этом уроке мы поговорим об инструментах frontend-разработчика
00:06:40
Premium Level
Адаптивная верстка. Media queries, тэг viewport
В этом мы начнем изучать основы адаптивной верстки, изучим тэг VIEWPORT и изменим цвет header для мобильного устройства
00:09:35
Premium Level
Адаптивная верстка. Правила адаптивной верстки
Продолжим создавать адаптивную версию сайта
00:11:48
Premium Level
Задание 62: Тест
Пройдите тестирование
00:00:15
Premium Level
Адаптивная верстка. Продолжение
Продолжим создавать адаптивную версию сайта. Напишем дополнительные css стили
00:09:45
Premium Level
Адаптивная верстка. Заключительная часть
В этом уроке мы закончим создавать адаптивную версию сайта
00:11:40
показать все задания

Отзывы

18.08.2017
Ban Max

Очень просто все по полочку разложил.

13.08.2017
Sergey Gonhar

Курс хороший, подача материала отличная. Но при тестировании возникают заминки из-за лишнего отступа. Это немного напрягает.

06.08.2017
Marine Aslanyan

Thanks a lot

02.08.2017
Алексей Половников

Хороший курс, было очень интересно

02.08.2017
student_W0HiQSPP

Нормас

31.07.2017
student_eJtzjHIE

Благодарю автора за замечательные видео-уроки и тесты!

27.07.2017
Александр

Курсом очень доволен, спасибо разработчику!

26.07.2017
Эдуард Маложиленко

Все доходчиво объяснили. Спасибо!

25.07.2017
AlexandrBroudi

Прекрасный курс!

23.07.2017
Vladimir Khorolsky

Спасибо за курс! Помогли мне разобраться в сss и html чуть лучше. Полезная информация и интересный подход к обучению!!!

19.07.2017
Psihodel☺

Очень интересно и доходчиво!

16.07.2017
_Maverick_

Мне,как новичку, этот материал весьма интересным и полезным. Единственное, где были проблемы это с блоками(дивами), но разобрался в итоге. Буду продолжать обучение на вашем портале. Спасибо за ваш труд , я понял чем хочу заниматься в жизни ☺.

16.07.2017
student_sCiRT5Eu

Хороший курс, единственное не получилось выполнить адаптивную верстку, хотя делал все по урокам

13.07.2017
student_ryfLNlmO

Хороший курс.

10.07.2017
student_XVf3PgEh

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

08.07.2017
student_NQFd7j3N

Отлично.

08.07.2017
Дмитрий Тутин

Отличный курс, грамотно изложенный и всё по делу!

07.07.2017
Георгий Газаров

Не думал, что это будет так легко) Вы лучшие!

05.07.2017
Даниил Кравченко

Супер!)

01.07.2017
Леонид Филатов

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

24.06.2017
student_sUCo0uDp

Спасибо огромное! Единственное - не всегда принимал код в заданиях, хотя всё было верно.

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 часов
  • Dmitry
    2337 xp
    1
  • Asiya Snowden
    1811 xp
    2
  • Заур Такаев
    1811 xp
    3
  • student_ChNjFXYk
    1811 xp
    4
  • student_Jy5bGvrU
    1811 xp
    5
  • У вас 0 XP за курс HTML/CSS

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