Курс HTML/CSS

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

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

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

О курсе

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

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



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


Отзывы(645)

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

04.02.2019
Игорь Кутилин

Все четко и без воды, продолжаю учится)))

03.02.2019
Иван Ленский

Отличный и легкий курс! Спасибо создателям :)

03.02.2019
Sunshine

Отличный курс. Достаточно информативно и понятно. Спасибо за проделанную работу

03.02.2019
Андрей Сунцов

В целом отлично. Но хотелось бы чуть побольше теории, так как местами остались пробелы.

03.02.2019
Андрей Ермаков

Благодарю Вас за очень продуктивные уроки! Никогда ранее не сталкивался с программированием,оказалось весьма интересным занятием!

03.02.2019
Алексей Циммерманн

Мне очень понравилось все просто

03.02.2019
Andrii Malhivskiy

Отличный курс для начинающих. Только желательно использовать и дополнительные материалы.

03.02.2019
Yaroslav Mikhailov

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

02.02.2019
Vitali Brichkov

Просто и познавательно. Узнал много нового.

01.02.2019
student_ETHWB0b_

Очень круто, кратко и информативно!!!

01.02.2019
Владислав Иванов

Курс хорошо систематизирован и подходит для совсем новичков в этой области

01.02.2019
Александр Тарлецкий

Очень хороший курс!!! Здесь хорошо разжевываются основы. Однозначно годно)

30.01.2019
student_iJDdrYz7

Спасибо! С вашими уроками начал понимать азы HTML и CSS. Очень сильно помогли!!!

30.01.2019
Максим

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

30.01.2019
Вадим

Хороший курс!

30.01.2019
Frurer

Отличный курс. Очень помогло

30.01.2019
Иван Конищев

Очень доходчиво и понятно! Супер!

30.01.2019
Микаел Смбатян

Большое спасибо! Качественный контент!

29.01.2019
Павел Михайлов

Огромное спасибо всем кто приложил руку к обучающей платформе от FructCode! Ребята вы - Супер! Отдельная благодарность Сен-Сею - Сергею Никонову! Спасибо за возможность учиться новому. Вся информация по курсу ложится без зазубрин. Курс HTML/CSS я осваивал в течении 2-х месяцев (не имел возможности заниматься плотнее), под конец курса начал ощущать полноту получаемых знаний, информация стала лучше усваиваться, остальные курсы зайдут на одном дыхании.

28.01.2019
student_54qiGcC1

Хороший, доступный для понимания курс.

28.01.2019
Albert Shtana

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

27.01.2019
Alexander Rozpadnyuk

Это действительно полезная информация. Конечно с фреймворками можно сделать в разы быстрее. но часто приходится редактировать чужой код, и в такой ситуации эти знания просто не заменимы! Информация подается доходчиво. Большое спасибо!

27.01.2019
Руслан Зембіцький

Дуже дякую. Доходчиво і цікаво.

26.01.2019
Nastassia Karandashy...

Курс понравился, все коротко и доступно даже для новичков))

26.01.2019
Konstantin Bezzubiko...

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

26.01.2019
Михаил Хлынин

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

26.01.2019
iBaziyan

Отличный курс! Дизайнеру для понимание верстки самое то!

25.01.2019
Влад Чусов

Спасибо большое за ваши курсы, простое и ясное объяснение!

25.01.2019
student_yLK951-o

Всё супер, и очень информативно если только начинаешь изучать вёрстку.

24.01.2019
andrew_fg

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

24.01.2019
Игорь Ефремов

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

23.01.2019
Shynkarenko Elizavet...

Доступно, понятно и очень интересно!!!

23.01.2019
Андрей Федотов

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

22.01.2019
Roman Tymchenko

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

22.01.2019
Вячеслав Чермашенцев

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

22.01.2019
Василий Никитков

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

21.01.2019
Даниил Жовтобрюх

Информативно, мне понравилось!

21.01.2019
Ирфан Алимов

Интересно и понятно ,спасибо.

21.01.2019
Ilyas Muhametzyanov

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

21.01.2019
Никита Сёмкин

Всё хорошо, чуть-чуть верстать научился, попробуем дальше ;)

21.01.2019
student_zxa7mqnh

Научился тому, чему хотел, полезный курс 10/10

21.01.2019
Виктор Викторович Че...

Хороший курс!

21.01.2019
Anastasiya Krsteva

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

21.01.2019
Валерий Иванович Каб...

Отличный курс! Переходим к следующему...

20.01.2019
student_swqKmXc0

Nice

20.01.2019
Виктор Ращектаев

Хороший курс. Мне понравился. Все по теме без воды.

19.01.2019
Илья Бажунов

Было очень интересно

19.01.2019
Nikolai Marinin

Хороший курс. Всё просто и понятно.

18.01.2019
Сергій Калафіцький

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

18.01.2019
юра Литовченко

Мне понравилось хорошо и понятно объяснил сколько лазил по нету не все могут доносить информацию но тут быстро начинаешь вникать спасибо за обучения.

18.01.2019
student_9p7ZoTEz

Курс неплохой, только надо дополнительно искать информацию.

17.01.2019
Роман Борисов

Очень хороший курс, всё по существу и по делу. Для начинающих самое то!

17.01.2019
Андрей Летючий

Курс очень хороший, а самое главное – недорогой. Конечно, есть мелкие недочёты, но они не сильно мешают процессу обучения.

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

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

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

Одна из миссий проекта 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
  • Михаил Кривец
    2337 xp
    3
  • Никита Кремлёв
    2337 xp
    4
  • Сергей
    2337 xp
    5
  • У вас 0 XP за курс HTML/CSS

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