Курс 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 с нуля.

14.11.2017
Султан Султанов

Все отлично, все понятно объясняли

07.11.2017
Роман Куракса

Очень неплохо.

06.11.2017
Вячеслав Жигалов

Добрый день! Впечатление от курса HTML/CSS благоприятное. Прошел курс за 17 дней. До этого смотрел другие курсы, в том числе и платные. Ваш курс выгодно отличается тем, что подробно и все разъясняется и показывается на практике. Большое спасибо.

03.11.2017
Роман Семенов

Неплохой курс. Лично для себя пару фишек увидел и наконец-то понял что такое адаптивная верстка. Возможно слишком сложно для полных "чайников". В остальном курс понравился. Все лаконично, доступно и быстро. Минимум воды и максимум полезной информации. Уроки не идут по полчаса, самый длинный урок — 12 минут всего. Интересно смотреть и сразу повторять действия, это позволяет сохранять внимание и концентрацию.

01.11.2017
Лев Курашев

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

30.10.2017
Александр Гальчин

Очень хороший курс! Помог вспомнить основы и узнать много нового.

30.10.2017
Александр Зайцев

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

28.10.2017
Anahit Vardevanyan

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

27.10.2017
Вадим Баранников

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

26.10.2017
Natalia

спасибо. Теперь моя каша в голове превратилась упорядоченные рядочки. Это хороший старт для новичка. вместо того чтобы просматривать куча литературы, которая в большинстве случае устарела, пройти такой курс за два дня это идеально. Хотелось бы посоветовать обновлять видио в соответствием с временем. иначе скоро ваш курс тоже сочтут, как устаревший.( div class=&amp;quot;header&amp;quot;? ) или создать дополнительный по html5 или указывать дополнительную литературу необходимую к прочтению.

24.10.2017
rastasour

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

23.10.2017
Ярослав Батюк

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

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
Oleh Koval

Отличный курс. Это мой первый опыт в 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
Дмитрий Тутин

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

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

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

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

Одна из миссий проекта 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

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