Верстка сайта на гридах с нуля, css grid верстка
Вставка
- Опубліковано 15 січ 2023
- Друзья, в этом видосе я верстаю интересный сайтец, с множеством неочевидных на первый взгляд вещей. По максимум использую css grid потому что этот сайт предусматревает такую вечеринку.
Макет + шрифты: drive.google.com/drive/folder...
Мой курс по верстке - from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Большой гайд по гридам - • CSS GRID Большое руков...
О box-sizing - • box sizing border box ...
Видос по svg - • SVG, большой гайд
Плейлист по Figma:
• Бесплатный курс по Fig...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Благодарю, Вадим, что не забываешь о нас, делишься своей мудростью! Дай Бог тебе и твоим близким счастья, здоровья, процветания и мирного неба над головой!
спасибо
@@vadymprokopchuk присоединяюсь, я верстку не сильно люблю, но чтобы подтянуть свои знания и что то новое узнать захожу и делаю.
Идея с многостраничником огонь! Спасибо за урок, очень нравится вас смотреть и слушать :)
Спасибо за урок! Да, многостраничник было бы супер)
Поддерживаю
поддерживаю!=)
Поддерживаю
@@vadymprokopchuk Вадим попроси Варвару сделать дизайн многостраничника)
подтверждаю )
Как же вовремя! Как раз нужна была практика с гридами) Спасибо за видео, жирнющий лайк прилагается :D
круть!
Научи настраивать жирность лайков)
Огромная благодарность,Ваш канал даёт великое множество возможностей🦾
Долгожданные гриды! С огромным удовольствием посмотрю!
Интересно) но хотелось бы что-то посложнее, с gulp и многостраничник и тд)
Дядька, спасибо что с нами!
Кто-то тусуется с грибами, а нормальные чуваки с гридами! 😂
точняк
псс.. парень, не много гридов не интересует?)
VR - классная вещь. Там так красиво, уютно, хорошо))) наша любимая игра - beat siber.
Урок отличный. Каждый раз что-то новое рассказываете. Спасибо!!!
спасибо
Крутая подача. Словечки. Концентрация внимания на неочевидных мелочах.
Первое видео смотрю и очень нравится.
Спасибо за урок! Все объясняешь максимально доходчиво )
Спасибо за видос! Всегда круто! Как раз одну штучку для себя подсмотрел )
Дякую Вадиме за твою працю! Дуже інформативне відео, завжди чекаємо нивих уроків.
за 6-7 видео научился многому благодаря тебе.Спасибо большое.Лучший!!!
круть
Есть доступ ко всем курсам скиллбокс, могу бесплатно посмотреть любой курс. Но ты такой крутой рассказчик, что хочется тебя поддержать и пройти именно твой курс, успехов тебе и большое спасибо за контент!
Для buy-btn__price больше подойдёт такой вариант:
border: 1px solid;
border-image-source: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%);
border-image-slice: 1;
Это обеспечит её прозрачность и всё будет выглядеть по макету
отличный коммент! бордер сделался, но вот прозрачность не появилась :(
Спасибо большое за ваши уроки. Вы меня многому научили.
Топовый контент. Лучший учитель по верстке. Спасибо Вадим!
Благодарю
Вадим, была рада увидеть тебя! Благодарю за видео! Ты шикарный спец и очень хороший, доброжелательный и воспитанный человек! В 2021 приобрела твой курс по вёрстке - и ни разу не пожалела об этом!!!!!Успеха, здоровья и благополучия от всей души!
Благодарю!
Интересная вечеринка с гридами 👍
Вот кнопку я воо ще оценил, вспомнил же , годный контент. Я уже сколько лет сам верстаю, а твои видео по сей день смотрю. Нужно выпускать треллеры: "Скоро на большых просторах Ютуба смотрите" и туда нарезки, типа: по больнице, кнопка, космическая полицию ну и еще куча. КРАСАВЧИК-ОГОНЬ. Еще когда в спан убирал стили нужно было сказать “Я тебя помножу на ноль”.
Спасибо большое за контент! очень рада, что когда-то нашла вас на udemy !)
круто, спасибо и я рад))
Спасибо Вам большое за уроки!
Вадим спасибо за видео, ты лучший!
спасибо за крутую вечеринку! снова будем кайфовать за версткой!)))))))))............
Спасибо за замечательные видео.Очень крутая подача, и учился, и смеешься над шутками!!(за многостраничник)
случайно забрёл на этот канал, но твои объяснения просто топ и слушать приятно и понятно всё!!!
Меня спросили, верю ли я в бога?
Я ответил - Да
Меня спросили, в какого?
Я ответил - в Вадима Прокопчука
Бог верстки. Я тоже в него верую!
Решение с кнопками - просто 🔥 🔥 🔥
Пасиб!) В каждом видео нахожу что-то новое!
круть
Отличный урок, спасибо за труд! С многостраничником отличная идея
уже залил первый многостраничник
Ждал что то интересное не совсем для новичком ураа)
Спасибо!!! Туториал огонь!🔥
В css на 1:14:01 в селекторе buy-btn два padding одно со значением 0 другое со значением 1. За верстку спасибо!
Просто огонь, пасиба!)
Вадим, большое спасибо за ваш труд! видео огонь! дизайн топ! также спасибо и вашей супруге за ее роботу!
жду многостраничник)))
круть, спасибо
очень вовремя) биг лойс
Вадос, работаю фронтом уже 2 года. Сел под пивко насладится твоей компанией. Вспомнить те эмоции которые ты мне дарил в период моего обучения, когда я начинал постигать азы верстки и верстал Кубу повторяя за тобой. Выражаю тебе огромный респектос за твой труд , он бустанул мою карьеру. Ты топ!❤
круто, спасибо!
Вадим, спасибо за видео!
Думаю, что для задания градиента для border'а можно использовать CSS-свойство "border-image".
Например, для нашего "buy-btn__price" можно было бы применить
border-image: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%);
Возможно, это более универсальный способ, хотя бы на тот случай, если наша фоновая картинка не позволяла бы использовать для фона кнопки сплошной цвет. А то вдруг при отзывчивой верстке какая-нибудь лампа наедет на нашу кнопку... :D
вполне возможно, нужно тестить
я как раз с помощью него и сделал)) CSS написал под видео в комменте
Хочу многостраничник!!! Как всегда ЖИРНЫЙ лайк! Спасибо Вадос за топ контент!
спасибо
Благодарю как всегда круто
Вадим, дякую тобі за твої кайфові відео. Дуже приємно та корисно проводити час на твоїх марафонах. Буду дуже радий, якщо в тебе буде можливість зверстати багатосторінковий сайт, так як це повинно бути в сьогоднішніх реаліях. Дякую :)
супер, дякую
Хорошая подача материала!
Классно что макет в описании к видео , а не в телеге ))
Привет, рад тебя снова видеть на ютубе, здоровья тебе и твоим близким!
благодарю
Лять, зашел на практику по гридам, весь видос по флексам) остался только из-за подачи инфы, заодно повторил флексы. пойду на продолжение, может хоть там гриды найду. Спасибо за инфу)
Спасибо за труд 🙏🙏
Многостраничный сайт, плагины 🔥
топ топ топ
Спасибо за видео, есть пару недочетов, в хедере элементы должны быть выровнены по центру и что то не представляю как это сделать и на кнопки не применяется данный шрифт.
Хочется увидеть как делать многостаночник, с подключенными одинаковыми блоками.
Вадим видео отличное и за это конечно ЛАЙК
с многостраничнком идея шикарная !!!
И было бы супер если б этот марафон с многостраничником был со всеми плюшками (JS,WEBPACK и тому прочее)готов за такое задонатить(кто поддерживает ставим лайк этому коменту)и в итоге думаю получилась бы супер мегавселенская вечеринка.
прикольный урок )) спасибо
Вадим, пожалуйста, сними видео про новую Gulp сборку. Очень благодарна за твой труд и прекрасную подачу материала, благодаря тебе я начала шарить в вёрстке))
нужно снять
@@vadymprokopchuk jdem)
45:55 проорал с кнопки xD годно
Дякую, за класні та веселі уроки, Вадим, було б круто зверстати багатосторінковий сайт)
супер, зафіксував, дякую
Спасибо за урок, желаю сверстаный многостраничник
отлично
Спасибо большое!
Спасибо Вадим!
оу, оу, оу, потрясающая вечериночка подъехала )))
врываемся )
Комментарий в поддержку канала
огонь!
Спасибо вам, урок очень интересный, ждем видос про плагины для фигмы
спасибо
Спасибо за твой труд! Многостраничник было бы круто!!
супер
респект, вадосик, давай курс по базе JS!!!)
согласен, давай js базу, это прям пушка!!)
Очень нравятся уроки, Вадима. Много кого смотрела, но уроки Вадима прям в сердечко. Подскажите, пожалуйста, как сделать так, что border-bottom выводились сразу эти параметры: 1px solid #000? Как здесь 28:28?
ОПА, лайк не глядя
Завидую (в хорошем смысле) тем ребятам которые пройдут курс Вадима Прокопчука по вёрстке.
Потому что такого подхода к подаче материала есть только у единиц преподавателей.
О чём я? Да вы наверное и сами заметили что Вадим подходит к подаче к материала с позитивом - что вас и ждёт на протяжении всего курса. Поверьте, многие ведут курсы как лекции и интерес к изучению угасает.
P.S. Это не реклама - а крик души) Вы не пожалеете!
я бы сказал: не провод важная часть нашей жизни, а поводок 😆
Многостраницный сайт уже давно пора было делать, ато в ютубе очень мало таких видосов оооооочень мало
Большое спасибо!
Спасибо! Ждем многостраничник
Спасибо, очень круто объясняешь, странно что так мало подписчиков.
Ребят, подскажите как настроить Emmet, чтоб class всегда в начале был, до остальных аттрибутов?
Вадос, как центрировать лого? ибо сейчас оно сдвинуто вправо - так как justify-content: space-between -> делает одиноковое растояние между лого и нав \ лого и корзиной
Я не совсем понял момент, где ты взял line-height 22.08px. Можешь объяснить пожалуйста ?
В мене є питання якщо я правильно замітив то в тебе браузер відкритий на ширині 67% чи щось тип того.Не булоб логічніше робити на 100% більшість користувачів сидять на бо дефолту такій довжині чи правильно буде сказати маштабу?
привет, Вадим. спасибо за годную вечеринку. подскажи, пожалуйста, стоит ли указывать max-width для title subtitle и text? контент ведь может поменяться
Если может поменяться , то лучше min-width, чтоб был запас по ширине
можно указать но с хорошим запасом
Шикарное видео. Ждём продолжения. Но в макете справа на кнопке фон вроде прозрачный, а не белый. А можно как-то сверстать его прозрачным, или надо просто сделать цвет фона серым как сама картинка?
можно попробовать и насхематозить с прозрачностью, но там реализация уже другая будет
у меня вроде получилось так сверстать, CSS написал под видео в комменте
сижу в ожидании верстки многостраничного сайта)
Спасибо Вам
Спасибо за ролик, ждем многостраничник
отлично)
Чисто для актива коммент )
чисто красава )
Желаю многостраничный сайт)
Подскажите, а почему вариант сделать 2 кнопки и соединить их не подошел? и у второй кнопки сделать background-color: transparent; ? + на макете 2 кнопки) тайминг если, что 1:11:48 )
я б ещё добавил второй кнопке backdrop-filter: blur(10px); например, во избежание)
Насчёт корзины и меняющихся цифр, норм ли практика использовать дата атрибут и застилить через псевдоелемент?
Лучший
Пушка
Привет, подскажи плз, как ты настроил еммет, чтобы у ссылок классы создавались перед атрибутом href, а не после? Не могу никак нагуглить.
Привет. В файле settings.json (в настройках VSCode) вставь вот эту строку: "emmet.preferences": {
"output.reverseAttributes": true
}
@@dmitriyzhuykov4244 балдёж, все работает. Спасибо)
Здравствуйте а будет что нибудь про бутстрап?
Классно, особенно если смотреть хотя бы на x1.5 и есть вопросик...а гриды здесь только в названии видео-ролика?
Там все будет, гриды нужно использовать в нужных местах, а не лепить просто потому что хочется свойство записать )
@@vadymprokopchukУже посмотрел, спасибо 🙏
спасибо!
Огромное Благодарю за ваши уроки! Друзья, поактивнее пожалуйста. Поддержите идею многостраничника. Накидайте комментов.
вот вот!
Спасибо за практику! Улетный урок, жду продолжения) и многостраничник конечно было бы супер!
Ребят, попробовал сверстать прозрачный фон для правой кнопки и чтоб градиент тоже работал, зацените:
.buy-btn {
cursor: pointer;
text-transform: uppercase;
display: flex;
padding: 0;
font-family: 'Helvetica', sans-serif;
font-weight: 700;
font-size: 16px;
border: 1px solid #BC10D8;
border-image: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%);
border-image-slice: 1;
background-color: transparent;
}
.buy-btn__text {
color: #f6f4f5;
padding: 20px 110px;
background: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%);
}
.buy-btn__price {
padding: 20px 105px;
background-color: transparent;
color: #5C5C5E;
}
скоро продолжим, красава за практику
ОЧень крутое решение правдо только не совсем понятно как работает border-image-slice: 1;
Желаем свёрстанный многостраничник)))
желаем сверстаный многостраничник!!))
отлично)
ребятки, подскажите, почему, когда я пытаюсь из фигмы сохранить бэкграунд в топовой секции, то он сохраняется со всеми надписями, которые на картинке в итд, это кривой макет или я что-то не то делаю?
Вадос ! шикардос ! правда на лайв не успел (
Thanks.
🔥🔥🔥🔥🔥🔥
не, ну чатЖПТ конечно хороший инструмент и он очень сильно помогает в изучении програмирования, но вот заменить програмиста он пока не сможет, потому что за ним нужно еще переделывать и дописывать код)) и если ты в этом коде не шаришь то толку от этого инструмента будет мало) разве что сверстать примитивную страницу Hello World и подключить к какомуто движку, и то не с первой попытки
Vashshe malades
У меня картинка на экран не стала, чисто по блоку? 100vh норм работает, только задаю минус сразу же уменьшается и появляется где есть контент
Подача супер, цікаво. Недолік - у папці відсутні картинки, тут допоміг макет формату фігма.
я завжди це залишаю слухачам, щоб все робили, і краще практикувались