На отработку по web программированию

Знакомство
Как тебя зовут?
Программировал ли ты ранее игры или сайты?
Чем любишь заниматься в свободное время?

План сегодняшнего занятия:
Повторим для чего используется css, html и javascript
Начнем верстать свой сайт портфолио и разбираться в исходниках
Научимся работать с figma

На рабочем столе необходимо создать папку для проекта
назовем ее “проект proCoding”

Техническое задание от заказчика
Обычно техническое задание (сокращенно ТЗ) от заказчика более объемное.
Оно содержит информацию об основных разделах сайта и пожелания по исполнению (технологии, библиотеки, сроки и изображения)

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

Figma
Скачиваем файл макета от заказчика

Figma
Загружаем файл макета от заказчика
Добавляем наш макет в фигма и открываем

Figma
Двойным щелчком открываем на макет

Запускаем программу VS code

Структура файла index.html

Внутрь body помещаем “header” и “main”
Внутри каждого из блоков будет своя часть проекта

Разберемся с тегами

Подключим style.css в нашем html файле

Правила написания стилей css

Добавим название нашего сайта
В тег
добавьте название вашего сайта

Добавим название нашего сайта
Добавленное название появится во вкладке браузера после обновления страницы

Div элементы
Блоки, контейнеры для контейнера

Div элементы
На примере нашего сайта

Классы
Добавим класс header_logo к div-элементу логотипа

Классы в CSS
Чтобы обратиться к классу через CSS, ставим перед его названием ТОЧКУ
.header_logo{
}

Классы в CSS
Смотрим в figma на свойства логотипа и применяем font-family, font-style и font-weight
Дополнительно пишем свой свойство cursor: pointer

Работа со шрифтами
font-family - Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого
Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Работа со шрифтами
font-style - Определяет начертание шрифта: обычное, курсивное или наклонное.
Значения
normal - Обычное начертание текста.
italic - Курсивное начертание.
oblique - Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
inherit - Наследует значение родителя.

Работа со шрифтами
font-weight - Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100
Значения
bold — полужирное начертание
normal — нормальное начертание.
Также допустимо использовать условные единицы от 100 до 900

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

Работа со шрифтами
Ищем на сайте Google Fonts шрифт Revalia

Работа со шрифтами
Выбираем regular 400, нажимаем select this style

Работа со шрифтами
Копируем ссылку на шрифт и переносим в проект

Работа со шрифтами
Добавляем скопированный фрагмент кода в head сайта, сохраняем проект и проверяем на сайте

Расположение div элементов
Наше меню должно идти в строчку, после логотипа

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

Flexbox
Добавим свойство display в CSS, и установим значение flex - чтобы привязать все элементы к линии (по умолчанию горизонтальной)

Тестируем
Теперь и логотип и меню привязаны к горизонтальной линии

Свойство margin
margin - устанавливает величину отступа от каждого края элемента.
Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента

Отступы
Название отступов с каждой из сторон

Задаем отступы для нашего логотипа
Отступы берем из макета figma

Самостоятельное задание 2
Необходимо добавить отступы для блока меню header_menu.
Отступ слева равен 398 px, сверху 79 px

Проверяем
Добавлены два отступа для блока меню

Тег ссылки -
Ссылка
Обернем наши пункты меню в тег
, и сделаем их отдельными ссылками

Свойство padding
padding - устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое

Свойство padding
padding можно сравнить с рамкой у картины

Свойство padding
Зададим отступы тегу
, в соответствии с макетом

Тестируем на сайте
Теперь у каждого элемента
внутренний отступ слева 42 пикселя

Секции
отвечает за деление страницы на секции

Секции
Внутри main необходимо создать
с классом intro.
Самый быстрый способ это сделать - написать section.intro и нажать два раза enter

Секции
Если обратимся к макету, то увидим что секция делится на две части левую и правую (left / right)

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

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

Добавляем картинку на сайт
Внутри контейнера intro_left создаем тег img с классом intro_img

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

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

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

Правая часть intro
Получится примерно так:
Блоки расположились один ниже другого

Работаем с CSS intro
Перейдем в css и напишем следующие стили для класса intro:

Работаем с CSS intro
Блоки расположились друг за другом вдоль оси, но привязаны к левому краю
Кто вспомнит, каким образом мы можем сделать отступ слева?

Работаем с CSS intro
Правильно, мы могли бы сделать отступ, при помощи margin-left, но сегодня изучим следующее свойство:
Оно центрует содержимое блока (т.е. располагает его по центру экрана)

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

Работаем с CSS intro
Зададим ширину и внутренний отступ для левой секции (ширину посмотрим в figma)

Работаем с CSS intro
Настраиваем отступы для правой части в соответствии с макетом figma

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

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

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

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

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

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

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

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