Курс HTML / CSS

В видеокурсе Вы изучите основы языков HTML и CSS, научитесь создавать адаптивные HTML страницы Вашего сайта. В процессе обучения Вы создадите портал КиноМонстр — сайт о кино, адаптированный для работы одновременно на компьютерах и мобильных устройствах.
Изучите онлайн уроки по основам верстки и программирования Html и Css с нуля и Вы сможете эффективно создавать верстку любых собственных сайтов!

5
Начать обучение Регистрация

О курсе - Чему Вы научитесь?

Посмотрите видео об онлайн курсе программирования и верстки HTML / CSS для начинающих. Вы узнаете, как эффективно построить обучение основам Html и Css и научиться самому создавать веб сайты с нуля.

В процессе обучения Вы получите знания и навыки:
  • Основы HTML и CSS
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Работа в редакторе кода SublimeText
  • Практическое применение основных тегов HTML
  • CSS-верстка текста: цвет и размер шрифта
  • Позиционирование блоков на сайте
  • Работа с изображениями
  • Правильная HTML-разметка для SEO
  • Адаптивная верстка под мобильные устройства
  • Специальные классы для адаптивности
  • Полезные инструменты для frontend-разработчика

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

Начать обучение

План курса

Программа обучения включает видео уроки по изучению HTML и CSS с нуля. Благодаря интерактивным тестам и заданиям, Вы сможете закрепить полученные знания по Html и Css верстке и программированию веб сайтов на практике.


Free Level
Вы узнаете информацию о модуле HTML/CSS, а также получите несколько полезных советов
00:09:22
Free Level
Подготовка компьютера к работе: Установим редактор кода и дополнительные инструменты.
00:08:05
Free Level
Пройдите тестирование
00:00:15
Free Level
Пройдите тестирование
00:00:15
Free Level
Вы узнаете как создается базовая разметка HTML страницы, из чего она состоит.
00:05:08
Free Level
Интерактивное упражнение
00:00:20
Free Level
Изучим HTML теги <h1> - заголовок, <p> - параграф, <strong>
00:03:59
Free Level
Пройдите тестирование
00:00:15
Free Level
Интерактивное упражнение
00:00:40
Free Level
Интерактивное упражнение
00:00:30
Free Level
Интерактивное упражнение
00:01:10
Free Level
Вы узнаете как использовать теги <div>, <span>, а также рассмотрим базовый синтаксис CSS
00:08:12
Free Level
Интерактивное упражнение
00:02:00
Free Level
Интерактивное упражнение
00:01:00
Free Level
Пройдите тестирование
00:00:30
Free Level
Пройдите тестирование
00:00:30
Free Level
Изучим этапы создания профессиональных сайтов и познакомимся с тегами <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:05:56
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:07:45
Premium Level
Задание 28: Тест
Пройдите тестирование
00:00:15
Premium Level
Задание 29: Тест
Пройдите тестирование
00:00:15
Premium Level
CSS Свойство text-decoration
Интерактивное упражнение
00:01:00
Premium Level
Создание горизонтальное меню
Начнем создавать горизонтальное меню и изучим новые css стили
00:05:33
Premium Level
Задание 32: Тест
Пройдите тестирование
00:00:15
Premium Level
Стилизация горизонтально меню
Создадим дополнительные стили для горизонтального меню и закончим его создание
00:07:02
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
Посмотреть весь план обучения

Отзывы студентов о курсе

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

25.05.2019
student_jllQPysp

Спасибо. Все доступно. Думаю пройти еще раз для закрепления

25.05.2019
Alexey Pestov

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

23.05.2019
Sergey Goltsov

Курс понятен и доступен. Я ничего не знал о HTML, однако после курса смогу верстать простые сайты. Курс дает необходимые базовые знания. Если дополнить курс самостоятельной подготовкой то верстку сайтов можно изучить в совершенстве.

23.05.2019
Арчил Дряев

крутой сайт для начала с нуля

21.05.2019
Николай

Хорошо подан материал, было интересно.

18.05.2019
Филипп Кузякин

Спасибо большое. Очень понравился подход, доступно и понятно. Как пожелание не хватает справочника по html и css свойствам.

18.05.2019
dreamer

Для начала доступно, понятно и, что важно, интересно. Спасибо!

16.05.2019
Olzhas beisembin

Обучение прошло легко, уроки очень интересные и занимательные. Больше всего понравились задания которые нужно выполнять самому.

14.05.2019
Alexey

Благодарю за качественное обучение. Хотелось бы ещё увидеть уроки по программированию C#

14.05.2019
Артём Бикбаев

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

14.05.2019
Pavel Roslov

- Мне понравился курс - Проходил курс у Артема Исламов - Этот видео курс намного для меня эффективней т.к. я в любой момент могу открыть видео + мой код созданный по урокам и продолжить... - Из минусов при проверке кода есть недочет, т.к. для положительного результата проверки нужно написать код буква в букву и не только код (возникала ошибка с названием каких либо заголовков например у автора задумана с маленькой буквы, а вы написали с большой это считается ошибкой)

14.05.2019
Игорь Рулев

Курс действительно познавательный. В моём случае, я уже имел знания по этой теме, а тут их закреплял и узнал некоторые новые вещи для себя.

14.05.2019
Евгений Феоктистов

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

10.05.2019
Marina Stolupina

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

08.05.2019
Иван Агафонов

Понятный и познавательный курс!

07.05.2019
Medic

очень хорошо уложилась информация, правда у меня были фрагментарные знания

06.05.2019
Igor Anosin

Классный курс! Спасибо большое Сергею Никонову и всем тем, кто участвовал в процессе создания материала. Доступно, понятно. Я рад, что случайно наткнулся на этот курс. Буду и дальше учиться у вас!

05.05.2019
student_5dpbvRcQ

Очень понравилось!!!!

03.05.2019
Денис Захаров

Круто ! Очень интересно.

02.05.2019
Василий Высоцкий

Для начинающего самое то, но необходима минимальная база - во первых по английскому языку, во вторых неплохо владеть ПК совсем чайнику будет тяжело. А так да, лучшее что есть по соотношению цена\качество.

01.05.2019
Юлия Новокшонова

Очень полезный курс, многие моменты начинаешь понимать про верстке в редакторах

01.05.2019
Анна Кузеванова

Спасибо, за отличный курс. Долго искала подобный ресурс, с пошаговым обучением.

01.05.2019
Татьяна Веселова

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

26.04.2019
student_ldFykD_m

Я уже хорошо знал весь материал (на счету более 20 сайтов, 6 из них делал на заказ), но не отношу себя к специалистам. Выполнил все уроки. Впервые использовал Emmet - хороший плагин. Для тех кто совсем с нуля он будет неплохим обзором и ориентиром, но для понимания обязательно на каждом уроке читать про использованные теги, а особенно про свойства CSS. Иначе будет очень поверхностное понимание. Хорош тем, что не затянут (иначе у многих может не хватить терпение), вполне последовательный.

25.04.2019
Алексей Скопченко

Доступно. Понятно. Интересно заниматься.

25.04.2019
Маргарита Ермолаева

Обучалась в таком формате первый раз. Очень удобно. Больше всего понравилось, что можно в удобное для себя время учиться, а не по расписанию. Какие-то мелочи в курсе могут быть не понятны, но это позволяет гибко мыслить и что-то загуглить самостоятельно, и в итоге лучше ориентироваться в теме. Новым ученикам могу порекомендовать проверять код прям по буковкам, если что-то не работает)) у меня обычно ошибка именно в этом была.

25.04.2019
Дмитрий Козуб

Доступным языком и наглядным примером - все ясно и понятно.

23.04.2019
Дмитрий Киселев

Все объясняется очень доступным языком.

22.04.2019
Владимир Кричковский

Мне очень понравился курс. Все доступно и понятно. Спасибо большое!

21.04.2019
Лилия Гребенюкова

Курс понравился. Большой плюс в том, что можно параллельно создавать сайт и учиться на реальном примере. Но для меня осталась не до конца понятна адаптивная верстка.

20.04.2019
Роман Пименов

Супер курс!!!!!!!!!!!!Всем советую, кто только начинает изучать HTML и CSS!

20.04.2019
Рудольф Рамазанов

Спасибо огромное за полезный курс HTML/CSS

20.04.2019
student_TQenrh_g

Очень понятный и интересный курс!

20.04.2019
Ivan_Dmitrievich

Всё чётко .

20.04.2019
Влад Ковальчук

Отличный Курс! Цена=Качество!

19.04.2019
student_ni7uEBYs

Довольно содержательный курс. Автору мое уважение)

19.04.2019
Евгений Касаткин

Ну класс. Больше мне нечего говорить

17.04.2019
Дмитрий Путятин

Спасибо! Все очень понравилось. Много нового для себя узнал.

17.04.2019
Иван Зубрицкий

Супер

17.04.2019
Анатолий Тарабик

Это лучшие курсы что я нашел в сети! Все четко, ясно и понятно ! Рекомендую всем кто начинает изучать сайтостроение! *****

16.04.2019
Кирилл Саленков

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

16.04.2019
Валерий Бирюков

Отличный курс! Прошёл без лишних напрягов, всё понятно! Рекомендую!

15.04.2019
student_5uW4_YU9

Все наглядно, просто и очень понятно СПАСИБО большое за курс!!!

15.04.2019
Виталий Герцовский

Мне очень понравилось, всё доступно, понятно, и всё получилось сделать, благодарю за столь чудесный курс.

13.04.2019
Максим Бродов

Здравствуйте! Всё понравилось, появилось представления о создании страниц и в целом вёрстки сайта. Спасибо! Было супер!

13.04.2019
student_OggmUlRZ

Спасибо! Замечательный курс, никакой воды! Параллельно верстаю свой сайт, блог, он немного проще, но с тремя колонками. Полученные результаты: почти понял как делать адаптивную верстку. Рекомендации новым ученикам: работать!

13.04.2019
Павел

Очень неплохо. Все доступно и понятно. В курсе нравится то, что это интерактив. Слушая теорию, сразу практикуешься. Это очень важно для обучения. Могу привести в пример курсы типа кодебра, можно учиться месяцами только HTML и ни черта не выучить. А тут за неделю курс прошел и разобрался в сути процесса. Результат, таков, что я стал уверен - научится можно и нужно, требуется только лишь толковый преподаватель, коего я здесь и нашел. Новым ученикам рекомендую юзать курс.

11.04.2019
Максим

Все доступно и понятно. Конечно, очень много информации, пройду курс еще раз, чтобы систематизировать знания. Попробую сделать свой сайт с архивом семейных фото и видео.

11.04.2019
student_fMfIT7eT

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

10.04.2019
Малик Бакумов

Классный курс

10.04.2019
Ирина Алешина

Доступно, просто и понятно.

09.04.2019
student_6MHkcbxS

Курс понравился. Все объясняется доступным языком. Достаточно для получения первого представления о верстке сайта.

08.04.2019
Виталий Кирилов

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

08.04.2019
Дмитрий

Курс очень информативный, по нему можно учиться с 0 подготовкой.

05.04.2019
Рустам

Хороший курс! Советую всем. Приобрел на скидке!

05.04.2019
Альберт Мухаметов

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

04.04.2019
Максим

Нормальный обучающий материал в котором даются самые азы верстки

04.04.2019
Равиль Шакеров

Все очень замечательно, полезный курс, когда не требуется работать с теми или иными фреймами\библиотеками, а также полезное объяснение адаптивной верстке.

03.04.2019
Nadezhda Vlasova

Отличный курс! При неправильном ответе было бы здорово если бы выскакивала подсказка (где искать ошибку). А так всё великолепно! Идем дальше :)

02.04.2019
Евгений Карпухин

очень доходчиво и понятно для новичка

02.04.2019
Макар Кондратьев

Курс мне очень понравился, рассказывается он в приятном темпе, объясняется тоже все по максимуму. А самое главное, что все интуитивно понятно, так как рассмотрено сразу на практике!

02.04.2019
Константин

Больше практикуйтесь и делайте параллельно 1-3 проекта для закрепления информации.

02.04.2019
Борис Маслов

Хороший курс, для новичков самое то. Я сам изучал HTML / CSS, но узнал много чего полезного. Очень хорошо показали на примере что такое адаптивная верстка, набрал на курсе 2192 из 2337XP, хороший курс в общем. Рекомендую))

02.04.2019
Sergey

Отличный курс, все четко и подробно рассказано и показано. Понравилась адаптивная верстка

01.04.2019
Юлия Рубцова

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

01.04.2019
student_vee_CYy6

отличный курс, добавьте только библиотек с тэгами HTML и свойствами CSS, чтобы их можно было скачать

31.03.2019
Сергей Семёнов

Круто

31.03.2019
Александр Старков

Обучение прошло достаточно быстро, а также продуктивно. Так держать!

30.03.2019
Данил Кувайцев

Круто

29.03.2019
Евгений Парфененко

Отличные курсы, советую.

29.03.2019
Владислав Андрианов

Очень интересно и отлично объяснял преподаватель. Были и сложности, но связаны только с невнимательностью себя самого ( где то див съехал и т.д.) Новым ученикам учится искать неполадки, если что-то не получается. Задания практические очень требовательны к пробелам, и мелким недочетам, которые никак не влияют на работу. Результаты - понял структуру верстки сайта, и многое другое. Понравилось обучение в целом. Буду идти дальше!!! Всем удачи и благ!

26.03.2019
Александр Назаров

Все замечательно, с самого 0 создал 2 сайта один по урокам, второй себе!

26.03.2019
Адиль Аманбаев

очень понравилось стоит своих денег минимум воды максимум информации

24.03.2019
student_K5735Lr9

Впервые учу HTML и CSS, но мне понравилось.

23.03.2019
Ольга Николаевна Кол...

Уроки прекрасные. В правильном ритме. Все по существу дела и никакой навязчивой рекламы. Даже мне - человеку не искушенному в верстке - было все понятно. Большое спасибо за ваш благородный труд.

22.03.2019
student_HXLNGNdi

Отличный курс по HTML и CSS все объяснено понятными словами, запоминалось легко. Проходите курс не пожалеете!

22.03.2019
Svetych

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

21.03.2019
Рафаель Коджоян

многому научился

20.03.2019
Мирдалиф Газетдинов

Обучение прошло на ура, я конечно перед этим прочел книгу HTML/CSS Джон Даккет. Больше всего понравилось наглядная практика и очень много полезных инструментов, о которых я не знал. Я бы отметил достаточную развернутость тем и разделов верстки. Я получил много знаний и опыта от курса обучения. Ученикам курса я бы рекомендовал не просто повторять уроки а самостоятельно разбирать каждый тег и инструмент при помощи различных вариаций, чтобы закрепить знания.

20.03.2019
Ромчик Годун

Очень хороший вводный курс. Понятное объяснения. Буду смотреть и изучать следующие курсы

20.03.2019
Андрей Ленников

Очень информативный курс, получил основные знания адаптивной верстки и HTML / CSS.

Начать обучение

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

Course Author
Сергей Никонов

- Опыт в веб-разработке более 10 лет 

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

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

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

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

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

Тесты: 16


Продолжительность: ~5 часов

  • Alexey Pestov
    2337 xp
    1
  • Marina Stolupina
    2337 xp
    2
  • Medic
    2337 xp
    3
  • Yana
    2337 xp
    4
  • Андрей Векшин
    2300 xp
    5
  • У вас 0 XP за курс HTML / CSS
    Включайся!