Курс HTML/CSS

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

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

О курсе

Начните обучаться верстке HTML и CSS с нуля и вы узнаете, как эффективно построить обучение основам HTML и CSS и научиться самому создавать веб сайты с нуля.

Вы научитесь пользоваться html-тэгами, такими как div, span, p, ul, li, научитесь работать с каскадными таблицами стилей и узнаете новые css-свойства, такие так margin, display, position, padding, color, background и другими, а также научитесь создавать адаптивную верстку сайтов, а интерактивные задания html и css программирования, выполняемые прямо в браузере, позволят вам обучаться эффективнее.


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

План курса

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


Free Level
Вы узнаете информацию о модуле HTML/CSS, а также получите несколько полезных советов
00:11:10
Free Level
Подготовка компьютера к работе: Установим редактор кода и дополнительные инструменты.
00:08:05
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
14. Тест
Пройдите тестирование
00:00:30
Premium Level
15. Тест
Пройдите тестирование
00:00:30
Premium Level
16. Теги <ul>, <li> и этапы создания веб-сайта
Изучим этапы создания профессиональных сайтов и познакомимся с тегами <ul>, <li>
00:07:49
Premium Level
17. Подключение css стилей в отдельном файле.
Подключим CSS стили отдельным файлом, начнем создавать header главной страницы Киномонстр.
00:09:03
Premium Level
18. Теги <ul>, <li>
Интерактивное упражнение
00:01:00
Premium Level
19. CSS свойства: margin, padding, height, font-size и другие.
Продолжим писать стили для Header главной страницы, познакомимся с CSS свойствами: margin, padding, height, font-size и другими.
00:06:54
Premium Level
20. Тест
Пройдите тестирование
00:00:10
Premium Level
21. Тест
Пройдите тестирование
00:00:10
Premium Level
22. CSS свойство Margin
Интерактивное упражнение
00:01:00
Premium Level
23. Тест
Пройдите тестирование
00:00:15
Premium Level
24. CSS свойство Padding
Интерактивное упражнение
00:01:00
Premium Level
25. Тег <a>. Создание ссылки.
Интерактивное упражнение
00:02:00
Premium Level
26. Тест
Пройдите тестирование
00:00:15
Premium Level
27. Стилизация ссылок с помощью CSS
Закончим создавать верстку header и изучим как стилизовать ссылки
00:05:47
Premium Level
28. Тест
Пройдите тестирование
00:00:15
Premium Level
29. Тест
Пройдите тестирование
00:00:15
Premium Level
30. CSS Свойство text-decoration
Интерактивное упражнение
00:01:00
Premium Level
31. Создание горизонтальное меню
Начнем создавать горизонтальное меню и изучим новые css стили
00:07:37
Premium Level
32. Тест
Пройдите тестирование
00:00:15
Premium Level
33. Стилизация горизонтально меню
Создадим дополнительные стили для горизонтального меню и закончим его создание
00:05:25
Premium Level
34. Тест
Пройдите тестирование
00:00:15
Premium Level
35. Header и TOP menu
Интерактивное упражнение
00:02:00
Premium Level
36. HTML Form. Создание форм.
Начнем создавать правый блок сайта, познакомимся с HTML формами и их свойствами.
00:07:22
Premium Level
37. HTML Form
Интерактивное упражнение
00:01:00
Premium Level
38. Right Block. Начнем создавать панель справа
Начнем создавать Right Block. Изучим теги form, border и другие
00:12:57
Premium Level
39. Тест
Пройдите тестирование
00:00:15
Premium Level
40. Right Block. Продолжение.
Создадим вторую панель правого блока сайта: Форму входа и ссылки
00:11:55
Premium Level
41. Right Block. Часть 3
Закончим создавать правую панель сайта
00:10:42
Premium Level
42. Right Menu
Интерактивное упражнение
00:05:00
Premium Level
43. Footer. Часть 1
Начнем создавать footer, а также в структуру проекта добавим постеры фильмов
00:04:14
Premium Level
44. Footer. Часть 2
Продолжим создавать нижний блок сайта Footer и напишем к нему стили
00:05:10
Premium Level
45. Footer
Интерактивное упражнение
00:03:00
Premium Level
46. Content главной страницы
В этом уроке создадим блоки с фильмами на главной странице
00:08:48
Premium Level
47. Главная страница. Записи блога.
Завершим создание главной страницы
00:05:22
Premium Level
48. Страница просмотра фильмов
Начнем создавать страницу просмотра фильмов
00:05:29
Premium Level
49. Страница просмотра фильмов. Блок информации о фильме
Продолжим создавать страницу просмотра фильмов и создадим блок краткой информации о фильме
00:05:42
Premium Level
50. Страница просмотра фильмов. Блок с описанием фильма
Продолжим создавать страницу просмотра фильмов и создадим блок с описанием фильма
00:05:02
Premium Level
51. Страница просмотра фильмов. Блок с отзывами к фильму
Продолжим создавать страницу просмотра фильмов и создадим блок с отзывами к фильму
00:06:32
Premium Level
52. Страница просмотра фильмов. Блок отзывы
Интерактивное упражнение
00:03:00
Premium Level
53. Страница просмотра фильмов. Форма отправки отзывов к фильму
В этом уроке мы закончим создавать страницу просмотра фильмов
00:08:36
Premium Level
54. Страница Фильмы
Создадим новую страницу films.html
00:13:37
Premium Level
55. Страница Фильмы
Интерактивное упражнение
00:05:00
Premium Level
56. Страница Рейтинг фильмов
В этом уроке создадим страницу Рейтинг фильмов и изучим новые css свойства и html теги
00:12:13
Premium Level
57. Тест
Пройдите тестирование
00:00:15
Premium Level
58. Страница Рейтинг фильмов
Интерактивное упражнение
00:05:00
Premium Level
59. Адаптивная верстка. Инструменты разработчика
В этом уроке мы поговорим об инструментах frontend-разработчика
00:06:40
Premium Level
60. Адаптивная верстка. Media queries, тэг viewport
В этом мы начнем изучать основы адаптивной верстки, изучим тэг VIEWPORT и изменим цвет header для мобильного устройства
00:09:35
Premium Level
61. Адаптивная верстка. Правила адаптивной верстки
Продолжим создавать адаптивную версию сайта
00:11:48
Premium Level
62. Тест
Пройдите тестирование
00:00:15
Premium Level
63. Адаптивная верстка. Продолжение
Продолжим создавать адаптивную версию сайта. Напишем дополнительные css стили
00:09:45
Premium Level
64. Адаптивная верстка. Заключительная часть
В этом уроке мы закончим создавать адаптивную версию сайта
00:11:40


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


Отзывы(341)

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

18.10.2018
Никита Чернов

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

17.10.2018
Яков Вьюков

Курс хороший. Всё по делу, нет воды. Много практики.

15.10.2018
Владислав

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

08.10.2018
Evgeny Epancnentsev

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

07.10.2018
Борис Таиров

Все очень понятно!

06.10.2018
игорь вавилов

Все хорошо и доступно объяснили.

06.10.2018
Владислав Корончик

Чудо курс, такого не найдешь на других ресурсах.

04.10.2018
Дмитрий Задков

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

01.10.2018
Сергей Платонов

Спасибо! Все по полочкам... Доступно, поэтапно, профессионально, как говорится, - от простого к сложному... Сейчас, как я считаю, для себя, важно Это Все ПРАКТИКОВАТЬ! Делать и разбирать уже Все тонкости и Ошибки ( а они будут) на практике, в ходе процесса создания сайта. Еще раз Спасибо! Закрепим Это и будем двигаться Дальше!

30.09.2018
Raphael Valiullov

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

28.09.2018
Игорь Ильин

Давно уже избегал html и его "преподавателей". По нескольким даже пробовал учится, но вот ни голос не подача не подходили. Сергей объяснил все доходчиво и четко. В общем как из какой то старой шутки "Сережа молодец!" Спасибо огромное! Поехали дальше по курсам...

27.09.2018
Шевелёв Александр

Очень классный курс, лучше, чем ожидал.

27.09.2018
student_9mFrJ_1l

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

21.09.2018
Ляззат Бисенбаева

Курс просто супер!!! Так коротко и эффективно, очень доходчиво и ясно!!! спасибо.

17.09.2018
Денис Неклюдов

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

17.09.2018
Аккенже Жаналык

Отличный курс! Все доходчиво, качественно, рекомендую.

16.09.2018
Владимир

Доволен. Спасибо.

15.09.2018
Виталий Слипченко

Очень прикольный курс!

15.09.2018
Денис Кучинский

Не плохой курс, который подойдет как новичку, так и уже знающему веб-разработчику.

12.09.2018
Evgeny Kiselev

Отлично всё объясняете, но не хватает подробностей!!! Некоторые вещи приходиться искать самому. А так всем доволен, буду продолжать заниматься!

11.09.2018
Артём Тельпухов

Курс отличный! Для новичков вообще подходит, дает первоначальные знания и опыт в верстке страниц вручную, т.е. о базовых понятиях без которых никуда.

10.09.2018
Oльга VB

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

08.09.2018
Андрей Тюрин

Хороший курс

04.09.2018
Николай Маненков

Хороший курс для начала)

02.09.2018
student_N4ZizChh

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

29.08.2018
Тимофей Кулешов

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

27.08.2018
Джохар Хасаев

Я очень доволен!

27.08.2018
Паша Киреев

Хороший курс

26.08.2018
Григорий Федотов

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

26.08.2018
Николай Волков

Очень неплохо, едем дальше)))

24.08.2018
student_mCsa6WMb

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

24.08.2018
Александр Котовский

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

21.08.2018
Кирилл Шаповалов Вик...

Курс очень крут!!!

21.08.2018
Денис

Отлично!

20.08.2018
Вячеслав Моргун

Хороший практический курс

19.08.2018
Юрий Зибинский

Курс очень даже не плох: уроки короткие, наглядные, обучение в итоге получается интересное. Жаль, немного поверхностно: автор не вдается в подробное объяснение материала, приходится много искать в сети самому. (хотя, если подумать, возможно, это не минус, а как раз наоборот)))))))

17.08.2018
Руслан Шамсутдинов

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

16.08.2018
student__CWGomlO

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

15.08.2018
Ольга Акчурина

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

15.08.2018
Anatoli Aliaksandrou

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

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

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

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

Одна из миссий проекта 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 и мы постараемся ответить в ближайшее время.

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

Author FructCode
Сергей Никонов

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

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

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

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

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

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

Тесты: 16


Продолжительность: ~5 часов
  • Людмила Осипова
    1872 xp
    1
  • Борис Петрухин
    1206 xp
    2
  • Фантазер
    714 xp
    3
  • Ирина Ильина
    701 xp
    4
  • eva vlasovets
    681 xp
    5
  • У вас 0 XP за курс HTML/CSS

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