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

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ก.พ. 2021
  • Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
    Тема в VSC - плагин Material Theme
    Все исходники, инструкция и информация в телеграм канале.
    Ссылка на телеграм канал:
    t.me/from0to1ru
    Ссылка на телеграм канал с впн:
    teleg.one/from0to1ru​
    Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
    Чат верстальщиков:
    t.me/chat_from_0_to_1​
    Как создавался этот дизайн:
    • Дизайн сайта
    Написать мне в ВК:
    vadimprokopchuk​
    Написать мне в телеграм:
    t.me/silver8light​
    Отзывы о моем авторском курсе по верстке:
    topic-104892258_40476405
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

ความคิดเห็น • 129

  • @user-wq1yt7rw2y
    @user-wq1yt7rw2y 3 ปีที่แล้ว +4

    Вечеринка!
    спасибо- нравиться твой стиль работы и мысли

  • @user-dj1wr4lh1v
    @user-dj1wr4lh1v 3 ปีที่แล้ว +1

    Большое спасибо!!! На позитиве, заряжаешь, красавчик!!!

  • @alexinsaev
    @alexinsaev 3 ปีที่แล้ว +10

    Денис Борисов в сфере верстки))) Спасибо за позитивный, полезный и доступный контент!

  • @julbarsstar4913
    @julbarsstar4913 3 ปีที่แล้ว +4

    верится с трудом, что реалии среды обитания полные человеческого равнодушия не оттолкнули УЧИТЕЛЯ ( с большой буквы) от учеников. по обучаловой теме Вам нет равных: нет воды.космического благополучия и здоровья всем нам и Вам .

  • @ZEPHYR-Dima
    @ZEPHYR-Dima 3 ปีที่แล้ว +1

    Отличный марафон! Люблю тебя смотреть!)

  • @dota2i0psdasdas36
    @dota2i0psdasdas36 3 ปีที่แล้ว +4

    Красавчик! . жду продолжения истории)))

  • @user-kz7xz4xb7o
    @user-kz7xz4xb7o ปีที่แล้ว +4

    Круто очень!!! Перебрал кучу видео, остановился на "вечеринках"))) Заходит на Ура!!! Спасибо большое!!!

  • @digitalclub9379
    @digitalclub9379 3 ปีที่แล้ว +2

    Марафон огонь, приятно смотреть! Верстаю потихоньку, скоро догоню.

  • @winter9674
    @winter9674 3 ปีที่แล้ว +27

    Моё почтение! Здоровья тебе и твоим близким, друг

  • @kuzya6488
    @kuzya6488 3 ปีที่แล้ว

    Это лучшее что есть в бесплатном рунете, на тему верстки для новичков. Свободное общение, доступные материалы! Спасибо! Не останавливайся! Уверен в твоем светлом и богатом будущем!

  • @inBalancer
    @inBalancer 3 ปีที่แล้ว +10

    Спасибо! Как же круто, что я наткнулся на этот канал. Изучение верстки становится веселым и занимательным. Респект

    • @j-lewis
      @j-lewis 3 ปีที่แล้ว +2

      Такие же мысли)

  • @user-nm7yi4ol6z
    @user-nm7yi4ol6z 3 ปีที่แล้ว +1

    как всегда на высоте - спасииибо

  • @abramofandrey
    @abramofandrey 3 ปีที่แล้ว +1

    всем привет, отличный марафон, лайк однозначно!

  • @karatvlog
    @karatvlog ปีที่แล้ว

    класна та доступна подача матеріалу, дякую)

  • @xanxan3256
    @xanxan3256 3 ปีที่แล้ว

    Очень хорошо объясняешь. Мне понравилось. Подписался

  • @vvks9901
    @vvks9901 ปีที่แล้ว

    Очень подробные понятные объяснения! Дякую!

  • @user-wl7is8gq2l
    @user-wl7is8gq2l 3 ปีที่แล้ว

    Спасибо большое! Ты классный)

  • @user-py9uv4nw5k
    @user-py9uv4nw5k 3 ปีที่แล้ว

    Классная вечеринка!))) Автор молодец!

  • @anv7259
    @anv7259 3 ปีที่แล้ว

    Ты делаешь доброе дело🙏

  • @andyanatolich
    @andyanatolich 3 ปีที่แล้ว +3

    Спасибо большое за марафон! Скажите пожалуйста, при подключении normalize.css нужно писать для тэга свойство box-sizing: border-box?

  • @farruxeshboev9788
    @farruxeshboev9788 3 ปีที่แล้ว +1

    Просто кайфуем 😂👍

  • @aleksandrkanygin2672
    @aleksandrkanygin2672 3 ปีที่แล้ว

    Топчик, отличный контент

  • @user-vg8te8up5m
    @user-vg8te8up5m 3 ปีที่แล้ว +19

    Девачки, я снова плачу, за что мне такой бесплатный контент? У меня день рождения?
    ВАДИМ, от души...

  • @user-yv4tn5ll9z
    @user-yv4tn5ll9z 3 ปีที่แล้ว +4

    Твои уроки очень крутые) Успехов тебе в твоих планах!

  • @islomtoshev8721
    @islomtoshev8721 3 ปีที่แล้ว

    Братан спасибо большой :)

  • @user-xm8bp2hb4y
    @user-xm8bp2hb4y ปีที่แล้ว

    спасиба что есть такие люди каторые обьясняют и все панятно учусь по вашем видео и хачу в дальнейшим устроится на работу по верстке как устроюсь на работу
    буду делать данаты вам добро адуши душевно в душу с уважением😃

  • @Napolion4ik
    @Napolion4ik 2 ปีที่แล้ว

    Подписка и лайк .Буду ждать новые стримы по верстке.

  • @veaceslavpascaru7294
    @veaceslavpascaru7294 3 ปีที่แล้ว +2

    Видео супер. Вадим, тебе большое спасибо.!!!! Скажи, как называется тема для VSCode?

  • @vvks9901
    @vvks9901 ปีที่แล้ว

    Много внимания мелочам, это мега круто!!!

  • @viktoriaviktoria3178
    @viktoriaviktoria3178 3 ปีที่แล้ว

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

  • @ardan575
    @ardan575 3 ปีที่แล้ว

    шикарно!

  • @cloubglow
    @cloubglow 3 ปีที่แล้ว +4

    А есть где нибудь код? Не работает слик, не могу найти ошибку 🤒

  • @janmaly3292
    @janmaly3292 3 ปีที่แล้ว +15

    контейнер родителем быть не может, у него проблемы в жизни
    Орууууу ахахахахаха

  • @TaimasovK
    @TaimasovK ปีที่แล้ว

    Спасибо большое!!! Круто!!! Респект!!!

    • @DmitriiBozan
      @DmitriiBozan ปีที่แล้ว

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

    • @TaimasovK
      @TaimasovK ปีที่แล้ว

      Давай

    • @DmitriiBozan
      @DmitriiBozan ปีที่แล้ว

      @@TaimasovK @John_1565

  • @hightommy7961
    @hightommy7961 3 ปีที่แล้ว +9

    1:28:20 когда спрашивают как продвигаются у тебя дела в изучении верстки

  • @shsshh1264
    @shsshh1264 3 ปีที่แล้ว

    Реально он круто обоснует

  • @winter9674
    @winter9674 3 ปีที่แล้ว +8

    Это...Просто...О%#енно

  • @dmitrid.317
    @dmitrid.317 3 ปีที่แล้ว +2

    Малый конечно молочага!)) jQuery в топку))

  • @animatron9479
    @animatron9479 2 ปีที่แล้ว +3

    где можно сравнить твой код с собственным, например найти ошибки в коде

  • @coldwarrior9992
    @coldwarrior9992 3 ปีที่แล้ว +2

    Привет, спасибо за материал. А адаптив будет?

  • @stavrogin_
    @stavrogin_ 3 ปีที่แล้ว +1

    классная вечеринка получилась

  • @kosslanoss
    @kosslanoss 3 ปีที่แล้ว

    Клаааас!!!

  • @littlecat8931
    @littlecat8931 3 ปีที่แล้ว

    спасибо!

  • @niksemenov5490
    @niksemenov5490 3 ปีที่แล้ว +3

    на заметку! 2:40:40 для .top__item{ вместо всего ниже написанного
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    можно указать для .top__item img{
    margin: 0px auto 10px;
    результат тот же.
    буду смотреть дальше оба варианта, как поведут себя при адаптиве. Спасибо!

  • @velobarahlo
    @velobarahlo 3 ปีที่แล้ว

    спасибо!!

  • @alexdrumer5933
    @alexdrumer5933 ปีที่แล้ว

    Спасибо за марофон! Только где макет? Ссылка на чат верстальщиков!

  • @sapojNick
    @sapojNick 3 ปีที่แล้ว

    Вадим, хочу записаться на Ваш курс, но ссылка на телеграм ведёт на скачивание приложения, а в контакте, не отвечаете. Как с Вами связаться?

  • @abilkhaiyraubekerov7284
    @abilkhaiyraubekerov7284 3 ปีที่แล้ว

    Krasavchik

  • @maximivchuk9796
    @maximivchuk9796 3 ปีที่แล้ว +1

    почему вы не делали section 100vh, секция с иконками же не вмещается по высоте первого экрана

  • @blacksimus295
    @blacksimus295 2 ปีที่แล้ว

    какие плагины у тебя для css, заметь пожалуйста))

  • @sulejmanpovelitel1220
    @sulejmanpovelitel1220 ปีที่แล้ว

    СПАСИБО ! Дядя Вадим !
    п.с. не сердись на меня за предыдущий коммент , удачи !

  • @edkar4629
    @edkar4629 3 ปีที่แล้ว +1

    Подскажите, как с позиционировать placeholder

  • @lassic5244
    @lassic5244 3 ปีที่แล้ว +2

    slider 2:01:30
    кнопка 1:52:00
    css 30:33
    html 9:39

  • @user-yv4tn5ll9z
    @user-yv4tn5ll9z 3 ปีที่แล้ว +4

    Как всегда вместо сериальчика стримчанский с Вадосом)))))

  • @Wolos1978
    @Wolos1978 3 ปีที่แล้ว

    доброго дня, не подключается слайдер, до момента подключения все работало корректно

  • @user-qc2sf3fl7x
    @user-qc2sf3fl7x ปีที่แล้ว

    ты мой бро))))))))))

  • @user-jl2je2lk8m
    @user-jl2je2lk8m ปีที่แล้ว

    Почему в хеадере просто по центру все расставил, если в фигме там по px не все по центру стоит? И расстояние между меню логотипом и телефоном тоже не указали, а просто выставили по центру, так можно делать?

  • @KseniiaBurtseva
    @KseniiaBurtseva ปีที่แล้ว

    Здравствуйте, можно ссылку на фигму с этим дизайном?

  • @user-cg9pq4qo8f
    @user-cg9pq4qo8f 3 ปีที่แล้ว

    Чувак, как адаптировать свёрстанный сайт под мобильное устройство?

  • @youritperson
    @youritperson 3 ปีที่แล้ว

    а где исходники? в телеграмме не вижу, чтобы были

  • @Tora20112
    @Tora20112 3 ปีที่แล้ว +5

    Как обойти фичу, когда transform: scale блюрит изображение, в макете был текст, но бывает кнопки и с фото?
    зы Постараюсь это задать в чате, если тут не увидите, надеюсь эти вопросы не только мне интересны)

    • @ShoTHIk
      @ShoTHIk 3 ปีที่แล้ว

      Нужно смотреть на код. Но, как вариант, добавить элементу, который НЕ нужно блюрить обёртку (.wrapper, или просто закинуть в тэг div), и в CSS застилизовать её прямопротивоположно. То есть задать отрицательный transform: scale, либо scale по умолчанию.

  • @opex9979
    @opex9979 3 ปีที่แล้ว +1

    Хедером называется все что попадает на первый экран без прокрутки (нав бар, тайтл, текст, кнопка и ТД), то что вы называете хедером - называется нав бар

  • @romansokurenko4357
    @romansokurenko4357 2 ปีที่แล้ว +2

    100 мильёнов лайков!!! Спасибо БОЛЬШОЕ!!!!

  • @weTRONer
    @weTRONer 3 ปีที่แล้ว +1

    Лукашенко !

  • @user-wz9qr6ki9v
    @user-wz9qr6ki9v 3 ปีที่แล้ว

    сколько вёрстка такого макета стоит в россии?у нас примерно 200-300 баксов.

  • @NIKOLARUS1
    @NIKOLARUS1 8 หลายเดือนก่อน

    Есть видео, где макет про Турагенство, где большое количество картинок, которые заходят за пределы контейнера?

    • @vadymprokopchuk
      @vadymprokopchuk  8 หลายเดือนก่อน

      все что было на марафонах все есть на канале

    • @NIKOLARUS1
      @NIKOLARUS1 8 หลายเดือนก่อน

      @@vadymprokopchuk Понял спасибо, буду искать. Просто наверное знаете, когда кучу картинок, которые расположены на тексте в качестве украшения сайта.

  • @salo_ed6046
    @salo_ed6046 3 ปีที่แล้ว +1

    2:45:45 такая жиза))

  • @user-qz1ic6yb5v
    @user-qz1ic6yb5v ปีที่แล้ว

    Добрый день..Простите, если не буду оригинален.
    Где брать материалы к этому уроку? Имею ввиду макет

    • @vadymprokopchuk
      @vadymprokopchuk  ปีที่แล้ว

      првиет, телеграм в описании, переходите и там листаете до этого проекта, там будет макет

    • @user-qz1ic6yb5v
      @user-qz1ic6yb5v ปีที่แล้ว

      @@vadymprokopchuk Благодарю.

  • @veterok54
    @veterok54 3 ปีที่แล้ว

    что за тема в vscode?

  • @user-zy4qf6dl6s
    @user-zy4qf6dl6s 3 หลายเดือนก่อน

    подскажите пожалуйста есть ли макет в фигма?

  • @royal_aver4403
    @royal_aver4403 3 ปีที่แล้ว +4

    Зачем использовать line-height, если всего одна строка текста?

    • @DarKiFriaR
      @DarKiFriaR 3 ปีที่แล้ว +2

      заказчик может в дальнейшем добавлять контент в макет на своё усмотрение. так что другие строки вполне допустимо могут появиться

  • @user-ke3nn4fr4z
    @user-ke3nn4fr4z ปีที่แล้ว

    А что это за программа в начале ? где сам сайт

  • @user-qc2sf3fl7x
    @user-qc2sf3fl7x ปีที่แล้ว

    я с тобой владос!!!!!!!!!!!!

  • @CokoJI_CTAJIuHA
    @CokoJI_CTAJIuHA 5 หลายเดือนก่อน +2

    цеэуропейцы без антисоветчины не существуют

  • @DevOps1
    @DevOps1 3 ปีที่แล้ว

    дайте ссылку на макет

  • @kadetovdesign
    @kadetovdesign 3 ปีที่แล้ว +4

    Круто конечно , но если смотреть в 2х, много отвлекаешься на вопросы, хотя сам говоришь что в конце стрима ответишь

    • @shake4970
      @shake4970 2 ปีที่แล้ว +1

      Круто, конечно, что ты у нас великий всезнайка, но не все такие, как ты. В чате много новичков, которые задают ему вопросы, возникающие по пути вёрстки. А запись смотрит не меньшее количество новичков, у которых могут быть одинаковые вопросы, которые будут озвучены Вадимом сразу же.
      Так что закрой пасть и не кипишуй)

  • @freakGuitar
    @freakGuitar 3 ปีที่แล้ว

    а че в одном марафоне бокс-сайзинг только для звездочки, в другом еще для афтер и бифор, а здесь вообще для хтмл, а для бифор и афтер отдельно инхерит? ¿🙈

  • @DevOps1
    @DevOps1 3 ปีที่แล้ว +1

    а где макет?

  • @Deadpool-nf1ln
    @Deadpool-nf1ln ปีที่แล้ว

    не могу в телеге найти этот макет!

  • @user-xr7ds3kq2k
    @user-xr7ds3kq2k ปีที่แล้ว

    а есть ссылка где можно скачать этот дизайн в фигме? или кто-то может скинуть, пожалуйста)

  • @alex_hmeln
    @alex_hmeln ปีที่แล้ว

    доброго дня, підкажіть датупроведення марафону в телеграмі..не можу знайти макет

    • @alex_hmeln
      @alex_hmeln ปีที่แล้ว

      сам спитав..сам знайшов 3 лютого 2021 року

  • @whilefordo
    @whilefordo 3 ปีที่แล้ว

    Вот блин. фигма уже не работает на виндоус 7 (((
    а онлайн версия очень сильно тормозит.
    что же делать. поддержка виндоус 7 прекращена, и я теперь не смогу скачать обновление KB2533623 а без него фигму не запустить на семерке (((

    • @user-bw8dl5vv3i
      @user-bw8dl5vv3i 3 ปีที่แล้ว

      попробуй установить виртуальную машину, а на неё десятку а там фигму

  • @serg-k
    @serg-k 3 ปีที่แล้ว

    Осталось сделать этот сайт и для старичков

    • @serg-k
      @serg-k 3 ปีที่แล้ว

      я сам не смог сделать, чет жестко новые свойства transform: scale(1.25); я специально не стал сам делать думаю щас посмотрю а там че будет, как хорошо что я не стал сам делать я бы каждый шриф прибавлял и проклял бы этот hover. а тут просто scale черкануть нужно

  • @user-mc9hl2hq2b
    @user-mc9hl2hq2b 2 ปีที่แล้ว

    Как убрать маркеры в списке?...

  • @user-pp8hk8fg3g
    @user-pp8hk8fg3g 3 ปีที่แล้ว +1

    когда вторая часть

    • @vadymprokopchuk
      @vadymprokopchuk  3 ปีที่แล้ว +1

      Вышла уже давным давно

    • @user-pp8hk8fg3g
      @user-pp8hk8fg3g 3 ปีที่แล้ว +1

      @@vadymprokopchukсори не видел

    • @user-pp8hk8fg3g
      @user-pp8hk8fg3g 3 ปีที่แล้ว +1

      @@vadymprokopchuk а так канал у вас топ
      еще с 2019 года подписан

  • @user-vn2nx1yq9e
    @user-vn2nx1yq9e 3 ปีที่แล้ว +4

    как ты только успел в 3 дня уложиться. ты наверное очень крутой?

  • @aaronquartet5755
    @aaronquartet5755 3 ปีที่แล้ว

    ахахахаха, вектор вектор вектор и ещё раз вектор говорят мне о том, никогда не догадаетесь..... что это векторXDDDDDDDDDDDDDDDDDDD 47:17

  • @skmillionaire3409
    @skmillionaire3409 3 ปีที่แล้ว

    В когось слайдер зїжав при підключені slick????

  • @severinhotkowotwowsua
    @severinhotkowotwowsua 3 ปีที่แล้ว

    Як включити в фігмі ці червоні рамки що на 8:11 ?

  • @Denik-dg9cc
    @Denik-dg9cc ปีที่แล้ว

    Де взяти макет дизайну?

    • @vadymprokopchuk
      @vadymprokopchuk  ปีที่แล้ว

      телеграм в описі, дальше в файлах

  • @user-fb3wj9ge2t
    @user-fb3wj9ge2t ปีที่แล้ว

    Ты Бурят?

  • @damir_9347
    @damir_9347 3 ปีที่แล้ว

    У меня не выровнялось.

  • @aleksandrvolkov5599
    @aleksandrvolkov5599 3 ปีที่แล้ว

    Блин, пропустил, дайте макет пожалуйста.

    • @VostochnyyLev
      @VostochnyyLev 3 ปีที่แล้ว

      Зайди в его телеграм группу ,вроде в описании под видео должно быть

    • @VostochnyyLev
      @VostochnyyLev 3 ปีที่แล้ว

      И прогортай до момента где начинается марафон по этой вёрстке

  • @damir_9347
    @damir_9347 3 ปีที่แล้ว

    Нету макета из видео.

    • @goodcthulhu250
      @goodcthulhu250 3 ปีที่แล้ว

      в телеге посто 3 февраля. там макет

    • @damir_9347
      @damir_9347 3 ปีที่แล้ว

      @@goodcthulhu250 Спасибо.

  • @bub2728
    @bub2728 ปีที่แล้ว

    2:39:30

  • @aksenov123
    @aksenov123 3 ปีที่แล้ว

    Я что не пойму где лого... я уже умнее чем ты. Очень смешно))))))))))))))

  • @janbolotbatyrov8564
    @janbolotbatyrov8564 3 ปีที่แล้ว

    1:32:00

  • @stonehead5726
    @stonehead5726 3 ปีที่แล้ว

    2:30

  • @TOMATHblU_COK
    @TOMATHblU_COK ปีที่แล้ว

    box sizing border box что это? и как его использовать - th-cam.com/video/IH_V0duSGLo/w-d-xo.html

  • @user-vy2fg8nv8g
    @user-vy2fg8nv8g 3 ปีที่แล้ว

    кто диз поставил? обоснуй