Курс HTML/CSS

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

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

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

О курсе

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

Вы научитесь пользоваться html-тэгами, такими как div, span, p, ul, li, научитесь работать с каскадными таблицами стилей и узнаете новые css-свойства, такие так margin, display, position, padding, color, background и другими, а также научитесь создавать адаптивную верстку сайтов, а интерактивные задания html и css программирования, выполняемые прямо в браузере, позволят вам обучаться эффективнее.

Верстка html-страниц(верстка сайтов) относится к Frontend(фронтенд) части разработки профессионального веб-сайта. Для Frontend разработчиков открыто большое количество вакансий и Frontend-разработчики высоко ценятся на рынке труда по всему миру.

Пройдите интерактивные задания и вы убедитесь в том, что освоить верстку html-страниц с нуля и стать фронтенд разработчиком - это под силу каждому!


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

План курса

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


Free Level
Вы узнаете информацию о модуле HTML/CSS, а также получите несколько полезных советов
00:11:10
Free Level
Установим редактор кода Sublime Text 3, тему оформления, плагин Emmet и дополнительные инструменты
00:16:34
Free Level
В этом уроке я покажу как установить и настроить редактор кода Sublime Text 3 для Mac, а также установим красивую тему оформления.
00:07:35
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
Premium Level

15. Тест

Пройдите тестирование
00:00:30
Premium Level

16. Тест

Пройдите тестирование
00:00:30
Premium Level

17. Теги <ul>, <li> и этапы создания веб-сайта

Изучим этапы создания профессиональных сайтов и познакомимся с тегами <ul>, <li>
00:07:49
Premium Level

18. Подключение css стилей в отдельном файле.

Подключим CSS стили отдельным файлом, начнем создавать header главной страницы Киномонстр.
00:09:03
Premium Level

19. Теги <ul>, <li>

Интерактивное упражнение
00:01:00
Premium Level

20. CSS свойства: margin, padding, height, font-size и другие.

Продолжим писать стили для Header главной страницы, познакомимся с CSS свойствами: margin, padding, height, font-size и другими.
00:06:54
Premium Level

21. Тест

Пройдите тестирование
00:00:10
Premium Level

22. Тест

Пройдите тестирование
00:00:10
Premium Level

23. CSS свойство Margin

Интерактивное упражнение
00:01:00
Premium Level

24. Тест

Пройдите тестирование
00:00:15
Premium Level

25. CSS свойство Padding

Интерактивное упражнение
00:01:00
Premium Level

26. Тег <a>. Создание ссылки.

Интерактивное упражнение
00:02:00
Premium Level

27. Тест

Пройдите тестирование
00:00:15
Premium Level

28. Стилизация ссылок с помощью CSS

Закончим создавать верстку header и изучим как стилизовать ссылки
00:05:47
Premium Level

29. Тест

Пройдите тестирование
00:00:15
Premium Level

30. Тест

Пройдите тестирование
00:00:15
Premium Level

31. CSS Свойство text-decoration

Интерактивное упражнение
00:01:00
Premium Level

32. Создание горизонтальное меню

Начнем создавать горизонтальное меню и изучим новые css стили
00:07:37
Premium Level

33. Тест

Пройдите тестирование
00:00:15
Premium Level

34. Стилизация горизонтально меню

Создадим дополнительные стили для горизонтального меню и закончим его создание
00:05:25
Premium Level

35. Тест

Пройдите тестирование
00:00:15
Premium Level

36. Header и TOP menu

Интерактивное упражнение
00:02:00
Premium Level

37. HTML Form. Создание форм.

Начнем создавать правый блок сайта, познакомимся с HTML формами и их свойствами.
00:07:22
Premium Level

38. HTML Form

Интерактивное упражнение
00:01:00
Premium Level

39. Right Block. Начнем создавать панель справа

Начнем создавать Right Block. Изучим теги form, border и другие
00:12:57
Premium Level

40. Тест

Пройдите тестирование
00:00:15
Premium Level

41. Right Block. Продолжение.

Создадим вторую панель правого блока сайта: Форму входа и ссылки
00:11:55
Premium Level

42. Right Block. Часть 3

Закончим создавать правую панель сайта
00:10:42
Premium Level

43. Right Menu

Интерактивное упражнение
00:05:00
Premium Level

44. Footer. Часть 1

Начнем создавать footer, а также в структуру проекта добавим постеры фильмов
00:04:14
Premium Level

45. Footer. Часть 2

Продолжим создавать нижний блок сайта Footer и напишем к нему стили
00:05:10
Premium Level

46. Footer

Интерактивное упражнение
00:03:00
Premium Level

47. Content главной страницы

В этом уроке создадим блоки с фильмами на главной странице
00:08:48
Premium Level

48. Главная страница. Записи блога.

Завершим создание главной страницы
00:05:22
Premium Level

49. Страница просмотра фильмов

Начнем создавать страницу просмотра фильмов
00:05:29
Premium Level

50. Страница просмотра фильмов. Блок информации о фильме

Продолжим создавать страницу просмотра фильмов и создадим блок краткой информации о фильме
00:05:42
Premium Level

51. Страница просмотра фильмов. Блок с описанием фильма

Продолжим создавать страницу просмотра фильмов и создадим блок с описанием фильма
00:05:02
Premium Level

52. Страница просмотра фильмов. Блок с отзывами к фильму

Продолжим создавать страницу просмотра фильмов и создадим блок с отзывами к фильму
00:06:32
Premium Level

53. Страница просмотра фильмов. Блок отзывы

Интерактивное упражнение
00:03:00
Premium Level

54. Страница просмотра фильмов. Форма отправки отзывов к фильму

В этом уроке мы закончим создавать страницу просмотра фильмов
00:08:36
Premium Level

55. Страница Фильмы

Создадим новую страницу films.html
00:13:37
Premium Level

56. Страница Фильмы

Интерактивное упражнение
00:05:00
Premium Level

57. Страница Рейтинг фильмов

В этом уроке создадим страницу Рейтинг фильмов и изучим новые css свойства и html теги
00:12:13
Premium Level

58. Тест

Пройдите тестирование
00:00:15
Premium Level

59. Страница Рейтинг фильмов

Интерактивное упражнение
00:05:00
Premium Level

60. Адаптивная верстка. Инструменты разработчика

В этом уроке мы поговорим об инструментах frontend-разработчика
00:06:40
Premium Level

61. Адаптивная верстка. Media queries, тэг viewport

В этом мы начнем изучать основы адаптивной верстки, изучим тэг VIEWPORT и изменим цвет header для мобильного устройства
00:09:35
Premium Level

62. Адаптивная верстка. Правила адаптивной верстки

Продолжим создавать адаптивную версию сайта
00:11:48
Premium Level

63. Тест

Пройдите тестирование
00:00:15
Premium Level

64. Адаптивная верстка. Продолжение

Продолжим создавать адаптивную версию сайта. Напишем дополнительные css стили
00:09:45
Premium Level

65. Адаптивная верстка. Заключительная часть

В этом уроке мы закончим создавать адаптивную версию сайта
00:11:40


Посмотреть весь план обучения


Отзывы(415)

Оставьте свой отзыв после прохождения Курса создания сайтов HTML/CSS с нуля.

21.03.2018
Yevhenii Khodos

Все отлично! Хотелось бы чуть больше комментарий к действиям которые выполняются. Ну это мелочи)

20.03.2018
Сергей Кулюкин

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

17.03.2018
Денис Климов

Доступно и грамотно изложен материал! Во время прохождения курса не отказался бы от "словаря html" с тегами, используемыми в процессе обучения. Иногда не успеешь в блокнот записать и все, только пересматривать ) Спасибо!

14.03.2018
Глеб Ковалев

Верстаю теперь свой фейсбук. Отличный курс!!!

14.03.2018
Александр Зуев

Отличный курс! Все подробно объясняется!! Спасибо.

12.03.2018
Алексей Мамонтов

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

06.03.2018
Валентин Меркушев

Очень полезный курс, позволяющий получить практический опыт работы с html и css.

04.03.2018
student_n94OzEiM

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

03.03.2018
cApu

Всё классно, только не сказал как открывать в саблайме вид с девайсов. Или я пропустил?

03.03.2018
Антон Мусанников

Отличный курс! посмотрим, что будет дальше)

01.03.2018
Михаил

Все супер, для начинающего самое то, хотелось бы побольше интерактивных заданий, для лучшего усвоения ;)

01.03.2018
Нисембаум Андрей Льв...

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

01.03.2018
Сергей Бандорин

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

27.02.2018
Лиана Лаур

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

26.02.2018
Александр Попов

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

25.02.2018
Елизавета Татаринова

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

25.02.2018
Luybava Cheburashkin...

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

24.02.2018
Александр Сабельнико...

Все просто и понятно.

23.02.2018
Глеб Венедиктов

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

23.02.2018
Сергей Демин

Курс отличный, раскрытие всех аспектов по ходу обучения.

22.02.2018
Viktoriia Presniakov...

Доступный и понятный курс для новичка, много практики.

20.02.2018
Evgeni Nestirenko

Супер!!!

19.02.2018
Илья Кузьмин

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

19.02.2018
Olesya Babenko

Спасибо большое!) Курс понравился. Удобно, что дается информация сразу с практикой и последовательно. Намного быстрее и понятнее, чем изучать по книгам. Тем, кто долго собирается и не может найти время на изучение (но очень хочет!) - лучше не придумаешь!))

17.02.2018
Елена Струженцева

Очень понравилось про адаптивную вёрстку. Легко и доступно.

16.02.2018
Вячеслав Миронов

Этот курс заново открыл для меня HTML и CSS. До этого замечательного курса по вёрстке сайта я находил уроки в интернете, но в них не рассказывалось как правильно обращаться к элементам в CSS например. У автора бесподобная речь, объясняет всё чётко, доходчиво.

12.02.2018
Андрей

Супер

12.02.2018
Kostya Kuzmin

Очень понравился курс, ОГРОМНОЕ СПАСИБО:)

11.02.2018
Родион Добропудов

Весьма неплохо. Очень полезная информация для новичка)

11.02.2018
Азат Ахметов

Спасибо за отличный практический курс по HTML и CSS! Все по делу и ничего лишнего! Я за неделю по вечерам изучил/вспомнил HTML, CSS, Sublime Text 3, а еще WebStorm, VS Сode и Atom.

11.02.2018
fr33man

Мне понравилось , но есть не стыковки и лишние теги

11.02.2018
Виталий Чухляев

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

09.02.2018
Вадим

Самое приятное в курсе - это твердое понимание всей картины построения сайта в целом. То, что частности и некоторые непонятные моменты оставлены на добросовестного студента, не отменяет пользы от курса, ведь другие подобные курсы просто тонут в таких частностях, не давая увидеть самое главное и целостное. Поэтому автору большой респект.)

08.02.2018
Николай Ходонович

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

07.02.2018
Артур Бобров

Было круто! Мне понравилось! Спасибо!

07.02.2018
Евгений Сокарев

Хотелось бы конечно более подробнее и побольше элементов рассмотреть, но в принципе хорошо

06.02.2018
Дмитрий Соломатин

Интересный курс, но только для начинающего)

05.02.2018
Егор Волков

Классный курс! Помогает освоить основы программирования.

05.02.2018
Izimgaly Aman Aibolo...

Круто

04.02.2018
Anton Stakh

Курс понравился.

04.02.2018
Коля Шкарин

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

31.01.2018
Владимир Черезов

Интересный курс) Даже очень)

30.01.2018
Яков Дурягин

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

30.01.2018
Святослав Петухов

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

28.01.2018
Антон Санрайз

Большое спасибо за данный курс. Если следовать наставлениям автора (записывать новую информацию, писать код вместе с ним, и параллельно пытаться создавать свои страницы) то результат будет более чем ощутимый. Теперь я более полноценно понимаю HTML и CSS и каждый день практикуюсь. Буду рекомендовать данный курс тем, кто тоже с нуля захочет заняться вебом.

27.01.2018
Борис Амралиев

Последовательный переход от простого к сложному способствует эффективному усвоению материала, но хотелось бы знать как позиционировать элементы, чтобы создавать действительно сложные и разноплановые сайты. Тем не менее огромное спасибо!

27.01.2018
Бауыржан Тастанбеков

Супер ;)

27.01.2018
Стас

Отличный курс! Начал с нулевыми знаниями, после курса сверстал свой первый сайт, пусть и самый простенький.

26.01.2018
Антон Лаишевкин

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

25.01.2018
student_sfckCDJS

Очень достойный курс для того, чтобы понять азы и самостоятельно начать верстать. Далее важна практика, 5-10 проектов, гугление вопросов - и рука набьется.

24.01.2018
Профиль Удален

Отличный курс. Все понятно и сразу с примером. Спасибо автору. Удачи в дальнейшем ему...

22.01.2018
Марина Алахвердиева

Спасибо за курс! Теперь нужно его повторить еще не раз, чтобы запомнить.. Благодарю.

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

Часто задаваемые вопросы

Почему такая низкая цена?

Одна из миссий проекта FructCode сделать дорогое ИТ-образование доступным для всех!

Когда начнется обучение? Нужно ли ждать когда наберется группа?

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

Получу ли я после прохождения курса сертификат?

Да! За успешное прохождение каждого курса, вы получите сертификат на нескольких языках: Русский, Английский, Немецкий, Французский, Итальянский. Все сертификаты, полученные за курсы, вы можете найти в вашем профиле

Как проходит обучение?

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

Актуальны ли курсы?

Да! Курсы на платформе FructCode достаточно часто обновляются, в том числе исходные коды.

Какое оборудование нужно для прохождения курса?

Курсы FructCode вы можете проходить в любой операционной системе - Windows, Mac OS или Linux, а также в мобильных устройствах. Тем не менее, для комфортного прохождения курсов FructCode, мы рекомендуем иметь монитор с разрешением экрана 1920x1080.

При прохождении курса я не знаю как выполнить задание, что делать?

Если в процессе прохождения курса у вас возникла проблема с выполнением задания и вопрос по пройденной теме курса, вы можете задать его в комьюнити FructCode - https://fructcode.com/ru/qa/, где другие студенты, которые успешно решили задание, вам обязательно помогут.

Что такое XP? Что оно дает?

XP - это сокращение от английского слова experience и переводится как опыт. За успешное прохождение задания вы получаете определенное количество XP. Чем больше XP вы накапливаете, тем больше опыта в программировании у вас становится.

Как участвовать в рейтинге? Я набрал достаточно XP, но не показываюсь в рейтингах курса, почему?

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

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

Если в процессе прохождения курса вы поймете, что вам не подходит данный курс - в течении 30 дней с даты покупки, вы можете вернуть деньги в полном объеме. Для возврата средств напишите в службу поддержки на почту info@fructcode.com

У меня не работает видео лекция или не открывается задание, что делать?

Наиболее частая причина, если что-то не работает - это установленные некоторые расширения для браузера, например Adblock. Если у вас возникает техническая проблема, напишите пожалуйста в нашу службу поддержки на почту info@fructcode.com и мы в кратчайшее время постараемся помочь

У меня остались вопросы о курсе, кому я могу их задать?

Если у вас остались дополнительные вопросы о курсах FructCode, пожалуйста напишите в нашу службу поддержки на почту info@fructcode.com и мы постараемся ответить в ближайшее время.

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

Сергей Никонов. Автор курса программирования HTML/CSS | FructCode
Сергей Никонов

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

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

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

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

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

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

Тесты: 16


Продолжительность: ~5 часов
  • Марк Артемьев
    2337 xp
    1
  • Виктор Шиляев
    2337 xp
    2
  • Ekaterina Levinzon
    2337 xp
    3
  • Егор Трушенков
    2337 xp
    4
  • сергей дубов
    2337 xp
    5
  • У вас 0 XP за курс HTML/CSS

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