HTML & CSS практика | Карточка товара

Подписаться 10 тыс.

Просмотров 62 тыс.

50% 1

Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
Как сверстать карточку товара? - вот так, к примеру :)
Простое использование HTML с CSS. Помимо этого, мы будем использовать иконки. В конце видео рекомендую потом самим поиграться с этим, и преобразить вид карточки.
❗ Шаблон для старта из видео: github.com/avis-academy/pract...
Иконки, которые использовали: ionicons.com/
Не понял какой-то CSS свойство? - ищи его в справочнике и читай о нём: webref.ru/css
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети

Опубликовано:

13 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 113

@famix7431 8 месяцев назад

ТЫ ПРОСТО ЛУЧШИЙ!!! ОГРОМНАЯ БЛАГОДАРНОСТЬ ЗА СТАРАНИЯ!!!!

@user-tl7ur9sb6f 3 года назад

Супер видос! И с юмором)))

@Rysik5318 2 года назад

Первый урок, который был полезен по карточкам из магазина, а с иконками, ты ловко придумал

@funpast 7 месяцев назад

это очень полезный канал, респект тебе

@zargon2265 2 года назад

Спасибо тебе, за такие понятные уроки

@pro100zebra9 7 дней назад

Привет, вот ты 2 года назад смотрел видосы о том как делать карточки товаров, если не секрет за эти 2 года много чего нового изучил?

@maksimmaksim1636 Год назад

посмотрел твоё видео первый раз. и решил пересмотреть второй раз но + ещё повторить весь код у себя.

@eugenemaksak2815 2 года назад

До просмотра твоего видео, у меня было конченное настроение. Но ты мне его вырав.. выров.. бл.ТЬ!. вырва... вырыва... * уф* Настроение стало на порядок лучше. Спасибо, автор:)

@ketopc6320 2 года назад

смотрю твой каждый ролик ты топ жалко так мало полписчиков

@_SM10_ 2 года назад

Музыка хороша!)

@vipeerx 3 года назад

прикольно, запишу на будущее

@tanya_tageo Год назад

спасибо огромное)

@bymaffin Год назад

Привет интересный урок! и приятный голос, го еще видео как сделать админ панель под магазины

@user-kh4bl8kx3n 2 года назад

Ну что это за гений!!

@Hlepo5631 Год назад

Капец, спасибо за урок! Реально помогло, хоть и помучалась с "карточки не в линию". Как оказалось, вся проблема была в хештеге div, который закрывал первую карточку после второй. В общем, горе невнимательность х)

@mikaelgevorgyan4521 Год назад

@@AVISTV Ещё мнёго мнёго верстки) .

@mikaelgevorgyan4521 Год назад

@@AVISTV хочу идей узнать по больше) и это хочу на гридах сделать и ) найти способ манипулировать с помощью js в моём) фреимворке на php+js+html. оказывается html очень большой помошник для js. )

@mikaelgevorgyan4521 Год назад

@@AVISTV наконец-то есть место где можно использовать иконочки, потому что много платных сделали

@funny_tok1020 2 года назад

спасибо очень помог

@choppalgenda 9 месяцев назад

а как сделать чтобы по нажатию кнопки корзины выходила вся инфа о товаре , характеристики и тд ?

@markoyforever1 9 месяцев назад

А как потом добавить фон не касаясь шапки?

@daudkostoev4236 Год назад

спасибо тебе, но у меня проблема когда я копирую и вставляю новую карточку то она появляется внизу а не сбоку что делать.

@fogdog7851 2 года назад

Привет круто делаешь не мог подсказать как сделать на проекте так что если пользователь загружает музыку на мой сайт чтобы сайт проверил зарегистрирован пользователь или нет?

@user-yo7mw6oj4p 3 года назад

Спасибо.

@natehiggers8239 2 года назад

А как добиться адаптива с конкретно заданными значениями высоты и ширины ?

@StasFetisov Год назад

а где посмотреть стили contaner, row, col-md-4?

@takidom 2 года назад

Видео крутое , но вот не проще ли использовать опенкарт к примеру ?

@pavelfedevych5086 3 года назад

Мне тоже зашло

@fundiy8541 2 года назад

Такой вопросЮу меня почему-то не работают кнопки на картинках почему ето может быть?

@ladyshopVRN 3 месяца назад

подскажите, как поставить цену вверх, а то она стоит справа напротив скидки и обычная

@maks__kot Год назад

у меня между заголовком и рейтингом отступ откуда то берётся, хотя я вроде margin-bottom 0; указывал у заголовка

@fransuaa 2 года назад

После дизайна, кнопка стала не кликабельна, подскажите пожалуйста что делать

@z1xbtw706 2 года назад

верстка классная но вот проблем будет js разработчику конечно когда он будет получать данные с сервера)

@madiserikkazhyuly2130 2 года назад

Эмодзи откуда вышло?

@readrain5473 2 года назад

здравствуйте, а можно использовать этот способ для создания 10+ таких карточек товара или есть способ проще

@readrain5473 2 года назад

@@AVISTV спасибо

@dobrMAV 3 года назад

Эх,жаль что не добавили анимацию на кнопку) Спасибо за полезное видео! Планируете ли видео про слайдер ?

@dobrMAV 3 года назад

@@AVISTV Пожелание ,про Swiper,а если еще и на мобильных устройствах будет работать))

@dobrMAV 3 года назад

@76nasX Начинающий,для меня пока не очень просто.

@dobrMAV 3 года назад

@76nasX Спасибо большое!Пока вот изучаю HTML CSS ,для меня это пока не просто ,в дальнейшем планирую начать изучать JS и посадку верстки на смс ,но это в будущем.

@Pushinka_and_Barcelona Год назад

@@AVISTV что делать если нету style. css?

@Pushinka_and_Barcelona Год назад

@@AVISTV У меня всё получилось, но почему у меня корзина уходит на конец страницы, как это исправить? И после дизайна кнопки она не работает.

@-w3nkaaa 5 месяцев назад

как сделать так, чтобы все блоки стояли в ряд, а не в колонку?

@yanaslh 2 года назад

Поясните пожалуйста, зачем мы в начале создаём 3 div'а? Я вообще не выкупаю, понятно только то, что после этого мы делаем обёртку ддя карточки и саму карточку.

@yanaslh 2 года назад

И добавление к вопросу об блочности карточек. У меня .row стоит в нужном месте, писал код строго с видео, но почему-то все карточки идут столбцом

@rah_emil 2 года назад

@@yanaslh у тебя опечатка) не col-mid-4, а col-md-4

@rah_emil 2 года назад

А к вопросу о вложенности. Бывает, нам нужна ещё более глубокая вложенность. Сам я в начале своего пути тоже задавался этим вопросом. Не понимал зачем такая вложенность нужна. Твой вопрос настолько хороший, что я на этой неделе сниму отдельное видео на эту тему) Ожидай

@yanaslh 2 года назад

@@rah_emil Аа, понял, спасибо тебе огромное. Буду ждать видоса про вложенность

@HPEMusic1337 Год назад

почему у тебя когда ты добавил их несколько штук то у тебя их было все 4 шт в ряд а остальное на новой строке, а у меня все в ряд

@murod4ik338 2 года назад

у меня на верху слайд и я не понимаю как разместить их по ниже

@user-ln2yc1yk5y 6 месяцев назад

почему у меня какая-то точка вместо знака корзины?

@user-nt7vk2kk9t 3 года назад

Если название товара будет на две строки,то измениться высота только одного элемента?тогда весь ряд будет кривой?

@m1rselin 2 года назад

@@AVISTV что делать если не работают иконки?

@nikitakashyrski2894 Год назад

Не, ну действительно как сделать так, чтобы все блоки стояли в ряд, а не в колонку?

@user-mi5zm2im4m 8 месяцев назад

Сделай див, в котором будут все эти карточки. Потом добавь к этому диву стиль flex-wrap: wrap; Этот стиль работает так: Ечсли содержимое (карточки) выходит за рамки дива, то это содержимое переносится на новую строку

@user-mi5zm2im4m 8 месяцев назад

Если не понял, то можешь просто почитать про flex-wrap

@romanj13 2 года назад

Прошу прощения, может и есть ответ на этот вопрос, но у проблема, когда прописываю команду justify-content:space-between; где info-price, у меня в линию не хочет встать, а только за пределы. Таймкод 9:14

@blchk07 Год назад

у вас display: flex стоит?

@annnamerk Год назад

Здравствуйте, вы смогли как-то решить эту проблему?

@blchk07 Год назад

@@annnamerk возможно вместо flex flow: row nowrap, прописать: flex-direction: column, flex-wrap: nowrap

@annnamerk Год назад

@@blchk07 К сожалению не помогло, но спасибо за ответ!

@annnamerk Год назад

@@blchk07 В принципе оно сместилось, но сместилась также и цена.Теперь она сверху иконки с корзиной :(

@chesnokov4132 2 года назад

Автор, видео топ но есть момент. В вкладке дай пожалуйста ссылку которую картинку 300 на 400 ты вставлял scr

@chesnokov4132 2 года назад

@@AVISTV Друг, я понимаю что суть не в ней, прикол в том что у меня иконку корзины отбрасывает в другую сторону страницы, я хоте решить проблему этой картинкой.

@chesnokov4132 2 года назад

@@AVISTV Ну я так понимаю проблема не в этом

@mishaprokopovich5253 6 месяцев назад

@AVISTV у меня проблема с отбрасыванием иконки корзины влево не фиксится, хотя написал как в видео, странно

@user-ef5tr7hs2o Год назад

Объясните мне пожалуйста момент с карточками в ряд, почему они у меня одним столбцом выходят

@user-ef5tr7hs2o Год назад

Да вроде все правильно

@bfmapper6850 8 месяцев назад

И надо подключать платёжную систему в html

@murod4ik338 2 года назад

а почему корзина переместилась в самый край правой стороны?

@milkyway7206 Год назад

так как нужно указать ширину карточки , которую можно указать в классе product

@andriykostalker2002 Год назад

Можно использовать space-around вместо space-between

@Mrbuter21 2 года назад

помогите пожалуйста у меня карточки не встали в ряд а встали друг под другом что делать

@user-dv8qk6ow5r Год назад

@@AVISTV У меня всё равно вниз идёт:( Можешь как то помочь?

@skillzar3390 Год назад

помогите пожалуйста у меня карточки не встали в ряд а встали друг под другом что делать но все они под дивом row

@avaifia3760 Год назад

.col-md-4 { display: inline-block; } Вставь в css

@whatuwantfrme 8 месяцев назад

@@avaifia3760 не робит

@user-qo5ke3oi2w Год назад

Как поставил символ рубля?

@maks__kot Год назад

₽

@boostofbest2283 3 года назад

У меня почему то все карточки не идут друг за другом, каждая переносится на след строку, как это решить?

@boostofbest2283 3 года назад

@@AVISTV так у меня все карточки в классе .row

@boostofbest2283 3 года назад

@@AVISTV я разобрался, спасибо

@user-tm3fi2tl5i 2 года назад

@@boostofbest2283 подскажи, пожалуйста, как решил проблему?)) если помнишь конечно

@Mrbuter21 2 года назад

@@boostofbest2283подскажи как

@kolifki4692 2 года назад

что делать если карточки стоят в столбик,а в сточку не встают,какую комнаду надо написать??

@kolifki4692 2 года назад

@@AVISTV спасибо большое

@i_am__xyulo 2 года назад

Вот учусь но у меня они не в линию а в ряд уходят почему? Кто-нибудь помогите

@i_am__xyulo 2 года назад

@@AVISTV спасибо забыл сделать так

@Nestv1Le 5 месяцев назад

@@i_am__xyuloкак сделать

@_Fantom_. 3 года назад

Я не пойму, у тебя, бутстрап подключен что-ли?

@_Fantom_. 3 года назад

@@AVISTV Ну ясно, не обратил внимание на ссылку...Но непонятно зачем подключать бутстрап, а не верстать на флексах..

@_Fantom_. 3 года назад

@@AVISTV Так можно самому создать свой шаблон обнуления стилей типа reset, а нормалайз то херня конечно, но и бутстрап тот еще костыль, а привычка на то и есть чтобы от нее избавляться...Не в упрек, хозяин- барин..