Одну секунду
Что-то сучилось. Попробуйте еще раз.
Практика по flexbox смотреть последние обновления за сегодня на .
Продолжаем учить верстку на флексах и пришло время практического занятия. Я сверстаю небольшой макет демонстрируя возможности модуля flexbox применяя его в разный ситуациях. Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера. 🔴 Файлы урока: 🤍 🔴 Макет 🤍 🔴 Шпаргалка по Flexbox: 🤍 🔴 Весь плейлист по FlexBox: 🤍 Дополнительно, игра flexboxfroggy: 🤍 Методология БЭМ за 17 минут: 🤍 Sublime Text 3 настройка установка плагины: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
#YauhenK #webDev #CSS #Flexbox #ityoutubersru В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы. ✒ Репозиторий курса: ✔ GitHub: 🤍 ✒ Полный список готовых и планируемых курсов: ✔ Trello: 🤍 ✒ Автор курса: ✔ YouTube: 🤍 ✔ Instagram: 🤍 ✔ Twitter: 🤍 ✔ VK: 🤍 ✔ LinkedIn: 🤍 ✔ GitHub: 🤍 ✔ VK (Группа): 🤍 ✒ Поддержать развитие канала: ✔ YouTube-спонсорство: 🤍 ✔ Patreon: 🤍
В этом курсе мы поработаем с flex box css и кратко рассмотрим все свойства! Flexbox, flex css уроки для начинающих Игра для закрепления знаний - 🤍 Поддержать меня и мой канал вы можете по ссылкам ниже. Qiwi кошелек - 🤍 Яндекс деньги - 🤍
Шпаргалка по прохождению Flexbox Defense: 🤍 Подписывайся на альтернативные каналы: — 🤍 — 🤍 Закрепляем свои знания по Flexbox CSS вместе с обучающей игрой Flexbox Defense. В ней нам предстоит использовать флексбокс-свойства, чтобы расставить башни и отбить наступление врагов. Всего в данной игре 12 уровней от простого к более сложному. Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения. 0:00 - Вступление 0:43 - 1. Знакомство с justify-content, выравнивание по главной оси 2:05 - 2. Варианты использования justify-content 3:18 - 3. Значение space-between, равномерное распределение flex-элементов 4:29 - 4. Свойство align-items, выравнивание по поперечной оси 6:02 - 5. Выравнивание по главной и поперечной оси 7:51 - 6. Закрепление материала 8:49 - 7. Свойство flex-direction, вращение главной оси 10:47 - 8. Использование flex-direction и align-items 12:04 - 9. Вспоминаем все изученные ранее свойства 14:11 - 10. Свойство order, изменение порядка элементов 16:16 - 11. Свойство align-self, выравнивание элемента по поперечной оси 17:32 - 12. Финальный урок, применяем все свои накопленные навыки 19:28 - Послесловие Если тебе интересна данная тематика, подпишись на канал! До скорых встреч!
Привет!📢 В этом уроке я расскажу вам о FLEXBOX. Всё о flexbox и ПРАКТИКА. В ЭТОМ уроке только практика!) FLEXBOX – это Css свойство, это способ компоновки элементов. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами. Модуль flexbox позволяет решать следующие задачи: ▶ Переопределять порядок отображения элементов. ▶ Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство. ▶ Решать проблему с горизонтальным и вертикальным центрированием. ▶ Переносить элементы внутри контейнера, не допуская его переполнения. ▶ Создавать колонки одинаковой высоты и др. НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :) Желаю приятного обучения! 🔥 Также рекомендую эти уроки: 📢 FLEXBOX. Всё о flexbox в одном уроке: 🤍 📢 HTML для начинающих за 33 минуты: 🤍 Таймкоды: 00:00 – Интро 00:39 – Начало работы 01:21 – Разметка 02:40 - CSS, Flexbox 09:28 - 🤍media, адаптация 11:31 - Аутро ▶ Телеграм: 🤍 ▶ Мой канал по видеомонтажу: 🤍 📢 Автор видеоурока: Дмитрий Колотильщиков #html #верстка #flexbox
Продолжаем уроки по #Flexbox #CSS, тут мы узнаем что такое #Оси и как с ними работать, а также разберем #многострочность и #многоколоночность flex-элементов. Описание свойств - 🤍 Практический пример - 🤍 Заготовка к уроку - 🤍 Всю теорию закрепляем на практическом примере где сделаем простенькую верстку одной страницы. В уроке познакомимся со свойством #flex-direction, #flex-wrap. Реквизиты для поддержки канала: WMR - R165181087249 WMZ - Z138569415925 PayPal - 🤍 Яндекс - 🤍 Сбербанк - 4276-3000-2291-1211 Во время урока я использую: Документацию по css и flexbox Редактор #PhpStorm *Видео метки*: [01:11] - Свойство flex-direction [03:22] - Свойство display [03:43] - Свойство flex-wrap [05:49] - Практический пример по flexbox [07:08] - Каркас и оформление блоков [20:11] - Адаптируем страницу #media Обсуждение видео: 🤍 Подписка на канал: 🤍 Видео сборник: 🤍 FAQ - Ответы на Ваши вопросы: 🤍 Голосование - 🤍 *Другие видео на канале DWSTV*: JavaScript Основы - 🤍 Сайт с нуля - 🤍 Уроки по #CSS - 🤍 1С Битрикс работа с сайтом - 🤍 Управление системой Битрикс - 🤍 Настройки сайта 1С Битрикс - 🤍 Добавляйтесь к нам в друзья: Сайт видео-уроков: 🤍 Канал в VK автора уроков: 🤍
Мы начинаем новую серию видеоуроков практики Flexbox. Flexbox это целый модуль и не только одно свойство css3. Flexbox создан для улучшения выравнивания элементов, направления и порядка в контейнере. Практика flexbox это лучший способ понять флексбоксы. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Из данного урока вы узнаете, что такое #Flexbox #CSS и как при помощи его выравнивать элементы по горизонтали и вертикали. Описание свойств - 🤍 Практический пример - 🤍 В дальнейшем закрепляем знания на практическом примере где сделаем простенькую анимацию. Flexbox CSS, свойства с которыми познакомимся #display, #justify-content, #align-items. Реквизиты для поддержки канала: WMR - R165181087249 WMZ - Z138569415925 PayPal - 🤍 Яндекс - 🤍 Сбербанк - 4276-3000-2291-1211 Во время урока я использую: Документацию по css и flexbox Редактор #PhpStorm *Видео метки*: [00:22] - Делаем плацдарм по flexbox [03:22] - Свойство display [06:18] - Свойство justify-content [07:23] - Свойство align-items [09:20] - Практика по flexbox Обсуждение видео: 🤍 Подписка на канал: 🤍 Видео сборник: 🤍 FAQ - Ответы на Ваши вопросы: 🤍 Голосование - 🤍 *Другие видео на канале DWSTV*: JavaScript Основы - 🤍 Сайт с нуля - 🤍 Уроки по #CSS - 🤍 1С Битрикс работа с сайтом - 🤍 Управление системой Битрикс - 🤍 Настройки сайта 1С Битрикс - 🤍 Добавляйтесь к нам в друзья: Сайт видео-уроков: 🤍 Канал в VK автора уроков: 🤍
Практика решает, поэтому в этом ролике разбираем примеры использования флексбоксов (flexbox) в типовых ситуациях. Часть первая. Навигация по видео: 01:26 Простое центрирование внутри блока. 04:41 Хедер на флексбоксе. 08:22 Многострочный список элементов. 17:39 Простейший скелет сайта. 20:22 Изменение взаимного расположения блоков при адаптации. Ссылка на репозиторий: 🤍 ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: 🤍 Телеграм для связи по курсу: 🤍makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату 🤍
Большое спасибо за просмотр! Последние 2 месяца я почти не отдыхал. Я готовил для Вас два пушечных интенсива. Самое крутое они также будут входить в общую подписку от 3 мес. за 590 руб. Скорее залетай, если хочешь научиться писать приложения на React, писать backend на Node.js или просто верстать сайты. ► Интенсив React с нуля (приложение для тренировок) - 🤍 ► Интенсив Node.js + Express - Backend с нуля - 🤍 ► Интенсив по верстке сайта с 0 - 🤍 А также это крутая возможность поддержать автора. Сегодня я постараюсь за 20 минут рассказать и показать на примерах, что такое FlexBox и как его использовать. Ставь лайк, если было полезно! Курс FlexBox (5 дней премиум за 1 руб.) - 🤍 А так же ответишь на свой вопрос, что лучше Bootstrap или FlexBox? Можно сказать, что этот ролик соединяет в себе все уроки по flexbox. Разберем такие свойства как: grid, flex basis, align items, justify content и т.д. Это технология позволит навсегда избавится от float. Все что тебе нужно, это базовые знания html5, css3. Флексбокс. - ➡️Научим разрабатывать сайты - 🤍 ➡️Personal Instagram - 🤍 ➡️Personal YT - 🤍 ➡️Разработаем сайт под ключ - 🤍 ➡️Мой сетап VS Code - 🤍 ➡️Мой сетап Sublime Text 3 - 🤍 Немного обо мне: меня зовут Максим, я уже 7 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов redstudio.world и htmllessons.ru. Последний, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. На данный момент, мой стэк технологий выглядит так: html, css, javascript, jquery, bootstrap, flex, svg, vuejs, php, laravel и различные cms. Основная миссия нашей команды – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы нас поддержите и подпишитесь на наш канал. Спасибо 😊
Шпаргалка по прохождению Flexbox Froggy: 🤍 Подписывайся на альтернативные каналы: — 🤍 — 🤍 Рассмотрим такую популярную обучающую игру по Flexbox CSS, как Flexbox Froggy. В ней нам предстоит использовать флексбокс-свойства, чтобы расставить разноцветных лягушек по своим местам. Данный тренажер содержит 24 уровня от простого к более сложному. Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения. 0:00 - Об игре Flexbox Froggy 0:33 - 1. Знакомство с justify-content, смещение к концу главной оси 1:17 - 2. Выравнивание по центру главной оси 1:42 - 3. Значение space-around, равномерное распределение с отступами 2:04 - 4. Значение space-between, равномерное распределение с прижатием 2:21 - 5. Свойство align-items, выравнвиание по поперечной оси 3:08 - 6. Выравнивание элемента по центру 3:38 - 7. Выравнивание элементов по обеим осям 4:06 - 8. Свойство flex-direction, вращение главной оси 4:42 - 9. Вертикальное положение главной оси 5:11 - 10. Использование flex-direction и justify-content по горизонтали 5:53 - 11. Использование flex-direction и justify-content по вертикали 6:24 - 12. Разворот по вертикали с равномерным распределением 7:01 - 13. Закрепление изученных свойство 7:44 - 14. Свойство order, порядок элементов 8:37 - 15. Отрицательный порядок элемента 8:54 - 16. Свойство align-self, выравнивание элемента по поперечной оси 9:32 - 17. Свойства order и align-self 10:06 - 18. Свойства flex-wrap, многострочный макет 10:40 - 19. Многострочный макет по вертикали 11:07 - 20. Свойство flex-flow, направление потока 11:33 - 21. Свойство align-content, выравнивание рядов 12:10 - 22. Прижатие рядов в концу поперечной оси 12:30 - 23. Вертикальный макет с выравниванием рядов по центру 13:10 - 24. Финальное испытание на знание свойств Flexbox 14:27 - Послесловие #FlexboxFroggy Если тебе интересна данная тематика, подпишись на канал! Для меня это также станет дополнительным стимулом продолжать свою работу. Также жду вас на моем сайте 🤍 Здесь вы найдете подробные интерактивные курсы по веб-разработке.
Всем привет, мы продолжаем уроки Flexbox практика и в этом уроке я покажу как сделать адаптивный шаблон сайта на flexbox своими руками и очень просто и быстро без использования каких либо фреймворков и сеток. Flexbox это уникальная система которая очень поможет вам в разработке сайтов ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Привет! Это третий урок из моего курса по дисциплиние "Фронтенд-разработка" для Университета ИТМО. В этом ролике рассказываю об основах языка CSS. Смотреть остальные уроки из курса: 🤍 Репозиторий по дисциплине: 🤍 В рамках первой практической работы вам предстоит изучить работу CSS grid и CSS flexbox в игровой форме, пройдя две игры: 🤍 🤍 Полезные ссылки: Мой телеграм-канал: 🤍 Мой гитхаб (сюда ставить звёздочки): 🤍 Мой блог: 🤍 Лекция в текстовом формате: 🤍 Селекторы MDN: 🤍 Руководство по CSS MDN: 🤍 Ссылки по CSS Flexbox: Отличный перевод на Хабре: 🤍 Руководство на MDN: 🤍 Ссылки по CSS Grid: Отличный гайд на хабре: 🤍 Руководство на MDN: 🤍 Видео Вадима Макеева про использование CSS Grid и CSS Flexbox: 🤍 Таймкоды: 00:00 Вступление 00:39 Что такое CSS? 02:03 Декларативность 02:50 Языковые конструкции 03:32 Селекторы 06:51 Примеры 09:28 Что почитать? 10:41 CSS Grid, CSS Flexbox 12:28 Задание на первую практическую 13:50 Заключение
Исходные материалы: 🤍 Подписывайтесь на альтернативные каналы: — 🤍 — 🤍 Четвертое видео из серии уроков по верстке реального макета. В этом уроке мы выполним верстку второго и третьего блоков сайта. Рассмотрим интересные примеры использования Flexbox в различных ситуациях, а также затронем важность разметки. Кроме этого, мы не используем в нашей разметке ни одного элемента DIV. Поскольку урок для начинающего и среднего уровня, мы не будем использовать препроцессоров и шаблонизаторов, только чистые HTML и CSS. Для наименования классов будем использовать БЭМ-нейминг. 0:00 - Приветствие 0:28 - Разметка блока офферов на HTML 5:50 - Оформление блока офферов на CSS 13:50 - Верстка блока галереи на HTML 15:43 - Оформление блока галереи на CSS Если тебе интересна данная тематика, подпишись на канал! До скорых встреч!
Мы продолжаем уроки flexbox практика верстка и в этом уроке мы с помощью flexbox сверстаем посты для блога так же адаптивно. Flexbox верстка с практикой отличный вариант для наработки навыка верстки! ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Мы продолжаем уроки flexbox практика и в этом видео мы продолжим верстать сайты адаптивно. В этом уроке flexbox мы сделаем верстку сайта адаптивно с тремя колонками и изменим их при разрешении экрана меньше 800px. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Привет!📢 В этом уроке мы верстаем целую страницу сайта с нуля и с адаптивностью под мобильные устройства. Верстаем страницу с помощью css flexbox. Что важно, для адаптивности не используем ни одного медиа запроса (🤍media). Также расскажу подробнее про css свойство background. Этот урок - хорошая практика для вас в закреплении HTML, CSS, FLEXBOX материалов, по которым также у меня есть уроки. Все необходимые файлы к уроку и сам файл проекта прикреплены под этим видео в моём телеграм-канале ▶ Telegram: 🤍 НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :) Желаю приятного обучения! 🔥 Таймкоды: 00:00 – Интро, обзор проекта 03:21 – Начало работы 04:28 – Подключение шрифтов 05:39 –Изображение в рамке. Свойство BACKGROUND 10:28 – Фон для заголовков 14:16 – Блок про метрополитен. FLEXBOX 21:57 – Блок «куда можно сходить» 25:05 – Кнопка 27:23 – Background fixed 29:44 - Напутствие Также тебе могут быть полезны эти уроки: 📢 HTML для начинающих за 33 минуты: 🤍 📢 CSS для начинающих + практика за 24 минуты: 🤍 📢 FLEXBOX. Всё о flexbox в одном уроке: 🤍 📢 FLEXBOX. Всё о flexbox | Практика: 🤍 ▶ Телеграм: 🤍 ▶ Мой канал по видеомонтажу: 🤍 📢 Автор видеоурока: Дмитрий Колотильщиков #html #верстка #flexbox
Исходники к видео: 🤍 Подписывайся на альтернативные каналы: — 🤍 — 🤍 Продолжаем практику по Flexbox CSS. В уроке мы с вами создадим игральные кости, используя следующие навыки: — псевдоэлементы — псевдоклассы — и конечно же, непосредственно Flexbox Таймкоды урока: 0:00 - Вступление 0:24 - Базовая разметка HTML 0:54 - Базовое оформление CSS 2:55 - Первый кубик 3:26 - Второй кубик 4:31 - Третий кубик 5:21 - Четвертый кубик 6:56 - Пятый кубик 8:05 - Шестой кубик 9:28 - Заключительные слова Если тебе интересна данная тематика, подпишись на канал! Для меня это также станет дополнительным стимулом продолжать свою работу. Также жду вас на моем сайте 🤍 Здесь вы найдете подробные интерактивные курсы по веб-разработке.
Мы продолжаем уроки flexbox верстка и в этом уроке мы сверстаем галерею адаптивно! Что самое главное мы сделаем это очень быстро, за считанные минуты. Галерея flexbox получится с интересными решениями верстки. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
#YauhenK #webDev #CSS #Flexbox #ityoutubersru В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы. ✒ Репозиторий курса: ✔ GitHub: 🤍 ✒ Timeline: ✔ 0:00 - Введение ✔ 2:39 - Основные понятия ✔ 8:12 - Направление осей ✔ 12:36 - Обёртка элементов и отступы ✔ 18:46 - Выравнивание вдоль главной оси ✔ 25:07 - Выравнивание вдоль поперечной оси ✔ 29:09 - Многострочное выравнивание ✔ 33:06 - Индивидуальное выравнивание элементов ✔ 37:36 - Размеры элементов ✔ 43:06 - Определение порядка элементов ✔ 48:00 - Вложенность. Обёртка элементов с размерами ✔ 53:29 - Практические примеры использования Flexbox ✒ Полный список готовых и планируемых курсов: ✔ Trello: 🤍 ✒ Автор курса: ✔ YouTube: 🤍 ✔ Instagram: 🤍 ✔ Twitter: 🤍 ✔ VK: 🤍 ✔ LinkedIn: 🤍 ✔ GitHub: 🤍 ✔ VK (Группа): 🤍 ✒ Поддержать развитие канала: ✔ YouTube-спонсорство: 🤍 ✔ Patreon: 🤍
Мы продолжаем уроки flexbox практика и в этом уроке flexbox css я покажу как сделать header и навигацию для сайта. Обратите внимание насколько быстро и легко получится сделать данный вариант навигации сайта да и вообще как сделать сайт с применение flexbox очень быстро и легко. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Качай макет сайта PSD тут 🤍 Получить нужные материалы для любого веб-разработчика - 🤍 Получить консультацию куратора - 🤍 Связаться с автором: 🤍 telegram: 🤍 Мой блог: 🤍 Больше контента в нашей группе Вконтакте 🤍 Присоединяйтесь к нашему сообществу Discord 🤍 Мой канал в telegram "Лысый из браузера" 🤍 Еще у нас скоро стартует курс обучения. Напиши моему ассистенту: 🤍 - Я использую хостинг Link Host с 2014 года 🤍 Телеграм-каналы с дизайн-макетами для тренировки вёрстки: 🤍 🤍 🤍 Каналы с крутыми фичами на CSS и JavaScript: 🤍 🤍 Канал с терминами для айтишников: 🤍 Канал, где публикуют ссылки на полезные сервисы и сайты: 🤍
Промокод на скидку 15% на все курсы ITVDN- H94BCAB Курс по Flexbox - 🤍 Материалы вебинара - 🤍 Знание основ работы с Flexbox CSS модулем входит в набор стандартных требований на позицию верстальщика, а зачастую и frontend разработчика. Технология Flexbox используется повсеместно, она стала популярной благодаря тому, что существенно упрощает и ускоряет верстку сайта. На вебинаре вас ждет знакомство с технологией Flexbox, обзор возможностей и разговор о том, какие аспекты создания сайта она решает. А также практическая часть, в которой мы все покажем на реальных работающих примерах. План вебинара: - Как работает технология Flexbox. - Примеры элементов сайтов на Flexbox. - Практика использования Flexbox. Верстка сайта. - Что с Flexbox не получится выполнить. - Подборка полезных ресурсов и статей по Flexbox. Ответы на вопросы. 00:00 Вступление. Знакомство с автором 2:37 План вебинара 3:47 Видеокурсы по основам верстки от ITVDN 5:26 Принципы построения разметки Flex 12:12 Примеры работы технологии FlexBox 47:46 Ответы на вопросы 50:20 Что будем реализовывать 51:30 Анализ страницы 53:52 Новый проект. Скачивание картинок, используемых в макете 59:48 Пишем код. Создание шапки сайта (header) 1:28:00 Адаптация шапки под планшетную версию 1:33:36 Адаптация шапки под мобильную версию 1:39:23 Основная секция 1:50:49 Адаптация основной секции под мобильные уст-ва 1:56:20 Секция с информацией об обучении 2:03:10 Адаптация секции под планшет и мобильные уст-ва 2:04:26 Верстка footer 2:08:28 Что не получится сделать на FlexBox? 2:10:49 Вопросы и ответы #flexbox #css #верстка
Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом уроке мы будем верстать раздел о компании. Я покажу как сделать три столбца на CSS Flexbox, а так же сделаем адаптивную версию сайта с помощью медиа запросов 🤍media на CSS для разных устройств. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 Курс "Верстка сайта с нуля по макету из Figma": 🤍 Макет сайта Figma: 🤍 ▶▶ Видео, которые будут вам полезны ◀◀ Блочная модель документа: 🤍 Блочная верстка, практика: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor
Начинаем учить верстку на флексах (flexbox )! Чтобы обучение было максимально эффективным я создал отдельный плейлист куда помещу целую серию выпусков. Последний из них будет полностью посвящен практическим примерам верстки на flex. В нем же ты получишь домашку и доступ к супер шпаргалке по FLEXBOX Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера Весь плейлист по FLEXBOX 🤍 0:00 - Вступление 0:18 - Подготовка к уроку 2:08 - display:flex 3:06 - display: inline-flex 3:59 - justufy-content 7:00 - align-items 9:39 - flex-wrap Спасибо Emil Chapchakchi Получить доступ к плюшкам + поддержать канал: 🤍 Telegram канал: 🤍 или 🤍 Telegram чат по верстке: 🤍 (🤍 Instagram: 🤍 Facebook: 🤍 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 «Фрилансер по жизни». Живи, а работай в свободное время! © #фрилансерпожизни #обучение #верстка
В этом уроке мы с вами рассмотрим все основные моменты Flexbox CSS3 в одном видео всего за 20 минут! Мы научимся позиционировать объекты при помощи свойств Flexbox. 1) Урок на сайте: 🤍 2) Расширение Emmet: 🤍 ✔ Основной сайт: 🤍 ✔ - Группа Вк - 🤍 Группа FaceBook - 🤍 Instagram: 🤍 Я в Google+ - 🤍 Страничка Twitter - 🤍 Страничка Вк - 🤍 ✔ Начните зарабатывать на YouTube - 🤍 ✔ Видео по заработку на YouTube - 🤍 Помощь в развитии канала. * Яндекс Деньги: 410014343706921 * Кошельки WebMoney: - Доллар: Z331064341236 - Гривна: U386388718252 - Рубль: R214610220703
В данном видео: разбор теоретической части флексбокса, свойства элементов и контейнера, практика на примере вёрстки элементов, которые используются почти на любом сайте. = Записаться на консультацию: 🤍 Стать спонсором канала: 🤍 = Как сделать сайт с нуля, видео посвящено именно этому вопросу. Существуем множество стандартов верстки сайтов, и если вы хотите узнать, как делается верстка сайта самостоятельно, то подписывайтесь на канал. Здесь вас ждет много полезного контента, который поможет найти ответ на вопрос, как делать верстку сайта. Сегодня у нас уроки flexbox практика. Разберемся как делается верстка с помощью flexbox. Узнаем про использование flexbox плюсы и минусы данного инструмента. Поговорим про свойства flexbox, flexbox контейнер, и как делается верстка сайта на flexbox. Разберем некоторые css flexbox примеры. В общем я думаю получилось небольшое flexbox руководство. Ели вы хотите, что бы flexbox уроки выходили чаще, пишите об этом в комментарии, возможно мы еще сделаем ролики на эту тему. = Игра для практики CSS свойств Flexbox - 🤍 = Подписывайтесь на группу "Программист" в ВК - 🤍 = Telegram Канал - 🤍 Чат - 🤍 = Подписывайтесь в соц. сетях: Facebook - 🤍 VKontakte - 🤍 LinkedIn - 🤍 Twitter - 🤍 Instagram - 🤍 = Мой второй канал: 🤍 = Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только. Больше информации обо мне: 🤍
Основные идеи flexbox. Главная и вспомогательная оси Определение размера элементов: grow shrink basis. Выравнивания элементов. Изменение порядка элементов Адаптивка без media-запросов О вёрстке по сетке. Сетка на основе flexbox. Bootstrap vs Smartgrid. 🤍 Новый поток с 27 января 2017!
Последнее видео в курсе уроков flexbox css практики и в данном уроке мы сверстаем адаптивный макет сайта. Верстка адаптивного макета сайта на самом деле выглядит очень просто. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Как прижать футер к низу страницы за 60 секунд. Быстро и просто прижимаем подвал с помощью FLEX (флексов) 🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): 🤍 🔴 Карта канала: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Курс по верстке: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Instagram: 🤍 🔴 Facebook: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Привет! Сегодня разберем flex свойства, которые на первый взгляд очевидные, но когда начинаешь их применять, сидишь в шоке, что оно не работает, думаешь, это у них что-то не так, я то норм написал)) В общем разберем flex-grow, flex-shrink, flex-basis и будем их использовать верно и максимально точно. Телеграм канал: 🤍 Подробнее про flex: 🤍 Игра: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
Мы продолжаем уроки flexbox практика и сегодня мы продолжим ту часть верстки которую мы сверстали в прошлом уроке flexbox. В этом уроке мы продолжим и сверстаем sidebar сайта с помощью flexbox. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
В текущем видео разберемся с нововведением от #Elementor, а именно Flexbox контейнер. В целом это большой шаг вперед со стороны разработчиков, так как технология #Flexbox сама по себе достаточно современная и позволяет очень просто позиционировать элементы на странице. Ответим на следующие вопросы: 1. Что такое флексбокс контейнер? Какую задачу решает? 2. Как было и как стало? 3. Возможности контейнера. Как правильно использовать при работе с сайтом? 4. Что будет со старыми сайтами? 5. Как включить контейнер в настройках? → Мои любимые инструменты 😍: Elementor Pro: 🤍 Crocoblock: 🤍 Astra: 🤍 SiteGround: 🤍 ⭐️ САЙТ: 🤍 #ElementorWordpress #ContainerElementor #ElementorFlexbox
Исходный код с картинками - 🤍 Шпаргалка по #EMMET - 🤍 В текущем уроке поработаем с изображениями. При помощи #transform и #transition, сделаем по наведению следующую анимацию, изображение немного повернем, увеличим его в размерах, и сделаем его немного бесцветным. С левой стороны будут выезжать два блока с текстовой информацией. В нижней части появляется блок с иконками, которые подключим через сайт #font-awesome. По наведению на иконку сделаем им индивидуальный цвет. Для иконок задействуем #flexbox. Также все блоки будут адаптивны, и подстраиваются под разные форматах экранов. Все это реализуем на #flex #box и #медиа #запросах. Для материальной поддержки канала: WMR - R165181087249 WMZ - Z138569415925 PayPal - paypal.me/dwstv Яндекс - 410011610186118 Сбербанк - 4276-3000-2291-1211 Во время урока я использую: Документацию по #CSS3, HTML5 Редактор #PhpStorm *Видео метки*: [01:08] - Обзор урока [01:53] - Html структура блоков [04:27] - Устанавливаем иконки [06:12] - Cтили оформление изображения [09:15] - Позиционирование текста [10:51] - Добавляем динамуку для картинки [11:32] - Оформляем иконки [15:34] - Адаптируем при помощи flexbox [18:44] - Адаптируем при помощи 🤍media [23:37] - Проверяем результат Обсуждение видео: 🤍 Скачать архив с урока - 🤍 Скачать картинки - 🤍 Урок по плагину EMMET - 🤍 Подписка на канал: 🤍 Видео сборник: 🤍 *Другие видео на канале DWSTV*: JavaScript Основы - 🤍 Сайт с нуля - 🤍 Уроки по #CSS - 🤍 1С Битрикс работа с сайтом - 🤍 Управление системой Битрикс - 🤍 Настройки сайта 1С Битрикс - 🤍 Добавляйтесь к нам в друзья: Сайт видео-уроков: 🤍 Канал в VK автора уроков: 🤍 Канал группы в VK: 🤍 Мы очень рады если видео "#CSS3 #flaxbox #практика | #Эффект при #наведении в #CSS" было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.
Друзья, в видео я затрону начало flexbox модели, мы рассмотрим много css свойств, их особенности, специфичность. Будет раскдадка в один ряд, обсудим случаи с двумя рядами элементов, какие законы работают и так далее. В следующем видео поговорим о более сложных свойствах флексбокс. Марафон для новичков, в котором можно увидить использование флексов на практике: день 1 - 🤍 день 2 - 🤍 день 3 - 🤍 Шпаргалка - 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
Видео: В чем разница между Float, Flexbox и Grid CSS? - 🤍 Пример 1 - 🤍 Пример 2 - 🤍 Пример 3 - 🤍 Пример 4 - 🤍 Пример 5 - 🤍 Пример 6 - 🤍 👇 Тайм-коды: 00:00 Вступление 00:58 Бесплатный практикум по созданию сайтов 01:41 Разница между Float, Flexbox, Grid 02:41 Пример 1 06:18 Пример 2 10:10 Пример 3 11:41 Пример 4 13:52 Пример 5 16:23 Пример 6 19:20 Как сделать выбор между Flexbox и Grid 🔵 Дзен — 🤍 🔵 ВК — 🤍 🔵 Telegram — 🤍 🔵 Чат Telegram — 🤍 🔵 Instagram — 🤍 🔵 TikTok — 🤍 🔴 Задать вопрос — 🤍 🔴 Обучение - 🤍
Промокод на скидку 15% на все курсы ITVDN- H94BCAB Материалы вебинара - 🤍 Flexbox и Grid – технологии, которые широко используются в верстке сайтов и существенно упрощают задачи обеспечения адаптивности. О технологиях: CSS Flexbox (Flexible Box Layout Module) — модель макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами. CSS Grid Layout - система двумерного макета, оптимизированного для дизайна пользовательского интерфейса. Главная идея, лежащая в основе макета сетки, заключается в разделении веб-страницы на столбцы и строки. В образовавшиеся области сетки можно помещать элементы сетки, а управлять их размерами и расположением можно с помощью специальных свойств модуля. В ходе вебинара будут продемонстрированы возможности этих технологий и преимущества их комбинации на практике (в каком случае какую технологию нам необходимо использовать) для верстки адаптивных страниц с Flexbox и Grid. План вебинара: 1) Знакомство с технологиями Flexbox и Grid. 2) Создание desktop версии web-страницы. 3) Добавление медиа запросов на страницу для адаптивности.
Лучший WordPress Шаблон - 🤍 ↓↓↓ *Уроки по Веб Разработке* - 🤍 Хостинг - 🤍 Игра из видео по CSS Flexbox - 🤍 Добавьте меня в друзья 🤍 🤍 🤍 🤍 Шаблоны от Александра Сокирки 🤍 🤍 🤍 🤍 Курсы от Александра Сокирки 🤍 🤍 Быть Программистом 🤍 🤍
Сегодня мы рассмотрим свойство flex-wrap из модуля flexbox. После просмотра этого видео вы будете знать, как работает свойство flex-wrap, какие значения оно может принимать. верстка сайта состоит из блоков, которые иногда должны идти строго в 1 строку, а иногда нужно, чтобы эти блоки переносились на новую строку. В этом нам как раз и поможет свойство flex-wrap В этом видео мы рассмотрим такие значения как - nowrap, wrap, wrap-reverse = Telegram Канал - 🤍 Чат - 🤍 = Подписывайтесь в соц. сетях: Facebook - 🤍 VKontakte - 🤍 LinkedIn - 🤍 Twitter - 🤍 Instagram - 🤍 = Мой второй канал: 🤍 = Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только. Больше информации обо мне: 🤍
.svg){kind=small}
