Космическая вёрстка. Курс для тех, кто хочет стать гуру кода и научиться создавать сайты

Август 22, 2022

Главная
Информатика
Космическая вёрстка. Курс для тех, кто хочет стать гуру кода и научиться создавать сайты

Содержание

2. В редакторе кода создайте файл style.css и поместите его в папку css внутри рабочей папки SpaceZ
3. Практика Верстаем страницу Добавьте каждому элементу (селектор *) видимую границу для простоты вёрстки. После окончания работы
4. Практика Верстаем страницу Добавьте размеры крупным элементам макета. Например, зададим параметры нашего контейнера: .container { width:
5. Практика Верстаем страницу Задайте элементам ширину, измерив её в макете в Фигме с помощью данных на
6. Практика Верстаем страницу Поворот элемента и скругление угла Ширина (W) и высота (H) элемента
7. Узнаём новое Вкладка Inspect Блок CSS-кода Выделенный элемент Вкладка Inspect Также для стилизации блоков можно брать
8. Практика Верстаем страницу Также измерьте величину внутренних отступов и запишите их в свойствах элементов. element {
9. Практика Верстаем страницу То же самое проделайте с внешними, если видите, что между элементами должно быть
10. Практика Верстаем страницу Также измерьте величину внутренних и внешних отступов, выделяя элемент и используя Alt и
11. Практика Верстаем страницу Не занимайтесь полной стилизацией элементов макета — это будет целью следующих занятий. p,
12. Выровняйте элементы в нужном вам порядке element { flex-direction: row; /*column*/ justify-content: flex-start; align-items: center; flex-wrap:
13. Практика Верстаем страницу Проверьте надёжность сетки. Блоки не должны выпадать или пропадать при изменении ширины экрана
15. Скачать презентацию

Слайд 2

В редакторе кода создайте файл style.css и поместите его в папку

css внутри рабочей папки SpaceZ

1

Откройте свой макет в графическом редакторе Фигме.

2

Практика Готовимся к вёрстке

Слайд 3

Практика Верстаем страницу
Добавьте каждому элементу (селектор *) видимую границу для простоты

вёрстки. После окончания работы удалите этот селектор и свойство.

* {
outline: 1px solid orange;
}

Слайд 4

Практика Верстаем страницу
Добавьте размеры крупным элементам макета. Например, зададим параметры нашего

контейнера:

.container {
width: 1040px;
margin: 0 auto;
padding: 0;
}

Слайд 5

Практика Верстаем страницу
Задайте элементам ширину, измерив её в макете в Фигме

с помощью данных на правой панели инструментов.

element {
width: *px;
}

Слайд 6

Практика Верстаем страницу
Поворот элемента и скругление угла
Ширина (W) и
высота (H) элемента

Слайд 7

Узнаём новое Вкладка Inspect
Блок CSS-кода
Выделенный элемент
Вкладка Inspect
Также для стилизации блоков можно

брать данные из вкладки Inspect. Там будут параметры по каждому элементу в макете. Для этого достаточно этот элемент выделить.

Слайд 8

Практика Верстаем страницу
Также измерьте величину внутренних отступов и запишите их в

свойствах элементов.

element {
padding: *px;
}

Слайд 9

Практика Верстаем страницу
То же самое проделайте с внешними, если видите, что

между элементами должно быть какое-то расстояние.

element {
margin-right: *px;
margin-left: *px;
}

Слайд 10

Практика Верстаем страницу
Также измерьте величину внутренних и внешних отступов, выделяя элемент

и используя Alt и запишите их в свойствах элементов.

element {
padding: *px;
}

element {
margin-right: *px;
margin-left: *px;
}

Слайд 11

Практика Верстаем страницу
Не занимайтесь полной стилизацией элементов макета — это будет

целью следующих занятий.

p, h1, li {
/* оставляем без правок */
}

Слайд 12

Выровняйте элементы в нужном вам порядке
element {
flex-direction: row; /column/
justify-content: flex-start;
align-items: center;
flex-wrap:

wrap;
}

Узнаём новое Алгоритм создания сетки на flexbox

3

Слайд 13

Практика Верстаем страницу
Проверьте надёжность сетки. Блоки не должны выпадать или пропадать

при изменении ширины экрана или добавлении и удалении элементов.
В инструментах разработчика (Ctrl + Shift +I):
добавьте несколько новых пунктов в строку навигации
удалите одно из преимуществ или добавьте еще несколько
добавьте несколько дополнительных меню в футер