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

19.01.2018
Tansholpan Telbaeva

Спасибо за урок ))

18.01.2018
Александра Матюшевск...

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

18.01.2018
Ахмед Юсупов

Очень хороший курс, мне понравилось!

18.01.2018
Вячеслав Андронов

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

16.01.2018
Talgat Sariyev

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

15.01.2018
Александр Коваль

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

15.01.2018
Александр Гудинов

Достаточно интересный курс, с 0 начинал, всё понятно, параллельно делаю свой сайт, всё получается.

14.01.2018
Nikitos

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

13.01.2018
Сергей Гладких

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

13.01.2018
Владимир Максименко

Курс отличный. Все рассказано доступным языком. Супер.

12.01.2018
Artem Kamaliev

Отличное объяснение!

12.01.2018
Vyacheslav

Круто

12.01.2018
Semion Gorboonkov

Всё супер, но название: &amp;quot;как быстро начать создавать профессиональные сайты&amp;quot; здесь не подходит, т.к. курс рассчитан на то, что бы научиться создавать сугубо сайт, который в примере курса. Думаю, после курса HTML/CSS, у пользователей не получиться создать, ориентируясь только на знания полученные в этом маленьком курсе, сайт другой конструкии. Надеюсь этот курс автор будет дополнять.

12.01.2018
Kubanychbek Akmyrzae...

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

11.01.2018
Александр Тимофеев

Абсолютно доходчиво и понятно, учитывая то, что параллельно я изучал материалы по HTML CSS. Сергею - Огромное спасибо!

11.01.2018
Алексей Архипов

Я новичок в этом деле, но мне очень понравилось обучение, всё доступно и понятно! Спасибо!

09.01.2018
Никита Селищев

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

08.01.2018
Инна Гончарова

Курс мне очень понравился. Все понятно и доступно. Ничего лишнего.

07.01.2018
Ринат Кажетов

Отлично для начинающего, только практика. Но думаю урок остался на уровне html/css, как указано в описании. А нынче уже html5 &amp;amp; css3. Только из за этого 4 балла.

07.01.2018
Ismail Sadulaev

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

05.01.2018
Namet Memmedzadeh

Спасибо за такое обучение и портал.

30.12.2017
Oleh Matiash

Хороший пример для понимания основ HTML CSS.

29.12.2017
Аркадий Четвертановс...

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

27.12.2017
Denis Zmeev

В целом курс мне, как чайнику в данном вопросе, понравился. Объясняется всё вполне по делу и при этом весьма лаконично: похоже на концентрированную выжимку. О потраченных деньгах не жалею.

22.12.2017
Маргарита Полищук

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

20.12.2017
m1s989

Хороший курс. Спасибо.

18.12.2017
student_Zbsx5AJ_

Курс в целом отличный, но есть недочеты

15.12.2017
Александр Видешкин

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

14.12.2017
Артур Ахмедьянов

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

13.12.2017
Яков

Автор, нужно отдать ему должное, пытался в короткий курс впихнуть невпихуемое, и без предварительных знаний очень будет труден к освоению. Смущает терминалогия НЕБЛОЧНЫЙ ЭЛЕМЕНТ, вообще то СТРОЧНЫЙ он называется. Еще что напрягало- задания, написан код правильно, но забыт где то пробел, в браузере код работает, а задание не проходит, приходилось код копировать из ответа, это еще не придераясь к тому что одно и тоже можно реализовать несколькими способами.

08.12.2017
Adam Winner

Хороший начальный базис. Очень интересно и познавательно.

06.12.2017
Александр Вагин

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

04.12.2017
Vladimir Siminko

Хороший курс! Я полный чайник в верстке и создании сайтов, поэтому интересно было узнать все с нуля. Немного не хватило, опять же для моего уровня, разъяснений или теории, почему то или иное мы делаем, приходилось брать информацию из вне (другие сайты, ролики в ютубе и книги) А так очень информативно, прошел за 15 дней в спокойном режиме (3-4 часа в день). Надеюсь, что выбранное мной направление, даст хорошие плоды. Спасибо Вам!

03.12.2017
student_Pb4ZYpHw

Всё доступно и понятно даже для тех, кто только начинает интересоваться программированием.

03.12.2017
F0zen

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

02.12.2017
student_nn0KnXm2

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

02.12.2017
Кирилл Федоров

Спасибо, начал с нуля, очень много информации, теорию читаю самостоятельно.

01.12.2017
student_lo3BgAPX

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

28.11.2017
Maksim Kudaev

Очень хорошо, прошёл данный модуль на одном дыхании.

26.11.2017
Шахрух Далиев

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

22.11.2017
Ярослав Зовский

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

21.11.2017
student_uF_Wr3X0

Спасибо за курс, Обучение построено интересно и не скучно :) Базовые навыки верстки озвучены, для начала изучения верстки это уже не плохо.

21.11.2017
Александр Питерцев

Интересный

17.11.2017
student_zuOs9IeI

Все четко объяснил, парень просто молодец, лично мне все понравилось.))

17.11.2017
Владимир Булучевский

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

17.11.2017
Сергей

Супер!

16.11.2017
Илья Юрин

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

15.11.2017
Дмитрий Виноградов

Хорошее объяснение. Все понятно.

14.11.2017
ToDelete

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

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

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

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

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

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