Верстка сайта для новичков. ч.1
HTML-код
- Опубликовано: 13 май 2022
- Эгегей! Ура, верстка сайта! Устраивайтесь по удобнее, сейчас начнем маслать по полной. Крутой макет, на его примере можно много интересного создать и там будут необычные фишки.
Архив со всем добром для работы - drive.google.com/file/d/1BaRw...
Сайт курса по верстке - from0to1.com.ua/
Готовая верстка на patreon - / from0to1
Видео про БЭМ - • БЭМ методология. Практ...
О box-sizing - • box sizing border box ...
jquery - developers.google.com/speed/l...
slick - kenwheeler.github.io/slick/
шрифты - fonts.google.com/
normalize - necolas.github.io/normalize.css/
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Вадим, ты не человек, ты лучше, ты просто ах***ный) Ты в такое время пишешь контент! Ты просто невероятный, я уже давно смотрю тебя и просто поражаюсь твоим терпением, человечностью, пониманием, сохранением этой жилы позитива и настроения, я очень люблю твои уроки, ценю каждое потраченное тобой время объяснения контента, спасибо тебе огромное, чтобы тебе вернулось все это в +бесконечность раз больше всего самого лучшего, больше в жизни позитива, лучших моментов, зарплаты, мира над головой, в душе и в семье!))) Спасибо тебе огромное мил добр человек!)) Такие как ты должны жить намного лучше! И такие как ты, должны жить в счастье, мире, гармонии и процветании!)
Согласен!
ого, и сколько залайкали, спасибо большое за поддержку
@@pavelsedoplatov спасибо
Вадим, ты лучший!!
Откуда вы берёте макеты из видео?
Вадим, я и не новичок давно, но ловлю себя на мысли, что сяду верстать по видосу, лишь бы твою речь послушать! И верстку повторю заодно, подзабылось. Мира твой семье
спасибо
Вадим, спасибо тебе большое за твои бесценные уроки!
Вадим, спасибо за ваш труд! Вы даже не представляете как помогаете людям.
Спасибо за урок. Ты молодец. Всего самого наилучшего тебе, твоим родным и близким!
Макет скачал - к полету готов.
Очень рад что ты возобновил свои обучающие видео.
Кстати,Харьков оживает.
Как всегда очень приятно смотреть и узнавать разные мелочи о которых раньше даже не задумывался )👍
Спасибо вам Вадим. Что в такое время продолжаете помогать другим людям, и входите в их положение. Смотрю ваши ролики и кайфую. Здоровья вам и вашим близким
Вадим. спасибо огромное за уроки и обучение. Самое главное береги себя и своих близких.
Спасибо, обязательно
Сейчас сижу, верстаю и хочу сказать, что это видео да и все на этом канале капец какие интересные! Спасибо за первый макет в мое портфолио!
Вадим, Ваши обучающие видео невероятно приятно смотреть, особенно когда подача материала разбавляется искрометными шуточками, нигде еще такого не встречала:) Информация усваивается от этого еще лучше:)
Выражаю Вам свою искреннюю благодарность за такую помощь! :3
Спасибо большое за время и силы которые ты тратишь на создание контента в такое непростое время. Давно смотрю тебя, продолжай в том же духе =)
спасибо
Спасибо тебе за то, что в тяжёлые времена излучаешь добро, свет и знания. Ты невероятный человек!
Спасибо что делаеш контент в такое время👍👍
Вадим, благодарю за объяснение normalise css, сколько смотрела видео по вёрстке никто об этом не рассказывал, теперь знаю о том, что у разных браузеров есть свои стили, раньше открывала код в браузере и не понимала откуда брались стили, которые я не писала. Новичкам вот так и нужно объяснять все подробно. 🙏
Смотреть и слушать тебя - одно удовольствие. Я успел остыть по отношению к верстке, но тебя так весело слушать, что я просто не мог не продолжить. Спасибо, мужик! Вернул любовь к изучению верстки. )
день добрый ! спасибо за бесподобный урок по верстке, думаю у такого учителя, будет очень легко выучиться
Вадим, спасибо огромное за Ваши видео! Все ОЧЕНЬ круто!
Ураааааа, супер, то что надо для новичков 👏👍 Вадим, огромное Вам благодарность. 🙏
Вадим, ты просто герой!!!! а ещё говорят, что супергерои только в marvel а вот и не правда. Спасибо огромное за твои труды. Мира тебе и добра.
спасибо
Здраствуйте Вадим вы лучше всех, я вас уважаю за то что вы уделяете свою время на то чтобы мы приобрели свою профессию и место где нам будет не скучно еще раз спасибо вам! Из Ташкента - салам от Абдумажид
Счастья тебе, самый замечательный человек!!)
Комментарий в поддержку канала и Вадима.ПС - все хорошо после твоего курса сбахал портфолио и залетел на работу в мск.
Это там не те пиксели, которые здесь пиксели, это там другие пиксели :D. Очень информативное описание.
Вадим, большое тебе спасибо!
Прошёл уже несколько марафонов с тобой. В космос слетал на суборбитальный полёт, по Кападокии поездил, верстка с тобой идёт на ура. Огромная тебе благорность за твой труд.
Успехов тебе и твоему тимлиду во всём!)
Ещё раз, большое спасибо.
Благодарим с тимлидом
Блин, я это все дело забросил пару месяцев назад, с началом всех этих ужасных событий. Как то в голове мысли совсем другие были, неопределенность, неуверенность в следующем дне.
И вот сейчас открываю ютуб и вижу, что появилась новая вечеринка. И сразу такое огромное желание начать все с начала!))) И даже самому за себя немного стыдно, потому что сам себя настроил, что это тяжеловато, сейчас не то время и т.д. В общем, сам себя отговориил. А пример надо брать с Вадима, который в такое непростое время продолжает учить людей. Жму тебе руку и желаю что б поскорее вся эта дичь закончилась.
Благодарю, работаем
Это лучшее, что я видела по верстке для новичков! огромная благодарность, ибо верстка -это прям то что надо после изучения основ html css
спасибо
Отличный макет! Все доступно и понятно.
Благодарю за проделанную работу!
Наконец-то))) Вадим сделай пожалуйста верстку не для новичков а для продвинутых, было бы очень интересно ))))).
обязательно, я только раскачиваюсь с контентом
Рад тем что жив и здоров!!!! Уже не верстаю но за время пока смотрел стримы, подружился)))) я против войны и за счастливую жизнь!!!
Братик, ты лучший, спасибо, что делаешь такой контент!
Лучший! Сразу лайк и коммент в поддержку канала
Спасибо за урок и отдельное спасибо за подробное объеснение всего того, что ты делал. За шутки тоже спасибо)
круть, рад, что понравилось
Хочу сказать тебе большое спасибо,за период войны благодаря тебе выучил огромный пак инфы,ты просто супер мотивируешь особенно в такое сложное время.
Благодарю
Какой огромный пак? Как верстать страничку?)
Благодаря вам я сдал курсовую по программированию
Огромное спасибо )
красава, преподу привет)
Всегда лайк не глядя! 👍
Вы просто нереально крутой человечище ! Спасибо !
спасибо)
Я вже в курсі frontend, але дивлюсь відео і знаходжу деякі цікавинки для себе, та й взагалі круті відео, дякую за роботу та контент 🙏
Дякую
Круто, пролетел на одном дыхании)
В конце был удивлен, что ради такой мелочи с выравниванием нужно будет включить мозг, но круто спасибо за контент.
Дякую, шикарне пояснення матеріалу. Дивишся відео і кайфуєш ))
Смотрю Вадима всегда, даже если верстать не собираюсь)💛💙
это лучшая вечеринка))) спасибки Вадос)
О, годнота подъехала!
Спасибо что ты есть. Храни тебя Господь!
спасибо
Архив со всем добром для работы - drive.google.com/file/d/1BaRwLoCQ2817VYHb7frXknzbiK8_nFnK/view?usp=sharing
Готовая верстка на patreon - www.patreon.com/from0to1
Сайт курса по верстке - from0to1.com.ua/
У меня пишет: "файл не обнаружен "
@@AlbertBa У меня так же, "файл не обнаружен", Вадим, поправь плиз
Разобрался, по верхней ссылке google-диск открывается
@@AlbertBa разворачиваешь название видео "Верстка сайта...", там есть ссылка на архив со всем добром..., нажимаешь Ещё и там ссылку на гугл-драйв, откроется архив со всем добром и скачиваешь его
@@AlbertBa исправил
Спасибо, за уроки!
Cпасибо за топ контент, дружище!
спасибо
Макет пушка!!!
Вадим рад тебя видеть снова! Спасибо что не смотря на такой п№здец ты продолжаешь делать добро! Надеюсь,, на сколько это возможно с тобой и с твоей семьей все хорошо (на сколько это вообще возможно в данной ситуации).
спасибо
Спасибо за видео!
Всё очень понятно объясняешь и хорошо , что делаешь акценты и разъясняешь всякие мелочи , которые опытному покажуться чем то банальным , но новичку не понятны конечно же. И то , что ссылки даешь на отдельные темы.
Только я то что под слайдером в column bike (где характеристики) , сделал не как ul , а как table , мне кажется так логичнее :)
Мне почему-то кажется что логичнее использовать dl(description list). Если я чего-то не понимаю то объясните пожалуйста, так как мне кажется что dl для таких случаев и создан
Вадос, респектос за видос )
Вадиме, дякую! Дуже корисний контент!)
Заметил один момент. Для кнопки "Заказать" текст находится не по центру. Это связано с тем, что letter-spacing добавляет отступ от каждой буквы, в том числе и для последней. Из-за этого внутренний отступ от текста кнопки слева, меньше, чем отступ справа. Это можно пофиксить следующим кодом:
padding: 28px calc(81px - 1.1em);
text-indent: 1.1em;
letter-spacing: 1.1em;
спасибо :D
Хорош, искренне благодарю тебя
привет друг, не мог бы ты мне подсказать я новичек и не понимаю до конца данное действие на 57:00, когда ставят + у меня ничего не происходит, но если я ставлю запятую то срабатывает ))) что не так, полностью видео повторил .menu__item, .menu__item {
padding-left: 10px;
}
@@blackdracula8196 Через + указывается соседний селектор. Через «,» указываются несколько селекторов к которым должны применятся стили. Когда ты указываешь .menu__item, .menu__item это будет работать также как и если ты указал просто .menu__item.
Если у тебя в верстке будет:
То задавая стили для .menu__item, изменены будут все div.
Если ты будешь писать .menu__item + .menu__item, то стили будут применяться ко второму и третьему div(то есть к тем которые являются соседними).
Скорее всего у тебя синтаксическая ошибка либо к в html, либо в строчке .menu__item + .menu__item в стилях.
@@mix4il Спасибо тебе большое, очень благодарю тебе что помог и не прогноил мое сообщение о помощи, я раз 10 заново проверял все, не понимал что не так, оказалось что я просто забыл добавить menu__link во внутрь menu__item ))
было вот так вот )) глупая ошибка очень ))
Описание
элегантный дизайн и качественная вёрстка, в моей папочке он самый самый (пока что ). Иногда открываю, любуюсь...
Классный макет
мужик ты человечище. слушай я прохожу в р.ф. курс 2х месячные, стоимостью в 60 тыр. и скажу у тебя, инфы намного больше(. жаль что нельзя было у тебя отучиться.
не буду разглагольствовать и словоблудить, что сказать, когда и так все хорошо, красавелла - бесподобный урок по верстке, думаю у такого учителя, будет очень легко выучиться и нативному js и фреймворкам
спасибо
Шикардосная вечеринка перехожу к части 2
красава
Ооо, пошла работа
Гений просто!
Спасибо за видео
Дякую! топ контет та маса важливої информаціїв одному відео
супер, дякую
Спасибо большое!
Пасиба учитель ты крут!
Спасибо тебе!!!
Спасибо за урок!
Я заметил в начале ты сказал, что можно как то настроить расположение классов, так что бы они прописывались в начале строки. Как это сделать?
Что мы можем применить к этому красавчику :D
Вадос здарова, очень классный видос! спасибо! а используешь какие нибудь фреймворки react/vue/angular? если нет, то почему?
Это два в одном: урок + КВН!
Красава)
Вадим, большое спасибо за такие прекрасные видео, в такое сложное время. Можно ссылку на видео с flex-ами??
спасибо! да, вот так просто :)
Не плохая была вечеринка)
годный контент
Я старался )
Единственное в этом уроке упустили прописать стили ЗАКАЗАТЬ при на ведении, но думаю - это зрителям бонусом как домашка)))
Спасибо!!
Подскажите пожалуйста, а что за стиль иконок и цвет кода? как установить такойже? очень радует глаз.
Красаааачик
😎
Вадим, спасибо за ваш труд! Хотел только сказать, что скрипты можно и в хэде использовать асинхронно или с атрибутом defer, тогда скрипт будет ждать, пока хтмл структура отрисуется:) Поправьте, если я не прав
Это так, но нужно помнить что defer работает только если есть src
29:11 меня это позабавило)
Привет, а разве не нужно элементы запихивать в , чтобы блюсти правильную семантику html5?
типо так
Yeaaaaaa
Вадим спасибо за урок, очень познавательный материал, приятно смотреть, все на высшем уровне. Хотел спросить Вадим, какая у Вас установлена тема в VS Code?
У него на канале было видео про разбор настроек редактора или разбор плагинов. Короче это какой-то плагин, чекни видео на канале.
@@user-zh4ub6kk3t Спасибо большое!
Доброго для, дякую за відео, постійно навчаюсь з Вами)))) хотів запитати, де в налаштуваннях змінити, щоб class був на першому місці? Дякую)
Спасибо большое. Учусь по вашим видео. Жалко, что я из России и не могу поддержать ваш канал на патреоне
"Получится что-то вот такое,
НО ЧТО-ТО ПОЛУЧИЛОСЬ"
by Vadim Prokopchuk)
Немного опоздал) Вадим, есть ли возможность стать участником курса от 23 мая 2022 (с ментором)?
thank you man
thank you
Большое человеческое спасибо за такой супер контент! ***** *****!
Давно пытаюсь разобраться, вот на 57минуте стрима, что если использовать для этого gap( в данном случае row-gap). IMHO результат тот же, но может я что-то не учитываю и это проявится в дальнейшем, может при адаптиве? Спасибо!
можно так, поддержка хорошая у свойства
лайк от СЕООНЛИ
nice man+!
здравствуйте не получается открыть макет. Обычно у других макеты сразу открывались в фигме. У вас в диске оказывается. А так урок понравился, много узнала, спасибо )
2:12:07 Мне кажется там align-items не нужен, потому что есть text-align. Проверял в консоли разработчика и если убирать свойство align-items, то ничего не меняется
по макету используется css свойство gap 50px, его задаем менюшке тегу ul. По макету нету падингов у ссылок меню.
Вадим, обьясните, пожалуйста, почему в секции bike 1:01:00 два div перед левой и правой колоннами? Контент ван лав
Большое спасибо за ролик) Хочу потом сам переверстать этот макет, используя scss. Можно будет выложить на гит? Или макет не для свободного распространения?)