Тёмный

Верстка сайта с нуля, для новичков. Марафон по верстке, день 1 

От 0 до 1
Подписаться 83 тыс.
Просмотров 99 тыс.
50% 1

Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
Тема в VSC - плагин Material Theme
Все исходники, инструкция и информация в телеграм канале.
Ссылка на телеграм канал:
t.me/from0to1com
Готовая верстка на patreon - / from0to1
Чат верстальщиков:
t.me/chat_from_0_to_1​​
Написать мне в телеграм:
t.me/silver8light​​
Отзывы о моем авторском курсе по верстке:
topic-104892258_40476405​
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

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

 

6 апр 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 96   
@Patrick-ly9wt
@Patrick-ly9wt 3 года назад
Вадим зажигает, и разжигает любовь к верстке. Спасибо друг.
@yankuandykov4392
@yankuandykov4392 3 года назад
Урок топ, Влад топ, Дизайнер топ, Дизайнер который может дать по другому в PSD вообще топ
@user-tl7ur9sb6f
@user-tl7ur9sb6f 3 года назад
Спасибо за урок. Полезно, интересно, познавательно!)
@Viktor_Hladkykh
@Viktor_Hladkykh 3 года назад
Спасибо за качественный контент 👍
@Pussyandcat
@Pussyandcat 3 года назад
Очень круто, спасибо!
@FirstnameLastname-re9ei
@FirstnameLastname-re9ei 2 года назад
Не пишу комментрии, но ты на столько круто и просто все объясняешь, что я просто в шоке! Спасибо тебе!
@DmitryYanushkevich
@DmitryYanushkevich Год назад
Спасибо за труды 🙏 очень увлекательные и позитивные получаются вечеринки!
@DmitriiBozan
@DmitriiBozan Год назад
если я дам свой телеграм, то можешь прислать етот сайт?
@MrMakaron4ik
@MrMakaron4ik Год назад
Мне одному это видео смотреть интересно не только за полезный контент но и из за юмор этого прекрасного человека?)
@vadymprokopchuk
@vadymprokopchuk Год назад
спасибо)
@yovrname6163
@yovrname6163 5 месяцев назад
​@@vadymprokopchuk😊
@j-lewis
@j-lewis 3 года назад
Спасибо, сенсей!
@optimist6861
@optimist6861 4 месяца назад
Спасибо за контент очень интересно
@viktoriaviktoria3178
@viktoriaviktoria3178 3 года назад
Щиро дякую! Все супер!
@tarastanchynets5336
@tarastanchynets5336 3 года назад
Красава!!! ОЧень полезно.
@MsAlecksey
@MsAlecksey 2 года назад
Молодец. Все расказуєшь дословно, а не так как многие "так надо уложиться в 1 или 2 часа вёрстку и полетел без разбора.С вами преуспел в вёрстке.
@rostyslavkinash5232
@rostyslavkinash5232 3 года назад
спасибо за урок
@littlecat8931
@littlecat8931 3 года назад
спасибо большое!
@nataliolli7298
@nataliolli7298 2 года назад
Марафон огонь, огромное спасибо за информацию за то, что есть такой замечательный человек Влад, который все очень понятно и доступно объясняет!!!
@user-fs3yr9yk6n
@user-fs3yr9yk6n 2 года назад
Харизма на высоте!)
@movieclips4848
@movieclips4848 3 года назад
Класс 👍
@user-nc2xu2kg9q
@user-nc2xu2kg9q 3 года назад
На кнопку можно добавить бордер, чтобы при наведении на белом фоне у кнопки оставались границы и она не терялась.
@user-ij7pz9wg3h
@user-ij7pz9wg3h 3 года назад
Кайф чувак не знаю кто ты но ты мой спаситель
@rahimkhatsiev2851
@rahimkhatsiev2851 3 года назад
Годно.
@user-tc9ml2mu5k
@user-tc9ml2mu5k 3 года назад
А почему не делали фон Хедера заливкой цвета? Зачем именно картинкой делать фон у хедера? И что со шрифтами? Почему сразу не выяснили какие где и не подключили сразу их? Я в body сразу по умолчанию ставлю шрифт которого больше всего на сайте и font-size: 17px; например.очень удобно.
@user-dx4by3xy4y
@user-dx4by3xy4y 2 года назад
Ты лучший
@MsAlecksey
@MsAlecksey 2 года назад
Спасибо.
@vladimirbelokur602
@vladimirbelokur602 3 года назад
Большое спасибо. Ты топ. Кинь ссылку куда скинуть благодарность деньгами.
@user-ei3fj7ks7u
@user-ei3fj7ks7u 3 года назад
Вадим конечно молодец. Я сам начинал смотреть когда-то его уроки. Сугубо моё личное мнение и наблюдение, ни в коем случае не хочу как-то Вадима и его детище обидеть, но, сейчас чисто верстальщиком быть уже не канает. Во многих студиях вёрстку делают в купе с чем-то, с тем же бэкэндом например, а на фрилансе заказов чисто по вёрстке практически нет, а если и есть немного, то за копейки, потому что всем нужен сайт под ключ, если мы говорим о фрилансе, а это значит, что ты должен быть на все руки мастер - и дизайн составить и вёрстку склепать и логику сделать и на cms посадить и все все вместе, причем за эту работу тебе заплатят как за одно действие, хотя по сути ты выполняет работу 3 разных специалистов, ну или фулстекера одного (фронт+бэкэнд разработчик), которая и должна оплачиваться соответствующе. Это просто наблюдение и логические выводы.
@jem9744
@jem9744 3 года назад
Так а причём тут "обидеть детище Вадима"?) Вёрстку же тоже нужно изучать как-то. Понятное дело, что далеко на одной вёрстке не уехать (хотя некоторые умудряются), но с неё надо начинать хотя бы.
@jem9744
@jem9744 3 года назад
@@ch_shik6042 и что? А он должен что-то кроме делать? Почему он должен двигаться? Может он не считает, что компетентен в других областях. А вёрстку он хорошо объясняет.
@user-hu6dl
@user-hu6dl 2 года назад
Евгений Логвиненко дай свою телегу если можно хочу что-то спросить у тебе
@maksgeer5263
@maksgeer5263 2 года назад
Бля просто очень крутой чел все ясно хорошо объясняет сразу лайк 👍!!!!))
@vadymprokopchuk
@vadymprokopchuk 2 года назад
Спасибо)
@fobianka2131
@fobianka2131 Год назад
спасибо огромнейшее, это был мой первый сайт, который сверстала сама, не без косяков... до min-hight в header не додумалась. Counter записывала неправильно и не туда, поэтому не работал)) И не смогла в input прописать белый шрифт для ввода пользователя)) 3 дня верстала). После ваших уроков смогла такое сделать, сейчас смотрю на проделанное и не верю глазам) До этого знала только о параграфах и h1-h6)
@exer9995
@exer9995 3 года назад
1:14:23 я написал всё как говорили вплоть до конца но почему то не сработало когда я написал padding: 47px 0 45px; display: flex; justify-content: space between; элементы не раз бросились что делать?
@gorobart
@gorobart 3 года назад
Где исходные Файлы ? Ссылка на телеграм не работает
@asdasd-hg3uz
@asdasd-hg3uz 16 дней назад
а есть на макет ссылка? Вроде везде просмотрел не вижу
@user-pd2uv3vp1k
@user-pd2uv3vp1k Год назад
класс, норм канал!
@DmitriiBozan
@DmitriiBozan Год назад
если я дам свой телеграм, то можешь прислать етот сайт?
@movieclips4848
@movieclips4848 3 года назад
Сделайте уроки по меню на чистом JavaScript пожалуйста 🙏
@user-pp8hk8fg3g
@user-pp8hk8fg3g 3 года назад
java-script не испоьзуется просто так
@privet_baget
@privet_baget 3 года назад
На чистом JS только извращенцы пишут, для создания элементов интерфейса нормальные пацаны используют jquery с плагинами.
@serhiiarkhypenko8370
@serhiiarkhypenko8370 2 года назад
@@privet_baget нормальные пацаны пишут такие элементарные вещи на чистом жс, а более крутые на альпине. На жеквери пишут старички или извращенцы...
@serhiiarkhypenko8370
@serhiiarkhypenko8370 2 года назад
@Дмитрий Самарин для оптимизации
@dimondimonov6417
@dimondimonov6417 5 месяцев назад
На чистом js извращенцы получают в три раза больше денег чем твои плагины
@user-bx8ck6kc8o
@user-bx8ck6kc8o Год назад
Сколько нужно времени, чтобы найти работу по верстке для клиентов
@Den-SyaoPinov
@Den-SyaoPinov 3 года назад
Вадим , какие программы мне нужно для НАЧАЛА ПУТИ ВЕРСТАЛЬЩИКА установить и "поюзать" их ?
@Vlad-sh5kj
@Vlad-sh5kj 3 года назад
Html вместе с css изучай. Смотри как другие сайты пишут и повторяй. А что касается программ, то тут только среда разработки) VS Code например.
@danilaundead4760
@danilaundead4760 3 года назад
Sublime text или Visual Studio
@yc_lucky
@yc_lucky 3 года назад
а где можно посмотреть source code?
@user-sl8oi5wj6e
@user-sl8oi5wj6e 2 года назад
Не работают ссылки в телеге. Чат верстальщиков жив? Бро прикрепи PSD к этому видео. Жаль не повторить за тобой((
@daniil7243
@daniil7243 3 года назад
Подскажите пожалуйста в чем разница между написание классов слитно в css и через пробел(например: .abc.bcb и .abc .bcb)?
@___-jh7ys
@___-jh7ys 3 года назад
.abc.bcb - это когда у тебя есть у одного тега два класса например : . Они пишутся через пробел, как ты заметил а .abc .bcb - это уже два элемента. Например:
@user-kn8nl4lv5y
@user-kn8nl4lv5y 3 года назад
@@___-jh7ys человек же даже пример привел, а ты ему вообще не о том)) html код сюда вмешал)
@geniousbot6453
@geniousbot6453 3 года назад
@@user-kn8nl4lv5y так все верно он написал, лол. в css используются классы из html,если что
@daniil7243
@daniil7243 3 года назад
@@___-jh7ys Спасибо за ответ!
@user-kn8nl4lv5y
@user-kn8nl4lv5y 3 года назад
@@geniousbot6453 таки правильно, извиняюст). Просто в вопросе были селекторы, а в ответе привел в пример атрибуты. Но сдела все как надо. Был не прав)
@WhispersHistory-History
@WhispersHistory-History 2 года назад
Кто подскажет где найти макет? По ссылке не перевидит в телеграмм(
@fuckyeah2415
@fuckyeah2415 2 года назад
очень крутой разбор, только где взять макет? Хочу сверстать сам попробовать
@vadymprokopchuk
@vadymprokopchuk 2 года назад
ссылка на канал в вописании, переходите и мотаете вверж до макета
@jbsharan2189
@jbsharan2189 3 года назад
Я конечно извиняюсь но когда писать header__top а когда header__inner (за ранее спасибо)
@user-yb8cp3xy7x
@user-yb8cp3xy7x 3 года назад
header__top это только верхняя часть хедера, а header__inner это обёртка для целого header, тут логично было бы написать header__inner после container но в header контента не много поэтому и без него обошлось
@kulynych6664
@kulynych6664 3 года назад
Дайте совет пж, где лучше начать изучать javascript?
@muhammadabdulloev3600
@muhammadabdulloev3600 3 года назад
W3school.com, думаю там
@user-rd6hl4kl2n
@user-rd6hl4kl2n 2 года назад
что то у меня логотип не работает на странице что за беда?
@user-ku2mj2gc5f
@user-ku2mj2gc5f Год назад
третью верстку пытаюсь начать повторять и ничего невыходит и повторяю один в один
@user-ci1gv6ud3p
@user-ci1gv6ud3p Год назад
Як получити посилання на макет ?
@capstanfearless
@capstanfearless 3 года назад
Пора бы своим ученикам сказать, что все скрипты в подвале можно мерджить в один.
@user-es8bm5cq8n
@user-es8bm5cq8n Год назад
Подскажите, где можно сказать такой макет, чтобы весте по видео делать?
@vadymprokopchuk
@vadymprokopchuk Год назад
привет, ссылка на тееграм под видосом, все там
@user-es8bm5cq8n
@user-es8bm5cq8n Год назад
@@vadymprokopchuk Спасибо
@MrZefir-pv3gi
@MrZefir-pv3gi 3 года назад
А почему мы сразу через sass не писали?
@user-yb8cp3xy7x
@user-yb8cp3xy7x 3 года назад
В названии указано: для новичков, тебя не смутило как подробно он все объясняет, если бы было для тех кто уже юзает препоцессоры, объяснения бы точно такими не были
@user-pp3cv4nz4n
@user-pp3cv4nz4n 2 года назад
1:04:39 - подключение шрифтов
@black_4301
@black_4301 2 года назад
2:29:20 скульпторы)
@miamaxim7662
@miamaxim7662 3 года назад
5:28 а как называется это программа в котором вы создали драфт веб сайта? AdobeXD или ...
@user-pp8hk8fg3g
@user-pp8hk8fg3g 3 года назад
FIgma
@user-rd6hl4kl2n
@user-rd6hl4kl2n 3 года назад
скачать исходник уже нельзя получается?
@vadymprokopchuk
@vadymprokopchuk 3 года назад
почему?
@user-rd6hl4kl2n
@user-rd6hl4kl2n 3 года назад
@@vadymprokopchuk а все получилось
@Shiba_dub
@Shiba_dub 9 месяцев назад
очень много лишниз классов, движений . в css я вообще офигел на бекграунде... можно просто bg url() cover no-repeat center;
@Mercava
@Mercava 3 года назад
Шото ни одна ссылка на соцсети не робит
@user-cu4ru2ru2f
@user-cu4ru2ru2f 3 года назад
напиши в телеге from0to1ru​
@awenn2015
@awenn2015 3 года назад
Не проще галп юзать с browser-sync что бы не обносочтт постоянно ?
@user-jh1zd2ly6d
@user-jh1zd2ly6d 3 года назад
он показывает новичкам как верстать, это уже будет лишнее на начальном этапе
@D_EUS
@D_EUS 3 года назад
@@user-jh1zd2ly6d Есть расширение Live Server для VS Code, новичкам самое то)
@ShoTHIk
@ShoTHIk 3 года назад
Галп ещё подключать нужно, а это целая история. А вот плагин Лайв релоада в ВС Коде использовать было бы как раз :)
@7iomka
@7iomka 3 года назад
галп не проще) но если уж говорить о норм подходах то лучше брать вебпак и крутить как хотите)
@Den-SyaoPinov
@Den-SyaoPinov 3 года назад
да как для новичков-то ? я половину слов не понимаю я-то кто тогда ?
@yankvasya
@yankvasya 3 года назад
Ты не один такой. Главное не сдаваться и продолжать копать в эту сторону
@nurbolotturatbekuulu4097
@nurbolotturatbekuulu4097 2 года назад
a service__item не ссылка ?
@jonyonee
@jonyonee 2 года назад
Бул медотология БЭМ если тэг а service-item__link болсо то сыллка
@nurbolotturatbekuulu4097
@nurbolotturatbekuulu4097 2 года назад
@@jonyonee билем БЭМ ди ал туура эмес кылып кой ду. Кара. Если Link я знаю что это ссылка
@user-eo2ll1te6d
@user-eo2ll1te6d 3 года назад
у меня с минусом почему то схлопнулось ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xVxAR2fMQoU.html , поставил 50 px и все встало на свои места
@user-ku2mj2gc5f
@user-ku2mj2gc5f Год назад
все остановилось у меня .services{ padding-top: 350px; } вот эта вещь не работает ,неотступает
Далее
BE LITTERED WITH CARDBOARD SWEETS!#asmr
01:01
Просмотров 8 млн
ТИПИЧНЫЙ БАРБЕРШОП
09:27
Просмотров 262 тыс.
aespa 에스파 'Supernova' MV
03:14
Просмотров 12 млн
GigaCode. Небольшой обзор
8:57
Просмотров 8 тыс.
Как подключать шрифты в 2024
20:53
Просмотров 2,7 тыс.