Frontend with Tedu


Гео и язык канала: Украина, Русский
Категория: Курсы и гайды


Добро пожаловать в наш телеграмм канал с бесплатными курсами по веб разработке. Тут мы разбираем и практикуемся с такими штуками как JavaScript, HTML/CSS, React и не только.
Подписывайся и учись вместе с нами!

Связанные каналы

Гео и язык канала
Украина, Русский
Категория
Курсы и гайды
Статистика
Фильтр публикаций


КАК ПОЛЬЗОВАТЬСЯ FIGMA?

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

Прикрепляю простой ролик по обучению работы с Figma, после разбора и практики, перейди к созданию своего первого сайта 😍

Вот твой первый сайт: https://www.figma.com/file/gEzUlX7J4TCABGzFq4oGua/Figma-Land?type=design&node-id=0-3519&mode=design&t=E5HsGIo7My4bTc6A-0

Используй все необходимые подсказки для создания этого сайта. Он обязательно должен быть адаптивным 😳

Если тебе понадобятся подсказки нажимай на смайл за компьютером 👨‍💻
Удачи ❗️


НО СНАЧАЛА...

Давай ещё попрактикуемся? 😈

Цель: Создать макет из карточек пользователей с использованием Flexbox для выравнивания и распределения элементов. Все необходимо сделать на flex ‼️

Держи структуру HTML:






User Cards





Иван Иванов
Возраст: 25






Так же при уменьшении экрана карточка должна переносится вниз, если не хватает места 👨‍💻

Дизайн на твой вкус 🍑


Ну что, ты готов перейти к JavaScript? 😎
Опрос
  •   Да 🥳
  •   Нет ☹️
  •   Не знаю 🤷
  •   Памагити 🫠
  •   Это ещё что? 😐
35 голосов


Какой элемент устанавливает гибкое пространство между элементами Flexbox?
Опрос
  •   gap
  •   margin
  •   padding
  •   flex-gap
37 голосов


Какое значение свойства flex-direction создает расположение элементов справа налево?
Опрос
  •   row
  •   column
  •   row-reverse
  •   column-reverse
34 голосов


Какой атрибут Flexbox используется для выравнивания элементов вдоль поперечной оси?
Опрос
  •   order;
  •   justify-content;
  •   align-items;
  •   flex-direction;
40 голосов


Какое свойство используется для выравнивания элементов вдоль главной оси?
Опрос
  •   align-items;
  •   flex-wrap;
  •   justify-content;
  •   flex-flow;
37 голосов


Какое свойство Flexbox задает направление осей внутри контейнера?
Опрос
  •   flex-direction;
  •   align-items;
  •   justify-content;
  •   order;
34 голосов


Какое свойство используется для создания контейнера Flexbox?
Опрос
  •   display: block;
  •   display: flex;
  •   display: inline;
  •   display: grid;
39 голосов


Какое значение свойства grid-template-columns создаст три столбца, первый с шириной 100 пикселей, второй займет все доступное пространство, а третий будет автоматической ширины?
Опрос
  •   "1fr 1fr 1fr"
  •   "auto 1fr auto"
  •   "100px 1fr auto"
  •   "100px auto"
33 голосов


Какое свойство используется для выравнивания элементов внутри ячеек сетки по вертикали?
Опрос
  •   align-items
  •   justify-items
  •   vertical-align
  •   align-self
37 голосов


Какое свойство задает выравнивание содержимого ячеек сетки вдоль горизонтальной оси?
Опрос
  •   justify-content
  •   align-content
  •   justify-items
  •   align-items
34 голосов


Какое свойство определяет порядок элементов в сетке, без изменения их физической позиции в разметке?
Опрос
  •   order
  •   grid-order
  •   place-order
  •   grid-item-order
26 голосов


Каким свойством задаются размеры столбцов и строк в сетке?
Опрос
  •   grid-size
  •   grid-dimensions
  •   grid-sizes
  •   grid-template-columns и grid-template-rows
28 голосов


Какой из следующих значений свойства grid-template-areas определяет ячейку, которая занимает два столбца и две строки
Опрос
  •   "header header"
  •   "main main"
  •   "sidebar sidebar"
  •   "footer footer"
26 голосов


Какой CSS-селектор используется для выбора всех элементов внутри контейнера с использованием Grid Layout?
Опрос
  •   container > *
  •   container + *
  •   container ~ *
  •   container *
32 голосов


Какое свойство определяет количество пространства между ячейками в сетке?
Опрос
  •   grid-gap
  •   gap
  •   space-between
  •   grid-space
38 голосов


Какое свойство используется для установки количества столбцов в сетке?
Опрос
  •   grid-columns
  •   grid-template-areas
  •   grid-column-count
  •   columns
43 голосов


Что из следующего НЕ является свойством CSS Grid?
Опрос
  •   grid-template-columns
  •   grid-gap
  •   flex-direction
  •   grid-template-rows
39 голосов


🤗 ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ И УПРАВЛЕНИЕ ПРОМЕЖУТКАМИ 🤗

1️⃣ Контейнер сетки (Grid Container): Это родительский элемент, который содержит элементы сетки.

2️⃣ Элементы сетки (Grid Items): Это дочерние элементы контейнера сетки.

3️⃣ Разметка сетки (Grid Template): Это определение количества и размеров ячеек в сетке.

4️⃣ Выравнивание элементов:

➖ justify-items и align-items: Позволяют выравнивать содержимое ячеек по горизонтали и вертикали соответственно.

➖ justify-self и align-self: Позволяют переопределить выравнивание для конкретного элемента сетки внутри его ячейки.

5️⃣ Промежутки между элементами:

➖ grid-gap (или gap): Это свойство устанавливает промежутки между ячейками сетки. Оно имеет два значения: первое для вертикальных промежутков, второе для горизонтальных.

➖ grid-row-gap и grid-column-gap: Позволяют устанавливать отдельные вертикальные и горизонтальные промежутки.

➖ grid-template-rows и grid-template-columns: Здесь вы можете задать размеры ячеек, влияющие на промежутки между элементами.

6️⃣ Выравнивание контейнера сетки:

➖ justify-content и align-content: Определяют, как контейнер выравнивает сетку внутри себя по горизонтали и вертикали соответственно.

➖ place-content: Сокращенное свойство, объединяющее justify-content и align-content.

Вот пример простой сетки с выравниванием и промежутками:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
gap: 20px;
}
.grid-item {
background-color: lightgray;
padding: 20px;
}

В этом примере мы создали контейнер сетки с тремя колонками, выравниванием содержимого по центру и промежутком в 20 пикселей между элементами. Используя эти простые свойства, ты сможешь легко управлять выравниванием элементов и промежутками в вашей сетке с помощью CSS Grid 😉

Показано 20 последних публикаций.

183

подписчиков
Статистика канала