Курс HTML/CSS

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

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

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

О курсе

Начните обучаться верстке 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

Получение сертификата об окончании курса



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


Отзывы(829)

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

19.12.2018
Анатолий Соловьев

Спасибо большое за первый курс! В котором Я узнал много нового и интересного о работе с HTML. Понравилось то что он и прост и одновременно сложен.

19.12.2018
Дмитрий Васькович

Хороший, быстрый способ научится самому создавать сайты))

18.12.2018
Kirill

Очень хороший курс. Всё хорошо объясняют, всё понятно и не так сложно как казалось.

18.12.2018
Егор Колтышев

Замечательный курс! Узнал много нового для себя.

17.12.2018
Игорь Дворник

Я могу гордится собой, я прошел путь html.

17.12.2018
Рихард Алиханов

Немножко теории бы)

16.12.2018
Anton Ivantsov

Курс очень понравился!

16.12.2018
Ольга Богатырева

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

16.12.2018
Никита Топтунов

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

16.12.2018
Максим Мурашкин

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

16.12.2018
student_1UnlEYgv

Очень не плохо объясняется материал, есть мелкие недочеты, но не критично.

15.12.2018
student_4gEWhmRx

Удобный и понятный для начинающих!!

15.12.2018
Владимир Кропотин

Было очень интересно и познавательно.

15.12.2018
Рустам Раджапов

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

15.12.2018
Денис Фамильный

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

15.12.2018
student_w0yd3FWp

В этом курсе доступно объясняли, всего за каких то 65 уроков разложил всё по полочкам в HTML И CSS!

15.12.2018
VLADYSLAV HORBACHENK...

Отлично повторил весь материал очень хорошо

14.12.2018
Тимофей Лазебный

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

14.12.2018
Кирилл Пугачев

Прошел весь курс за 2 дня, научился большему чем за год в колледже

14.12.2018
Олег Натаров

Мне понравилось. Преподаватель все отлично объясняет.

13.12.2018
Сайпутин Магомедов

Спасибо за курс. Все очень понятно!

13.12.2018
student_tOj4wlGG

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

12.12.2018
Александр Колесников...

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

12.12.2018
Павел Стасов

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

12.12.2018
Yaroslav Didyk

Многое знал, но и многому научился

12.12.2018
student_SleshOFF

Отличный курс, ничего лишнего, всё чётко и понятно.

11.12.2018
Вячеслав Бахарев

Всё понятно и ясно. Спасибо автору за проделанную работу!

11.12.2018
Александр Тулин

Все норм!

11.12.2018
Vitalii Rusal

Все отлично!)

10.12.2018
Roman Kurepanov

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

10.12.2018
Николай Бобровский

Спасибо за курс! Все понравилось.

10.12.2018
Виктор Шиляев

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

09.12.2018
Antonina Muraveva

Спасибо за интересные и что немаловажно - короткие видео - очень удобно смотреть уроки именно короткими отрывками!

09.12.2018
Дмитрий Стахнев

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

09.12.2018
Максим Шалюгов

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

09.12.2018
Александр Бекетов

Курс впечатляет конкретностью, практичностью и быстрыми результатами. Для начинающих изучение HTML и CSS - очень даже рекомендую.

09.12.2018
Александр Петров

Доволен всем, научился много чему, купил подписку на 1 год думаю успею всё пройти)

08.12.2018
Егор Трушенков

Отличный курс всё понятно и легко.

08.12.2018
Anton Marin

Все понятно. Спасибо.

07.12.2018
Михаил Ченцов

Все просто супер! Нужна только самостоятельная практика, чтобы довести все это до автомата. Спасибо!

07.12.2018
Denis Kashirin

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

07.12.2018
Данил Литвинов

Курс очень хороший, и главное легкий для понимания

07.12.2018
student_4dW_kdrQ

Круто)

07.12.2018
Руся Руся

Хороший курс. С ним легко начать и сразу что-то делать, а не собираться с мыслями

06.12.2018
Андрей Гаркуша

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

06.12.2018
student_bNlsk8Cb

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

05.12.2018
Ekaterina Levinzon

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

05.12.2018
Александр Горбачёв

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

04.12.2018
Osamich

Отличный курс. Основы понятно объясняют.

04.12.2018
Сергей Подъяпольский

Отличный курс. Все разложено по полочкам. Огромное спасибо автору.

03.12.2018
Ksenia Drobinina

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

03.12.2018
Владимир Прокофьев

Отличный курс. Многому научился.

02.12.2018
Михаил Ковальчук

Мой первый сертификат))

02.12.2018
Дмитрий Пашков

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

01.12.2018
student_OxYV1NIZ

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

30.11.2018
Дмитрий Семчук

Всё понятно и доходчиво, спасибо.

30.11.2018
Gleb Alfutin

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

30.11.2018
Игорь Вихров

Всё понравилось!)

29.11.2018
Михаил Бердюгин

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

29.11.2018
Daniyar

Все очень хорошо объяснили!

29.11.2018
Виталий Ефимов

Хорошее объяснение языков

28.11.2018
Yevhen Rudnytskyi

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

28.11.2018
Виктор Константинови...

Очень понравился курс. Все доступно,для начинающего специалиста-самое то!)

27.11.2018
Евгений Гончаров

Курс, просто замечательный! Всё очень доступно рассказано, а главное показано на деле! Большое Спасибо!!!

26.11.2018
Сергей Желдак

Молодцы ребята!

26.11.2018
Сергей Рубахов

Доступно, понятно, эффективно!

26.11.2018
Алхас Аргун

Благодарю всех участников процесса создания и продвижения данного проекта, ресурса:) Успехов!:)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если у вас остались дополнительные вопросы о курсах FructCode, пожалуйста напишите в нашу службу поддержки на почту [email protected] и мы постараемся ответить в ближайшее время.

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

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

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

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

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

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

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

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

Тесты: 16


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