HTML5 и CSS3. Современные средства Web-разработки

HTML & CSS – это основа веб-технологии.

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

Любая серьёзная организация имеет своё представление в глобальной сети. Это требование времени и требование рынка. Без учета современных реалий мира невозможно добиться конкурентоспособности и, следовательно, успеха. Именно связка HTML & CSS даёт возможность верстать макеты, создавать и редактировать статические сайты. Изучаемая на данном курсе технология программирования позволяет заложить долгосрочную основу и закрепиться в данной области на рынке труда.

В предлагаемом инфопродукте вы изучите как:

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

Курс разделен на блоки:

  1. HTML5: Семантические элементы.

Обзор HTML5, Новые семантические элементы HTML5, Новый способ структурирования страниц. Семантика текстового уровня. Настройка редактора , практические примеры применения семантических тегов, для создания структуры сайта. Знакомство с плагинами ускоряющими вёрстку сайта.

  1. Позиционирование элементов, Практическая вёрстка. Позиционирование элементов, расположение элементов на странице (позиционирование элементов по вертикали, по горизонтали). Самые популярные css генераторы, какие они бывают, для чего применяют каждый из них.

 

  1. HTML5 формы. Добавление Аудио и Видео на страницу.

Рассмотрение на практических примерах данных особенностей. Усовершенствование традиционных форм (добавление подсказок, фокусировка на элементе и т.д.). Проверка форм на ошибки заполнения. Новые типы элементов (адреса электронной почты, URL-адреса и т.д.). Добавим в наш проект видео и аудио информацию, посмотрим как все это реализуется на практике. Рассмотрим работу тэгов <VIDEO> <AUDIO>. Задание классов, разбор технологии БЭМ

  1. Параметры CSS для фона. Использование SVG.

Создание множественного фона для сайта. Задание фоновых изображений для адаптивных сайтов. Создание градиентного фона для сайт. Знакомство со спрайтами и иконочными шрифтами. Модернизируем наш проект в соответствии с новыми возможностями CSS3. Добавим необходимые элементы и эффекты. Знакомство с форматом svg.

  1. Работа с текстом. Границы в CSS3

Работа со шрифтами. Веб-шрифты GOOGLE. Размещение текста в несколько колонок. Рассмотрим механизмы представления текстовой информации: оформление, выравнивание, отступы. Переключаемые вкладки для создания меню.Рассмотрим основы Canvas. Рассмотрим работу с границами в CSS, способы создания рамок элементов. Создание прозрачных рамок, теней, скругленных углов, градиентов.

  1. Эффекты перехода и трансформации CSS3.

Эффекты перехода. Применение трансформации. Поворот элементов при наведении на него. Создание анимации средствами в CSS3. Узнаем для чего нужна данная технология и где ее следует применять. Добавим анимацию для некоторых элементов нашего сайта.

  1. Адаптивная вёрстка (Часть 1).

Рассмотрим понятие адаптивного дизайна. Для чего и в каких случаях применяется. Основы синтаксиса и примеры. Придадим дизайну современный вид.

  1. CSS3 Углубленное изучение.SASS. Flexbox.

Рассмотрим новое свойство flex, для создания гибкой структуры внутренних блоков сайт. Сделаем финальный проект со всеми доработками и нововведениями представленными CSS3, С использованием одного из самых популярных препроцессоров SASS.