HTML/CSS

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

4.8 / 82

Начать бесплатно Купить полный доступ

Поделитесь страницей с друзьями:

Начать бесплатно

План курса

Free Level

Вводный урок

Подготовка компьютера к работе: Установим редактор кода и дополнительные инструменты.

00:08:05

Free Level

Задание 2: Тест

Пройдите тестирование

00:00:15

Free Level

Задание 3: Тест

Пройдите тестирование

00:00:15

Free Level

Базовая разметка

Вы узнаете как создается базовая разметка HTML страницы, из чего она состоит.

00:05:08

Free Level

HTML задание создать базовую разметку

Интерактивное упражнение

00:00:20

Free Level

Теги <h1>, <p>, <strong>

Изучим HTML теги <h1> - заголовок, <p> - параграф, <strong>

00:03:59

Free Level

Задание 7: Тест

Пройдите тестирование

00:00:15

Free Level

Упражнение тег <h1>

Интерактивное упражнение

00:00:40

Free Level

Упражнение тег <p>

Интерактивное упражнение

00:00:30

Free Level

Упражнение тег <strong>

Интерактивное упражнение

00:01:10

Free Level

Познакомимся с новыми html тегами

Вы узнаете как использовать теги <div>, <span>, а также рассмотрим базовый синтаксис CSS

00:08:12

Free Level

Упражнение <div>, <style>, css class

Интерактивное упражнение

00:02:00

Free Level

Упражнение <div>, <style>, css background-color

Интерактивное упражнение

00:01:00

Free Level

Задание 14: Тест

Пройдите тестирование

00:00:30

Free Level

Задание 15: Тест

Пройдите тестирование

00:00:30

Free Level

Теги <ul>, <li> и этапы создания веб-сайта

Изучим этапы создания профессиональных сайтов и познакомимся с тегами <ul>, <li>

00:07:49

Free Level

Подключение css стилей в отдельном файле.

Подключим CSS стили отдельным файлом, начнем создавать header главной страницы Киномонстр.

00:09:03

Free Level

Теги <ul>, <li>

Интерактивное упражнение

00:01:00

Free Level

CSS свойства: margin, padding, height, font-size и другие.

Продолжим писать стили для Header главной страницы, познакомимся с CSS свойствами: margin, padding, height, font-size и другими.

00:06:54

Free Level

Задание 20: Тест

Пройдите тестирование

00:00:10

Free Level

Задание 21: Тест

Пройдите тестирование

00:00:10

Free Level

CSS свойство Margin

Интерактивное упражнение

00:01:00

Free Level

Задание 23: Тест

Пройдите тестирование

00:00:15

Free Level

CSS свойство Padding

Интерактивное упражнение

00:01:00

Free Level

Тег <a>. Создание ссылки.

Интерактивное упражнение

00:02:00

Premium Level

Задание 26: Тест

Пройдите тестирование

00:00:15

Premium Level

Стилизация ссылок с помощью CSS

Закончим создавать верстку header и изучим как стилизовать ссылки

00:05:47

Premium Level

Задание 28: Тест

Пройдите тестирование

00:00:15

Premium Level

Задание 29: Тест

Пройдите тестирование

00:00:15

Premium Level

CSS Свойство text-decoration

Интерактивное упражнение

00:01:00

Premium Level

Создание горизонтальное меню

Начнем создавать горизонтальное меню и изучим новые css стили

00:07:37

Premium Level

Задание 32: Тест

Пройдите тестирование

00:00:15

Premium Level

Стилизация горизонтально меню

Создадим дополнительные стили для горизонтального меню и закончим его создание

00:05:25

Premium Level

Задание 34: Тест

Пройдите тестирование

00:00:15

Premium Level

Header и TOP menu

Интерактивное упражнение

00:02:00

Premium Level

HTML Form. Создание форм.

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

00:07:22

Premium Level

HTML Form

Интерактивное упражнение

00:01:00

Premium Level

Right Block. Начнем создавать панель справа

Начнем создавать Right Block. Изучим теги form, border и другие

00:12:57

Premium Level

Задание 39: Тест

Пройдите тестирование

00:00:15

Premium Level

Right Block. Продолжение.

Создадим вторую панель правого блока сайта: Форму входа и ссылки

00:11:55

Premium Level

Right Block. Часть 3

Закончим создавать правую панель сайта

00:10:42

Premium Level

Right Menu

Интерактивное упражнение

00:05:00

Premium Level

Footer. Часть 1

Начнем создавать footer, а также в структуру проекта добавим постеры фильмов

00:04:14

Premium Level

Footer. Часть 2

Продолжим создавать нижний блок сайта Footer и напишем к нему стили

00:05:10

Premium Level

Footer

Интерактивное упражнение

00:03:00

Premium Level

Content главной страницы

В этом уроке создадим блоки с фильмами на главной странице

00:08:48

Premium Level

Главная страница. Записи блога.

Завершим создание главной страницы

00:05:22

Premium Level

Страница просмотра фильмов

Начнем создавать страницу просмотра фильмов

00:05:29

Premium Level

Страница просмотра фильмов. Блок информации о фильме

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

00:05:42

Premium Level

Страница просмотра фильмов. Блок с описанием фильма

Продолжим создавать страницу просмотра фильмов и создадим блок с описанием фильма

00:05:02

Premium Level

Страница просмотра фильмов. Блок с отзывами к фильму

Продолжим создавать страницу просмотра фильмов и создадим блок с отзывами к фильму

00:06:32

Premium Level

Страница просмотра фильмов. Блок отзывы

Интерактивное упражнение

00:03:00

Premium Level

Страница просмотра фильмов. Форма отправки отзывов к фильму

В этом уроке мы закончим создавать страницу просмотра фильмов

00:08:36

Premium Level

Страница Фильмы

Создадим новую страницу films.html

00:13:37

Premium Level

Страница Фильмы

Интерактивное упражнение

00:05:00

Premium Level

Страница Рейтинг фильмов

В этом уроке создадим страницу Рейтинг фильмов и изучим новые css свойства и html теги

00:12:13

Premium Level

Задание 57: Тест

Пройдите тестирование

00:00:15

Premium Level

Страница Рейтинг фильмов

Интерактивное упражнение

00:05:00

Premium Level

Адаптивная верстка. Инструменты разработчика

В этом уроке мы поговорим об инструментах frontend-разработчика

00:06:40

Premium Level

Адаптивная верстка. Media queries, тэг viewport

В этом мы начнем изучать основы адаптивной верстки, изучим тэг VIEWPORT и изменим цвет header для мобильного устройства

00:09:35

Premium Level

Адаптивная верстка. Правила адаптивной верстки

Продолжим создавать адаптивную версию сайта

00:11:48

Premium Level

Задание 62: Тест

Пройдите тестирование

00:00:15

Premium Level

Адаптивная верстка. Продолжение

Продолжим создавать адаптивную версию сайта. Напишем дополнительные css стили

00:09:45

Premium Level

Адаптивная верстка. Заключительная часть

В этом уроке мы закончим создавать адаптивную версию сайта

00:11:40

показать все задания

Отзывы

18.08.2017

Ban Max

Очень просто все по полочку разложил.

13.08.2017

Sergey Gonhar

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

06.08.2017

Marine Aslanyan

Thanks a lot

02.08.2017

Алексей Половников

Хороший курс, было очень интересно

02.08.2017

student_W0HiQSPP

Нормас

31.07.2017

student_eJtzjHIE

Благодарю автора за замечательные видео-уроки и тесты!

27.07.2017

Александр

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

26.07.2017

Эдуард Маложиленко

Все доходчиво объяснили. Спасибо!

25.07.2017

AlexandrBroudi

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

23.07.2017

Vladimir Khorolsky

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

19.07.2017

Psihodel☺

Очень интересно и доходчиво!

16.07.2017

_Maverick_

Мне,как новичку, этот материал весьма интересным и полезным. Единственное, где были проблемы это с блоками(дивами), но разобрался в итоге. Буду продолжать обучение на вашем портале. Спасибо за ваш труд , я понял чем хочу заниматься в жизни ☺.

16.07.2017

student_sCiRT5Eu

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

13.07.2017

student_ryfLNlmO

Хороший курс.

10.07.2017

student_XVf3PgEh

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

08.07.2017

student_NQFd7j3N

Отлично.

08.07.2017

Дмитрий Тутин

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

07.07.2017

Георгий Газаров

Не думал, что это будет так легко) Вы лучшие!

05.07.2017

Даниил Кравченко

Супер!)

01.07.2017

Леонид Филатов

Великолепный курс! Никакой воды - только то, что нужно для понимания материала и применения на практике. Спасибо большое за проделанную работу и желание помогать другим осваивать новую профессию! С уважением. Леонид Филатов

24.06.2017

student_sUCo0uDp

Спасибо огромное! Единственное - не всегда принимал код в заданиях, хотя всё было верно.

22.06.2017

Arsen Yeghikyan

самый лучший курс по изучению html и css

22.06.2017

student_XDlL9_2U

Хорошие уроки.

21.06.2017

student_auMgOSeK

Я много раз перепроверял но в гугл хроме что то поменялось и адаптивная вёрстка не отображалась

21.06.2017

Владислав Петров

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

16.06.2017

Vaxo Kaxidze

cool!!

15.06.2017

Александр Кучук

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

15.06.2017

Семен Макаренко

Подробно, толково, разжевано все по полочкам.

13.06.2017

AngelEyes Eyes

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

11.06.2017

Дмитрий Васюк

Много практики и можно повторить за преподавателем весь процесс создания верстки сайта, но не хватает теории, как по мне. Для старта - это лучший курс, именно для практики.

09.06.2017

Виталий Берсенёв

Все понятно и достаточно просто. Этот курс дал мне понять, что создание сайтов - это та сфера, в которой я хочу дальше работать. Спасибо большое за этот курс и надеюсь, что остальные курсы и темы освою так же легко!

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

Sergey Nikonov

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

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

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

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

2017 © FructCode.com - All rights reserved.