Ошибки в верстке сайтов. Я твою вертску шатал!
HTML-код
- Опубликовано: 21 сен 2024
- Друзья в этом видосе разобрал частые ошибки которые совершают начинающие и не всегда начинающие верстальщики) Довольно полезная информация, когда я раньше учился этому ремеслу мне как раз не хватало таких видео,
приятного просмотра! )
Верстка сайта с нуля до завершения: • Верстка сайта с нуля д...
Видео про box-sizing:
• box sizing border box ...
-------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Огромное спасибо за ваш труд. Совсем недавно обнаружил ваш канал, огромное количество годного и актуального контента. Здоровья вам и вашей семье!!!
Мне нравится как ты даешь инфу,продолжай! =)
Заинтересовало про тестировщиков как ты сказал ,было бы классно если бы ты запилил видео типа "как тестируется сайт и типа тренды UX/UI с чем придется сталкиваться новичкам чаще всего
Не "прикольно", как многие здесь пишут, а талантливо, внятно и доходчиво! Спасибо!!!
Не перегибай
@@vladzherditsky7373 ну с учётом полного отсутствие монтажа .. скорее бездарно , так что перегибает точно ...
@@FelixX138 согласен, монтаж должен быть на уровне голивудских фильмов, ибо так непонятно про что идет речь в видео, так что да, абсолютно бездарно
@@onfull8166 причём тут голливудские фильмы ? работать с программами монтажа сейчас может научиться даже семилетний ребёнок , понятно что не особо проффесионально , но всё же факт остаётся фактом .. Здесь и не нужен особо проффесиональный уровень .. Здесь нужен ниже среднего ...
@@FelixX138 зачем он вообще нужен для этого видео
прикольно, продолжай, расскажи про нюансы флексов в верстке, как себя ведут
Спасибо за идею, обязательно обсудим)
Друг, объясни пожалуйста, почему когда обнуляешь стили, то есть через normalize.css, то блоки или текст начинают налазить друг на друга, просто потом проблематично высчитывать отступы, если например надо верстать прям тютя в тютю, как быть?
@@АнтонПетров-й8э не должно такого быть, посмотри какие стили уже написаны, normalize сбрасывает стили у базовых тегов, которые ты можешь пере определить в любой момент просто подключив файл ниже normalize
Да. Формат интересный. Продолжай дальше.
Очень круто, дает понимание, правильной работы css.
Как раз не мог разобраться, как правильно работать с высотой блоков, особенно больших, а здесь все разложено по полочкам.
Большое спасибо, мне очень помогло! Зная такие фишки прям верстаешь и кайфуешь!
Вадим, добрый день, спасибо тебе огромнейшее за действительно ценную информацию, всё максимально понятно, доходчиво и по красоте) такого контента действительно мало, лучший просто!!!)) Если появится желание записать какой-то свежий видос в таком формате- думаю подписчики будут очень рады) Здоровья тебе и твоей семье, всех благ, спасибо тебе огромное за то что ты делаешь!))
Отличный видос.Без расшаркивания и лишней воды.
Воу-воу-воу, полегче ))) Флоат в 2019? ) Тогда и клиар бос нужно прописать ))
Спасибо за видео! Отличная вечеринка! ))
немного тяжело для воспирития, но норм формат, тк многие говорят только что надо делать , а какие ошибки ничего об этом не сказано и что например уже устарело. топ 10 ошибок при верстке того или иного блока. вот что интересно.семантика частые ошибки
я еще не посмотрел видео. Но лайк сейчас ставлю за название )))))
"Я твою вертску шатал!" лол бро , красава )))))))))))
Спасибо большое за полезны контент 👍🏿
Благодарю, полезная рубрика. Интересно. Хорошо если будет продолжение.
Спасибо! Очень интересный контент! Нужно больше таких видео! ;)
А давай урок по верстке красивой формы регистрации, бро)
"Давай чувак, продолжай. Нормальная тема"! Продовжуй, бажаю тобі успіхів І звісно - лайк!))!
Видео огонь, надеюсь на канале есть ещё подобные))
Ставить padding-top/bottom 15px, когда есть свойство:
display: flex;
align-items: center;
justify-content: center;
А не проставлять это используя padding, чтобы выровнять по центру текст в кнопке)
Простите, но я не смог не придраться к этому
Вопрос сложился следующий, очень интересно было бы видео как делают компонентные сборки сайтов (многостраничных) , где типа по БЭМ в папках отдельных для разных блоков лежат хедеры, часто повторяющиеся элементы итп сделаные на pug, стили соответственно scss (допустим) и js файл необходимый для работы данного блока отдельного. И как потом это все на webpack собирают.
Это вот прям ваще интересная тема на самом деле, вот эта боевая сборка многостраничных сайтов, нууу конечно, без бэкэнда, но мы как бы и не про эту вечеринку).
Заранее спасибо, если над этим подумаешь)
Мне вот просто изучить это надо, как там с миксинами работать адекватно и все такое, а материалов адекватных по этому вопросу по сути только всякие презентации от яндекса (=почти нет) . Ну либо я ищу хреново.
А то вот задание, дан макет страничек сайта и дан UI kit с повторяющимися элементами. И бог ты мой, как же сложно к этому подступиться когда ну вообще не але и делал до этого только статичные сайты.
Что-нибудь получилось найти?
ты что здесь губу раскатал это для новичков
Спасибо! Полезно! Про min-height даже не задумывался раньше
Когда только начинал не смотрел. Лучше посмотреть когда уже сам попыхаешься чутка. Так что сейчас мне полезно - луцк, комментик - магистр держите
Наконец нормальные ошибки))) а не как все ярики с ютуба копипастят 10 ошибок верстальщика
Давай чувак подолжай, нормальная тема)
Формат зашел! Реально сам много таких ошибок допускаю. Так что теперь буду знать как не делать =) Отличный урок! СПАСИБО!
Круто, отличные обзор, теперь у меня другое виденье для padding и margin))) ты крут!!! Спасибо большое
Интересный формат, а главное - полезный!)
Спасибо за видео, очень полезная рубрика !
Спасибо!
Дякую мастер Джун
Я оч ЗА такие видео-разборы, спасибо🙏
Ща глянем 😎
Полезное видео. Продолжай делать! Сделай у себя рубрику "Уроки над ошибками"
спасибо
@@vadymprokopchuk присоединяюсь) классная рубрика была бы)
Вадим, хотелось бы подробнее про псевдоклассы. Какие, для чего, когда..
Тема супер! Вадим, побольше и таких видосов, тоже!
спасибо, очень приятно
Спасибо, мне оказалось полезным.
p.s. Можешь в описание видео добавить для поисковиков - как добавить внутренний отступ для input / textarea
спасибо за урок.👍
Очень полезно , спасибо . Ждем дальше больше)
Давай чувак продолжай нормальная тема
Отлично , продолжай , контент пушка
Круто, я рад, буду радовать контентом)
респект за полезную инфу
Круто,розкажи більше таких нюансів
Мегасуперкласс!!! Продолжения про подобное ибо бесценно оно!!!!!!!!!!!!!!!!
Давай чувак продолжай, нормальная тема!!))))
А чего тема не пошла?
Очень полезная штука.
Давай, чувак, продолжай! Нормальная тема)
ооччень полезно, спасибо)
div_ы рулят )) А почему, например, для кнопки не использовать ..?
все зависит, для чего эта кнопка, например это может быть ссылка, тогда тут без вариантов, писать только a
Thanks a lot, bro!
Круто можешь про width также как height рассказать и медиа запросы тоже бы хотел узнать
Давай чувак продолжай нормальная тема!
Очень информативно, интересно и полезно.
Название бомба!!!!!
Давай чувак, продолжай! Нормальная тема.
29:00 С начало одному учишь потом сам же ошибку делаешь. А если кнопка изменится или вообще пропадет? постоянно padding подбирать? Не проще через тот же flr или на крайний случай df?
Контент годный! Молодец чувак, делай новые видосы.
Полезно! Жду продолжение! :)
Лучший !
Давай, чувак, продолжай! Нормальная тема!
Очень классно, и полезно продолжай снимать!
Продолжай👌👍
12:28
15:50
19:50
20:40(21:13)
23:15
24:00
26:45
28:30
SUPER!!
Great job! Continue please!
Вадим, сделайте, пожалуйста, верстку select компонентов. Как стоит и как не стоит. Когда select выглядит максимально стилизованно
Очень полезно! Спасибо!
Крутяк! Продолжай)
Спасибо
Я как понимаю у тебя не столь велик опыт в верстке. Или объясни почему у тебя везде ширина жестко прописана? гораздо удобнее писать maw100px; w100% ведь?
Ты хоть видео до конца смотрел?) Там про ошибки в вёрстке)
чувак продолжай,нормальная тема!
спасибо
Супер контент!
Классно, давай ещё)
Отличный формат)
спасибо!
Здравствуйте, как вы двигаете элемент через консоль разработчика в браузере, чтобы посмотреть, допустим, отступ?
P.S. заранее спасибо за ответ, а также спасибо за обучающие видео. Формат реально годный: показывать вёрстку с нуля, комментировать её, объяснять те или иные моменты. Жду видео по вёрстке с помощью grid-ов) Удачи!
Спасибо, Просто кликаю на цифру в инспекторе и стрелочками на клаве меняю значение
Зачем ссылку оборачивать в див в данном случае?
Мне это тоже не понятно. Достаточно было ссылку стилизовать и сделать блочной.
21:11 А можете объяснить подробнее, почему текст не стал картинку обтекать а одной колонкой идти. Ведь насколько я понимаю свойство overflow: hidden для другого предназначено, чтобы вылазившее содержимое скрывать
yung cashmaker, свойство overflow ещё может регулировать обтекание соседних блоков в потоке html, так в данном случае скрываеться обтекание картинкой блока, а не его содержимого😉
Классно! Го еще)
Огонь спасибо)
А почему в примере с фоном задавать для фона padding-top 100px, если можно для текста margin-top 100px?
Спасибо маэстро!
padding: 10px 15px;
одной строкой
Если при верстке у вас появляется горизонтальный скроллинг то пропишите для body {overflow:hidden;}
overflow-x: hidden; иначе пользователь не сможет скроллить страницу
Картинка с тобой закрывает элементы вёрстки в браузере. В подобных случаях лучше размещай себя слева, а не справа.
21:10 Оказывается можно написать display: flow-root; и тот же афекта ма получаеся
Флексы рулят
Почему не сделать кнопку с помощу button?
если там есть блок который нужно верстать на гридах, я так и делаю
Сделайте вертку на em что бы на. Любом разрешение сайт смотрелся одинаково
Очень сильно не хватает сценария и монтажа видео ...
жду марафон, делай их почаще только одно но лучше бы это было на макетах на русском языке
сlass="fon" сильно
Высота+++
спасибо полезный урок, подскажите как быть с line-height на Safari пишешь стили на всех браузерах норм а на сафари текст прыгает вверх по лайнхейту, выравнивал флекс боксами везде норм, сафари не по центру? (((
рекомендую юзать нормалайз css или reset и тогда должно быть ок, чтобы все было задано у нас в css
@@vadymprokopchuk зачем подключать столько кода что бы сбросить какой-то определённый стиль, который мешает сафари норм отображаться?
@@rysik2x там всего лишь 300± строк кода, которая даже не вести 10 килобайта, никакой личной нагрузки не будет, используй на здоровье ))
Проду
Найс название видео XD
А почему в звездочке(*) нельзя бы прописать падинг 10рх для всего ?
Такой вариант плохой, так как у нас будут везде эти падинги, тут либо их постоянно обнулять или будет ой как не по макету. Так не делают, реально печаль беда будет)
Цікавий формат подачі і толкові уроки! Продовжуй!
Сначала советуют учиться писать говнокод потом советуют как ненужно верстать
16:59 Что за инопланетный звук)
18:00
Зачем писать pb pt pl pr если можно просто написать padding:20px 10px;
так все адекватные люди делают
21:13 не проще .box прописать df?
ау) это видео про ошибки, ты название смотрел? там разбор типичных ошибок в определенных ситуациях, тут не как проще, это же тебе не верстка проекта, а разбор разных ситуаций