Какое значение свойства align-items в контейнере flexbox выставляет все дочерние элементы по центру перпендикулярной оси?
#quiz #CSS #Flexbox
#quiz #CSS #Flexbox
Anonymous Quiz
9%
flex-center
2%
center-axis
22%
justify-center
67%
center
👍2
🌟 Grid vs Flexbox: Что выбрать?
🔹 Основное различие:
Flexbox (Flexible Box) оптимизирован для одномерного макета, то есть по оси X (горизонтальной) или по оси Y (вертикальной).
Grid (Сетка) предназначен для двумерного макета, где у вас есть элементы как в рядах, так и в колонках.
🔹 Когда использовать Flexbox:
Для макетов с одномерными структурами: горизонтальные или вертикальные компоненты (например, навигационные меню, боковые панели).
Если вам нужна большая гибкость в распределении пространства и выравнивании элементов.
Когда порядок элементов имеет значение.
🔹 Когда использовать Grid:
Для макетов с двумерными структурами: сетки с рядами и колонками.
Когда нужно разместить элементы по определенным линиям или областям.
Для более сложных и детализированных макетов.
🔹 Что лучше?
Вопрос "что лучше" не совсем корректен. Эти две технологии дополняют друг друга! Их можно использовать вместе в одном проекте. Выбор зависит от конкретной задачи, которую вы решаете.
📌 Заключение: Flexbox и Grid предоставляют разные инструменты для разных ситуаций. Понимание их основных принципов поможет вам правильно выбрать подходящий инструмент для вашего макета. 🛠️🎨
#ОбучающийПост #CSS
🔹 Основное различие:
Flexbox (Flexible Box) оптимизирован для одномерного макета, то есть по оси X (горизонтальной) или по оси Y (вертикальной).
Grid (Сетка) предназначен для двумерного макета, где у вас есть элементы как в рядах, так и в колонках.
🔹 Когда использовать Flexbox:
Для макетов с одномерными структурами: горизонтальные или вертикальные компоненты (например, навигационные меню, боковые панели).
Если вам нужна большая гибкость в распределении пространства и выравнивании элементов.
Когда порядок элементов имеет значение.
🔹 Когда использовать Grid:
Для макетов с двумерными структурами: сетки с рядами и колонками.
Когда нужно разместить элементы по определенным линиям или областям.
Для более сложных и детализированных макетов.
🔹 Что лучше?
Вопрос "что лучше" не совсем корректен. Эти две технологии дополняют друг друга! Их можно использовать вместе в одном проекте. Выбор зависит от конкретной задачи, которую вы решаете.
📌 Заключение: Flexbox и Grid предоставляют разные инструменты для разных ситуаций. Понимание их основных принципов поможет вам правильно выбрать подходящий инструмент для вашего макета. 🛠️🎨
#ОбучающийПост #CSS
🔥2
Привет всем! 🖐 Недавно я побывал на Tinkoff Frontend BBQ Party. Три интересных доклада, вкусная еда, освежающие напитки и, самое главное, общение с коллегами. Всё это абсолютно бесплатно после регистрации!
Такие мероприятия - это возможность:
1️⃣ Расширять свой кругозор. С каждым новым докладом и разговором вы узнаете что-то новое.
2️⃣ Нетворкинг. Заводите новые полезные знакомства, которые могут помочь в карьере или просто стать вашими друзьями.
3️⃣ Делиться опытом. Не стесняйтесь рассказывать о своем опыте и получать обратную связь.
В нашем городе IT-сообщество очень активно. Часто проходят хакатоны, где можно попробовать свои силы в нереальных условиях, "IT завтраки", где мы, обсуждая новости индустрии, наслаждаемся утренним кофе в хорошей компании, а также круглые столы, где, укутавшись в атмосферу пиццы и лимонада, мы обсуждаем горячие темы.
Присоединяйтесь к IT-сообществу, берите от него максимум! Ведь это не только об обучении и работе, но и о чудесной атмосфере, дружелюбии и вдохновении!
Такие мероприятия - это возможность:
1️⃣ Расширять свой кругозор. С каждым новым докладом и разговором вы узнаете что-то новое.
2️⃣ Нетворкинг. Заводите новые полезные знакомства, которые могут помочь в карьере или просто стать вашими друзьями.
3️⃣ Делиться опытом. Не стесняйтесь рассказывать о своем опыте и получать обратную связь.
В нашем городе IT-сообщество очень активно. Часто проходят хакатоны, где можно попробовать свои силы в нереальных условиях, "IT завтраки", где мы, обсуждая новости индустрии, наслаждаемся утренним кофе в хорошей компании, а также круглые столы, где, укутавшись в атмосферу пиццы и лимонада, мы обсуждаем горячие темы.
Присоединяйтесь к IT-сообществу, берите от него максимум! Ведь это не только об обучении и работе, но и о чудесной атмосфере, дружелюбии и вдохновении!
🔥5
Всем привет, встретил такой вот интересный сайт для изучения git. И не нужно никаких курсов проходить💪
https://learngitbranching.js.org/?locale=ru_RU
https://learngitbranching.js.org/?locale=ru_RU
learngitbranching.js.org
Learn Git Branching
An interactive Git visualization tool to educate and challenge!
🔥6❤1
Какой из следующих методов не мутирует (не изменяет) исходный массив?
Anonymous Quiz
16%
push()
24%
sort()
49%
slice()
12%
pop()
Мы все знаем, как сложно иногда взяться за крупную задачу, особенно когда перед глазами множество деталей. Но давайте взглянем на это с другой стороны и попробуем разбить её на более мелкие и управляемые кусочки!
🎯 Задача: Создать интерактивную галерею с возможностью просмотра, добавления и удаления изображений.
1️⃣ HTML:
Создать структуру галереи: контейнер, блоки для изображений, кнопки управления.
Реализовать форму добавления новых изображений: поле для ссылки, кнопка отправки.
2️⃣ CSS:
Оформление основного контейнера галереи: отступы, рамка, тени.
Стилизация блоков с изображениями: размеры, рамки, анимации при наведении.
Оформление формы и кнопок: цвета, шрифты, эффекты при нажатии.
3️⃣ JavaScript:
Функционал загрузки изображений: принимать ссылку, создавать новый блок с изображением.
Возможность удалять изображения: кнопка удаления, функция удаления из DOM.
Эффекты просмотра: увеличение при клике, слайд-шоу.
💡 Каждый из вышеперечисленных пунктов также можно разбить на более мелкие задачи. Например, "стилизация блоков с изображениями" может включать в себя задачи на установку размеров, добавление рамок и так далее.
🔑 Разбивая сложные задачи на маленькие, вы делаете процесс разработки более понятным и организованным. Каждая маленькая задача становится конкретной, и вы можете сосредоточиться на ней, не отвлекаясь на другие детали. Это помогает не только быстрее завершать работу, но и делать её качественнее!
#СоветДня
🎯 Задача: Создать интерактивную галерею с возможностью просмотра, добавления и удаления изображений.
1️⃣ HTML:
Создать структуру галереи: контейнер, блоки для изображений, кнопки управления.
Реализовать форму добавления новых изображений: поле для ссылки, кнопка отправки.
2️⃣ CSS:
Оформление основного контейнера галереи: отступы, рамка, тени.
Стилизация блоков с изображениями: размеры, рамки, анимации при наведении.
Оформление формы и кнопок: цвета, шрифты, эффекты при нажатии.
3️⃣ JavaScript:
Функционал загрузки изображений: принимать ссылку, создавать новый блок с изображением.
Возможность удалять изображения: кнопка удаления, функция удаления из DOM.
Эффекты просмотра: увеличение при клике, слайд-шоу.
💡 Каждый из вышеперечисленных пунктов также можно разбить на более мелкие задачи. Например, "стилизация блоков с изображениями" может включать в себя задачи на установку размеров, добавление рамок и так далее.
🔑 Разбивая сложные задачи на маленькие, вы делаете процесс разработки более понятным и организованным. Каждая маленькая задача становится конкретной, и вы можете сосредоточиться на ней, не отвлекаясь на другие детали. Это помогает не только быстрее завершать работу, но и делать её качественнее!
#СоветДня
🔥3
Anonymous Quiz
7%
<noscripting>
5%
<js>
85%
<noscript>
2%
<javanoscript>
Anonymous Quiz
12%
padding
0%
space
0%
border-gap
88%
margin
Привет всем🤚
Я подписан на рассылку HH на почту. Пришло письмо hh Карьера, типо у них бета версия и можно посмотреть путь для становления в любой профессии!
Я немного потыкал, в целом прикольно. Можете тоже глянуть😄
https://career.ru/
Я подписан на рассылку HH на почту. Пришло письмо hh Карьера, типо у них бета версия и можно посмотреть путь для становления в любой профессии!
Я немного потыкал, в целом прикольно. Можете тоже глянуть😄
https://career.ru/
👍3
Anonymous Quiz
81%
push()
14%
add()
5%
append()
0%
concat()
👍4
Новое видео на канале! Это мое мнение, я не претендую на истину. В свое время меня эта идея очень выручала. Пишите в комментарии ваше мнение🧐
https://youtu.be/-6o2_yg5Rqg
https://youtu.be/-6o2_yg5Rqg
YouTube
Разоблачение Программистов. Технарей не Существует!
В этом видео я делюсь своей личной историей и мыслями о том, как стать программистом, даже если вы исходно не считаете себя "технарём". На примере своего пути, я демонстрирую, что важнее всего в обучении программированию - это не специальные навыки или таланты…
🔥5🤔1
Если у элемента установлено значение box-sizing: border-box;, что включается в его общую ширину?
#quiz #CSS
#quiz #CSS
Anonymous Quiz
7%
Только контент
9%
Контент и padding
57%
Контент, padding и border
27%
Все вышеуказанное + margin
👍2
Forwarded from Архив Разработчика
Мержевич_В_Вёрстка_веб_страниц_2.pdf
7.4 MB
Книга "Верстка веб-страниц"
👍4