Продвинутый курс по html и css

Начать этот курс бесплатно

Как мы обучаем?

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

Продвинутый курс по html и css предназначен для тех, кто уже знаком с понятием теги и классы. Это логическое продолжение нашего первого курса по созданию сайтов. Если вы только начинаете изучение этих технологий, то рекомендуем начать с базового курса.

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

В этом курсе вы изучите:

  • Тег form
  • Теги input, select, textarea
  • HTML5 поля ввода и атрибуты
  • Позиционирование элементов
  • Создние CSS меню
  • Создание фиксированного хедера
  • Таблицы
  • Атрибуты colspan и rowspan
  • Встраивание видео и карт
  • 10 видео

  • 9 интерактивов

  • 1 час 40 минут

  1. 1

    Тег form. Создание полей text и password.

    Видео лекция 04:02 мин.

    Изучаем создание форм. Создаем страницу регистрации и добавляем поля для имени пользователя и пароля.

  2. 2

    Инпуты. Text и password

    Интерактивное задание

    Создайте два текстовых поля типа текст и типа пароль в соответствующих блоках.

  3. 3

    Изучаем поля ввода checkbox и radio

    Видео лекция 02:22 мин.

    С помощью полей ввода типа checkbox и radio добавляем в форму регистрации новые элементы

  4. 4

    Radio и Checkboxes

    Интерактивное задание

    В блоке с классом "cakes" создать радио группу с атрибутом name="cakes" с выбором из трех вариантов: С яблоком, С вишней, С капустой. В блоке с классом "delivery" добавить чекбокс атрибутом name="delivery"

  5. 5

    Добавляем раскрывающийся список с помощью тега select

    Видео лекция 02:01 мин.

  6. 6

    Тег select

    Интерактивное задание

    Создайте тег селект, с выбором из трех вариантов. "С яблоком" у которого атрибут value="apple", "С вишней" - value="cherry" и "С капустой" - value="cabbage"

  7. 7

    Текстовое поле textarea

    Видео лекция 01:05 мин.

  8. 8

    Тег textarea

    Интерактивное задание

    Создайте textarea с атрибутами cols="30" и rows="10"

  9. 9

    Поле добавления файла. Кнопка отправки формы.

    Видео лекция 01:11 мин.

  10. 10

    File input

    Интерактивное задание

    Создайте поле прикрепление файла и кнопку отправки формы (type="submit") с подписью "Отправить"

  11. 11

    Поле для ввода email и подсказки с помощью атрибута placeholder

    Видео лекция 02:47 мин.

  12. 12

    HTML5: Inputs и атрибут placeholder

    Интерактивное задание

    Создайте поле с типом url (на текущий момент работает во всех современных браузерах браузерах, кроме Safari). Укажите ему placeholder="http://example.com". Проверьте, что кнопка submit работает только c правильным форматом url.

  13. 13

    Работа с таблицами. Часть первая.

    Видео лекция 04:02 мин.

  14. 14

    Таблицы. Часть первая

    Интерактивное задание

    Создайте таблицу внутри блока с классом "table", имеющую 3 строки и 2 столбца. Укажите у этой таблицы границу, равную 2 пикселям.

  15. 15

    Работа с таблицами. Часть вторая.

    Видео лекция 04:07 мин.

  16. 16

    Таблицы. Часть вторая

    Интерактивное задание

    Создайте таблицу аналогичную той, что изображена на картинке.

  17. 17

    Выпадающее меню на css. Позиционирование элементов.

    Видео лекция 09:51 мин.

  18. 18

    Position: absolute и relative

    Интерактивное задание

    Расположите синий квадрат в левом нижнем углу на расстоянии 10px снизу и 20px слева с помощью свойств bottom и left, указав ему абсолютное позиционирование.

    Укажите красному квадрату position: relative и с помощью свойств top и left расположите его так, как указано на картинке:

  19. 19

    Встраиваемые объекты. Видео и карты.

    Видео лекция 03:13 мин.

Отзывы о курсе

  • Smj kvviv2a

    Oxana Rastorgueva

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

  • Avatar

    Алексей

    Очень практичный курс. Мне очень помог. Нравится что всегда можно было прокрутить все сначала. Так как все было вновинку и не понятно. До сих пор пользуюсь советами, когда что-то подзабываю.