Видео курс HTML 5, CSS и созданию сайтов. Псевдоклассы и градиенты - видео уроки ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию
Подписка

300+ курсов по популярным IT-направлениям

Выбери свою IT специальность

Подписка
Подписка

300+ курсов по популярным IT-направлениям

×

Вы открыли доступ к тесту! Пройти тест

Вы действительно хотите открыть доступ к тестированию по курсу HTML5 и CSS3 Базовый на 40 дней?

ВИДЕОУРОК №9. Псевдоклассы и градиенты

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

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

Читать дальше...

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

Читать дальше...

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

Читать дальше...

Микроданные – это новый подход в создании дополнительной описательной информации для HTML документа. С помощью микроданных мы можем в HTML странице, кроме самой структуры документа, сохранить специальную информацию, которая будет полезная поисковым системам и другим приложениям, анализирующим документы. В этом уроке Вы узнаете, как использовать микроданные и словари микроданных в HTML5. Вторая часть урока будет посвящена геолокации. Вы научитесь создавать приложения, которые смогут получить координаты пользователя и определить его текущее положение. Вы узнаете, как можно комбинировать Geolocation API и Google карты.

Читать дальше...

Один из самых популярных и известных элементов HTML5 – это canvas. С использованием canvas уже написано много бизнес приложений и браузерных игр. С помощью canvas и JavaScript кода frontend разработчик теперь может генерировать графику на стороне клиента. Canvas сложный и очень мощный элемент в HTML5, в этом уроке Вы увидите примеры работы с графикой на стороне клиента, научитесь создавать анимацию и различные эффекты.

Читать дальше...

В этом уроке Вы узнаете о новых функциях HTML5 для хранения данных в браузере клиента. Вы узнаете, что такое localStorage и sessionStorage. Увидите основные отличия веб хранилищ от cookie-файлов. Этот урок также будет полезным для тех, кто хочет научиться создавать JavaScript сценарии, выполняющие сложные вычисления. Вторая часть урока посвящена спецификации Web Worker. Вы научитесь использовать многопоточное программирование в JavaScript. Третья часть урока будет посвящена созданию автономных приложений, которые могут работать без доступа к Интернет. HTML5 Offline Application – это новый механизм, который позволяет создать приложения, близкие к обычным настольным приложениям. И в этом уроке Вы узнаете, как это делать.

Читать дальше...

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

Читать дальше...

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

Читать дальше...

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

Читать дальше...

Анимация - одна из задач, которые обычно решаются с помощью JavaScript библиотек. В этом уроке будут рассмотрены свойства, которые позволяют без применения дополнительного кода, с помощью только одного CSS, создать анимационные эффекты. В этом уроке будут рассмотрены два возможных способа анимации – через свойство transition и через свойство animation. Также Вы узнаете о том, как работают трансформации в CSS. Вы научитесь использовать трансформации translate, rotate, scale, skew и даже трансформировать объекты в трехмерном пространстве, создавая интересные эффекты для страниц.

Читать дальше...

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

Читать дальше...
ПОКАЗАТЬ ВСЕ
основные темы, рассматриваемые на уроке
0:00:00
Псевдоклассы и псевдоэлементы. Определение и синтаксис
0:02:55
Псевдоклассы, рассматриваемые на уроке
0:03:15
":checked" (checkbox или radio в выбранном состоянии)
0:04:47
":defualt" (стиль кнопки по умолчанию)
0:05:47
":disabled" (неактивный элемент)
0:06:42
":enabled" (активный элемент)
0:09:16
":empty" (псевдокласс, не содержащий дочерних элементов)
0:10:37
":first-of-type" (первый элемент в списке дочерних элементов)
0:12:00
":last-of-type" (последний элемент в списке дочерних элементов)
0:12:36
":indeterminate" (элементы checkbox в неопределенном состоянии)
0:14:27
":valid", ":invalid" (корректные и некорректные значения)
0:16:33
":first-child", ":last-child" (первый и последний элемент контейнера)
0:17:56
":not" (возможность создания исключающего правила)
0:19:38
":nth-of-child" (доступ к эл-там по расположению в дереве документа)
0:22:58
":nth-of-last-child" (доступ к элементам документа, обход с конца)
0:24:24
":nth-of-type" (порядковый номер конкретного селектора)
0:27:24
":only-of-type" (если элемент один в родительском контейнере)
0:28:44
":only-child" (если элемент единственный в родительском контейнере)
0:29:32
":optional" (для необязательных для заполнения полей)
0:30:58
":required" (для обязательных для заполнения полей)
0:34:33
":read-write", ":read-only" (до- и недоступные эл-ты для редактирования)
0:35:15
":root" (корневой элемент)
0:36:14
Немного повторения
0:42:20
Градиенты в CSS3
0:43:42
Линейный градиент
0:49:09
Радиальный градиент
0:51:49
Повторяющиеся градиенты
0:53:45
Сolorzilla.com
0:54:30
Градиент в IE6
ПОКАЗАТЬ ВСЕ
Титры видеоурока
Титров к данному уроку не предусмотрено

Отзывы наших студентов

DOU

Отзывы в DOU

4,9/5 - 195 отзывов

Віталій Новіцький
Віталій Новіцький
5/5
Проходив курси «JavaScript Стартовый», «JavaScript Базовый» та «HTML5 & CSS3 Углубленный». Матеріал викладається доступно, без лишньої інформації. Незалежно від викладача, кожен курс цікавий по своєму, інформація подається доступно з фокусом на основні деталі. Практичні завдання цікаві й допомагають повністю розібратись в прослуханому матеріалі. Платформа зручна і проста в користуванні. За результатами пройденого матеріалу можна пройти тестування, з об’єктивним оцінюванням засвоєних знань, і отримати сертифікат. Раджу усім.
Почитать оригинал
Facebook

Отзывы в Facebook

5,0/5 - 704 отзыва

Ирина Василенко
Ирина Василенко
5/5
Была участницей акции «Изучай Web Testing бесплатно» на образовательном ресурсе ITVDN.Курс очень насыщенный, много примеров, что для меня важно! Преподаватель показал и рассказал доступно и понятно. Нашла много нового полезного в области тестирования!
Почитать оригинал
Google

Отзывы в Google

4,9/5 - 814 отзыва

Алексей Сугоняк
Алексей Сугоняк
5/5
Получил бесплатно доступ к курсу 'JavaScript Стартовый' недавно, а до этого был 'Flask' и до него были курсы. Не видел чтоб другие обучающие компании такое делали. Это я считаю здорово. И объясняют хорошо. И курсы интересные. Спасибо.
Почитать оригинал
Студенты также смотрят
HTML5 & CSS3 Углубленный
ПОДРОБНЕЕ
HTML5 и CSS3 Стартовый (2018)
ПОДРОБНЕЕ

Покупай подпискус доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

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

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
59.99 $
Оформить подписку
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
89.99 $
Оформить подписку
Премиум
  • Все видеокурсы на 1 год
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
Оформить подписку

Вопросы и ответы

В чём преимущество онлайн курсов программирования по сравнению с оффлайн?
Какова стоимость обучения?
Сколько времени понадобится, чтобы овладеть программированием?
Сколько времени понадобится, чтобы овладеть IT-специальностью?
С какого курса начинать обучение?
Как управлять своим временем и организовать эффективное онлайн-обучение с тренером?
Есть ли у вас помощь с трудоустройством после окончания обучения?
Возможно ли персональное обучение с тренером ITVDN?
С какого возраста можно учиться на платформе?
Нужны ли знания английского языка для обучения?
Какого уровня можно достичь, пройдя обучение по специальности?
Когда закончится подписка, что дальше? Доступа к урокам не будет?
Суммируются ли скидки на покупку подписки?
В чём преимущество онлайн курсов программирования по сравнению с оффлайн?

Онлайн курсы имеют ряд преимуществ перед оффлайн форматом:

  1. Независимость от локации. Онлайн позволяет учиться где угодно.
  2. Сохранение денег и времени на дорогу. Вы экономите время и деньги с поездок на курсы и обратно.
  3. Онлайн курсы дешевле. Нет нужды в помещении и ноутбуках для студентов, поэтому стоимость ниже.
  4. Удобный темп обучения, постоянный доступ к информации. Обучение в вашем темпе в любом месте 24/7. Также есть доступ к записанным урокам, чего нет в оффлайн формате.
Какова стоимость обучения?

На ITVDN есть 2 формата обучения: Live Online и видео курсы. Цена обучения зависит от выбранного вами способа обучения.

Если вы хотите учиться самостоятельно в формате видео курсов, стоимость обучения составит в среднем 10-15 USD в месяц в зависимости от выбранного вами пакета подписки.

Live Online – это онлайн обучение с тренером в группах вместе с другими студентами. Учеба в данном формате стоит в среднем 6-7 USD за один час.

Сколько времени понадобится, чтобы овладеть программированием?

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

  • новички – от 3 до 6 месяцев;
  • те, кто имеет базовые знания другого языка – от 1 до 3 месяцев;
  • профессиональные программисты – до 1 месяца.

Самый лучший вариант инвестиции времени – 8 часов ежедневно (20% теории + 80% практики). Больше практики – быстрее овладеете программированием.

Сколько времени понадобится, чтобы овладеть IT-специальностью?

Для овладения IT-специальностью нужно выделить не менее 500 часов, из которых около 100 часов – на просмотр видео уроков или посещение онлайн занятий с ментором, а 400 – на выполнение практических заданий по пройденным темам.

В зависимости от того, сколько времени вы готовы выделять на обучение в день, вы сможете пройти программу за 3-8 месяцев. Если у вас есть определенная база знаний по IT, количество необходимого времени будет меньшим.

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

С какого курса начинать обучение?

Начинать следует с тех, которые содержат в названии слово “Стартовый”. Такие курсы имеют вводный материал для знакомства с языком или технологией.

Если вы планируете учиться по конкретной специальности в формате видео курсов, перейдите на страницу специальности и прокрутите до заголовка “Видео курсы по специальности …”. Ниже будет список видео курсов, отсортированных в порядке необходимости изучения.

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

Как управлять своим временем и организовать эффективное онлайн-обучение с тренером?

Если вы выбираете Live Online обучение с тренером, всё очень просто:

  • посещайте все занятия, вовремя выполняйте д/з;
  • дополнительно смотрите видео уроки на ITVDN;
  • после каждого урока проходите краткое тестирование;
  • практикуйтесь в Интерактивном практикуме;
  • общайтесь с одногруппниками в ходе решения д/з, задавайте вопросы ментору на уроках и вне их;
  • в конце каждого курса сдавайте экзамен на TestProvider (и получайте Сертификаты);
  • в конце всего обучения проходите экзамен по специальности и получите диплом.
Есть ли у вас помощь с трудоустройством после окончания обучения?

Мы имеем специальный раздел – “Вакансии”, который помогает нашим студентам искать первую работу в IT. Детальнее о возможностях и о разделе по ссылке.

А для тех, кто учится онлайн с ментором, у нас дополнительно предусмотрена индивидуальная помощь HR-специалиста по подготовке к трудоустройству с первого дня обучения и до получения первого job-оффера. Она включает в себя помощь в оформлении соцсетей, подготовке резюме, проведении пробного собеседования, предоставлении советов по поиску работы и самопрезентации и т. д.

Возможно ли персональное обучение с тренером ITVDN?

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

С какого возраста можно учиться на платформе?

На ITVDN отсутствуют курсы для детей, поэтому комфортный возраст для начала обучения по нашим материалам – от 14 лет.

Нужны ли знания английского языка для обучения?

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

Какого уровня можно достичь, пройдя обучение по специальности?

На ITVDN можно пройти полное обучение с нуля до специалиста уровня Trainee/Junior. Если вы уже практикующий разработчик, наши видео курсы помогут углубить ваши знания до уровня Middle.

Когда закончится подписка, что дальше? Доступа к урокам не будет?

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

Суммируются ли скидки на покупку подписки?

Нет, скидки не суммируются.

Notification success