Курс HTML/CSS

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

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

О курсе

Начните обучаться верстке 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
Premium Level
1. Вводный урок
Подготовка компьютера к работе: Установим редактор кода и дополнительные инструменты.
00:08:05
Premium Level
2. Тест
Пройдите тестирование
00:00:15
Premium Level
3. Тест
Пройдите тестирование
00:00:15
Premium Level
4. Базовая разметка
Вы узнаете как создается базовая разметка HTML страницы, из чего она состоит.
00:05:08
Premium Level
5. HTML задание создать базовую разметку
Интерактивное упражнение
00:00:20
Premium Level
6. Теги <h1>, <p>, <strong>
Изучим HTML теги <h1> - заголовок, <p> - параграф, <strong>
00:03:59
Premium Level
7. Тест
Пройдите тестирование
00:00:15
Premium Level
8. Упражнение тег <h1>
Интерактивное упражнение
00:00:40
Premium Level
9. Упражнение тег <p>
Интерактивное упражнение
00:00:30
Premium Level
10. Упражнение тег <strong>
Интерактивное упражнение
00:01:10
Premium Level
11. Познакомимся с новыми html тегами
Вы узнаете как использовать теги <div>, <span>, а также рассмотрим базовый синтаксис CSS
00:08:12
Premium Level
12. Упражнение <div>, <style>, css class
Интерактивное упражнение
00:02:00
Premium Level
13. Упражнение <div>, <style>, css background-color
Интерактивное упражнение
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


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


Отзывы(301)

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

13.08.2018
Василий Барбу

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

12.08.2018
student_z3GxXiyq

Неплохо для новичков, понятно

12.08.2018
WUMBAch

Этим курсом остался доволен, пора перейти к следующему.

11.08.2018
Максим Садовников

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

09.08.2018
Алексей Сухарев

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

09.08.2018
Yana

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

08.08.2018
Артем Николаевич

Очень познавательный курс!

08.08.2018
MIJAIL NAAL GONZALEZ

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

07.08.2018
Сергей Праводелов

Очень понятно и главное короткие, без воды видео

05.08.2018
Cержан Ибинов

Подробно понятно обучает все супер!!!

05.08.2018
Руслан Абильдин

Супер!! Все понятно и шикарно!!

04.08.2018
Евгений Христенко

Очень хороший курс.

03.08.2018
dorzh gomboev

Замечательный курс! Но, что-то подозрительно легко я его прошел, не смотря на мою тупость. Не может быть, чтобы я так поумнел на старость лет. А в целом, Сергей вы отличный преподаватель. Пока даже я понимал почти все, почти с первого раза. И все-таки мне кажется это только подготовительный курс, основа для более углубленного понимания и освоения программирования. Дальше будет тяжелее. Прав ли я? Спасибо, с уважением, Dorzh.

02.08.2018
student_VhrU8isY

Все четко, все понятно.

02.08.2018
Георгий Ксинтарис

Отличное начало, все очень доступно и понятно, спасибо большое за переданные знания!

01.08.2018
Евгений Болтак

Очень понятно поясняет. Мне прям заходит курс. Круто. Спасибо!!!

01.08.2018
Дмитрий Хворов

В принципе, не так уж и плохо. Я знал немного об HTML/CSS по отдельности и вместе,но этот курс подтянул мои знания достаточно :)

31.07.2018
Геннадий Шлык

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

31.07.2018
Вадим Губанов

Я думаю, что это лучший курс для новичков. Спасибо! Однозначно 5.

31.07.2018
Руслан Скоков

Очень отличный курс! Все очень информативно и доходчиво. Если честно, то я просто в восторге. Спасибо большое FructCode!

30.07.2018
student_MqZsrVnb

Все понятно) но нужно самому еще заниматься

29.07.2018
Кирилл Забавский

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

27.07.2018
Анастасия Севко

Отличный курс! Буду продолжать)) Спасибо за Ваш труд и очень приятный голос!

27.07.2018
Эдуард

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

27.07.2018
Усачев Александр

Очень хороший и подробный курс!

26.07.2018
Диана Сервольцева

Прекрасный курс

26.07.2018
Люля Лобурь

Очень хороший и доступный курс, спасибо большое!

26.07.2018
Ольга Левицкая

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

25.07.2018
Глафира Крюкова

Курс просто супер. Автор объясняет доступно даже для людей, которые ничего не знают про программирование сайтов.

24.07.2018
Сергей Занько

Отличный курс! Все доходчиво и понятно!

23.07.2018
Юрий Астапчик

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

23.07.2018
Александр Тян

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

22.07.2018
student_dd4lCLJX

Интересные уроки, мне было всё понятно)

22.07.2018
Andrey Pavlov

Достаточно легко и понятно, мне понравилось, за эти деньги приятно)

19.07.2018
Ирина Назарьева

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

18.07.2018
student__fes7oUy

Супер!

18.07.2018
Василий Швандырев

Очень хороший курс! Прошёл его с удовольствием! Оговорочка: Удобнее всего будет если Вы уже прошли какие-то азы. Ну, или хотя бы, почитали справочник по HTML.

15.07.2018
Юрий

Курс отличный, все подробно объяснено, по порядку. По-моему немного криво сделаны задания с частичным редактированием кода, особенно то, что нужно писать всё дословно как в уроке. Иногда в таких заданиях просто все копировал, а выводилась ошибка, хотя в ответе всё тоже самое. Но видео-уроки отличные!

13.07.2018
Виталий Лукашин

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

10.07.2018
Евгений Карасёв

Как-то быстро пролетело время) Я сел и за ночь проштудировал большую часть уроков. Все было очень понятно, теперь перехожу к BootStrap.

09.07.2018
Dmytro Yakovenko

Мне понравился курс. Просто, доходчиво и полезно.

09.07.2018
student_VV4hPsBV

Отличный курс! Все изложено просто и понятно!

08.07.2018
Oleksandr Shyian

Структуризированый обьемный курс. Рекомендую!

05.07.2018
Виталий Коняхин

Курс очень познавательный, но новичку, вроде меня налету не получается всё схватывать, этот курс для более подготовленных людей, а я пожалуй пересмотрю его ещё раз)

04.07.2018
Самир Мамедов

Для новичка очень хороший курс, и не дорого! Пожелание: хотелось бы больше объяснений и более подробней по некоторым видеороликам, и тогда было бы вообще огонь!

02.07.2018
Анна Алексеева

Курс супер! все ясно и понятно!

01.07.2018
Максим Кузьмин

Шикарный курс! Я на одном дыхании прошел все 65 занятия!))

01.07.2018
Edgar Catlevskuy

Неплохой курс для тех, кто только начинает.

24.06.2018
student_dLJJgNio

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

24.06.2018
Илья Данилин

Очень четко все и понятно, не пожалел потраченных денег)

23.06.2018
Егор Семенков

Объяснение идет полностью с 0. Это очень удобно, если только начал вникать во все это. Рассказывает лектор хорошо.

22.06.2018
Николай Витков

Чётко. Мне понравилось.

21.06.2018
Алексей

Хороший курс. Стартовых знаний вполне достаточно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если в процессе прохождения курса у вас возникла проблема с выполнением задания и вопрос по пройденной теме курса, вы можете задать его в комьюнити FructCode, где другие студенты, которые успешно решили задание, вам обязательно помогут.

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

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

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

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

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

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

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

Если у вас остались дополнительные вопросы о курсах FructCode, пожалуйста напишите в нашу службу поддержки на почту info@fructcode.com и мы постараемся ответить в ближайшее время.

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

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

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

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

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

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

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

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

Тесты: 16


Продолжительность: ~5 часов
  • WUMBAch
    2337 xp
    1
  • Yana
    2337 xp
    2
  • Юрий Зибинский
    1533 xp
    3
  • Артем Николаевич
    666 xp
    4
  • Алексей Шашило
    480 xp
    5
  • У вас 0 XP за курс HTML/CSS

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