Одну секунду
Что-то сучилось. Попробуйте еще раз.
Сетки css смотреть последние обновления за сегодня на .
Я покажу как сделать адаптивную CSS сетку с нуля своими силами. Вы узнаете принципы создания адаптивных сеток на CSS. В этом уроке мы сделаем сетку по типу Bootstrap, но намного проще. Адаптивная сетка на CSS делается достаточно просто. Материалы к уроку Адаптивная сетка на CSS: 🤍 Эксклюзив на Boosty - 🤍 Telegram канал - 🤍 Курсы на Stepik - 🤍 Донаты: 1. ЮMoney - 🤍 2. VISA - 4274 3200 3233 1582 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍
Новый взгляд на создание адаптивных красивых сайтов - CSS Grid. В ходе этого видео мы научимся работать с CSS Grid, разберемся что это такое и поймем почему это круче FlexBox! 1) Урок по FlexBox: 🤍 2) Плагин Emmet: 🤍 3) Урок на сайте itProger: 🤍 ✔ Сообщество программистов: 🤍 ✔ - Вступай в группу Вк - 🤍 🚀 Группа FaceBook - 🤍 Instagram: 🤍 Telegram: 🤍 Twitter - 🤍 - Уроки от #GoshaDudar 👨🏼💻 - Все уроки по хештегу #GoshaLessons
Код урока: 🤍 Интенсив по веб-разработке: 🤍 QnA: 🤍 Что должен знать любой веб-разработчик о сетке в верстке фронтенда. Независимо от тог, Bootstrap фреймворк это или что угодно. Вадик научит. © «Хороший программист» #html_css_рецепты
Часто бывает, что в макетах дизайна объект выходит за пределы сетки (ограничивающего контейнера). Я придумал интересное решение и хочу с тобой поделиться. 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Привет! Я часто замечаю, как верстальщики боятся учить и применять CSS Grid, т.к. он кажется чем-то сверх сложным и непонятным. Однако, для простых раскладок элементов гриды гораздо круче, проще и удобнее даже тех же флексов. Ну а почему - рассказываю в видео! Содержание: 00:00 - Интро (важная информация) 03:09 - Делаем сетку через Flexbox 08:07 - Делаем сетку через CSS Grid 10:52 - Выводы 16:52 - Аутро Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Поддержать канал: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Карта канала: 🤍 Яндекс.Дзен: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #flexbox #grid
Разбираемся с гридами в CSS с самого начала на простом примере. Верстаем вместе с display: grid; по-новому. Часть 2: 🤍 Телеграм канал: 🤍
💻 Курс "Профессия HTML верстальщик": 🤍 Старт обучения: 27 Марта 2023 года. ↓↓↓ Тайм-коды ↓↓↓ В этом уроке мы подробно изучим работу с сеткой CSS Grid. Все на простых и понятных примерах. Тайм коды в описании. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 27 Марта 2023 года 💻 Курс "JS Frontend разработчик + React": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 20 Марта 2023 года 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс по верстке сайтов: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт школы ВебКадеми: 🤍 Вконтакте: 🤍 Telegram канал: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Тайм-коды :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 00:00 - Приветствие 00:30 - Основы сетки. Колонки, ряды, отступы 04:03 - Фракции 05:46 - Функция repeat() 08:03 - Функция minmax() 11:15 - Направление контента. grid-auto-flow 12:04 - Явная и неявная сетки. Размеры по умолчанию для рядов и колонок 15:20 - Автоматические колонки auto-fill и auto-fit 20:07 - Перемещение ячеек внутри сетки 28:36 - Выравнивание ячеек внутри колоно и рядов 33:32 - Сокращенная запись grid-template 35:00 - Области сетки grid areas 41:10 - Вложенные сетки 42:25 - Пример CSS grid в верстке сайта 48:45 - Завершение
Друзья, всем привет!) Вы на канале "Просто верстка - верстка просто) В сегодняшнем видео на примере секции разберем 4 варианта построения сетки карточек (flex, grid). Если видео было полезным оставляй лайк!) И до встречи в новых роликах! #frontend #верстка #html #css
Что же такое Grid Layout? Суть этого модуля заключается в разделении веб-страницы на столбцы и строки. В получившейся сетке можно размещать элементы. Управлять размерами и расположением этих элементов можно с помощью специальных свойств модуля. Эта способность позволяет очень гибко отображать элементы на экране без изменений структуры кода. Но то же самое умеет и Flex скажешь ты. И это верно, но фишка в том, что помимо прочего Grid умеет управлять элементами в двухмерной плоскости, то есть и по горизонтали и по вертикали одновременно. Flex же работает с одной осью – горизонтальной либо вертикальной. Отлично, но че там с кроссбраузерностью? На первый взгляд все не плохо. По данным сервиса Can I Use модуль Grid Layout Level 1 поддерживают 93% пользователей. Даже ослик 11й что-то понимает правда с префиксами. Но поскольку Grid Layout довольно большой модуль использующий множество свойств, проверять поддержку следует каждого свойства который захотите использовать. 👉 Спецификация для браузеров Microsoft (eng): 🤍 👉 Известные баги Grid: 🤍 👉Весь прейлист CSS Grid Layout: - 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Название 05 01. Было бы хорошо если бы верстать страницы с помощью CSS было легко. На самом деле уловки создания макетов на основе свойства float это вызов даже для опытного дизайнера. Для ускорения и облегчения создания макетов страниц существуют системы CSS сеток.
Трежанёр - 🤍 Сайт - 🤍 Курс - 🤍
Спонсоры канала имеют доступ к готовому коду и многим другим бонусам! Подробнее: 🤍 В этом уроке мы поймем что такое CSS Grid Layout и зачем он нужен. Ознакомимся с основными возможностями и научимся работать с колонками и строками в css grid сетке. Разберем подробно функцию repeat и наглядно познакомимся с новой единицей измерения FR. CSS грид это новый взгляд решения типичных проблем при верстке. Оглавление: 0:00 что такое css grid layout 1:09 что можно делать с помощью css grid 1:42 как работать с колонками в grid 3:42 новая css единица измерения fr 4:35 как работает функция repeat 5:43 как работать с grid строками Паблик ВК - 🤍 Паблик телеграм - 🤍 Если вам нравятся мои видео, обязательно подписывайтесь на канал и ставьте пальцы вверх! Поддержать проект финансово: ЯД - 410019809390277 Bitcoin - 1GgYeUxciUhsnorN1rYWXBuBa6L9fjzXCK
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем как задать контейнер сетки с помощью display: grid и display: inline-grid. Узнаем как задавать явную и неявную сетку. А также узнаем про fr, min-content, max-content, fit-content, minmax, repeat, auto-fill и auto-fit. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
#YauhenK #webDev #CSS #CSSGrid #ityoutubersru Всех приветствую в курсе «CSS Grid». Модуль CSS3 Grid Layout - это один из самых интересных, модулей в семействе CSS3. Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна - предоставить удобный механизм расположения контента по виртуальной сетке. В данном видео-курсе мы с вами рассмотрим все особенности данной сетки, её использование для вёрстки, а так же сравним с уже с существующими способами построения «каркаса» веб-страницы. ✒ Используемые ресурсы и инструменты: ✔ Codepen (Онлайн редактор кода): 🤍 ✒ Полный список готовых и планируемых курсов: ✔ Trello: 🤍 ✒ Автор курса: ✔ YouTube: 🤍 ✔ Instagram: 🤍 ✔ Twitter: 🤍 ✔ VK: 🤍 ✔ LinkedIn: 🤍 ✔ GitHub: 🤍 ✔ VK (Группа): 🤍 ✒ Поддержать развитие канала: ✔ YouTube-спонсорство: 🤍 ✔ Patreon: 🤍
Свойства grid-auto-columns / grid-auto-rows позволяют сгенерировать размеры для строк и колонок, которые не были определены при определении шаблона. Свойство grid-auto-flow позволяет менять алгоритм выстраивания грид элементов в рамках контейнера. = Telegram Канал - 🤍 Чат - 🤍 = Подписывайтесь в соц. сетях: Facebook - 🤍 VKontakte - 🤍 LinkedIn - 🤍 Twitter - 🤍 Instagram - 🤍 = Мой второй канал: 🤍 = 🤍 Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только. Больше информации обо мне: 🤍 Содержание: 0:00 Введение 0:09 Описание структуры 1:05 grid-auto-columns 1:19 grid-auto-rows 2:00 grid-auto-flow
Пройди БЕСПЛАТНО профориентацию в IT - 🤍 На этом уроке мы расставим блоки, согласно макету, используя Grid CSS Шпаргалка Grid CSS — 🤍 Макет PSD — 🤍 Автор: Анна Блок YouTube канал Анны «Типичный Верстальщик»: 🤍 Школа онлайн-образования: 🤍 Telegram: 🤍 Slack: 🤍 Сайт: 🤍 Instagram: 🤍 Группа вконтакте: 🤍 Facebook: 🤍 Twitter: 🤍 Больше уроков от lofblog: #loftblog Все уроки по хештегу: #loftblogGridCSS Полезные уроки для дизайнера: #вебпрограммист Поставь лайк - смотивируй автора писать еще :)
В данном уроке курса по Bootstrap 5 мы рассмотрим работу с системой сетки бутстрап на практическом примере, который вы можете встретить на любом сайте. Да и всегда в верстке сайтов вы можете встретить такие блоки, и главное правильно их уметь выстраивать и верстать по сетке bootstrap 5. Курс «Frontend-разработчик» в SkillFactory: 🤍 Скидка 45% по промокоду WD Blog
Продолжаем изучать Grid Layout и сегодня поговорим о элементах Grid сетки, а именно о перемещении сортировке и выравнивании Grid элементов свойствами grid-row-start, grid-column-start, grid-row-end, grid-column-end. Именованные линии сетки. Порядок вывода элементов Grid сетки с помощью order. Выравнивание элементов сетки align-items, justify-items, justify-self и align-self. Промежутки между элементами сетки row-gap, column-gap и gap. 👉Весь прейлист CSS Grid Layout: - 🤍 Содержание: 00:00 - Введение 00:16 - Основные особенности 01:49 - Перемещение элементов сетки 05:02 - Имена линий сетки 07:24 - Порядок вывода 07:47 - Выравнивание элементов сетки 10:27 - Промежутки между элементами сетки 11:36 - Напутствие 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Продолжаем изучать Grid Layout и сегодня поговорим о свойствах определения сетки, а именно о grid-template-rows, grid-template-columns, grid-template. А так же grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow. 👉Весь прейлист CSS Grid Layout: - 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 Содержание: 00:00 - Введение 00:16 - Свойства grid-template-rows и grid-template-columns 03:52 - Единица гибкости fr 07:00 - Применение minmax 09:13 - Контентная ширина, fit-content 11:38 - Применение repeat 12:49 - Свойство grid-template-areas 16:19 - Свойство grid-template 19:13 - Неявная сетка. grid-auto-rows, grid-auto-columns 20:58 - Свойство grid-auto-flow 22:18 - Напутствие 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Всем привет. Запускаю курс css для начинающих, для кого-то видео могут показаться элементарными, но опыт преподавания показывает, что многим очень тяжело на первых этапах, стараюсь объяснить максимально понятно. Буду рад предложениям.
Мы начинаем новую серию видеоуроков практики 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" - 🤍
Понятие сеток в html Float сетки Inline-block сетки Частые ошибки
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем что линиям можно давать имена. Также 4 именованные линии могут образовать именованную область. Это работает и в обратную сторону, когда от именованной области получаются 4 именованных линии. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
В этом курсе мы поработаем с flex box css и кратко рассмотрим все свойства! Flexbox, flex css уроки для начинающих Игра для закрепления знаний - 🤍 Поддержать меня и мой канал вы можете по ссылкам ниже. Qiwi кошелек - 🤍 Яндекс деньги - 🤍
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем как расположить элементы по линиям сетки с помощью следующих свойств grid-area, grid-row, grid-row-start, grid-row-end, grid-column, grid-column-start и grid-column-end. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
ПОДДЕРЖАТЬ АВТОРА И КАНАЛ: 🤍 Webmoney: Z166344793421 R369744777501 U871336351200 Телеграмм чат: 🤍 Существует подход — присвоить имена областям сетки. Вместо подсчета и именования линий используйте именованные области для компоновки элементов в сетке. Это можно сделать с помощью свойств grid-template контейнера сетки и grid-area элементов сетки. МАТЕРИАЛЫ УРОКА: 🤍 БАЗОВЫЙ КУРС ПО HTML & CSS: 🤍
Название 01 01. Одна из самых запутывающих вещей в CSS фреймворках - это то, что же такое Frametwork? обширное определение это коллекция CSS файлов которые содержат предопределенный правила для макета, типографии и сбросов в браузерах.
Сейчас я познакомлю тебя с адаптивной версткой сайтов. Расскажу зачем она нужна и покажу на практике ряд основных подходов. Изучим медиа запросы и их конструкции. Поймем что тебе не нужен Bootstrap! Поговорим об mobile first, а так же о лучших практиках адаптива. Адаптивная вёрстка позволяет веб-страницам подстраиваться (адаптироваться) под различные размеры мониторов ПК, экранов планшетов и смартфонов. И чтобы эффективно потреблять трафик с мобильных устройств, нужно предлагать пользователям сайты с максимально удобным, адаптивным интерфейсом. Помимо этого, адаптивные сайты имеют приоритет при поисковой выдаче. Одним словом, адаптивная верстка сегодня крайне важна, и любому мастеру нужно уметь её делать и делать хорошо! 👉 Макет + напоминалка: 🤍 👉 Правильный адаптив картинок: 🤍 👉 Правильное адаптивное меню бургер: 🤍 👉 Как сделать спойлер: 🤍 🔴 Мастер-класс для начинающих по адаптивной верстке сайта: 🤍 🔴 Верстка макета из урока - 🤍 🔴 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS: 🤍 🔴 Если кому вдруг нужен пример верстки из урока то он доступен для подписчиков на Патреоне: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 Содержание: 00:00 - Вступление 01:05 - Подходы к верстке 01:30 - О контейнере 03:01 - Фиксированная верстка 06:46 - Отзывчивая верстка 11:52 - Адаптивная верстка (тебе не нужен Bootstrap) 17:29 - Отзывчиво адаптивная верстка 19:50 - Какой тип верстки использовать 20:34 - Медиа запросы 28:05 - Mobile First 29:00 - Хорошие практики адаптива 36:13 - Домашнее задание + макет 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Верстаем нестандартную сетку с товарами для интернет магазина на CSS Grid c использованием grid template ares. Применяем адаптив и responsive верстку. Медиазапросы и minmax при верстке на гридах. ↓↓↓ Тайм-коды в описании ↓↓↓ Уроки по CSS Grid на нашем канале: • Подробная инструкция по CSS Grid: 🤍 • CSS Grid, flexbox, float в чем разница. Практический пример. 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 27 Марта 2023 года 💻 Курс "JS Frontend разработчик + React": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 20 Марта 2023 года 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс по верстке сайтов: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт школы ВебКадеми: 🤍 Вконтакте: 🤍 Telegram канал: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Тайм-коды :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 00:00 Постановка задачи 01:16 Дизайн макет 02:36 Почему не стоит использовать flex-box 03:57 Создаем сетку на CSS grid 06:13 Работа с CSS Grid template area 06:13 Варианты позиционирования блоков внутри сетки 10:37 Дополнительные товары. Неявная сетка 12:12 Адаптив CSS Grid для планшетов 18:05 Адаптив CSS Grid для смартфонов Корректировка адаптива и точек перелома 24:15 Добавление отзывчивости для планешта. mimax() для колонок 25:45 Добавление отзывчивости для десктопа. minmax() 28:10 Завершение
Начни карьеру с бесплатного курса "Основы программирования" 🤍 CSS Grid и модульные сетки. Зачем верстальщикам нужны модульные сетки? Ответ прост: сегодня большинство всех дизайнов верстается по таким сеткам. И это не просто тренд. Использование в работе модульных сеток ускоряет процесс вёрстки и стандартизирует его. Давайте обсудим на мастер-классе: • особенности технологии; • выравнивание; • зачем теперь нужен Flexbox; • фракталы как единицы измерения; • особенности работы с содержимым на CSS Grid. Подписывайся на наш канал и смотри новые видео первым: 🤍 Проходи бесплатные курсы: 🤍 Выбери профессию: 🤍 Смотри вебинары: 🤍 Читай статьи: 🤍 Проверяй знания: 🤍 ВКонтакте 🤍 Facebook 🤍 Одноклассники 🤍 Telegram 🤍 Instagram 🤍 #модульныесетки #cssgrid #geekbrains #программирование #курсыпрограммирования
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем как выравнять элементы относительно областей с помощью следующих свойств: justify-items, align-items, place-items, justify-self, align-self и place-self. А также узнаем как выравнять полосы относительно контейнера с помощью следующих свойств: justify-content, align-content и place-content. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
Мы продолжаем курс materializecss уроки и в этом уроке мы рассмотрим как работает система сетки в данном фреймворке в сравнение с bootstrap. В чем различия в самой grid системе фреймворков css. Покажу на практике как сделать карточки которые часто делают в landing page на фреймворках. Поступить в онлайн-университет для программистов 🤍 = ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем как задать толщину линиям с помощью следующих свойств: grid-gap, grid-row-gap и grid-column-gap. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
#YauhenK #webDev #CSS #CSSGrid #ityoutubersru Всех приветствую в курсе «CSS Grid». Модуль CSS3 Grid Layout - это один из самых интересных, модулей в семействе CSS3. Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна - предоставить удобный механизм расположения контента по виртуальной сетке. В данном видео-курсе мы с вами рассмотрим все особенности данной сетки, её использование для вёрстки, а так же сравним с уже с существующими способами построения «каркаса» веб-страницы. ✒ Используемые ресурсы и инструменты: ✔ Codepen (Онлайн редактор кода): 🤍 ✒ Полный список готовых и планируемых курсов: ✔ Trello: 🤍 ✒ Автор курса: ✔ YouTube: 🤍 ✔ Instagram: 🤍 ✔ Twitter: 🤍 ✔ VK: 🤍 ✔ LinkedIn: 🤍 ✔ GitHub: 🤍 ✔ VK (Группа): 🤍 ✒ Поддержать развитие канала: ✔ YouTube-спонсорство: 🤍 ✔ Patreon: 🤍
⚡️ Обновленная версия видео - 🤍 🔥 Марафон Grid CSS — 🤍 11-дневный марафон с практическими заданиями для скорейшего закрепления темы, которую активно используют при верстке сайтов. Материалы из видео: 1) Can I use — 🤍 2) W3 — 🤍 3) Grid Garden — 🤍 4) Шпаргалка Grid — 🤍 5) Книга "CSS для профи" Таймкоды: 00:00 Вступление 00:16 Определение Grid 00:56 Создание стилей Grid на примере 01:41 Стили для родительского блока 02:33 Стили для дочерних элементов 03:20 Стоит ли использовать Grid CSS в 2020 году 03:43 Обучение верстке сайтов 04:06 Источники для изучение Grid 05:54 Итоги 🔵 Дзен — 🤍 🔵 ВК — 🤍 🔵 Telegram — 🤍 🔵 Чат Telegram — 🤍 🔵 Instagram — 🤍 🔵 TikTok — 🤍 🔴 Задать вопрос — 🤍 🔴 Обучение - 🤍
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем про режимы записи. Узнаем как работает автоматическое размещение элементов. Изучим свойства grid-auto-flow и order. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
Название 05 02. Кроме того что большинство фреймворков содержат в себе встроенную сетку, есть огромное количество независимых сеток которые можно использовать самостоятельно или в комбинации с фреймворком. Смотрите видео и узнаете какие самые популярные системы сеток.
Learn the basics of CSS Grid in 100 seconds. Grid 🍱⚡ is a powerful tool that can build layouts in the context of columns and rows. It's not easy to learn, but can dramatically simplify CSS positioning code for responsive designs. Stay tuned for a full grid project next week! 🤍 Grid Docs: 🤍 #css #tutorial #100SecondsOfCode Install the quiz app 🤓 iOS 🤍 Android 🤍 Upgrade to Fireship PRO at 🤍 Use code lORhwXd2 for 25% off your first payment. My VS Code Theme - Atom One Dark - vscode-icons - Fira Code Font
В этом видео мы продолжим знакомство с CSS Grid. Мы узнаем как работает позиционирование в CSS Grid. Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
.svg){kind=small}
![Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]](https://i.ytimg.com/vi/XbnAKjjlgc4/mqdefault.jpg "Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]")
![CSS Grid и модульные сетки [GeekBrains]](https://i.ytimg.com/vi/H8KsmjrB1Dw/mqdefault.jpg "CSS Grid и модульные сетки [GeekBrains]")
