No video
#2 Верстка сайта для начинающих | Каталог товаров
Рет қаралды 23,832
Күн бұрынВерстаем макет сайта (лендинга) из Photoshop. Видео для начинающих, практика верстки. В уроке сверстаем каталог товаров.
/* Материалы урока */
Код: github.com/Dmi...
Макет: drive.google.c...
/* Команды урока */
Запуск browser-sync: browser-sync start --server --files "**/*" --no-notify
Меня зовут Дмитрий Бердников, я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Соц. сети */
Мой ВК - berdnik...
♫Music By♫
●Kronicle - Another Chill Day
●Soundcloud - / the-chemist-10
#обучение #верстка
@user-up6es3nr6s 4 жыл бұрын
Таймкоды: 2:30 Разбираем section-catalog 3:40 Верстаем section-catalog 5:06 Стили для section-catalog 8:15 Стили для catalog-nav 15:44 Адаптивность для catalog-nav 20:56 Разбираем catalog 21:27 Разметка для catalog 21:40 Разметка для product 25:44 Стили для catalog 26:48 Стили для product 41:00 Адаптив для catalog
@user-gu5pf3nc7i 4 жыл бұрын
Хорошо объясняешь , жду продолжения.
@sashakalin 3 жыл бұрын
классный трюк с flex-grow в product__content,очень поучительно спасибо
@Anahitacode 3 жыл бұрын
Спасибо за такой контент
@laazz 4 жыл бұрын
Спасибо за видео! Надеюсь будет и посадка на wp
@user-up6es3nr6s 4 жыл бұрын
Окей сделаю)
@victor_v.i.p 3 жыл бұрын
Реально ТОП! Напишу коммент в продвижение видео в топ)
@user-up6es3nr6s 3 жыл бұрын
Спасибо
@YevhenKhreptun 4 жыл бұрын
Как это все понять?:) Мозг вскипел:)
@user-up6es3nr6s 4 жыл бұрын
Так и должно быть) Три года назад, я смотрел уроки и вообще не понимал что происходит, думал, что никогда не научусь так делать. Теперь понимаю, то что я смотрел было очень легко, а впереди намного сложнее темы. Главное продолжай учиться, через время увидишь, что это для тебя станет легко.
@user-jc9dv1ix6l 4 жыл бұрын
Здравствуйте! А почему вы этом уроке писали все стили в components, а не в отдельном файле как в прошлых уроках?
@user-up6es3nr6s 4 жыл бұрын
Здравствуй, если бы мы писал в отдельных файлах каждый блок, то получилось бы много файлов. Секции разделил на файлы, а общие элементы вынес в компоненты. Если бы мы использовали препроцессор, то их можно было бы писать в отдельных файла, потом импортировать в один файл.
@andreiostapenko288 4 жыл бұрын
Привет, спасибо за видео. Вопрос: как называется плагин, который ты используешь для быстрого создания комментария
@user-up6es3nr6s 4 жыл бұрын
Привет, использую сниппеты. Для vs code. Хочу создать плейлист с полезными фишками, где буду рассказывать похожие вещи. stackoverflow.com/questions/29995863/how-to-add-custom-code-snippets-in-vscode code.visualstudio.com/docs/editor/userdefinedsnippets
@andreiostapenko288 4 жыл бұрын
@@user-up6es3nr6s Спасибо за ответ, только начинаю путь разработчика, благодаря тебе узнал что такое snippets, спасибо за то, что ты делаешь. Удачи)
@andreinechaev7214 4 жыл бұрын
40:47 .product { display: flex; flex-direction: column; height: 100%; } У меня при добавлении свойства height: 100% нижние ряды catalog__item начинают наезжать на верхние. Когда я убираю это свойство - все нормально. Не знаю почему у вас оно работает нормально.
@user-up6es3nr6s 4 жыл бұрын
Привет, если есть возможность загрузить на хостинг и прислать ссылку, то я смогу посмотреть этот момент
@andreinechaev7214 4 жыл бұрын
@@user-up6es3nr6s Нашел ошибку - у меня класс product__footer был вынесен за пределы класса product.
@bohdan_uaf 4 жыл бұрын
Вопрос по линии-псевдоелементу. Ви задаете ей hight 100%. Висота в процентах вроде расчитиваеться от ширини родителя. Можно ли просто задать псевдоелементу top 0 и bottom 0 и он тоже растянеться до конца карточки товара?
@user-up6es3nr6s 4 жыл бұрын
learn.javascript.ru/height-percent Если у дочернего элемента стоит position:absolute, то высота в процентах будет браться от высоты родительского элемента. Но можно и через top 0 и bottom 0, но при этом все равно нужно поставить absolute
@YuliaLunyova 4 жыл бұрын
Все хорошо, только никак не получается прибить футер карточки, что только не делала...
@user-up6es3nr6s 4 жыл бұрын
Для карточки нужно задать display: flex flex-direction: column А для основного контента карточки задать flex-grow: 1, тогда он растянется на всю высоту и футер прижмется к низу Только нужно посмотреть, чтобы карточки растягивались на всю высоту. Если они растягиваются не на всю высоту, то их также нужно сделать с одинаковой высотой. Чтобы все карточки, которые идут в одном ряду, были одной высоты
@user-by4sz6is2h 4 жыл бұрын
Привет, спасибо за твои уроки, очень много полезной инфы! У меня вопрос : у айтемов в каталоге ты делал линию слева через псевдоэлемент before, можно же сделать через border left, разницы же нет?
@user-up6es3nr6s 4 жыл бұрын
Привет! Можно, но нужно помнить, что border будет влиять на ширину элемента. Если стоит box-sizing: border-box, то border 1px уменьшит его контентную область на 1px. Также, смещение линии будет не совсем по центру, так как граница будет задаваться одному элементу. В данном случае эти изменения будут почти не видны, но я думаю, что лучше через псевдоэлемент
@whatisloveel 4 жыл бұрын
смотрю на 47 минуте, ты говоришь кнопки начинают лететь, ну я так понимаю типо ломаться, но я вообще изменений не вижу, спасибо
@user-up6es3nr6s 4 жыл бұрын
Точно уже не помню, но по-моему, когда я их инспектировал, то они вываливались за родительский контейнер
@fun_frame 4 жыл бұрын
Привет, у меня :hover почему-то не работает, не выделяется цветом в редакторе, не знаешь в чем может быть проблема? п.с: пробелы не ставил Заранее спасибо
@user-up6es3nr6s 4 жыл бұрын
Привет. Hover не выделятся цветом в редакторе? Проблема в редакторе кода или на сайте при наведении на элемент не меняются стили?
@radimirbond8994 4 жыл бұрын
На какой раскладке клавиатуры пишешь
@user-up6es3nr6s 4 жыл бұрын
@@radimirbond8994 Это мне вопрос? Если да, то на стандартной qwerty
@chernik_us2752 4 жыл бұрын
еще вопрос родился, слушай, это твой основной вид заработка ? А то работаю на работе которая не вкатывает, учу в свободное время верстку, после нее планирую учить ява скрипт, вот более менее научусь хочу уже пересесть за веб и зарабатывать уже на этом
@user-up6es3nr6s 4 жыл бұрын
Да, это реально. Нужно время, чтобы понять как все это работает. Если не бросишь, то получится
@yavier7576 2 жыл бұрын
у меня есть вопрос, а в каком моменте вы будете дорабатывать бургер меню в шапке
@yavier7576 2 жыл бұрын
для адаптации
@reblerelond831 2 жыл бұрын
Привет, надеюсь ответишь, добавляю классу catalog_item (width:calc(100%/3)) текст сужается, перебрасывая слова на другую строку, но остальные items так сказать не входят в линию
@user-up6es3nr6s 2 жыл бұрын
Привет! Можешь ссылку расшарить с версткой? Без контекста сложно понять
@chernik_us2752 4 жыл бұрын
привет, как быть с тем бордером который остается слева (14:38), правый ладно, просто поменяли ему цвет при наведении, а как быть с тем который остается при наведении ? Уже думаю думаю, не знаю как его убрать, это мелочь понятно, но блин, хочется чтобы все было классно)
@user-up6es3nr6s 4 жыл бұрын
1. Можно попробовать через z-index вперед вынести элемент, на который мы наводим и сделать так, чтобы он перекрывал. 2. Задать ему псевдоэлемент, который будет появляться только при наведении. Мысль понятна? Я не пробовал, но должно работать
@alexanderbriest2122 3 жыл бұрын
Не легче для VS использовать Live Server,чем вводить каждый раз команду browser-sync?
@user-up6es3nr6s 3 жыл бұрын
Привет! Проще, но мне больше нравится через консоль
@alexanderbriest2122 3 жыл бұрын
@@user-up6es3nr6s Добрый вечер, спасибо за видео!
@user-yf3yt6hp3e 3 жыл бұрын
Фронтендер, а что если пицца(картинка) станет больше? У меня такой случай, контент становится не красивым, а фиксированную высоту задаю и картинка пиксилизируется
@user-up6es3nr6s 3 жыл бұрын
Привет! Фиксированную высоту лучше не задавать. Для изображений лучше использовать max-width: 100%; height: auto; Если фиксированные размеры, то можно попробовать свойство object-fit: cover;
@user-yf3yt6hp3e 3 жыл бұрын
@@user-up6es3nr6s а где видео?
@user-up6es3nr6s 3 жыл бұрын
@@user-yf3yt6hp3e Привет! Пока пауза, для следующего курса только дизайн сделал
@user-yf3yt6hp3e 3 жыл бұрын
@@user-up6es3nr6s очень жду!!! Твои комментарии отличаются от других ютуберов
@user-up6es3nr6s 3 жыл бұрын
@Дмитрий Самарин Привет! Пока не планировал, в основном работал с wordpress
@victor_v.i.p 3 жыл бұрын
Ёу! Слушай, у меня проблема! Почему-то у меня в строке не три товара, а все два, хотя я просто скопировал код. В чем проблема?
@user-up6es3nr6s 3 жыл бұрын
Привет! Так сложно сказать. Ты код с гитхаба у себя поставил и не так работает? Прям код один в один? Выложи куда-нибудь верстку и пришли ссылку на сайт, чтобы посмотреть.
@jbsharan2189 3 жыл бұрын
.catalog{ display: flex; flex-wrap: wrap; } .catalog__item{ width: calc(100% / 3); margin-bottom: 90px; } почему не работает width: calc(100% / 3); @Фронтендер
@user-up6es3nr6s 3 жыл бұрын
Привет! А как оно не работает, вообще не применяется или не так работает, как ожидается? Вот пример, само свойство работает jsfiddle.net/berdnikovdima/85tvrpyx/2/
@Hello_world_2020A 4 жыл бұрын
Я так и не понял 1) Как обычно верстают верстальщики (Bootstrap 5 или другое). Они на чистом вроде так не делают????? 2) Автор ** Сделай плейлист какого то проекта типа этого но только со всеми технологиями (wow.js / bootstrap / ................................)
@user-up6es3nr6s 4 жыл бұрын
1) Каждый делает как хочет, так тоже можно. А можно со всякими библиотеками и сборщиками, это будет быстрее. 2) Делаю другой курс по верстке и посадке, уже со сборкой проекта
@Hello_world_2020A 4 жыл бұрын
@@user-up6es3nr6s интересно когда он выйдет???
@user-up6es3nr6s 4 жыл бұрын
@@Hello_world_2020A В августе запишу
@besquait2882 4 жыл бұрын
Как так быстро переключаться между окнами?
@user-up6es3nr6s 4 жыл бұрын
На windows command + цифра окна, например, command + 1, command + 2
@besquait2882 4 жыл бұрын
@@user-up6es3nr6s Спасибо
@Hello_world_2020A 4 жыл бұрын
Блин я как бы все понимаю НО очень долгие уроки смотрю в замедлении -50% и больше 2Часов выходит на один урок Моск просто горит от долгого впитывания как губка. Все понятно, но запомнить не могу пытаюсь понять. Эти уроки пока очень сложны для меня. АВТОР как мне лучше усваивать такую информацию????? Я думаю что никогда не научусь
@user-up6es3nr6s 4 жыл бұрын
Если хочется научиться, нужно просто продолжать учиться и делать. Легких путей нету. Не получается сейчас, получится потом.
@Hello_world_2020A 4 жыл бұрын
@@user-up6es3nr6s уже пробую
Makhabat Abdisattarova
Рет қаралды 24 М.
Harley Quinn with the Joker
Рет қаралды 17 МЛН
WAYUP & Андрій Гаврилов
Рет қаралды 741 М.
Nolim
Рет қаралды 4 М.
Alexey Bychkov: веб-дизайн и фриланс
Рет қаралды 67 М.
Артём Ипатов про IT
Рет қаралды 20 М.
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 19 М.