Данный видеоурок содержит базовые знания по работе с программой фотошоп и в первую очередь ориентирован на начинающих html-верстальщиков. В уроке демонстрируется веб-разработчикам получать информацию об элементах, содержащихся в макете в формате фотошоп, т.е psd. Например, как узнать размеры блоков и отступы между ними, определить цветовые характеристики элементов, настройки фонов и градиентов, характеристики текстовых блоков, такие как размер и семейство шрифта, его цвет, интерлиньяж и т.д. Объем знаний, необходимый для выполнения всех задач верстальщиков, относительно мал и последовательно рассмотрен в данном уроке. Содержание видеоурока: 01:05 – важные настройки фотошопа для верстальщиков: единицы измерений и настройки цветов. 02:20 – открытие, закрытие и компоновка окон настроек и правой панели (окна «слои», «символ», «история», «инфо» и др.). 05:50 – добавление файлов в программу, переключение между проектами. 06:50 – сохранение рабочей среды в шаблон. 07:45 – панели инструментов: выбор, настройка параметров. 08:45 – линейки. 09:08 – направляющие. 09:45 – снятие (определение) размеров элементов, инструменты «выделение», «линейка», вкладка «инфо». 13:40 – панель «история». 14:20 – панель «символ», выбор слоев и групп элементов, определение данных текстовых блоков: семейство шрифта, жирность (плотность), размер, интерлиньяж, расстояния между символами, масштабирование текста, цвет, трансформации. Инструмент «текст». 19:40 - работа с панелью «слои», фильтр слоев. 20:53 эффекты слове: обводки, тени, градиенты и т.д. 24:15 - экспорт графических изображений: форматы jpeg, png, svg, экспорт нескольких слоев.


В видеоуроке показаны две возможные проблемы при задании вертикальных внешних отступов (margin) у блочных элементов: «схлопывание» и «выпадение». И если о первой проблеме (нюансе) нужно просто помнить, то вторую проблему можно решить несколькими путями. Естественно, каждый из них показан и разложен «по полочкам». Содержание видеоурока: 00:24 – проблема «схлопывания» вертикальных внешних отступов (margin) блочных элементов (тегов). 04:40 – проблема «выпадания» вертикальных внешних отступов (margin) блочных элементов (тегов). 08:52 – решение проблемы «выпадания» вертикальных внешних отступов (margin) блочных элементов заданием у родительского элемента свойства «border» (границы). 09:45 – решение проблемы «выпадания» вертикальных внешних отступов (margin) блочных элементов заданием у родительского элемента свойства «padding» (внутреннего отступа). 11:10 – решение проблемы «выпадания» вертикальных внешних отступов (margin) блочных элементов заданием свойства «display» со значением «inline-block» внутреннему элементу.


В видеоуроке рассматривается блочное и строчное представление элементов (тегов) html, свойства блочных и строчных элементов, их предназначение и отличия между собой. Также демонстрируется процесс преобразования блочных элементов в строчные и строчных – в блочные. Отдельно рассмотрены возможности и преимущества использования инлайн-блочных (inline-block) элементов. Содержание видеоурока: 03:43 – ширина блочных элементов (тегов). 04:35 – ширина строчных (инлайновых) элементов (тегов). 06:25 – высота блочных элементов. 07:50 – высота строчных (инлайновых) элементов. 09:00 – свойства width и height для блочных элементов. 11:05 – свойства width и height для строчных (инлайновых) элементов. 12:40 – расположение блочных и строчных элементов в потоке. 14:10 – назначение блочных и строчных элементов. 15:30 – пример блочных и строчных элементов на реальном сайте. 23:00 – возможность вложения строчных элементов в блочные и наоборот. 23:48 – изображения как инлайновые (замещаемые) элементы. 26:08 – преобразование блочных в строчные элементы и наоборот. Свойство display со значениями inline, block, inline-block.


Третий видеоурок из серии уроков по верстке макета ConsulteX. В данном видео демонстрируется верстка секции about. Первая часть – верстка шапки сайта (header) - Вторая часть - верстка секции main - Четвертая часть - верстка секции services - Пятая часть - верстка подвала сайта (footer) – Шестая часть - доработка и правки к верстке -


В видеоуроке рассмотрено свойства float и его применение для расположения элементов на странице, построения структурных сеток и т.д. Содержание видеоурока: 00:15 – поток документа. 01:40 – значение left свойства float. 02:40 – значение right свойства float. 02:53 – значение none свойства float. 03:05 – выпадение «зафлоченного» элемента из потока документа (что происходит при задании элементам свойства float). 06:50 – воздействие свойства float на блочные и строчные элементы. 12:00 – воздействие свойства float на следующие элементы в потоке. 13:25 – свойства clear - очистка потока от действия свойства float. 15:40 – примеры использования свойства float для расположения структурных блоков страницы. 20:20 – очистка потока при помощи «распорки» с использованием дополнительного элемента в потоке. 22:20 – очистка потока при помощи псевдоэлемента before. 26:20 – свойство float для построения сеток разметки.


В видеоуроке рассмотрены все виды позиционирования элементов html при помощи CSS-свойства position. Также разобраны отличия видов позиционирования друг от друга, особенности каждого позиционирования, задание позиционированным элементам специальных свойств top, bottom, left, right и z-index. Показаны примеры использования позиционирования для создания слоя, перекрывающего весь экран (вместе с pop-up) и для создания простой кнопки закрытия всплывающего окна. Содержание видеоурока: 02:15 – общая информация о позиционировании элементов при помощи CSS-свойства position, значение по умолчанию – static. 04:10 – относительное позиционирование – position: relative. 04:50 – смещение относительно позиционированного элемента при помощи свойств top, bottom, left, right. 07:07 – одновременное задание двух «противоположных» свойств для смещения позиционированного элемента (например, top и bottom, left и right) при наличии у элемента свойств width и height. 09:15 – абсолютное позиционирование – position: absolute, отличия от относительного позиционирования. 11;47 - смещение абсолютно позиционированного элемента при помощи свойств top, bottom, left, right. Точки отсчета для смещения элемента при абсолютном позиционировании. 14:44 – относительное позиционирование – position: fixed. 16:20 - свойство z-index - управляет положением позиционированных элементов по оси z, которая направлена перпендикулярно экрану монитора. 21:39 – возможные значения свойства z-index, в частности, «- 1». 26:10 - одновременное задание двух «противоположных» свойств для смещения позиционированного элемента (например, top и bottom, left и right) при отсутствии у элемента свойств width и height. 29:45 – центрирование позиционированного элемента по горизонтали и вертикали. 32:30 – пример использования позиционирования для создания слоя, перекрывающего весь экран, вместе с pop-up. 40:29 – пример использования позиционирования для создания простой кнопки закрытия всплывающего окна.


В видеоуроке продолжено изучение градиентов на CSS и демонстрируется создание и использование радиального градиента как фонового изображения элементов html. Содержание видеоурока: 01:00 – создание фоновой заливки с радиальным элементом при помощи функции radial-gradient(). 01:35 – задание формы градиента: ellipse (эллиптическая) или circle (круговая). 02:18 – задание размера градиента при помощи пикселей и процентов. 04:05 – установка центра градиента при помощи ключевых слов: top, bottom, left, right, center. 04:48 – установка центра градиента при помощи пикселей и процентов. 06:30 – задание точек перехода цветов. 08:50 – задание размера градиента при помощи ключевых слов: closest-side, closest-corner, farthest-side, farthest-corner. 10:20 - одновременное использование линейного и радиального градиента. 12:38 – создание круга с отблеском в виде градиента.


В видеоуроке кратко рассмотрены основные и часто используемые псевдоэлементы CSS: before, after, а также некоторые другие. Псевдоэлементы можно сравнить с виртуальными элементами. Они не существуют в дереве документа, т.е. они создаются с помощью CSS, но их можно обрабатывать и стилизовать как обычные элементы HTML. Содержание видеоурока: 00:50 – псевдоэлемент before - добавляет содержимое (например, текст) перед контентом элемента, заданного в селекторе. 02:10 - псевдоэлемент after также используется для добавления содержимого, но уже после контента элемента, заданного в селекторе. 03:55 - псевдоэлемент first-letter выбирает первый символ в строке текста. 04:45 - псевдоэлемент first-line выбирает первую строку в элементе. 05:35 – пример использования псевдоэлемента after.


В видеоуроке рассматриваются 2 важных механизма работы CSS: каскадность и специфичность (приоритетноcть) селекторов. Приводятся примеры расчета приоритетности селекторов в зависимости от структуры страницы, наличия у элементов классов, идентификаторов, ключевого слова important (для повышения приоритетности). Содержание видеоурока: 00:40 – варианты задания свойств CSS для элементов HTML. 02:28 – каскадность CSS. 04:35 – конфликт двух одинаковых свойств CSS, заданных для одного элемента HTML при помощи селекторов одинаковых типов. 07:40 – конфликт двух одинаковых свойств CSS, заданных для одного элемента HTML при помощи селекторов разных типов. 08:55 – приоритетность (специфичность селекторов). 09:48 – правила расчета приоритетности (специфичности) селекторов CSS. 14:45 – ключевое слово !important для увеличения приоритета селекторов CSS. 16:45 – примеры искусственного повышения приоритетности (специфичности) селектора.


В пятом уроке видео курса по изучению языка программирования Javascript рассмотрены циклы while, do/while, for и оператор continue.


В видеоуроке демонстрируется отбор элементов html при помощи основных видов css селекторов. Содержание видеоурока: 01:30 - универсальный селектор, задается при помощи символа «*» (звездочка). 02:45 - селекторы по имени тега: p, div, h1, a, span, img и т.д. 04:05 - селекторы по идентификаторам, задаются при помощи символа « » (решетка) перед селектором. 07:10 - селекторы по классам, задаются при помощи символа «.» (точка) перед селектором. 10:10 – использование мультиклассов вида.class1.class2, задаются без пробела между классами. 12:10 – группировка селекторов при помощи символа «,» (запятая) между селекторами. 13:40 – вложенные селекторы вида «селектор1 селектор2», задаются при помощи пробела между селекторами. 15:40 – дочерние селекторы, задаются при помощи символа «больше» между селекторами. 19:20 – соседние селекторы, задаются при помощи символа «+» (плюс) между селекторами. 20:57 – родственные селекторы, задаются при помощи символа «~» (тильда) между селекторами.


В данном видеоуроке кратко рассмотрены html-теги для работы с текстовыми блоками на сайте. Сначала рассмотрен тег «p», при помощи которого создаются абзацы, затем теги «br», «strong», «b», «i», «em», «mark», «del», «ins», «sup» и «sub» для форматирования текста внутри отдельных блоков текста. Отдельно рассмотрено использование заголовков h1-h6, а в завершении урока – показана возможность выделения текста цитатами различного вида «blockquote», «q» и «cite». Содержание видеоурока: 00:10 – парный тег «p» для создания абзацев. 03:07 – принудительный перенос текста на новую строку при помощи тега «br». 04:07 – теги «strong» и «b» для выделения части текста (абзаца) жирным шрифтом. 05:03 - теги «em» и «i» для выделения части текста (абзаца) курсивным начертанием. 06:00 – действие тега «mark» – подсветка текста желтым цветом. 06:18 – действие тегов «del» и «ins» – зачеркивание и подчеркивание текста. 06:55 – действие тегов «sup» и «sub» – создание надстрочных и подстрочных индексов. 07:55 – заголовки h1 – h6: предназначение, семантика, правильное использование. 09:30 – выделение цитат тегами «blockquote», «q», «cite».


В видеоуроке демонстрируется создание и работа с линейным градиентом на css. Также рассмотрен пример задания сразу нескольких градиентов для одного элемента html. Содержание видеоурока: 00:35 – функция linear-gradient. 01:30 – задание направления градиента при помощи ключевых слов. 03:07 – задание направления градиента с использованием градусов. 04:40 – задание точек перехода градиента. 08:00 – создание полос при помощи градиента. 09:45 – задание нескольких градиентов для одного элемента. 12:45 – использование градиентов совместно со свойствами background-size и background-repeat.


В видеоуроке рассмотрены следующие свойства CSS: border, padding, margin, outline, box-sizing. Также показаны различные варианты их задания для блочных элементов, воздействие на общий размер элементов и положение на странице сайта. Содержание видеоурока: 01:57 – свойство border - граница контента элемента, border-width, border-style, border-color. 04:24 – свойство padding – внутренний отступ элемента от границы (border) до контента, padding-top, padding-right, padding-bottom, padding-left. 07:15 – дополнительная информация по свойству border (border-top-color, border-top-style, border-top-color). 08:48 – варианты задания значений для свойства padding. 11:46 – свойство margin – внешний отступ элемента от границы (border) до соседних элементов, margin-top, margin-right, margin-bottom, margin-left. Варианты задания значений для свойства margin. 13:30 – свойство outline – обводка (окантовка) элемента. Синтаксис задания значений. 15:30 – влияние свойств border и padding на общий размер элемента. 19:10 – свойство box-sizing, значения content-box, border-box. 21:50 – НЕ влияние свойства outline на общий размер элемента. 22:25 – свойство outline-offset – смещение обводки (окантовки) от границ элемента. 24:47 – дополнительная информация по свойству margin, значения в браузере по умолчанию. 28:55 – центровка блочных элементов по горизонтали (margin: 0 auto;).


В видеоуроке демонстрируется создание и использование спрайтов CSS, включая примеры создания спрайта в программе «фотошоп» и пример создания эффекта перелистывания картинок на элементе при наведении курсора мышки. Содержание видеоурока: 00:12 – что такое спрайты CSS, как они используются и чем отличаются от задания изображений для элементов html. 02:00 – пример создания спрайта в программе «фотошоп». 05:10 – добавление спрайтов в элементы сайта. 13:00 – для чего нужны спрайты? 14:15 – создание эффекта перелистывания картинок на элементе при наведении курсора мышки.


В видеоуроке рассматриваются основные единицы измерения, применяемые в сайтостроении: пиксели, проценты, em, rem, vw, vh. Содержание видеоурока: 00:15 – единица измерения px – пиксель, абсолютная единица измерения. 03:55 – относительная единица измерения % – процент (относительно аналогичного свойства родителя, кроме нескольких исключений). 06:45 – относительная единица измерения em (относительно текущего контекста). 11:00 – относительная единица измерения rem (относительно размера шрифта элемента html). 14:05 – относительные единицы измерения vw и vh (относительно ширины и высоты экрана).


В текущем уроке продемонстрировано создание абсолютных и относительных ссылок (включая якоря) в документах html при помощи тега «a». Также рассмотрены атрибуты тега «a» href, target, title и работа с ними. Отдельно демонстрируется возможность установки ссылок на изображения и файлы, расположенные на сервере (компьютере). Содержание видеоурока: 00:03 – создание ссылок при помощи тега «a». 00:30 – атрибут «href» для тега «a». 01:18 – абсолютные ссылки. 02:10 - атрибут «target» для тега «a». 02:38 – относительные ссылки. 04:30 – работа с якорями (переход по ссылкам с якорем на тег с соответствующим атрибутом «id»), примеры работы с якорями. 08:00 – создание всплывающей подсказки для ссылки (атрибут «title» для тега «a»). 08:35 – создание ссылок на изображениях (картинках). 10:07 – создание ссылок с путями к файлам (ссылки для скачивания файлов).


Вступительное видео к обучающему видеокурсу по созданию сайтов, в котором кратко сказано, что такое html и css, упрощенно показана работа браузера с сервером, а также рассмотрена установка инструментов, которые будут необходимы для дальнейшего обучения. Содержание видеоурока: 00:15 - Краткий обзор технологий Html и Css. 00:45 - упрощенная схема работы браузерам с сервером. 02:00 - установка интернет-браузеров. 02:30 - установка браузера Mozila Firefox. 02:52 - установка браузера Google Chrome. 03:18 - установка расширения Firebug для браузера Mozila Firefox. 05:00 - установка редактора кода Notepad++. 06:58 - установка редактора кода SublimeText. Ссылки на страницы скачивания браузеров и редакторов кода: - браузер Mozila Firefox - - браузер Google Chrome - - редактор кода Notepad - - редактор кода SublimeText -


В видеоуроке демонстрируется создание таблиц в документах html и их разнообразное форматирование, включая задание свойств CSS, объединение ячеек, выравнивание содержимого ячеек и т.д. Содержание видеоурока: 00:20 – общий принцип создания таблиц html. 01:30 – создание таблицы, теги «table», «tr» (строка таблицы), «td» (ячейка таблицы). 05:15 – свойство display:table и его характеристики. 06:55 – выравнивание таблицы по центру (margin: 0 auto;) и по правому краю окна браузера (margin-left: auto;). 08:30 – ширина и высота таблиц (width, height). 09:10 – создание рамок (border) для таблицы и для ячеек. 10:00 – свойство CSS «border-collapse», его значения «separate» и «collapse» (разделение и объединение границ смежных ячеек). 10:50 – свойство CSS «border-spacing» для управления расстоянием между ячейками таблицы. 11:50 – задание границ только с одной стороны: border-top, border-bottom, border-left, border-right. 13:00 – задание внутренних отступов в ячейках: padding, padding-top, padding- bottom, padding-left, padding-right. 13:55 – задание ширины (width) и высоты (height) для ячеек таблицы. 14:25 – горизонтальное и вертикальное выравнивание содержимого ячеек таблицы (text-align и vertical-align). 15:30 – использование тега «th» (заглавные ячейки таблицы), их свойства и отличия. 17:03 – использование тега «caption» для создания заголовка таблицы. 17:55 – свойство CSS «caption-side» для изменения положения заголовка таблицы относительно самой таблицы. 18:45 – использование свойства «width: 100%» при задании ширины таблице. 19:22 – задание фонового цвета для ячеек таблицы (свойство background-color). 19:40 – задание цвета текста для содержимого ячеек таблицы (свойство color). 19:55 – задание атрибута «class» для элементов таблицы. 21:00 – использование свойства CSS «empty-cells» для пустых ячеек таблицы, его значения «show» и «hide». 22:40 – объединение ячеек таблицы. 23:40 – горизонтальное объединение ячеек таблицы, атрибут «colspan» для тега «td». 25:10 – вертикальное объединение ячеек таблицы, атрибут «rowspan» для тега «td». 25:59 – горизонтальное и вертикальное объединение ячеек таблицы одновременно. 29:20 – группировка строк таблицы при помощи тегов «tbody», «thead», «tfoot», их назначение, правильное использование и задание им свойств CSS.


В видеоуроке демонстрируется возможность задать одновременно несколько фоновых изображений для одного элемента css при помощи свойства background и фонов при помощи вложенных элементов html. Содержание видеоурока: 00:30 – задание нескольких фонов при помощи css свойства background. 10:00 – задание нескольких фонов при помощи вложенных элементов html.


Первый видеоурок из серии уроков по верстке макета ConsulteX. В данном видео демонстрируется верстка шапки сайта (header) включая горизонтальное выпадающее меню. Вторая часть - верстка секции main - Третья часть - верстка секции about - Четвертая часть - верстка секции services - Пятая часть - верстка подвала сайта (footer) – Шестая часть - доработка и правки к верстке - Ссылка на макет -


В видеоуроке рассмотрены CSS-свойства для создания теней для элементов html и текста: box-shadow и text-shadow. Также отдельно разобраны все параметры указанных свойств, их отличия и примеры использования. Содержание видеоурока: 01:15 - создание теней при помощи двух CSS-свойств box-shadow и text-shadow. 01:45 - свойство box-shadow – тень для элементов. Обязательные и необязательные параметры свойства. 02:15 - смещение тени по горизонтали и вертикали. 03:30 - цвет тени по умолчанию, параметр для задания цвета тени. 04:25 - параметр размытия тени. 05:10 - параметр растяжения тени. 06:50 - пример создания тени с одной стороны элемента. 08:05 - внутренняя тень элемента (параметр inset). 09:10 - форма тени повторяет форму элемента. 09:45 - свойство text-shadow – тень для элементов. Параметры свойства text-shadow, отличия от свойства box-shadow. 11:20 - задание для элемента одновременно нескольких теней (множественные тени). 14:15 - прозрачность теней.


В видеоуроке рассматриваются механизм наследования свойств CSS. Приводятся примеры применения наследования свойств CSS, а также задание принудительного наследования свойств при помощи ключевого свойства inherit. Содержание видеоурока: 00:05 – механизм наследования в CSS. 00:55 – примеры применения механизма наследования в CSS. 01:50 – наследуемые свойства CSS. 03:25 – не наследуемые свойства CSS. 05:05 – принудительное наследование при помощи ключевого слова inherit.


В видеоуроке рассмотрены основные и часто используемые псевдоклассы CSS: псевдоклассы состояний, структурные псевдоклассы и некоторые псевдокласы валидации форм. Содержание видеоурока: Псевдоклассы состояний. 00:30 - псевдоклассы состояний: link (нормальное состояние ссылок), visited (посещенные ссылки), hover (для стилизации элемента, на который в данный момент наведен курсор), active (“активированные” элементы), focus (для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре). Структурные псевдоклассы. 06:15 - псевдокласс empty - выбирает элементы, в которых нет никакого содержимого. 07:45 - псевдоклассы first-child / last-child - выделяют элемент, который является первым / последним потомком своего родительского элемента. 09:12 - псевдоклассы first-of-type / last-of-type - выделяют первый / последний элемент своего типа в указанном родительском контейнере. 11:20 - псевдокласс nth-child - выделяет один или более элементов в зависимости от их порядкового номера в разметке. 12:25 - псевдокласс :nth-of-type - схож с :nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера. 13:05 – использование ключевых слов even, odd и формулы задания порядковых номеров элементов при использовании группы псевдоклассов …-child и …-of-type. 15:40 Псевдоклассы nth-last-child / nth-last-of-type - работают аналогично nth-child / nth-of-type, но выбирают элементы не с начала, а с конца. 16:45 - псевдоклассы only-child / only-of-type - выбирают единственного потомка родительского элемента. 17:45 - псевдокласс :not - псевдокласс-отрицание. Псевдоклассы валидации 20:45 - псевдокласс focus для элементов формы - «фокусирование» в поле ввода формы. 21:53 - псевдокласс checked - выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем. 23:02 - псевдокласс disabled - выбирает отключенный элемент формы (элемент, который пользователь не может выделить, отметить, активировать или перенести на него фокус). 23:50 - псевдокласс enabled - выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled.


В седьмом уроке видео курса по изучению языка программирования Javascript знакомимся с объектами и рассматриваем цикл for/in.


В видеоуроке демонстрируется подключение и использование нестандартных шрифтов в веб-проектах. Рассмотрены варианты подключения онлайн-шрифтов с ресурса GoogleFonts, веб-шрифтов с ресурса FontStorage (при помощи правила @font-face), а также генерация веб-шрифтов на примере ресурса FontSquirrel. Содержание: 01:30 – подключение и использование онлайн-шрифтов с ресурса GoogleFonts. 09:25 – подключение и использование веб-шрифтов при помощи правила @font-face. 22:40 - подключение веб-шрифтов с ресурса FontStorage (ранее - webfont). 27:20 – генерация веб-шрифтов на примере ресурса FontSquirrel. 31:15 – пример подключения веб-шрифта с ресурса FontStorage.


В видеоуроке рассмотрены 4 отдельных CSS-свойства для создания плавных CSS-переходов: transition-duration, transition-property, transition-timing-function, transition-delay, а также групповое свойство transition для кратко задания всех 4 свойств, указанных выше. Отдельно рассмотрены примеры для задания пользовательских настроек функции cubic-bezier для свойства transition-timing-function. Содержание: 02:22 - свойство transition-duration - задает промежуток времени в секундах или миллисекундах, в течение которого должна произойти смена CSS-свойства с одного значения на другое. 03:44 - свойство transition-property - содержит название CSS-свойств, к которым будет применен эффект плавного перехода. Может принимать значение none, что будет запрещать плавный переход для все свойств, либо значение all, которое является значением по умолчанию и задает плавный переход для всех свойств элемента. 04:58 - свойство transition-timing-function - задает функцию перехода, которая определяет с какой скоростью и ускорением будут меняться свойства во время перехода. Ключевые значения функций ease, linear, ease-in, ease-out, ease-in-out. 07:55 - свойство transition-delay - задержка перехода, позволяет осуществлять переход не сразу, а через заданное время. 09:20 - свойство transition позволяет объединить в одну строку все 4 рассмотренные ранее свойства, отвечающие за изменение внешнего вида элемента. 11:20 - задание одновременно разных переходов для разных свойств элемента. 17:13 - перечень свойств, к которым можно применять плавные переходы CSS. 19:15 - использование функции cubic-bezier для свойства transition-timing-function. 25:11 - использование функции steps для свойства transition-timing-function. Полезные ресурсы: - свойства CSS, которые поддерживают плавность изменения - - для работы с функцией cubic-bezier - и


В этом видеоуроке рассмотрен принцип добавления изображений на html-страницу при помощи тега img. Также рассмотрены атрибуты тега img: src, width, height, title, alt. Показана проверка html-кода страницы на валидность при помощи ресурса . Содержание видеоурока: 00:15 – как добавить на html-страницу картинку. Тег img и его атрибут src. 01:15 – атрибуты width и height для тега img. 02:35 – задание значений атрибутов width и height для тега img в процентах. 03:45 – допустимые форматы изображений: jpg, png, svg. 04:40 - атрибут title для тега img. 05:00 – обязательный атрибут alt для тега img. 07:00 – валидация html-страниц, работа с ресурсом


В видеоуроке демонстрируется использование свойств «width», «height», «border», «padding» и «margin» для строчных и инлайн-блочных элементов. В завершении отдельным вопросом рассмотрены все основные отличия блочных, строчных и инлайн-блочных элементов. Ссылка на таблицу отличий блочных, инлайновых и инлайн-блочных элементов - Содержание видеоурока: 02:35 – бесполезность задания свойств «width» и «height» для строчных (инлайновых) элементов. 03:05 – задание свойства «border» строчному элементу. 03:50 - задание свойства «padding» строчному элементу. 04:20 – задание свойства «margin» строчному элементу. 05:40 – воздействие свойств «border», «padding» и «margin» у строчного элемента на соседние элементы в горизонтальном и вертикальном направлении. 07:50 - задания свойств «width» и «height» инлайн-блочному элементу. 10:10 - воздействие свойства «border» у инлайн-блочного элемента на соседние элементы в горизонтальном и вертикальном направлении. 11:05 - воздействие свойства «padding» у инлайн-блочного элемента на соседние элементы в горизонтальном и вертикальном направлении. 11:35 - воздействие свойства «margin» у инлайн-блочного элемента на соседние элементы в горизонтальном и вертикальном направлении. 12:00 – задание свойства «box-sizing» со значением «border-box» инлайн-блочному элементу. 14:30 – основные отличия блочных, строчных и инлайн-блочных элементов (таблица отличий).


В видеоуроке рассматриваются 5 основных свойств css для работы с фоном и фоновыми картинками: background-color, background-image, background-repeat, background-position, background-attachment. Также рассмотрено свойство background, при помощи которого можно сокращенно задать все 5 свойств, указанных выше. Содержание видеоурока: 00:55 – свойство background-color – задает цвет фона (сплошную фоновую заливку). 06:10 – свойство background-image – задает фоновое изображение. 08:50 – свойство background-repeat – управляет повторением/не повторением фонового изображения. 10:40 – свойство background-position – управляет положением фонового изображения. 20:25 – свойство background-attachment – отвечает за фиксацию или прокрутку фона при прокрутке страницы. 23:05 – свойство background – сокращенное свойства для задания одной строкой свойств background-color, background-image, background-repeat, background-position, background-attachment.


В десятом уроке видео курса по изучению языка программирования Javascript изучаем массивы и основы работы с ними.


В видеоуроке продолжено изучение свойств css для работы с фоном и фоновыми изображениями и рассмотрены 3 свойства: background-size, background-clip и background-origin. Содержание видеоурока: 02:30 – свойство background-clip - определяет площадь поверхности, которую охватывает фоновое изображение. Значение свойства background-clip по умолчанию устанавливается как border-box, что позволяет фоновому изображению расширяться в область границ. 03:55 – свойство background-origin - определяет, откуда должно начинаться background-position. Свойство background-origin по умолчанию устанавливается как padding-box, что позволяет фоновому изображению начинаться там же, где и padding у элемента. 05:00 – свойство background-size - масштабирует фоновое изображение согласно заданным размерам. 07:50 – фоновое изображение со значением свойства background-size 100%. 08:30 – задание свойства background-size с ключевыми словами cover и contain.


В видеоуроке продемонстрировано создание маркированных и нумерованных списков в документах html, а также создание списка определений и многоуровневого маркированного списка. Теги, рассмотренные в уроке: ul, ol, li, dl, dt, dd. Свойства CSS, рассмотренные в уроке: list-style-position, list-style-type, list-style-image. Содержание видеоурока: 01:10 – создание маркированного списка при помощи тегов «ul» и «li». 03:10 – пример оформления списков через свойства CSS. 03:57 – свойство list-style-position для тега «ul». 04:50 – свойство list-style-type для тега «ul». 06:20 – свойство list-style-image для тега «ul». 08:40 – создание нумерованного списка при помощи тегов «ol» и «li». 09:10 – атрибут start для тега «ol». 09:22 – атрибут reversed для тега «ol». 11:30 – свойство list-style-position для тега «ol». 11:50 – свойство list-style-type для тега «ol». 14:48 – список определений, теги «dl», «dt», «dd». 16:30 – создание многоуровневых списков. Ссылка на справочник html и css -


В продолжение темы «Формы html» в текущем видеоуроке демонстрируется процесс создания и стилизации при помощи свойств css простой формы регистрации на примере почтового сервиса Google. Содержание урока: 02:20 – создание и стилизация тега form. 06:00 – создание и стилизация текстовых полей ввода (работа с тегами input, label). 25:10 – установка двух текстовых полей горизонтально на одном уровне. 28:10 – удаление отступа (пробела) между двумя инлайновыми элементами. 32:30 – задание внутренних отступов (padding) для текстовых полей. 33:25 – использование свойства box-sizing для изменения принципа расчета общей ширины элементов. 34:30 – создание и стилизация полей ввода даты рождения, работа с тегами select и option. 51:25 – создание, стилизация и позиционирование кнопки отправки данных на сервер.


В видеоуроке рассмотрены CSS-свойства для создания анимации на CSS: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, а также групповое свойство animation для краткой задания всех свойств, указанных выше. Отдельно рассмотрена функция cubic-bezier для свойства animation-timing-function, а также некоторые другие значения свойств CSS-анимаций. Содержание: 03:52 – создание ключевых кадров при помощи правила @keyframes. 04:50 – принцип использования анимации, пример связи ключевых кадров и свойства animation, вызывающего анимацию на элементе. 07:20 – создание промежуточных ключевых кадров. 08:30 – свойство animation-name – название анимации. 08:50 – свойство animation-duration - задает продолжительность анимации. 09:10 - свойство animation-timing-function – задает временную функцию анимации. 09:40 – пример использования стандартных функции свойства animation-timing-function (ease, linear, ease-in, ease-out, ease-in-out), а также специальной функции cubic-bezier. 13:15 - свойство animation-delay – устанавливает задержку анимации. 14:00 – возможность задания отрицательного значения свойства animation-delay. 15:25 - свойство animation-iteration-count - позволяет запустить анимацию несколько. Использование дробных значений, значений 0 (отмена анимации) и infinite (бесконечная анимация). 17:28 - свойство animation-direction - задает направление повтора анимации. Использование значений normal, reverse, alternate и alternate-reverse. 19:46 – свойство animation-fill-mode - состояние до и после анимации. Использование значений forwards, backwards и both. 23:00 – свойство animation-play-state - остановка и запуск анимации. Использование значений running и paused. 25:15 - свойство animation – краткая запись всех свойств анимации. 26:39 - множественные анимации. 29:00 – примеры использования анимаций.


В видеоуроке демонстрируется создание формы html и ее элементов, разбираются отличия полей ввода, их обязательные и часто используемые атрибуты. Содержание урока: 01:15 – предназначение форм. 02:45 – тег «form» – контейнер для элементов формы. 04:00 – атрибут «method» тега «form» - метод отправки данных на сервер (обычно либо get, либо post). 04:40 – атрибут «action» тега «form» - указывает обработчик формы. 05:08 – атрибут «name» тега «form» - «именной» идентификатор формы. 06:40 – атрибут «enctype» тега «form» - для отправки на сервер файлов из формы. 06:50 – назначение атрибутов «type» и «name» тега «input». 07:25 – атрибут «type» со значением «text» - создание текстового поля ввода данных. 09:30 – атрибут «type» со значением «password» - создание поля ввода пароля. 10:00 – атрибут «type» со значением «submit» - кнопка для отправки данных на сервер. 11:00 – отправка данных из формы на сервер, get-параметры. 13:20 – простой способ перенести поле ввода данных на новую строку. 13:40 – атрибут «type» со значением «checkbox» - создание поля-галочки. 15:45 - атрибут «type» со значением «radio» - создание радио-кнопки. 16:10 - атрибут «type» со значением «file» - поле выбора файла для отправки на сервер. 17:25 - атрибут «placeholder» тега «input» - подсказка для текстового поля. 18:30 - атрибут «value» для текстового поля ввода - установка значения поля по умолчанию. 21:25 - атрибут «value» для кнопок – задает название кнопки. 22:08 - атрибут «value» для типов полей «checkbox» и «radio» – значение полей, которые будут переданы на сервер при выборе этих полей. 24:00 – правильное использование атрибутов «name» и «value» для типов полей «checkbox» и «radio». 29:20 – атрибут «checked» для типов полей «checkbox» и «radio» - отметка поля по умолчанию. 30:30 – атрибут «disabled» для тега «input» - блокировка поля ввода данных. 32:18 – атрибут «required» для тега «input» - проверка поля ввода на пустоту или правильное заполнение перед отправкой на сервер. 33:25 – пример использования атрибута «required» для тега «input» с атрибутом «email». 36:45 – атрибут «type» со значениями «submit», «button» и «reset» - различные кнопки в форме и разница между ними. 41:00 – тег «button» - создание «обыкновенной» кнопки (значение «button» атрибута «type») и кнопки отправки данных на сервер (значение «submit» атрибута «type»). 43:18 – скрытое поле ввода – значение «hidden» атрибута «type» тега «input». 44:35 – раскрывающийся (выпадающий) список данных - теги «select» и «option». 48:10 – атрибут «selected» для тега «option» - выбор поля по умолчанию. 48:48 - атрибут «disabled» для тега «select» - блокировка выпадающего списка. 49:58 - атрибут «size» для тега «select» - устанавливает «высоту» выпадающего списку. 49:55 – множественный выбор в выпадающем списке – использование атрибута «multiple» для тега «select». 50:25 – группировка элементов в выпадающем списке – тег «optgroup» внутри тега «select». 51:20 – атрибут «label» для тега «optgroup» - «подпись» для группы элементов внутри выпадающего списка. 52:05 – атрибут «disabled» для тегов «optgroup» и «option» - блокировка группы или отдельных элементов внутри выпадающего списка. 52:30 – тег «textarea» - создание многострочного поля ввода текста. 53:15 – значение по умолчанию для многострочного поля ввода текста. 53:50 - атрибут «placeholder» для многострочного поля ввода текста. 54:15 – свойство css «resize» для многострочного поля ввода текста – указывает разрешенное направление (горизонтально, вертикально или в обе стороны) изменения многострочного поля ввода текста. 55:40 – тег «label» - «обертка» для элементов формы: предназначение и 2 варианта использования (как обертка и с использованием атрибутов «id» и «for»). 01:00:00 – группировка элементов формы при помощи тега «fieldset». 01:01:30 – подпись для сгруппированных элементов формы при помощи тега «legend». 01:02:10 – демонстрация основного отличия работы методов «get» и «post» при отправке данных на сервер.


В видеоуроке рассмотрены функции трансформации, применяемые в CSS-свойстве transform: translate, scale, rotate, skew и matrix. Также рассмотрено свойство transform-origin, при помощи которого можно сместить точку отсчета (точку приложения трансформации). В бонусной части видеоурока рассмотрены примеры использования свойства transform для позиционирования элемента в центре родительского блока (в центре страницы) и использование свойства transform у псевдо-элементов (пример создания уголков тени). Содержание: 00:15 – система координат CSS. 01:15 – отсутствие воздействия трансформации элемента на соседние элементы. 03:03 – схожесть свойства transform со свойством position по воздействию на другие (соседние) элементы. 04:03 – функция translateX - позволяет перемещать объекты по горизонтали, т.е. по оси x. 05:42 – функция translateY - позволяет перемещать объекты по вертикали, т.е. по оси y. 06:40 – применение к элементу одновременно нескольких функций трансформации. 07:33 – функция translate - позволяет одновременно перемещать объекты по горизонтали и вертикали. 08:25 – использование функции translate с одним параметром. 08:55 - использование функции translate с параметрами, заданными в процентах. 10:22 – функция scaleX – масштабирование элемента по горизонтали. 12:05 – функция scaleY – масштабирование элемента по вертикали. 12:28 – функция scale – одновременное масштабирование элемента по горизонтали и вертикали. 14:20 – функция scale с отрицательными параметрами – зеркальное отображение элемента. 16:43 – функция rotate – поворот элементов по или против часовой стрелки. 18:23 – поворот осей координат элемента одновременно при использовании функции rotate. 21:25 – функции skew, skewX, skewY - наклон объекта по осям X и Y под заданным углом. 25:37 - свойство transform-origin – смещение точки отсчета. 30:52 – пример использования свойства transform для позиционирования элемента. 34:58 – использование свойства transform у псевдо-элементов на примере создания уголков тени. 42:25 – функция matrix – одновременное задания сразу нескольких трансформаций элемента.


В видеоуроке показан пример создания вертикального меню с выпадающим подменю. Также детально рассмотрена стилизация элементов меню (пунктов меню, ссылок, декоративных элементов и т.д.), в том числе, с использованием псевдо-элементов ::before и ::after. Показаны варианты реализации механизма открытия подменю при наведении мышки (средствами CSS) и при нажатии мышки (при помощи языка JavaScript) на пункты меню. В бонусной части видео показан один из вариантов задания плавности открытия подменю. Содержание: 04:50 - создание разметки (каркаса) страницы. 06:20 - html-разметка элементов меню. 08:45 - CSS -стилизация каркасных элементов. 13:45 - подключение шрифта из библиотеки (ресурса) GoogleFonts. 20:30 - CSS -стилизация пунктов меню и ссылок. 27:40 - стилизация декоративных элементов меню: иконок, стрелок и т.д. Использование псевдо-элементов ::before и ::after. 39:15 - создание выпадающего подменю. 44:56 - CSS -стилизация элементов выпадающего меню. 52:00 - реализация механизма открытия подменю при наведении мышки средствами CSS. 57:15 - реализация механизма открытия подменю при клике мышкой при помощи языка JavaScript. 01:17:25 - CSS-стилизация активного пункта меню. 01:26:00 - вариант задания плавности открытия подменю.


Начиная с текущего урока будут постепенно изучаться основные теги html. В текущем уроке рассмотрим минимальную структуру (каркас) html-страницы, элемент Doctype, теги верхнего уровня head и body, а также теги, которые могут быть в теге заголовка документа head: title, meta, link, style, script. Содержание видеоурока: 00:15 – элемент Doctype, предыдущие версии html. 01:45 – теги верхнего уровня: html, head, body. 02:45 – тег head и его содержимое. 03:12 – тег title. 04:00 – кодировка документа, тег meta, кодировка utf-8. 07:15 – теги link, style, script. 07:57 – тег body и его содержимое.


В видеоуроке показан пример создания горизонтального меню с выпадающим подменю. Детально рассмотрена стилизация элементов меню (пунктов меню, ссылок, декоративных элементов и т.д.), в том числе, с использованием псевдо-элементов ::before и ::after. Содержание: 02:30 - создание html-каркаса страницы. 04:15 - создание html-каркаса (структуры) горизонтального меню. 05:35 - CSS-стилизация html-каркаса страницы. 09:45 - использование свойства float для размещения логотипа и меню в шапке сайта. 13:00 - CSS-стилизация элементов горизонтального меню. 21:15 - html-разметка вложенных подменю. 23:00 - CSS-стилизация вложенного подменю и его элементов. 24:10 - позиционирование вложенного подменю. 35:25 - реализация механизма отображения и скрытия подменю. 36:50 - дополнительная стилизация элементов выпадающего подменю.


В видеоуроке демонстрируется 4 самых распространенных и часто используемых варианта задания цвета шрифтов и фона элементов при создании сайтов: html-цвета, шестнадцатеричный формат (hex), а также форматы rgb и rgba. Содержание видеоурока: 00:45 – какой фон у элементов по умолчанию, при создании в документе html (transparent)? 01:26 – свойство «color» для задания цвета шрифта у текстовых элементов и свойство «background-color» для задания цвета фона у любых элементов. 01:37 – задание цвета при помощи формата html-цветов. 03:30 - задание цвета при помощи шестнадцатеричного формата цветов (hex). 05:20 – задание цвета при помощи формата rgb. 08:15 – значение символов в шестнадцатеричном формате цвета. 08:50 – сокращенная запись значения цвета в шестнадцатеричном формате. 10:40 – задание цвета при помощи формата rgba с возможностью использования прозрачности (альфа-канал).


В 4 уроке видео курса по изучению языка программирования Javascript рассмотрены условные инструкции if-else и switch.


В десятом уроке видео курса по изучению языка программирования Javascript рассмотрены базовые (стандартные) методы языка Javascript для работы с массивами.


Пятый видеоурок из серии уроков по верстке макета ConsulteX. В данном видео демонстрируется верстка подвала сайта (footer). Первая часть – верстка шапки сайта (header) - Вторая часть - верстка секции main - Третья часть - верстка секции about - Четвертая часть - верстка секции services - Шестая часть - доработка и правки к верстке -


В 11 уроке видео курса по изучению языка программирования Javascript продолжим рассмотрение методов массивов.


Второй видеоурок из серии уроков по верстке макета ConsulteX. В данном видео демонстрируется верстка секции main. Первая часть - верстка шапки сайта (header) - Третья часть - верстка секции about - Четвертая часть - верстка секции services - Пятая часть - верстка подвала сайта (footer) – Шестая часть - доработка и правки к верстке -


В текущем уроке Вы познакомитесь с каскадными таблицами стилей CSS, подключаемыми к документам html, и узнаете 3 способа задания стилей для тегов html. Содержание видеоурока: 00:10 – что такое CSS. 02:25 – задание стилей CSS при помощи универсального атрибута «style» внутри открывающего тега html. 05:35 – задание стилей CSS при помощи тега «style» внутри тега «head». 09:55 – задание стилей CSS при помощи подключаемой таблицы стилей через тег «link».


Восьмой урок видео курса по изучению языка программирования Javascript. Продолжаем знакомиться с объектами в языке Javascript и рассматриваем использование методов в объектах.


Первый видеоурок к видео курсу по изучению языка программирования JavaScript.


В 6 уроке видео курса по изучению языка программирования Javascript знакомимся с функциями.


Видео добавлено: