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

21.04.2019
FelipeMassa2018

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

21.04.2019
FedorMLSHV

Понравился интерактив

21.04.2019
Альберт Шамсутдинов

Хороший курс, понравился! Очень много нового для себя открыл! Информативно и доступно!

20.04.2019
Sergey Linberg

Спасибо!

20.04.2019
student_iGdlWPAe

Курс хороший но в нем мы не сделали раздел где можно смотреть фильмы А в целом очень полезный курс

20.04.2019
Максим Мытка

Благодаря этому курсу я смог расширить свои знания в области html.

19.04.2019
Ренат Закиров

Спасибо:)

19.04.2019
Дмитрий Богуцкий

Очень полезный курс :)

19.04.2019
Сергей

Для начинающих самое то

18.04.2019
Razor_06

Очень крутые курсы очень помогли, спасибо

18.04.2019
student_lSwMXEsx

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

18.04.2019
_MRX_

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

18.04.2019
Даниил

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

18.04.2019
Дмитрий Станчевский

Отличный курс, было интересно.

18.04.2019
Кирилл Гринько

Отличный и информативный курс!

17.04.2019
Andrey

Хороший курс. Все подробно показано и рассказано. Для меня, как обладателя неких знаний по программированию, поначалу показалось немного скучно, но в общем все супер. HTML/CSS легче, чем казалось раньше.

17.04.2019
Александр Николаев

Курс полностью оправдывает свои деньги,и потраченное, спасибо, всё замечательно

17.04.2019
Дмитрий Багдасарян

Очень полезный курс для начинающих. Получил много полезной информации. Спасибо!

17.04.2019
Дмитрий Самоделов

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

16.04.2019
Виталий Копоров

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

16.04.2019
Denis Chekrygin

На мой взгляд слишком быстро)

15.04.2019
SL_CODE_Z

Спасибо огромное автору, курс доступный и информативный!

15.04.2019
Коленников Сергей Ви...

Все очень познавательно и доступно, спасибо

15.04.2019
Александр Шлома

Очень толково. Спасибо.

14.04.2019
Айболат Куракбаев

Хороший курс за свои деньги, все доступно и понятно.

14.04.2019
student_1bwatWFh

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

13.04.2019
Елена Туркова

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

13.04.2019
Yulia Makukha

Spasibo! Super

12.04.2019
Eduard Bucari

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

11.04.2019
Igor Nagulo

Очень просто и доступно. Как говориться one take.

10.04.2019
Махмуд Гаранов

Быстрый и понятный курс, все по факту.

10.04.2019
Максим Рожин

Очень полезный курс! Иногда не хватало более детальной информации о некоторых тегах, командах, но к концу курса становится все на свои места и общее представление о верстке сформировано. Желательно прослушать весь курс еще раз, чтобы закрепить знания и параллельно пользоваться справочником тегов. А так цель достигнута, знания получены! Спасибо!

10.04.2019
Никита Шаманин

Невероятно полезный курс.

09.04.2019
Дмитрий Мазикин

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

09.04.2019
Камран Шехзад

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

08.04.2019
Алексей Самарин

Все отлично, приятно слушать, спасибо!

07.04.2019
Дмитрий

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

07.04.2019
Рамазан Зезаев

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

07.04.2019
Илья Мисюра

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

07.04.2019
Денис Ковальчук

Отличный курс. Спасибо!

06.04.2019
Павел Блинов

Отлично

06.04.2019
Alexei Zevin

Класс мне понравилось

05.04.2019
Алексей Кузьмин

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

04.04.2019
Анастасия Ткаченко

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

04.04.2019
Николай Орлушин

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

04.04.2019
Алина Курносова

Понравилось, очень хорошо рассказывает

03.04.2019
Мария Будур

Создателю огромное спасибо! Для начинающих с нуля - самое то! И просто! И интересно! Когда я начала обучение - у меня были десятки вопросов. А теперь их миллионы :) Создавать страницы реально увлекательно :) Мне нравится.

03.04.2019
Алексей Поляков

Пришёл с нуля, вышел веб-программистом) Если серьёзно, то практически всё понятно, есть некоторые мелочи, но интернет в помощь.

02.04.2019
Renat Khamidi

Мне очень понравилось. Были вопросы. Нужен встроенный чат на странице урока. А так все супер.

02.04.2019
Владимир Ященко

Хорошая подача материала. Коротко и ясно.

02.04.2019
Дмитрий Деменев

Хотелось бы вторую часть этого курса. Макет потяжелее и flexbox

01.04.2019
Дмитрий Сурков

Хороший курс, для базы самый самолет, но все остается на уровне базы. Хотелось бы увидеть более продвинутый уровень по HTML + CSS

31.03.2019
Виталий Жукович

Довольно информативно)) спасибо за курс)

31.03.2019
Виктория Медведева

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

31.03.2019
Данила Смирнов

Не плохо.

31.03.2019
Максим Маслов

Спасибо, благодаря вашему курсу стало понятно многое

30.03.2019
Hayk Saqoyan

Все хорошо! но были незнакомые теги о котором вы мало говорили спасибо )

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

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

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

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