Обучение HTML 5 и CSS с нуля
О курсе
HTML5 и CSS3 — это современные фундаментальные технологии, которыми должен обладать каждый веб-разработчик. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид.
Читать дальше…
Этот курс входит в специальности:
Frontend Developer Верстальщик сайтов Ruby Developer
Предварительные Требования
Данный видеокурс рассчитан на верстальщиков, веб-программистов и тех, кто уже владеет технологиями HTML, CSS и JavaScript (завершили курс JavaScript Advanced).
Читать дальше…
Вы научитесь
- понимать спецификации HTML5 и CSS3;
- владеть основами синтаксиса и семантики, передовыми методами разметки;
- работать с формами, аудио и видео элементами;
- работать с микроданными, пользовательскими данными и геолокацией;
- создавать растровые рисунки при помощи JavaScript;
- пользоваться кроссбраузерными свойствами CSS3;
- работать с CSS-анимацией и преобразовывать содержимое;
- создавать адаптивные веб-страницы.
Читать дальше…
Скачать материалы курса Для получения материалов курса нужно авторизоваться
Получить сертификат Для получения сертификата нужно авторизоваться
Дмитрий Охрименко
Тренер-консультант, эксперт по построению распределенных и веб-ориентированных приложений.
Другие курсы автора
- Длительность: 11 ч 49 м
- Курс создан: 15.07.2013
- Уроков: 11
- Обновлен: 01.02.2018
- Язык: русский
Что входит в курс
- 11 видео уроков
- Домашние задания
- Тестирование
- Сертификат
- Проверка ДЗ
СМОТРЕТЬ
Для прохождения теста нужно авторизироваться
Войти Регистрация
×
Вы открыли доступ к тесту! Пройти тест
Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
Войти Регистрация
№1
Знакомство с курсом HTML5&CSS3
0:06:43
Материалы урокаДомашние заданияТестирование
В этом курсе Вы познакомитесь с новыми возможностями HTML5 и CSS3, поймете, чем они отличаются от более старых версий.
Выучите новые технологии, которые позволят вам размещать музыку, видео, а так же определять местонахождения пользователя. После курса Вы не только сможете усовершенствовать свой сайт, но и улучшить его визуальную часть, добавив анимацию, трехмерные эффекты с помощью стилей CSS.
Читать дальше…
№2
Введение в HTML5
1:17:46
Материалы урокаДомашние заданияТестирование
В этом курсе вы познакомитесь с новыми возможностями HTML5 и CSS3, поймете, чем они отличаются от более старых версий. Выучите новые технологии, которые позволят вам размещать музыку, видео, а также определять местонахождения пользователя. После изучения курса вы также сможете совершенствовать визуальную часть своего сайта путем добавления анимации, трехмерных эффектов и адаптивности с помощью стилей CSS.
Читать дальше…
HTML5 формы. Теги video и audio.
1:36:34
Материалы урокаДомашние заданияТестирование
На сайтах часто размещаются видео материалы, а на некоторых сайтах необходимы инструменты для воспроизведения звуковых файлов.
В HTML5 появляется ряд элементов, с помощью которых упрощается создание мультимедийных страниц с использованием аудио или видео. Для этого урока Вам потребуются базовые знания JаvaScript для того, чтобы контролировать воспроизведение мультимедийного контента в HTML5 странице. Также Вы узнаете, как можно кодировать звук и видео различными кодеками для поддержки воспроизведения в разных браузерах. Во второй части урока будут рассмотрены новые элементы форм, которые позволяют упросить создание страниц регистрации, авторизации и других элементов взаимодействия с пользователем.
Читать дальше…
Микроданные и геолокация
1:16:53
Материалы урокаДомашние заданияТестирование
Микроданные – это новый подход в создании дополнительной описательной информации для HTML документа. С помощью микроданных мы можем в HTML странице, кроме самой структуры документа, сохранить специальную информацию, которая будет полезная поисковым системам и другим приложениям, анализирующим документы.
В этом уроке Вы узнаете, как использовать микроданные и словари микроданных в HTML5. Вторая часть урока будет посвящена геолокации. Вы научитесь создавать приложения, которые смогут получить координаты пользователя и определить его текущее положение. Вы узнаете, как можно комбинировать Geolocation API и Google карты.
Читать дальше…
Canvas
1:25:22
Материалы урокаДомашние заданияТестирование
Один из самых популярных и известных элементов HTML5 – это canvas. С использованием canvas уже написано много бизнес приложений и браузерных игр. С помощью canvas и JavaScript кода frontend разработчик теперь может генерировать графику на стороне клиента. Canvas сложный и очень мощный элемент в HTML5, в этом уроке Вы увидите примеры работы с графикой на стороне клиента, научитесь создавать анимацию и различные эффекты.
Читать дальше…
WebStorage, WebWorkers, Offline Applications
1:27:29
Материалы урокаДомашние заданияТестирование
В этом уроке Вы узнаете о новых функциях HTML5 для хранения данных в браузере клиента.
Вы узнаете, что такое localStorage и sessionStorage. Увидите основные отличия веб хранилищ от cookie-файлов. Этот урок также будет полезным для тех, кто хочет научиться создавать JavaScript сценарии, выполняющие сложные вычисления. Вторая часть урока посвящена спецификации Web Worker. Вы научитесь использовать многопоточное программирование в JavaScript. Третья часть урока будет посвящена созданию автономных приложений, которые могут работать без доступа к Интернет. HTML5 Offline Application – это новый механизм, который позволяет создать приложения, близкие к обычным настольным приложениям. И в этом уроке Вы узнаете, как это делать.
Читать дальше…
№7
Введение в CSS3
1:07:58
Материалы урокаДомашние заданияТестирование
Любой FrontEnd разработчик знает, что такое CSS, но не каждый умеет пользоваться возможностями, которые появились в CSS3 – новой версии формального языка определения стиля документа. С помощью всего нескольких инструкций теперь можно делать сложные графические эффекты, которые раньше занимали много времени.
В этом уроке Вы узнаете общие сведения о состоянии спецификации CSS3 и о том, в каких браузерах поддерживается CSS3. Также Вы узнаете о том, какие новые селекторные функции были введены в CSS3, какие изменения коснулись свойств, с помощью которых задаются цвета, фоновые изображения и рамки элементов.
Читать дальше…
Web Fonts и стили для текста
0:38:40
Материалы урокаДомашние заданияТестирование
Использование дизайнерских шрифтов в веб приложениях всегда было проблемой, так как шрифт для корректной работы страницы должен был быть установлен на компьютере посетителя сайта. Теперь с использованием веб шрифтов мы можем использовать любой шрифт в документе, не опасаясь того, что текст будет не красиво отображаться в браузерах пользователей. Также в этом уроке Вы научитесь оформлять текстовые блоки – устанавливать тень для текста, разбивать текст на несколько колонок и генерировать текст с помощью CSS правил и псевдоэлементов.
Читать дальше.
..
Псевдоклассы и градиенты
0:57:31
Материалы урокаДомашние заданияТестирование
Псевдоклассы – элементы CSS правил, с помощью которых можно определить оформление элементов, которые изменили свое состояние из-за действий пользователя или других причин. Например, с помощью псевдоклассов, мы можем определить стиль элемента, который будет применен только в том случае, если пользователь навел курсор на элемент. В CSS3 появилось очень много псевдоклассов, которые позволяют легко оформлять документ. В этом уроке Вы узнаете о всех псевдоклассах, описанных в новой спецификации, а также узнаете, как можно создавать градиенты в CSS и как заставить старые браузеры отображать CSS эффекты.
Читать дальше…
Трансформации и анимация
0:52:57
Материалы урокаДомашние заданияТестирование
Анимация — одна из задач, которые обычно решаются с помощью JavaScript библиотек. В этом уроке будут рассмотрены свойства, которые позволяют без применения дополнительного кода, с помощью только одного CSS, создать анимационные эффекты.
В этом уроке будут рассмотрены два возможных способа анимации – через свойство transition и через свойство animation. Также Вы узнаете о том, как работают трансформации в CSS. Вы научитесь использовать трансформации translate, rotate, scale, skew и даже трансформировать объекты в трехмерном пространстве, создавая интересные эффекты для страниц.
Читать дальше…
LESS и адаптивный дизайн
1:01:11
Материалы урокаДомашние заданияТестирование
Синтаксис CSS имеет много недостатков – разработчик не может создавать переменные, создавать блоки стилей и повторно их использовать как обычные функции, использовать арифметические операции в стилях. Все перечисленные выше недостатки можно убрать, применив библиотеку LESS для добавления в CSS дополнительной динамики. В этом уроке Вы узнаете, как подключить LESS и изучите основные возможности этой библиотеки. Во второй части урока будет рассмотрено понятие адаптивного дизайна на примере небольшой веб страницы, которая будет адаптироваться под размеры браузера для того, чтобы корректно отображаться на любом устройстве – персональном компьютере, планшете или мобильном телефоне.
Читать дальше…
Следующий курс:
Курс HTML5 & CSS3 Углубленный — видео уроки HTML5 & CSS3 для разработчиков в ITVDN
ПОКАЗАТЬ ВСЕ
Рекомендуемая литература
Изучаем HTML, XHTML и CSS Элизабет Фримен, Эрик Фримен
HTML5 и CSS3. Веб-разработка по стандартам нового поколения Брайан Хоган
Титры видеоурока
Титров к данному уроку не предусмотрено
ПОДРОБНЕЕ
ПОДРОБНЕЕ
ПОДРОБНЕЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.
com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖Видео-уроки по CSS | CSS / CSS3
Видео-уроки по CSS | CSS / CSS3ПОДПИСКА на УРОКИ
Email*
Выбери свою темуJavaScript HTML/CSS с нуля CSS Grid / Flexbox Bootstrap PHP PhpStorm Верстка с нуля 1С-Битрикс
Предложи новую тему
Соглашение на обработку перс. данных *
Предоставлено SendPulse
CSS / CSS3
В разделе от А до CSS по бесплатным видео — уроками вы сможете более подробнее изучить тонкости CSS, тем самым открывая перед собой возможность одновременного контроля стиля и дизайна большого количества Веб страниц.
Бесплатные видео — уроки по CSS использует наглядные примеры, поэтому всегда сможете увидеть конечный результат, да и усвоение материала в виде — формате удобнее. На рынке IT-индустрии основное количество клиентов в основном направлены на то, как заказать сайт, найти веб — студию, предлагающую выгодное «
Смотрите видео — уроки по CSS, открывайте в себе новые возможности!
CSS3 Animation background-image | Практика CSS / HTML5
Разберем пример как вывести изображение через свойство background-image и сделать предварительную анимацию по наведению. Из урока вы узнаете как задействовать background, анимировать псевдо элементы ::before и ::after, и покажу как скрывать элементы …
- Денис Горелов
- CSS и CSS3
- Просмотров: 0
FORM — Анимация на transform (урок #7)
Это заключительный седьмой урок из серии уроков по форме. В нем закрепляем работу с псевдоэлементами, которые проходили в предыдущих уроках и на базе их, реализуем эффект анимированной обводки у социальных иконок.
- Денис Горелов
- CSS и CSS3
- Урок: 7
- Просмотров: 0
FORM — анимация ЧЕКБОКСА (урок #6)
Это шестой урок по форме. В нем разбираем эффект анимирующего чекбокса, который сделаем при помощи одного псевдо элемента ::before и далее при помощи transform придадим ему динамику по нажатию на текст.
- Денис Горелов
- CSS и CSS3
- Урок: 6
- Просмотров: 0
FORM — ::before и ::after (урок #5)
Это пятый урок по Form, в данном видео разберем псевдоэлементы ::before и ::after, рассмотрим как с ними можно работать, для чего они нужны, а затем при помощи их реализуем эффект по наведению у кнопки.
- Денис Горелов
- CSS и CSS3
- Урок: 5
- Просмотров: 0
FORM — эффект плавающего текста (урок #4)
В данном уроке разбираем эффект плавающего текста на CSS. Эффект сделаем на форме авторизация. В ней откажемся от placeholder, а подсказку отобразим в label которую в дальнейшем оформим под стиль placeholder.
- Денис Горелов
- CSS и CSS3
- Урок: 4
- Просмотров: 0
ФОРМА переключатели tabs (урок #3)
В текущем видео создадим переключение форм между собой по нажатию на вкладки (tabs). Разберем подробно вариант переключения как на JavaScript так и рассмотрим его на CSS, а в заключение визуально все оформим.
- Денис Горелов
- CSS и CSS3
- Урок: 3
- Просмотров: 0
ФОРМА вкладки tabs (урок #2)
Это второе видео из серии уроков где мы делаем форму. В данном видео реализуем логику переключения вкладок между собой. Рассмотрим вариант реализации данного механизма на JS так и рассмотрим ее на CSS.
- Денис Горелов
- CSS и CSS3
- Урок: 2
- Просмотров: 0
ФОРМА авторизации и регистрации (урок #1)
За несколько уроков создадим форму авторизации и регистрации с переключателями в виде табов и различными эффектами. В данных уроках разберем рад фишки как на CSS так и на JS, к тому же, вы сами сможете эти два инструмента сравнить, и выбрать оптималь.
- Денис Горелов
- CSS и CSS3
- Урок: 1
- Просмотров: 0
CSS Grid или Bootstrap? | Своя модульную сетка в web-дизайне
Что лучше, использовать готовый Фреймворк или написать свою сетку? Этим вопросом задаются многие, но что бы на него ответить нужно знать какие плюсы и минусы в фреймворках. В данном видео уроке разберемся что такое модульная сетка в web-дизайне и рас…
- Денис Горелов
- CSS и CSS3
- Просмотров: 0
Тройная АНИМАЦИЯ на CSS | transform — transition
Видео урок по CSS Анимации состоит из двух частей, в первом видео сделаем анимированный двойной эффект по наведению на область изображения, а во второй добавим аналогичные элементы и при помощи Grid модуля сделаем свою сетку и адаптируем под разные р…
- Денис Горелов
- CSS и CSS3
- Просмотров: 0
Изучите программирование на HTML5 с нуля
HTML5 — одна из популярных веб-технологий, которая получает широкое распространение в мобильных устройствах и Интернете.
В нашем курсе вы получите полный ресурс, который поможет вам начать разработку приложений для HTML5. В нашем курсе вы работаете с реальными примерами и проходите важные концепции, необходимые для получения сквозных знаний.
В нашем курсе вы начнете с основных тегов HTML. Вы узнаете, как создавать HTML-сайты и использовать CSS в своей работе, прежде чем мы начнем обсуждать HTML5. Мы не предполагаем каких-либо предварительных знаний, поэтому мы рассмотрим концепции с точки зрения новичка. В наших лекциях по HTML5 мы начинаем с новых тегов и форм. Затем мы постепенно переходим к продвинутым темам, таким как перетаскивание и мультимедиа. Далее мы рассмотрим сложные темы, такие как геолокация, веб-хранилище и кеш приложений. Этот курс создает простые для понимания примеры для каждой из концепций, и к его концу вы сможете понять полную картину, а не только отдельные элементы технологии.
Это полный курс HTML5, который вам понадобится, чтобы начать разработку приложений HTML5.
- Опыт программирования не требуется, только желание учиться
Цели
- К концу курса вы сможете создавать полноценные веб-сайты HTML5 Геолокация и веб-хранилище для создания иммерсивного пользовательского интерфейса.
- Благодаря пониманию HTML и CSS
- Вы также сможете создавать веб-приложения для мобильных телефонов
Предварительные требования
- Любой редактор HTML и веб-браузер, совместимый с HTML5
Показать больше
- Обзор
14:22
Предварительный просмотр - Экскурсия по коду VS
11:24
- Начать кодирование в HTML
15:41
Предварительный просмотр - Ссылки и навигация
15:51
Предварительный просмотр - HTML-изображения
09:56
- Основы HTML — вопросы
Этот курс включает
- 17 часов
90 лекций
- Сертификат об окончании Образец сертификата
- Пожизненный доступ Да
- Язык Английский
- 30-дневная гарантия возврата денег
Подарочный курс
Образец сертификата
Используйте свою сертификацию, чтобы изменить карьеру или продвинуться по карьерной лестнице.
У нас 30 миллионов зарегистрированных пользователей, которые продвинулись вместе с нами по карьерной лестнице.
Изучение HTML5 и CSS3 с нуля — полный курс
Изучение HTML5 и CSS3 с нуля — полный курс
- Категория:
- Подкатегория:
- проекты HTML и CSS
- HTML5
- HTML учебник
- HTML курс для начинающих
- css учебник
- учебник html5
- Учебник HTML CSS
- Учебник по HTML и CSS Учебник по css
- для начинающих
- Текстовый редактор кода Visual Studio
Нет просмотров
Нет лайков
Нет не нравится
Нет Комментарии
HTML и CSS — необходимые навыки для карьеры в веб-разработке.
HTML и CSS — необходимые навыки для карьеры в веб-разработке. В этом курсе мы рассмотрим оба языка с нуля, и к концу курса вы будете создавать свои собственные проекты. (0:00) Введение (2:47) Что такое HTML (5:11) Google Chrome и Visual Studio Code (6:02) Скачать Google Chrome (8:11) Скачать Visual Studio Code (13:58) Создать проект (16:09) Первая веб-страница (20:35) Настройки визуального кода (22:48) Загрузить расширение Live Server (26:59) Базовая структура HTML-документа (29:05) Внедрение базовой структуры документа (34:50) Перенос слов и Emmet (40:24) Элементы заголовка (44:33) Элементы абзаца (47:50) Свертывание пробелов (49:22) Lorem Ipsum Dummy Text (51: 17) Изображения (57:15) Несколько вариантов пути (1:00:06) Внешние изображения (1:02:43) Хорошие изображения (1:05:49) Атрибуты ширины и высоты (1:08:40) Обрезать изображения ( 1:12:07) Правильный путь (01:15:37) Комментарии и разрывы строк (01:19:47) Внешние ссылки (01:23:32) Внутренние ссылки (01:25:53) Ссылки внутри страницы (01: 30:10) Пустые ссылки (01:32:39)) Sup And Sub Elements (01:34:39) Strong And Em Elements (01:37:02) Special Characters In Html (01:38:58) Unordered Lists (01:41:25) Ordered Lists (01:42: 18) Вложенные списки (01:43:57) Элемент таблицы (01:46:10) Формы — Элементы ввода и отправки (01:58:12) Формы — Текстовое поле — Радио — Флажок (02:09:40) Красивее и код Formatter (02:14:56) Сочетания клавиш (02:26:06) Внешние ресурсы — элемент Head (02:30:15) Html Project Intro (02:32:16) Project Setup (02:35:17) Загрузка изображений (02:39:02) Логотип, заголовок, навигация (02:42:51) Домашняя страница завершена (02:54:30) О странице (02:58:09)) Страница Numbers (03:04:14) Страница контактов (03:09:11) Файлы ресурсов (03:09:42) Настройка текстового редактора (03:16:03) Css Intro (03:17:35) Настройка рабочей области ( 03:20:22) Встроенный CSS (03:23:40) Ресурсы курса (03:25:01) Внутренний CSS (03:28:00) Внешний CSS (03:39:40) Power Struggle (03:44:17) ) Базовый синтаксис Css (03:52:27) Селекторы элементов (03:55:15) Селекторы группировки (03:57:27) Селекторы идентификаторов (04:02:09) Селекторы классов (04:06:17) Идентификатор и класс Обзор селекторов (04:08:30) Элементы Div и Span (04:16:44) Наследование CSS (04:20:08) Дополнительная информация о наследовании (04:22:30) Последнее правило, специфика, универсальный селектор (04: 27:33) Colors Intro (04:28:13) Color And Background-Color Properties (04:32:33) Color Names (04:33:30) Rgb (04:37:46) Rgba (04:44:33) ) Hex (04:50:58) Параметры цвета Vs-Code (04:52:57) Внешние ресурсы (04:55:39)) Units Intro (04:56:18) Pixels, Font-Size, Width, Height (05:02:13) Percent Values (05:05:44) Em Values (05:11:42) Rem Values (05:14) :41) VH и VW (05:19:14) Стили браузера по умолчанию (05:29:07) Функция Calc (05:33:38) Введение в типографику (05:34:07) Семейство шрифтов (05:36:47) ) Font-Stack Общие шрифты (05:39:23) Google Fonts (05:46:00) Font-Weight Font-Style (05:53:30) Text-Align And Text-Indent (05:56:52) Больше Свойства текста (06:04:31) Box-Model Intro (06:04:53) Padding (06:13:28) Margin (06:19:01) Border (06:23:57) Border-Radius, Negative Margin (06:27:24) Свойство контура (06:34:58) Введение свойства отображения (06:35:19)) Свойство отображения (06:43:26) Базовое горизонтальное центрирование (06:48:11) Пример панели навигации для мобильных устройств (06:58:29) Размер рамки рамки-рамки (07:06:46) Отображение встроенного блока (07: 09:29) Display:none, Opacity, Visibility (07:16:20) Background-Image Intro (07:16:43) Background Image Setup (07:19:43) Background-Image-Property (07:27:45) ) Background-Repeat (07:34:07) Background-Size (07:36:58) Background-Position (07:41:18) Background-Atach (07:47:04) Linear-Gradients (07:56:49) ) Объединение сочетаний клавиш фонового изображения (08:06:56) Linear-Gradient Colorzilla (08:11:08) Float Position Intro (08:11:47) Float Property (08:19):18) Пример макета столбца свойства с плавающей запятой (08:25:59) Статическая позиция (08:30:44) Относительная позиция (08:33:18) Абсолютная позиция (08:38:42) Фиксированная позиция (08:42:30) ) Media Quries (08:57:07) Z-Index (09:06:04) ::Before And ::After Псевдоэлементы (09:27:14) Css Selectors Intro (09:28:26) Basic Selectors (09 :31:07) Селекторы потомков (09:35:50) Первая строка и первая буква (09:36:56) :Hover Селектор псевдоклассов (09:40:03) Ссылка Селекторы псевдоклассов (09:44: 36) Корневые селекторы класса Preudo (09:51:01) Преобразование, переход и анимация (09:52:17) Transform:transition() (09:58:52) Transform:scale() (10:01:20) Transform:rotate() (10:04:47) Transform:skew() (10:06) :31) Свойство перехода (10:09:13) Множественный переход (10:11:11) Задержка перехода (10:16:36) Функция синхронизации перехода (10:25:51) Анимация (10:35:51) Анимация -Fill-Mode (10:40:53) Last Module Intro (10:41:32) Css Variables (10:56:19) Font-Awesome Icons (11:07:55) Text-Shadow Box-Shadow (11: 14:44) Префиксы браузера (11:19:23) Семантические теги (11:24:11) Курс Emmet Workflow от Джона Смилги.