HTML/CSS

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

4.8 / 103

О курсе



План курса


Free Level
Вводная часть. Знакомство.
Вы узнаете информацию о модуле HTML/CSS, а также получите несколько полезных советов
00:11:10
Premium Level
Вводный урок
Подготовка компьютера к работе: Установим редактор кода и дополнительные инструменты.
00:08:05
Premium Level
Задание 2: Тест
Пройдите тестирование
00:00:15
Premium Level
Задание 3: Тест
Пройдите тестирование
00:00:15
Premium Level
Базовая разметка
Вы узнаете как создается базовая разметка HTML страницы, из чего она состоит.
00:05:08
Premium Level
HTML задание создать базовую разметку
Интерактивное упражнение
00:00:20
Premium Level
Теги <h1>, <p>, <strong>
Изучим HTML теги <h1> - заголовок, <p> - параграф, <strong>
00:03:59
Premium Level
Задание 7: Тест
Пройдите тестирование
00:00:15
Premium Level
Упражнение тег <h1>
Интерактивное упражнение
00:00:40
Premium Level
Упражнение тег <p>
Интерактивное упражнение
00:00:30
Premium Level
Упражнение тег <strong>
Интерактивное упражнение
00:01:10
Premium Level
Познакомимся с новыми html тегами
Вы узнаете как использовать теги <div>, <span>, а также рассмотрим базовый синтаксис CSS
00:08:12
Premium Level
Упражнение <div>, <style>, css class
Интерактивное упражнение
00:02:00
Premium Level
Упражнение <div>, <style>, css background-color
Интерактивное упражнение
00:01:00
Premium Level
Задание 14: Тест
Пройдите тестирование
00:00:30
Premium Level
Задание 15: Тест
Пройдите тестирование
00:00:30
Premium Level
Теги <ul>, <li> и этапы создания веб-сайта
Изучим этапы создания профессиональных сайтов и познакомимся с тегами <ul>, <li>
00:07:49
Premium Level
Подключение css стилей в отдельном файле.
Подключим CSS стили отдельным файлом, начнем создавать header главной страницы Киномонстр.
00:09:03
Premium Level
Теги <ul>, <li>
Интерактивное упражнение
00:01:00
Premium Level
CSS свойства: margin, padding, height, font-size и другие.
Продолжим писать стили для Header главной страницы, познакомимся с CSS свойствами: margin, padding, height, font-size и другими.
00:06:54
Premium Level
Задание 20: Тест
Пройдите тестирование
00:00:10
Premium Level
Задание 21: Тест
Пройдите тестирование
00:00:10
Premium Level
CSS свойство Margin
Интерактивное упражнение
00:01:00
Premium Level
Задание 23: Тест
Пройдите тестирование
00:00:15
Premium Level
CSS свойство Padding
Интерактивное упражнение
00:01:00
Premium 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
Посмотреть весь план обучения

Отзывы

21.10.2017
Артем Алексанян

Побольше бы объяснение про свойства, потому, что часто когда они повторяются приходится останавливать видео и лезть читать, для чего они. Это закаляет конечно, но одновременно вгоняет в ступор, когда слышу "Мы уже это проходили в предыдущих уроках" и тут мозг взрывается, потому что ты осознаешь, что не понимаешь, что за свойство ты задаешь) однако это круто прокачивает! Спасибо за такую возможность!

17.10.2017
student_zaDsDTar

1. Исходник не всегда совпадает с тем, о чем говорилось на уроке. Как будто его правили после объяснений (e.g. урок 9, раздел * CSS Mobile *). 2. Автор не всегда разъясняет свой выбор тех или иных размеров, при этом от НОВИЧКА в домашнем задании требуется написать код самостоятельно. 3. Произношение терминов режет слух.

16.10.2017
Константин Лавровски...

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

14.10.2017
Илья Зайцев

Отличный курс! Много полезной информации в доступной форме!

13.10.2017
Dmitry

Хороший курс

10.10.2017
Иван Литовченко

Супер курс! Очень понравился. Я не знал раньше ничего из области программирования. А этот курс позволяет расширить понимание. Скоро приступлю ко второй части) Спасибо огромное автору! Всем советую

05.10.2017
student_14GhfENt

Это здорово! Четко и ясно. Хороший фундамент для дальнейшей работы! 2 момента, которые хотел выделить : про тег margin : a b c d; либо прослушал, либо упустили - не объяснили за какой отступ (верхний, нижний, правый или левый) отвечают значения ( для примера взял a b c d). И также про CSS, не совсем понятно в каком случае, обращаясь к элементу, пишется точка (.название элемента) , а в каком случае не пишется (пример : тег table). Дмитрий, 19 лет, Санкт-Петербург

24.09.2017
Дмитрий Демин

Прекрасный курс! Много полезной информации, но для полного ее усвоения, придется не один раз просмотреть весь этот курс заново!

22.09.2017
Александр Шустенков

Хороший курс, помог вспомнить азы html и css.

19.09.2017
student_gsxSzPHw

Отличный курс. Это мой первый опыт в IT сфере. Все понятно и без лишнего разжевывания- т.е. по-существу. Важное место отдается самостоятельному обучению. Это к тому чтобы ни у кого не было &amp;quot;розовых очков&amp;quot;

04.09.2017
student_kiLIcJVW

Заходил уже с базовыми знаниями HTML5/CSS3, но очень хорошо объяснено как сделать адаптив - спасибо!

04.09.2017
Владимир Соловьев

В целом курс неплохой, но хотелось бы оставить пару важных на мой взгляд комментариев: - уделить чуть больше внимания теории, объясняя что и как работает. Например, почему взят именно такой отступ, а не другой (в последнем занятии, у инпута ширина 80%, а у текстареа 85%, при этом по ширине они получаются одинаковые, как так?) и т.д. - практические задания с редактором кода требуют идеального соответствия, при этом проверка не указывает на то, где и какая ошибка допущена. Это жутко неудобно.

04.09.2017
Михаил

Курсы взял из за php, работаю верстальщиком) Когда начали верстать блоки, рука потянулась к лицу, каша из дивов, где теги header, main, aside, article, footer и т.д. Название блоков в сайдбаре h2, серьезно? Очень семантично) Выводит из себя, реализация заданий, почему надо делать один в один как автор, если есть куча вариантов решения? Например почему ссылку надо делать на 3 строки, если лучше ее сделать в строку) Вывод: сыровато, идея не плохая, но надо дорабатывать.

02.09.2017
Никита Толмач

Было круто) Конечно не все запомнил) Но все же)

27.08.2017
Дмитрий Квачук

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

24.08.2017
student_li3_O_UY

Отличный курс! Всё прозрачно и просто.

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 лет

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

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

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

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

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

Тесты: 16


Продолжительность: ~5 часов
  • student_W1a56I04
    2337 xp
    1
  • Александр Гальчин
    1953 xp
    2
  • Владимир Булучевский
    1533 xp
    3
  • student_YUzXpEeQ
    1533 xp
    4
  • student_WFdi-P_i
    1366 xp
    5
  • У вас 0 XP за курс HTML/CSS

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