Одну секунду
Что-то сучилось. Попробуйте еще раз.
Css grid адаптивно смотреть последние обновления за сегодня на .
Привет! В этом видео начинаем рубрику гридов, которая продлится 4-5 роликов. Начнем с нуля последовательно изучать гриды, а в конце плейлиста сверстаем чтоб-нибудь на них для примера. Приятного просмотра) Хорошая статья на тему: 🤍 Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Поддержать канал: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Карта канала: 🤍 Яндекс.Дзен: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #css #cssgrid
Новый взгляд на создание адаптивных красивых сайтов - CSS Grid. В ходе этого видео мы научимся работать с CSS Grid, разберемся что это такое и поймем почему это круче FlexBox! 1) Урок по FlexBox: 🤍 2) Плагин Emmet: 🤍 3) Урок на сайте itProger: 🤍 ✔ Сообщество программистов: 🤍 ✔ - Вступай в группу Вк - 🤍 🚀 Группа FaceBook - 🤍 Instagram: 🤍 Telegram: 🤍 Twitter - 🤍 - Уроки от #GoshaDudar 👨🏼💻 - Все уроки по хештегу #GoshaLessons
Верстаем нестандартную сетку с товарами для интернет магазина на CSS Grid c использованием grid template ares. Применяем адаптив и responsive верстку. Медиазапросы и minmax при верстке на гридах. ↓↓↓ Тайм-коды в описании ↓↓↓ Уроки по CSS Grid на нашем канале: • Подробная инструкция по CSS Grid: 🤍 • CSS Grid, flexbox, float в чем разница. Практический пример. 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 18 Сентября 2023 года 💻 Курс "JS Frontend разработчик + React": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 23 Октября 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 Завершение
Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом уроке мы будем верстать раздел о компании. Я покажу как выравнивать элемент с абсолютным позиционированием и мы сверстаем сетку из 4-х столбцов с помощью CSS Grid, а так же сделаем адаптивную версию сайта с помощью медиа запросов 🤍media на CSS для разных устройств. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 Курс "Верстка сайта с нуля по макету из Figma": 🤍 Макет сайта Figma: 🤍 ▶▶ Видео, которые будут вам полезны ◀◀ Видео урок по CSS Grid: 🤍 БЭМ методология от Яндекс: 🤍 Курс по вёрстке HTML+CSS для начинающих: 🤍 CSS 🤍media: 🤍 Медиа запросы в языке CSS: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor
Спецификация CSS Grid предоставляет ряд встроенных инструментов, значительно упрощающих работу с адаптивной версткой. Помимо уже знакомой нам единицы измерения как фракция, это особый метод minmax, а также режимы повторения auto-fit и auto-fill, используемые в качестве аргумента метода repeat. В уроке рассматриваются свойства grid-auto-flow, grid-auto-rows, озвученные выше приёмы, а также вариант прижатия футера к нижней границе экрана, вне зависимости от количества контента. Мои курсы по вебу с купонами: ✅ 🤍
Подробнее о курсе «Технология CSS Grid. Руководство по адаптивной верстке»: 🤍 Курс состоит из 2-х блоков и 10-ти бонусов: *Блок 1. Верстка макета Landing Page *Блок 2. Верстка главной страницы сайта студии *Бонус 1. Учебник по основам HTML для начинающих *Бонус 2. Учебник по основам CSS для начинающих *Бонус 3. Верстка сайта для начинающих *Бонус 4. Курс по HTML5. Основы *Бонус 5. Курс по CSS3 *Бонус 6. Теория и практика адаптивной верстки *Бонус 7. CSS Grid Layout *Бонус 8. Flexbox *Бонус 9. Препроцессор Sass *Бонус 10. Построение сеток при помощи Masonry Курс включает в себя 52 урока общей продолжительностью чуть более 13 часов без учета бонусов, в которых содержится все необходимая и исчерпывающая теоретическая база для старта в изучении материалов курса! Вы получите два практических блока в которых показана верстка двух PSD-макетов с нуля с использованием последних Web-технологий. Курс подходит и для новичков, желающих освоить верстку на довольно высоком уровне, так и для людей имеющих некоторые знания и желающие повысить свои навыки, применяя при этом последние технологии в верстке, а также научиться пользоваться препроцессорами, автоматизацией для множества однотипных задач, что позволит выполнять работу более эффективно, следовательно вы будете более востребованным специалистом в данной области! Если у вас нет работ в портфолио, то по окончанию видеокурса вы получите две полноценные работы, которые будет не стыдно показать работодателям или будущим клиентам на фриланс биржах. Также вы получите бесценный опыт при реализации сложных блоков и начнете самостоятельно решать подобные задачи. Кто желает освоить все с полного нуля стоит обратить внимание на бонусные блоки курса и начинать именно с них, где постепенно будут рассматриваться основы и далее все более сложные моменты. Освоив весь материал и приложив при этом максимум усилий вы сможете начать брать заказы на фрилансе, зарабатывая при этом деньги и набираясь еще большего опыта, а также пытаться проходить собеседования на должность верстальщика для работы в офисе.
Привет! Большой видос о display: grid и множестве свойств, которые идут с ним в одном пакетосе =) Собрал полноценное большое руководство, к которому вы можете обращаться как только что-то забудете или нужно будет разобраться в grid css свойствах. Видео о флексах 1 - 🤍 Видео о флексах 2 - 🤍 Телеграм канал: 🤍 Сайт курса по верстке - 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
В этом курсе мы поработаем с grid layout css и кратко рассмотрим все свойства! Мой курс "Продвинутый Frontend. В production на React" - 🤍 Игра для закрепления знаний - 🤍 ↓↓↓ПЛЭЙЛИСТЫ ↓↓↓ Собеседования - 🤍 Полные практические курсы - 🤍 MobX & React - 🤍 Наглядная теория - 🤍 Полный курс по Redux - 🤍 React drag and drop - 🤍 React компоненты - 🤍 React + Redux + Webpack 🤍 Анимации в React - 🤍 Разработка fullstack MERN web приложения - 🤍 Таймкоды: 00:00 - Теория 01:00 - Начало работы 01:50 - display: grid 02:00 - grid-template-columns 03:35 - grid-template-rows 04:00 - grid-gap 04:30 - grid-auto-rows 05:05 - minmax() 05:54 - justify-content 06:12 - align-content 06:43 - align-items 07:01 - justify-items 07:30 - justify-self 07:46 - align-self 08:00 - grid-column-start, grid-column-end 08:30 - grid-row-start, grid-row-end 10:20 - grid-template-areas, grid-area Поддержать меня и мой канал вы можете по ссылкам ниже. Qiwi кошелек - 🤍 Яндекс деньги - 🤍
В этом видео мы продолжаем Уроки Css Grid Layout и сегодня я покажу пример адаптивная верстка сайта с применением технологии гридов. В уроке css grid я покажу как сделать простой сайта с удобной картой новостей и верстка сайта карты адаптивно. Css grid это относительно новая технология для верстки сайтов адаптивно которая облегчает жизнь веб разработчика. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
Привет! В этом видео начинаем рубрику гридов, которая продлится 4-5 роликов. Начнем с нуля последовательно изучать гриды, а в конце плейлиста сверстаем чтоб-нибудь на них для примера. Приятного просмотра) Хорошая статья на тему: 🤍 Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Поддержать канал: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Карта канала: 🤍 Яндекс.Дзен: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #css #cssgrid
Адаптивная HTML SCSS верстка сайта из Figma лендинга жилого комплекса LoftHouse. Макет, материалы и готовый код: 🤍 (пост за 06 Мая 2023) Верстка по пакету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. JS скрипты для маски номера телефона, скрипт для youtube lightbox видео, скрипт для yandex карты с кастомным пином, тонкой CSS стилизацией и JS настройкой карты. Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Старт обучения: 18 Сентября 2023 года Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс "JS Frontend разработчик": 🤍 Старт обучения: 23 Октября 2023 года Обучение с наставником, 3 месяца, результат, гарантия. 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" 7 уроков по 30 мин: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Тайм коды: 00:00 Обзор проекта 01:49 Курс по верстке сайтов 04:07 Сборка SCSS в редакторе VS Code 07:20 Структура SCSS файлов 12:55 Шрифты 20:54 Переменные. Цвета 23:58 Базовые стили Верстка десктоп 26:39 Шапка. Фон 34:53 Шапка. Навигация 51:28 Шапка. Заголовок и адрес 1:12:27 Секция Benefits c иконками 1:25:25 Секция "Наши квартиры" 1:30:35 Стили для отдельной карточки 1:54:09 Секция CTA. Форма заявки 2:16:59 Секция с видео 2:31:17 Секция с картой 2:35:07 Секция Feedback. Форма заявки 2:41:29 Подвал 3:00:36 Декор элементы 3:14:23 Миксин для декор элементов Мобильная адаптация 3:19:47 Мобильная адаптация. Медиазапрос и миксин 3:27:50 Адаптация шапки 3:36:21 Иконка моб навигации 3:39:36 Мобильная навигация CSS 3:51:54 Мобильная навигация JS 3:58:29 Адаптация секции Benefits 4:05:40 Адаптация секции с карточками 4:12:56 Адаптация секции CTA 4:18:30 Адаптация секции с видео 4:20:46 Адаптация секции с картой 4:22:31 Адаптация секции Feedback 4:24:55 Адаптация подвала 4:27:10 Оптимизация графики JS Скрипты 4:31:19 JS маска для номера телефона 4:37:43 JS lightbox для youtube видео Yandex карта 4:42:04 Регистрация в API Yandex карт 4:43:32 Подключение карты на страницу 4:46:30 Центр карты 4:48:12 Кастомная метка 4:54:24 Baloon. Инфобокс с адресом 4:55:42 Настройка и стилизация отображения карты 5:04:50 Финал Сайт: 🤍 Вконтакте: 🤍 Telegram канал: 🤍
💻 Курс "Профессия HTML верстальщик": 🤍 Старт обучения: 18 Сентября 2023 года. ↓↓↓ Тайм-коды ↓↓↓ В этом уроке мы подробно изучим работу с сеткой CSS Grid. Все на простых и понятных примерах. Тайм коды в описании. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 18 Сентября 2023 года 💻 Курс "JS Frontend разработчик + React": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 23 Октября 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 - Завершение
Друзья, в этом видосе я верстаю интересный сайтец, с множеством неочевидных на первый взгляд вещей. По максимум использую css grid потому что этот сайт предусматревает такую вечеринку. Макет + шрифты: 🤍 Мой курс по верстке - 🤍 Телеграм канал - 🤍 Большой гайд по гридам - 🤍 О box-sizing - 🤍 Видос по svg - 🤍 Плейлист по Figma: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
Вместе с преподавателем по программированию Алексеем Кадочниковым мы запускаем мини-курс. В трех 15-минутных роликах вся необходимая информация, чтобы начать путь в мир кода! В третьем завершающем выпуске мы перейдём к практике с бесплатным редактором кода Visual Studio Code! Ссылка на макет: 🤍 Начать обучаться веб-разработке можно на портале GeekBrains – 🤍 Мы в социальных сетях: 🤍 🤍 🤍 🤍
Привет! Этим видео стартует новый, третий марафон верстки. Сделаем блог из нескольких страниц, а во второй части видео - натянем на WordPress. Верстаю на чистом html, css, js, основная сетка на CSS Grid. В этой части делаю я делаю все страницы блога с адаптивом В марафоне я верстаю точно в макет, pixel perfect. Про него так же рассказывал: 🤍 Ссылка на верстку: 🤍 Ссылка на макет: 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 #обучение #марафонверстки #блог
Разбираемся с гридами в CSS с самого начала на простом примере. Верстаем вместе с display: grid; по-новому. Часть 2: 🤍 Часть 3: 🤍 Телеграм канал: 🤍 Discord: 🤍
CSS Grid это незаменимый помощник в мире верстки. С помощью данного свойства можно быстро создать удобный и современный дизайн для вашего сайта В этом #shorts видео вы убедитесь что пора уже давно использовать CSS grid если вы до сих пор этого не сделали Пишите код, делайте веб лучше и не забывайте подписываться на канал. Смотрите больше материалов, с примерами которые можно скопировать на сайте 🤍 All images were getting from this site 🤍
Автор(ы): Денис Булыга - Webformyself Подробное содержание на сайте АВТОРА, или у нас: ► Сайт видеокурса: 🤍 ► Сайт автора: 🤍 ► Еще разные курсы: 🤍 ► Сайт "Графика и 3Dмоделирование": 🤍 ► Сайт с курсами на разные темы: 🤍 ► Канал с курсами на разные темы: 🤍 ► Канал "Графика и 3Dмоделирование": 🤍 Так же курсы в: ► ВК "Видеокурсы для ВСЕХ": 🤍 ► Facebook "Видеокурсы для ВСЕХ": 🤍 ► Twitter "Видеокурсы для ВСЕХ": 🤍 ► Blogger "Видеокурсы для ВСЕХ": 🤍 ► Livejournal "Видеокурсы для ВСЕХ": http://dvd_course.livejournal.com/ ► Liveinternet "Видеокурсы для ВСЕХ": 🤍 ► Tumblr "Видеокурсы для ВСЕХ": 🤍 ► Google + "Видеокурсы для ВСЕХ": 🤍
In this CSS Grid tutorial, you'll learn how to use grid columns and rows to create beautiful, responsive layouts for your website. With CSS Grid, you can easily divide your web page into a grid of rows and columns, allowing you to position and align content with precision. In this video, we'll cover the basics of CSS Grid, including how to define your grid, how to set grid columns and rows, and how to use grid areas to place content in specific parts of the grid. We'll also discuss some advanced techniques for creating complex layouts, such as nested grids and grid templates. Whether you're a beginner or an experienced web developer, this CSS Grid tutorial will give you the skills you need to create stunning, modern web designs. So, grab your favorite text editor and get ready to dive into the world of CSS Grid! Keywords: CSS grid, grid columns, grid rows, responsive layouts, web design, CSS Grid tutorial, web development, nested grids, grid templates. Remember, to rank high in YouTube search, it's important to use relevant keywords in your title, description, and tags. Use natural language and avoid keyword stuffing, and make sure your description accurately describes the content of your video.
Привет! Новый марафон на канале) В этом видео верстаем лендинг с нуля до самого конца с помощью gulp, scss, css grid, БЭМ. В этой части делаем адаптив сайта, это последняя часть марафона 🤍 - сборка Gulp 🤍 - готовая верстка на GitHub 🤍 - макет сайта Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Поддержать канал: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Карта канала: 🤍 Яндекс.Дзен: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 Тема VS Code: One Monokai Шрифт VS Code: Consolas, 'Courier New', monospace #ityoutubersru #марафонверстки #лендинг
Создание сайта от А до Я (комплексный курс): 🤍 Создание интернет-магазина от А до Я: 🤍 Создание крутого слайдера (+посадка на CMS): 🤍 Все курсы в одном комплекте: 🤍 Всем привет, дорогие друзья! Сегодня мы на реальном примере сверстаем крутой адаптивный макет, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и новыми возможностями CSS Grid. В конце видео мы протестируем верстку на реальном мобильном устройстве. Результат, референсы и исходники урока: 🤍 ВКонтакте: 🤍 Телеграм: 🤍 Дзен: 🤍
Промокод на скидку 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) Добавление медиа запросов на страницу для адаптивности.
Заканчиваем изучать Grid Layout и сегодня применим ранее изученные знания на практике. А именно сверстаем простой макет, галерею и карточки товаров сугубо с помощью Grid Layout. Вперед! 👉 Шпаргалка по Grid (в разработке) - 🤍 👉 Результат практики - 🤍 👉 Правильное адаптивное меню бургер - 🤍 👉 Адаптивные изображения - 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 Содержание: 00:00 - Вступление 00:41 - Пишем HTML 06:30 - Основная грид сетка страницы 08:57 - Верстаем header 13:57 - Верстаем основной блок 15:38 - Верстаем галерею 18:49 - Верстаем товары 25:13 - Верстаем footer 26:10 - Адаптив грид сетки 33:30 - Заключение + шпаргалка 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Поддержать автора: 🤍 Исходный код: 🤍 Макет: 🤍 Макет с исправлениями: 🤍 * Музыка: Glacier - Patrick Patrikios
Друзья в данном видео рассказываю о возможностях css grid: базовые css свойства и особенности, построение сетки проекта, в конце реализую крутую плиточную структуру которая довольно часто встречается на разных проектах. И помните... css grid уже скоро... в ваших браузерах =))) Частые ошибки в верстке сайтов: 🤍 Верстка сайта с нуля до завершения: 🤍 - Подпишитесь на канал, если вам понравилось данное видео: 🤍
PSD to HTML. Практика верстки сайта с нуля до результата. Смотрите уроки: 🤍 Исходники к уроку тут: 🤍 В верстке таблицы являются одним из элементов, с адаптивностью которых на сайте могут возникнуть проблемы. Хотелось бы, чтобы и таблицы были адаптивными, и табличная информация осталась при этом читабельной и удобной для восприятия. В данном уроке будет показано несколько способов сделать таблицы на вашем сайте адаптивными.
Сейчас я познакомлю тебя с адаптивной версткой сайтов. Расскажу зачем она нужна и покажу на практике ряд основных подходов. Изучим медиа запросы и их конструкции. Поймем что тебе не нужен 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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 Большой практический КУРС "Frontend разработчик на HTML, CSS и JavaScript": 🤍 Промокод со скидкой: ITDOCTORFE322 В этом уроке мы будем верстать раздел Услуги. Мы сверстаем сетку из 3-х столбцов и 2-х рядов с помощью CSS Grid, а так же сделаем адаптивную версию сайта с помощью медиа запросов 🤍media на CSS для разных устройств. Курс "Верстка сайта с нуля по макету из Figma": 🤍 Макет сайта Figma: 🤍 ▶▶ Видео, которые будут вам полезны ◀◀ Видео урок по CSS Grid: 🤍 БЭМ методология от Яндекс: 🤍 CSS 🤍media: 🤍 Медиа запросы в языке CSS: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor
Создание сайта от А до Я (комплексный курс): 🤍 Создание интернет-магазина от А до Я: 🤍 Создание крутого слайдера (+посадка на CMS): 🤍 Все курсы в одном комплекте: 🤍 Всем привет. Сегодня мы рассмотрим новейшую технику адаптивной верстки сайтов с использованием CSS Grid. Страница урока с примерами из видео: 🤍 ВКонтакте: 🤍 Телеграм: 🤍 Дзен: 🤍
🤍 ✅ Супервидос ✅ Буду рад подписке на канал! 😃Всем привет! В этом видео,я сделал адаптивное,резиновое,мобильное меню,при помощи GRID CSS грид цсс,javascript(джаваскрипт),html(хтмл)+бургер,dropdown,дропдаун меню.Также в этом видео я оставил небольшую пасхалку)😀.Надеюсь,вам это видео помогло! Также надеюсь,что вы поставите лайк,а также подпишитесь на канал! Всем спасибо за просмотр!👍 Я в вк - 🤍 Подписаться на меня - 🤍 Аутро/Outro: [No Copyright Music] Chill LoFi Hip-Hop Beat FREE (Copyright Free) Music By KaizanBlu #сайт #адаптивноеменю #html #gridcss #javascript
Привет! Этим видео стартует новый, шестой марафон верстки на канале. Сделаем продуктовый лендинг с отправкой товаров на почту, а также другими мелкими нюансами. Марафон будет состоять приблизительно из 10-12 частей, так что запасайтесь vs cod`ами, figma`ми, и прочими вещами для верстки и поехали! В этой части делаем адаптивную версию Плейлист марафона: 🤍 Ссылка на верстку: 🤍 Ссылка на макет: 🤍 Моя сборка Gulp, которая используется в марафоне: 🤍 Сервис для названия цветов: 🤍 Типограф: 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Тема VS Code: One Monokai Шрифт VS Code: Consolas, 'Courier New', monospace #ityoutubersru #марафонверстки #лендинг
Инструмент Spikmi Marketing (14 дней бесплатно) 🤍?l=7 В этой серии видео мы сверстаем PSD макет Landing Page на технологии CSS Grid Layout, если по-простому: на гридах. В сегодняшнем видео сделаем главный экран сайта Header. = Исходники можно получить тут: 🤍 Если хочешь получить исходники из этого видео со скидкой в 50%, введи промо-код vmmcgz8 при оплате. Промо-кодов всего 10 штук. Переходи по ссылке 👉 🤍 = Подпишитесь на канал, если вам нравятся эти видео: 🤍 Больше контента в нашей группе Вконтакте 🤍 Присоединяйтесь к нашему сообществу Discord 🤍 Telegram-канал "Лысый из браузера": 🤍 Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: 🤍 Заказать рекламу на канале: 🤍 или 🤍 #CSSGrid #GridCSS #CSStutorial #урокиCSS - Я использую хостинг Link Host с 2014 года 🤍 Телеграм-каналы с дизайн-макетами для тренировки вёрстки: 🤍 🤍 🤍 Каналы с крутыми фичами на CSS и JavaScript: 🤍 🤍 Канал с терминами для айтишников: 🤍 Канал, где публикуют ссылки на полезные сервисы и сайты: 🤍
Grid CSS - адаптивная галерея изображений - картинок
Верстка галереи без JavaScript, на чистом. HTML и CSS. Адаптивная галерея, Нестандартные несеметричные и динамичные блоки фото. Верстка для новичков. Практика верстки. Супер верстка. В этом уроке мы сверстаем креативную галерею, в которой динамически формируются асиметрично блоки. Адаптивная галерея быстро и без программирования. Смотри урок по практике верстки, а так же залетай на мой курс и телеграм канал, ссылки ниже 😉 ➡️ МОЙ КУРС - Профессия фронтенд разработчик на удаленке (с трудоустройством): 🤍 ➡️ ПОДДЕРЖАТЬ КАНАЛ: 🤍 ➡️ ПРОДВИНУТЫЕ УРОКИ ПО ПОДПИСКЕ: 🤍 🥳🔥🎉⬇️ - ЗАЛЕТАЙ! - ⬇️🎉🔥🥳 ➡️ TELEGRAM КАНАЛ - 🤍 ➡️ TELEGRAM ЧАТ - 🤍 ➡️ INSTAGRAM - 🤍 ➡️ ВКОНТАКТЕ - 🤍 ➡️ YOUTUBE КАНАЛ - 🤍 ➡️ ЯНДЕКС ДЗЕН - 🤍 ☝️☝️☝️☝️☝️😍😍😍😍☝️☝️☝️☝️☝️ #tonyshow 🤍ivashov
Подробнее о курсе «Технология CSS Grid. Руководство по адаптивной верстке»: 🤍 В этом видеоуроке увидите завершение работы над шапкой сайта, адаптировав ее под различные разрешения при помощи медиазапросов.
Мы продолжаем рубрику уроки CSS и в этом видео мы обсудим немало важный вопрос при устройстве на работу и прохождении собеседования во frontend о том в чем разница адаптивный и отзывчивый дизайн сайта. Есть немало отличий и основных принципов построения адаптивного веб дизайна. Если вам интересны практические уроки верстки адаптивного сайта - пишите в комментарии! 🤍 ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
#shorts #html #css #tutorials #trending #web #coding This video shows to create a page design using CSS grid. Source code: shorturl.at/cxBET Sound effects from pixabay.
Подробнее о курсе «Технология CSS Grid. Руководство по адаптивной верстке»: 🤍 В этом видео будут рассмотрены некоторые проблемы при работе с адаптивными изображениями на сайте. С указанными проблемами вы, скорее всего, уже сталкивались в своей практике и, скорее всего, в вашем арсенале имеются варианты решения данных проблем. Данное видео – это просто попытка обобщения некоторых из этих вариантов и попытка показать способы работы с адаптивными изображениями в CSS.
.svg){kind=small}
![Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]](https://i.ytimg.com/vi/XbnAKjjlgc4/mqdefault.jpg "Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]")
