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

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии •

  • @Patrick-ly9wt
    @Patrick-ly9wt 3 года назад +7

    Вадим зажигает, и разжигает любовь к верстке. Спасибо друг.

  • @yankuandykov4392
    @yankuandykov4392 3 года назад +9

    Урок топ, Влад топ, Дизайнер топ, Дизайнер который может дать по другому в PSD вообще топ

  • @МаксимКруковец-ю2э
    @МаксимКруковец-ю2э 3 года назад +10

    Спасибо за урок. Полезно, интересно, познавательно!)

  • @DmitryYanushkevich
    @DmitryYanushkevich Год назад +1

    Спасибо за труды 🙏 очень увлекательные и позитивные получаются вечеринки!

    • @DmitriiBozan
      @DmitriiBozan Год назад

      если я дам свой телеграм, то можешь прислать етот сайт?

  • @MsAlecksey
    @MsAlecksey 2 года назад +1

    Молодец. Все расказуєшь дословно, а не так как многие "так надо уложиться в 1 или 2 часа вёрстку и полетел без разбора.С вами преуспел в вёрстке.

  • @MrMakaron4ik
    @MrMakaron4ik 2 года назад +17

    Мне одному это видео смотреть интересно не только за полезный контент но и из за юмор этого прекрасного человека?)

  • @FirstnameLastname-re9ei
    @FirstnameLastname-re9ei 2 года назад +3

    Не пишу комментрии, но ты на столько круто и просто все объясняешь, что я просто в шоке!
    Спасибо тебе!

  • @optimist6861
    @optimist6861 10 месяцев назад

    Спасибо за контент очень интересно

  • @Viktor_Hladkykh
    @Viktor_Hladkykh 3 года назад +2

    Спасибо за качественный контент 👍

  • @РоманЗотов-с1ы
    @РоманЗотов-с1ы 3 года назад +3

    На кнопку можно добавить бордер, чтобы при наведении на белом фоне у кнопки оставались границы и она не терялась.

  • @viktoriaviktoria3178
    @viktoriaviktoria3178 3 года назад +1

    Щиро дякую! Все супер!

  • @ВалераЛадыга-ж3у
    @ВалераЛадыга-ж3у 3 года назад +1

    Кайф чувак не знаю кто ты но ты мой спаситель

  • @nataliolli7298
    @nataliolli7298 3 года назад +4

    Марафон огонь, огромное спасибо за информацию за то, что есть такой замечательный человек Влад, который все очень понятно и доступно объясняет!!!

  • @ЕвгенийЛогвиненко-ш5к

    Вадим конечно молодец. Я сам начинал смотреть когда-то его уроки. Сугубо моё личное мнение и наблюдение, ни в коем случае не хочу как-то Вадима и его детище обидеть, но, сейчас чисто верстальщиком быть уже не канает. Во многих студиях вёрстку делают в купе с чем-то, с тем же бэкэндом например, а на фрилансе заказов чисто по вёрстке практически нет, а если и есть немного, то за копейки, потому что всем нужен сайт под ключ, если мы говорим о фрилансе, а это значит, что ты должен быть на все руки мастер - и дизайн составить и вёрстку склепать и логику сделать и на cms посадить и все все вместе, причем за эту работу тебе заплатят как за одно действие, хотя по сути ты выполняет работу 3 разных специалистов, ну или фулстекера одного (фронт+бэкэнд разработчик), которая и должна оплачиваться соответствующе. Это просто наблюдение и логические выводы.

    • @jem9744
      @jem9744 3 года назад +1

      Так а причём тут "обидеть детище Вадима"?) Вёрстку же тоже нужно изучать как-то. Понятное дело, что далеко на одной вёрстке не уехать (хотя некоторые умудряются), но с неё надо начинать хотя бы.

    • @jem9744
      @jem9744 3 года назад +1

      @@ch_shik6042 и что? А он должен что-то кроме делать?
      Почему он должен двигаться? Может он не считает, что компетентен в других областях. А вёрстку он хорошо объясняет.

    • @user-hu6dl
      @user-hu6dl 3 года назад

      Евгений Логвиненко дай свою телегу если можно хочу что-то спросить у тебе

    • @romaastapov-gm5ed
      @romaastapov-gm5ed Месяц назад

      😊 16:39 😅😂х🎉😮😂😊 16:47 ❤😊😅й😊😊😅з😊❤😮за

  • @ЭйсВентура-б8д
    @ЭйсВентура-б8д 3 года назад +3

    А почему не делали фон Хедера заливкой цвета? Зачем именно картинкой делать фон у хедера? И что со шрифтами? Почему сразу не выяснили какие где и не подключили сразу их? Я в body сразу по умолчанию ставлю шрифт которого больше всего на сайте и font-size: 17px; например.очень удобно.

  • @ИльназГарайшин-ч6о
    @ИльназГарайшин-ч6о 3 года назад

    Харизма на высоте!)

  • @j-lewis
    @j-lewis 3 года назад +2

    Спасибо, сенсей!

  • @rostyslavkinash5232
    @rostyslavkinash5232 3 года назад +1

    спасибо за урок

  • @maksgeer5263
    @maksgeer5263 3 года назад +1

    Бля просто очень крутой чел все ясно хорошо объясняет сразу лайк 👍!!!!))

  • @tarastanchynets5336
    @tarastanchynets5336 3 года назад +1

    Красава!!! ОЧень полезно.

  • @movieclips4848
    @movieclips4848 3 года назад +37

    Сделайте уроки по меню на чистом JavaScript пожалуйста 🙏

    • @артемаппмзов
      @артемаппмзов 3 года назад

      java-script не испоьзуется просто так

    • @privet_baget
      @privet_baget 3 года назад

      На чистом JS только извращенцы пишут, для создания элементов интерфейса нормальные пацаны используют jquery с плагинами.

    • @serhiiarkhypenko8370
      @serhiiarkhypenko8370 3 года назад

      @@privet_baget нормальные пацаны пишут такие элементарные вещи на чистом жс, а более крутые на альпине. На жеквери пишут старички или извращенцы...

    • @serhiiarkhypenko8370
      @serhiiarkhypenko8370 3 года назад +1

      @Дмитрий Самарин для оптимизации

    • @dimondimonov6417
      @dimondimonov6417 Год назад +1

      На чистом js извращенцы получают в три раза больше денег чем твои плагины

  • @fobianka2131
    @fobianka2131 Год назад

    спасибо огромнейшее, это был мой первый сайт, который сверстала сама, не без косяков... до min-hight в header не додумалась. Counter записывала неправильно и не туда, поэтому не работал)) И не смогла в input прописать белый шрифт для ввода пользователя)) 3 дня верстала). После ваших уроков смогла такое сделать, сейчас смотрю на проделанное и не верю глазам) До этого знала только о параграфах и h1-h6)

  • @littlecat8931
    @littlecat8931 3 года назад +1

    спасибо большое!

  • @movieclips4848
    @movieclips4848 3 года назад +1

    Класс 👍

  • @gorobart
    @gorobart 3 года назад +6

    Где исходные Файлы ? Ссылка на телеграм не работает

  • @capstanfearless
    @capstanfearless 3 года назад +1

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

  • @kiriltabakow
    @kiriltabakow Год назад

    класс, норм канал!

    • @DmitriiBozan
      @DmitriiBozan Год назад

      если я дам свой телеграм, то можешь прислать етот сайт?

  • @АлиевЗайнула
    @АлиевЗайнула 3 года назад

    Ты лучший

  • @MsAlecksey
    @MsAlecksey 2 года назад

    Спасибо.

  • @exer9995
    @exer9995 3 года назад +1

    1:14:23 я написал всё как говорили вплоть до конца но почему то не сработало когда я написал padding: 47px 0 45px; display: flex; justify-content: space between; элементы не раз бросились что делать?

  • @asdasd-hg3uz
    @asdasd-hg3uz 6 месяцев назад

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

  • @vladimirbelokur602
    @vladimirbelokur602 3 года назад

    Большое спасибо. Ты топ. Кинь ссылку куда скинуть благодарность деньгами.

  • @rahimkhatsiev2851
    @rahimkhatsiev2851 3 года назад +1

    Годно.

  • @daniil7243
    @daniil7243 3 года назад +3

    Подскажите пожалуйста в чем разница между написание классов слитно в css и через пробел(например: .abc.bcb и .abc .bcb)?

    • @___-jh7ys
      @___-jh7ys 3 года назад +2

      .abc.bcb - это когда у тебя есть у одного тега два класса например : . Они пишутся через пробел, как ты заметил
      а .abc .bcb - это уже два элемента. Например:

    • @user-san-chous
      @user-san-chous 3 года назад

      @@___-jh7ys человек же даже пример привел, а ты ему вообще не о том)) html код сюда вмешал)

    • @geniousbot6453
      @geniousbot6453 3 года назад +1

      @@user-san-chous так все верно он написал, лол.
      в css используются классы из html,если что

    • @daniil7243
      @daniil7243 3 года назад

      @@___-jh7ys Спасибо за ответ!

    • @user-san-chous
      @user-san-chous 3 года назад +1

      @@geniousbot6453 таки правильно, извиняюст). Просто в вопросе были селекторы, а в ответе привел в пример атрибуты. Но сдела все как надо.
      Был не прав)

  • @zxcckc
    @zxcckc 2 года назад

    2:29:20 скульпторы)

  • @Den-SyaoPinov
    @Den-SyaoPinov 3 года назад +1

    Вадим , какие программы мне нужно для НАЧАЛА ПУТИ ВЕРСТАЛЬЩИКА
    установить и "поюзать" их ?

    • @Vlad-sh5kj
      @Vlad-sh5kj 3 года назад

      Html вместе с css изучай. Смотри как другие сайты пишут и повторяй. А что касается программ, то тут только среда разработки) VS Code например.

    • @danilaundead4760
      @danilaundead4760 3 года назад +1

      Sublime text или Visual Studio

  • @jbsharan2189
    @jbsharan2189 3 года назад +3

    Я конечно извиняюсь но когда писать header__top а когда header__inner (за ранее спасибо)

    • @ВалераПетров-ю3ш
      @ВалераПетров-ю3ш 3 года назад +1

      header__top это только верхняя часть хедера, а header__inner это обёртка для целого header, тут логично было бы написать header__inner после container но в header контента не много поэтому и без него обошлось

  • @yc_lucky
    @yc_lucky 3 года назад +1

    а где можно посмотреть source code?

  • @kulynych6664
    @kulynych6664 3 года назад +1

    Дайте совет пж, где лучше начать изучать javascript?

  • @ПростоеРешение-р1б
    @ПростоеРешение-р1б 2 года назад

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

  • @ПростоБро
    @ПростоБро 3 года назад

    Не работают ссылки в телеге. Чат верстальщиков жив? Бро прикрепи PSD к этому видео. Жаль не повторить за тобой((

  • @ЮрийЮрченко-ж8р
    @ЮрийЮрченко-ж8р Год назад

    третью верстку пытаюсь начать повторять и ничего невыходит и повторяю один в один

  • @WhispersHistory-History
    @WhispersHistory-History 3 года назад

    Кто подскажет где найти макет? По ссылке не перевидит в телеграмм(

  • @МаксимМазур-д2х
    @МаксимМазур-д2х 2 года назад

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

  • @Владимир-с5ц2г
    @Владимир-с5ц2г 3 года назад +2

    скачать исходник уже нельзя получается?

  • @Владимир-с5ц2г
    @Владимир-с5ц2г 3 года назад

    что то у меня логотип не работает на странице что за беда?

  • @МаксимВергелюк
    @МаксимВергелюк 2 года назад

    Як получити посилання на макет ?

  • @MrZefir-pv3gi
    @MrZefir-pv3gi 3 года назад +1

    А почему мы сразу через sass не писали?

    • @ВалераПетров-ю3ш
      @ВалераПетров-ю3ш 3 года назад +1

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

  • @Mercava
    @Mercava 3 года назад +2

    Шото ни одна ссылка на соцсети не робит

    • @PuaBadBoy
      @PuaBadBoy 3 года назад

      напиши в телеге from0to1ru​

  • @miamaxim7662
    @miamaxim7662 3 года назад +1

    5:28 а как называется это программа в котором вы создали драфт веб сайта? AdobeXD или ...

  • @Shiba_dub
    @Shiba_dub Год назад

    очень много лишниз классов, движений . в css я вообще офигел на бекграунде... можно просто bg url() cover no-repeat center;

  • @Den-SyaoPinov
    @Den-SyaoPinov 3 года назад +2

    да как для новичков-то ? я половину слов не понимаю я-то кто тогда ?

    • @yankvasya
      @yankvasya 3 года назад

      Ты не один такой. Главное не сдаваться и продолжать копать в эту сторону

  • @nurbolotturatbekuulu4097
    @nurbolotturatbekuulu4097 3 года назад

    a service__item не ссылка ?

    • @jonyonee
      @jonyonee 3 года назад

      Бул медотология БЭМ если тэг а service-item__link болсо то сыллка

    • @nurbolotturatbekuulu4097
      @nurbolotturatbekuulu4097 3 года назад

      @@jonyonee билем БЭМ ди ал туура эмес кылып кой ду. Кара. Если Link я знаю что это ссылка

  • @awenn2015
    @awenn2015 3 года назад +1

    Не проще галп юзать с browser-sync что бы не обносочтт постоянно ?

    • @Spsxz-o7u
      @Spsxz-o7u 3 года назад +2

      он показывает новичкам как верстать, это уже будет лишнее на начальном этапе

    • @D_EUS
      @D_EUS 3 года назад

      @@Spsxz-o7u Есть расширение Live Server для VS Code, новичкам самое то)

    • @ShoTHIk
      @ShoTHIk 3 года назад +1

      Галп ещё подключать нужно, а это целая история. А вот плагин Лайв релоада в ВС Коде использовать было бы как раз :)

    • @7iomka
      @7iomka 3 года назад

      галп не проще) но если уж говорить о норм подходах то лучше брать вебпак и крутить как хотите)

  • @ЮрийК-р4м
    @ЮрийК-р4м 3 года назад

    у меня с минусом почему то схлопнулось ruclips.net/video/xVxAR2fMQoU/видео.html , поставил 50 px и все встало на свои места

  • @ЮрийЮрченко-ж8р
    @ЮрийЮрченко-ж8р Год назад

    все остановилось у меня .services{
    padding-top: 350px;
    } вот эта вещь не работает ,неотступает