Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

План сегодняшнего занятия:

Повторим материал прошлого урока
Сверстаем первые два раздела сайта

Повторение материала

FIGMA - Программа используемая дизайнерами для разработки WEB интерфейсов

Повторение материала

Что такое div элементы?

Div элементы

На примере нашего сайта

Повторение материала

Привязка элементов на сайте к линии (горизонтальной \ вертикальной)

Повторение материала

font-family - Устанавливает семейство шрифта, которое будет использоваться для оформления

Повторение материала

font-style - Определяет начертание шрифта: обычное, курсивное или наклонное.

Значения
normal -

Повторение материала

font-weight - Устанавливает насыщенность шрифта. Значение устанавливается от 100 до

Каким станет текст в абзацах после применения данных свойств?

Повторение материала

cursor - устанавливает форму курсора, когда он находится в пределах

Свойство padding и margin

Padding это ВНУТРЕННИЙ отступ, его можно сравнить с

Тестирование остаточных знаний

В какой программе мы смотрим макет будущего сайта?

Figma

Как обратиться к классу в css?

.my_class{}

Как называется тег контейнер, в который мы обернули каждый наш элемент

Как называется внешний отступ справа?

margin-right

div

div

Секции

Секции

Внутри main необходимо создать

Секции

Если обратимся к макету, то увидим что секция делится на две

Секции

Создадим два контейнера DIV с классом intro_left и intro_right.
Команда div.intro_left

Секции

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

Секции

Картинку необходимо скачать с гугл диска и поместить в папку с

Добавляем картинку на сайт

Внутри контейнера intro_left создаем тег img с классом

Добавляем картинку на сайт

На сайте должна появиться картинка

Задание дополнительно:
Подумайте при каких

Правая часть intro

Делаем правую часть сайта, которая состоит из заголовка

Правая часть intro

Копируем текст из макета фигмы и вставляем на сайт

Правая часть intro

Получится примерно так:

Блоки расположились один ниже другого

Работаем с CSS intro

Перейдем в css и напишем следующие стили для

Работаем с CSS intro

Блоки расположились друг за другом вдоль оси, но

Работаем с CSS intro

Правильно, мы могли бы сделать отступ, при помощи

Работаем с CSS intro

Теперь содержимое блока выровнялось по середине экрана:

Работаем с CSS intro

Зададим ширину и внутренний отступ для левого контейнера

Работаем с CSS intro

Настраиваем отступы для правой части в соответствии с

Работаем с CSS intro

Текст сжался до указанной нами максимальной ширины блока,

Работаем с CSS intro

Настраиваем свойство из макета figma для нашего заголовка

Дополнительное

Новые свойства

line-height - устанавливает интерлиньяж (межстрочный интервал) текста

текст текст текст текст

Приводим в порядок

Добавить отступ свойствам можно выделив строки и нажав TAB.

Заголовок готов

Дизайн нашего текст изменился и соответствует макету на 100%

Самостоятельное задание 1

Необходимо установить все свойства из макета для параграфа с

Проверка самостоятельного задания

Обновим страницу

WEB HOSTING

WEB HOSTING

WEB HOSTING

Что мы сделали сегодня?

Что мы сделали сегодня

Познакомились с понятием секция - тег

Что мы сделали сегодня

Создали вторую секцию нашего сайта строго по техническому

Что мы сделали сегодня

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

Что мы сделали сегодня

Познакомились с свойствами justify-content и line-height
Кто скажет, для

Расскажи о нас друзьям

Получи подарочную карту STEAM на 750 р. или