Курс HTML/CSS

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

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

О курсе

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


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


Отзывы (360)

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

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

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

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

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

21.06.2018
Алексей

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

20.06.2018
Andrey Kozhenevsky

Хороший курс, достаточно практики.

17.06.2018
Илья Сахарюк

Хороший базовый курс для HTML

16.06.2018
Evgeniy Toporkov

Сергей, Вы создали замечательный курс! Рад, что купил доступ ко всем курсам на целый год. Благодарю Вас!

16.06.2018
Виктор Попов

Круто спасибо!

14.06.2018
Фархат Затин

Очень хороший курс! Все понятно, интересно, с первого урока уже начинаешь получать опыт на практике!

14.06.2018
Дамир Каримов

Очень понравилось, я конечно новичок однако знаю что спецификация html 5 уже давно используется в названии тэгов, а тут все дивы со своими названиями :)

14.06.2018
Игорь Баранов

Курс отличный. Все понятно.

13.06.2018
student_dJP_BlrP

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

13.06.2018
Иван Смирнов

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

13.06.2018
Улукбек Азизов

Спасибо автору! За видеоуроки

12.06.2018
Николай Степанов

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

12.06.2018
student__v6zLCYb

Все супер! В принципе все понятно, а что нет, можно посмотреть в интернете. Курсом доволен!

12.06.2018
Dead Pool

Неплохой курс в общем

11.06.2018
Игорь Епифанов

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

11.06.2018
Николай Миронов

Курс понравился, узнал много нового. Спасибо.

10.06.2018
Денис Волков

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

09.06.2018
Андрей Тиняков

Курс очень понравился, интересный, но при этом тут бывают достаточно сложные темы:)

08.06.2018
Светлана Ермакова

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

07.06.2018
Илья Колосков

Мне все очень понравилось, материал подобрал очень хорошо, без воды и прочих отклонений, спасибо!

07.06.2018
Юрий БУЖКО

Спасибо хороший,подробный курс

06.06.2018
РУСЛАН ГАЛКА

Крутой курс!

02.06.2018
Denis Vinogradov

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

02.06.2018
student_57zvg6cQ

Супер!

01.06.2018
student_sQ3AZszg

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

31.05.2018
Григорий Балабанов

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

30.05.2018
Светлана Авдеева

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

29.05.2018
Андрей Стачев

Все отлично

26.05.2018
Denis Tokarev

+++

25.05.2018
student_XcyI9xRO

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

23.05.2018
Илья Абрамов

Очень рад, что в интернете существуют подобного рода ресурсы! Спасибо ребята !!)+

21.05.2018
student_GRogUpTY

Очень простой, понятный и нескучный экспресс-курс дивной верстки.

21.05.2018
Сергей Луцик

Отличный курс для начинающих!

20.05.2018
Дмитрий

Курс очень хороший как для начинающих, так и для тех кто сталкивался уже с html и css. Не зря купил подписку. Денег не пожалел. Достойный курс. Всё понятно и ничего лишнего.

18.05.2018
Дмитрий Клянчин

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

18.05.2018
student_RotwL8v4

В общем все ясно и понятно, вполне доступно. Иногда изображение на экране слишком мелкое но это иногда.

18.05.2018
Paul Petrin

Отличный курс. Все понравилось. До этого изучал html лет 15 назад в школьные годы. Что-то с тех пор всплывало в голове, но мало. Оформил подписку на остальные модули

16.05.2018
student_eCSU85iP

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

12.05.2018
Григорий Макаров

Все отлично! Начало положено. Спасибо автору.

10.05.2018
Джалил Гаджимагомедо...

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

10.05.2018
Баир

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

10.05.2018
Сергей Жучков

Спасибо Сергею за отличную подучу информации!

09.05.2018
Дмитрий Тыщенко

Очень понравился курс. Параллельно читал самоучители по HTML, CSS и другие видео теоретические материалы на эту тему. Получились лекции+чтиво+практика. Спасибо!

08.05.2018
Kambulat

Спасибо. Узнал много нового

08.05.2018
student_0L-ztqzn

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

07.05.2018
Алексей Онуфриенко

Курс хороший, все предельно понятно. Только с заданиями лажа.

03.05.2018
Эдуард Иловайский

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

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

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

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

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

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

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

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

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

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

Тесты: 16


Продолжительность: ~5 часов
  • student_qipV4haw
    2337 xp
    1
  • Илья Данилин
    2337 xp
    2
  • Nikita
    2337 xp
    3
  • Diana Kolchanova
    2337 xp
    4
  • Алексей
    2199 xp
    5
  • У вас 0 XP за курс HTML/CSS

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