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

Sdílet
Vložit
  • čas přidán 1. 06. 2020
  • Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
    Тема в VSC - плагин Material Theme
    Макет - drive.google.com/file/d/1w5dk...
    Все исходники, инструкция и информация в телеграм канале.
    Ссылка на телеграм канал:
    bit.ly/3eaDJKi
    Ссылка на телеграм канал с впн:
    teleg.one/from0to1ru
    Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
    Чат верстальщиков:
    t.me/chat_from_0_to_1
    Написать мне в ВК:
    vadimprokopchuk
    Написать мне в телеграм:
    t.me/silver8light
    Отзывы о моем авторском курсе по верстке:
    topic-104892258_40476405
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

Komentáře • 102

  • @xeniya5489
    @xeniya5489 Před 3 lety +3

    Хочу вам сказать СПАСИБО! Я много уроков смотрела, но так как вы никто не объясняет. Вы супер! Жду с нетерпением от вас уроки. То что вы делаете это большой труд.! Спасибо!

  • @tatyanaaverkova8378
    @tatyanaaverkova8378 Před 4 lety +6

    Спасибо большое.
    Первый раз смотрела- разбирала тонкости и делала записи интересных/новых моментов для меня, а во второй просмотр уже вместе с вами делала верстку. Так удобно, мне показалось)
    Время с вами проводить весело и полезно!!))

  • @user-jz6oy4fd8z
    @user-jz6oy4fd8z Před 4 lety +7

    Спасибо тебе огромное!!! пишу не первый раз уже это)) но так круто как ты - объясняет очень мало.

  • @sergeychaus8842
    @sergeychaus8842 Před 4 lety +4

    красавчик, хорошая подача, доступно для более-менее новичков, посмотрел на одном дыхании

  • @semen_spider
    @semen_spider Před 4 lety +2

    Мужик, ты как всегда лучший, несёшь нам непросветленным (я о себе и таким как я), еще сто раз спасибо за твои старания, добра тебе и благополучия))

  • @jek126
    @jek126 Před 4 lety +1

    Вадим, спасибо вам огромное! за ваши вечеринки ))

  • @UzDevWave
    @UzDevWave Před 4 lety +7

    Спасибо за запись, труд, старались видно

  • @deutschc9058
    @deutschc9058 Před 4 lety +1

    Как всегда класс!!! Спасибо за вашу работу,сверстала практически все ваши стримы,не все получается...но все-таки это здорово. До сих пор в раздумьях записываться ли на ваши курсы...

  • @abroad_fam5243
    @abroad_fam5243 Před 4 lety +3

    Спасибо за твой труд!!

  • @user-oh5wh7qm6m
    @user-oh5wh7qm6m Před 3 lety +1

    Спасибо Вадим! Очень познавательно!

  • @user-sf2iy6uz6w
    @user-sf2iy6uz6w Před 4 lety +1

    Топовый канал. Идеально доносишь информацию

  • @realtalk3736
    @realtalk3736 Před 4 lety +6

    Вадим, спасибо тебе! шикарные уроки! Есть только одна просьбочка=) ты не мог бы добавлять разделы на видео, чтобы человек когда будет возвращаться то мог бы , например найти раздел : " Подключаем шрифты " =) прям как я сейчас=) или еще что=)

  • @user-108andalu
    @user-108andalu Před 3 lety +1

    Шикарный видос! Волшебнейший парень

  • @vladko5635
    @vladko5635 Před 3 lety +1

    Супер, спасибо за контент, я новичок, буду начинать учиться по вашим видосам=)

  • @KIMI-lz5ym
    @KIMI-lz5ym Před 4 lety +1

    Очень классно и информативно!

  • @tumblersoft1566
    @tumblersoft1566 Před 4 lety +1

    Большое спасибо! Просто и понятно.

  • @NoNo-fl6oq
    @NoNo-fl6oq Před 3 lety +1

    класс! начинаю смотреть, нравится юмор :)

  • @user-ve7tx3ud6n
    @user-ve7tx3ud6n Před 3 lety +1

    Спасибо. Очень интересно.

  • @BillieBonse
    @BillieBonse Před 4 lety +1

    спасибо за шикарный мануал!

  • @megalodonn9356
    @megalodonn9356 Před 2 lety +4

    0:00 Приветствие;
    2:12 Регламент;
    7:00 Погнали;
    8:14 Figma;
    9:15 Файлы;
    11:47 Открываем код;
    12:15 Начинаем верстать;
    18:35 Вставляем картинку в Header;
    23:53 кастомизация картинки-фона;
    28:19 Меню и номер телефона (html);
    45:07 Название (Cappadocia) (html);
    49:38 Картинка телефона (html);
    52:18 Контейнер (CSS)
    1:02:45 Меню и номер телефона (CSS);
    1:04:49 Делаем список в строку;
    1:05:51 Отступ между средним пунктом меню;
    1:14:31 Подключаем шрифты;
    1:31:04 Подчёркивание при наведении на ссылку;
    1:34:56 Картинка телефона (CSS);
    1:40:43 Название (Cappadocia) (CSS);
    1:47:00 Ответы на вопросы;

  • @alexbigar9769
    @alexbigar9769 Před 4 lety +1

    Годный контент👍

  • @UzDevWave
    @UzDevWave Před 4 lety +6

    Ну что погнали)

  • @toperarley7777
    @toperarley7777 Před 4 lety +9

    Вадим , спасибо за контент, будет ли стрим(видео) про гриды? И марафон с средним/сложным макетом?

  • @user-pp3cv4nz4n
    @user-pp3cv4nz4n Před 3 lety +11

    21:21 - ставим фото , делаем обложку
    34:01 - весь код html (полный (header))
    41:20 - nav
    _______________________
    52:28 - контейнер
    ***59:45 - просто надо
    1:03:00 - header__top (css)
    ***1:05:57 - особенность
    1:09:51 - body
    _____________________________
    1:14:54 - скачиваем шрифты
    1:29:06 - еще раз body
    1:38:06 - телефончик слева с рядом номера телефона
    1:40:50 - Capadocia (title)

    • @user-pp3cv4nz4n
      @user-pp3cv4nz4n Před 3 lety

      1:12:05 - как у ссылок поменять цвет (у всех)

  • @walterwhite4407
    @walterwhite4407 Před 2 měsíci

    Вадим,ти the BEST

  • @user-lf4bc7vq7n
    @user-lf4bc7vq7n Před 3 lety +1

    Благодарю)

  • @isiddiif3641
    @isiddiif3641 Před 3 lety +1

    Спасибо !)

  • @user-Arvard
    @user-Arvard Před 4 lety +5

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

  • @user-wp8ky5dz4e
    @user-wp8ky5dz4e Před 4 lety +1

    Да братан погнали

  • @user-pf9wz2ik2r
    @user-pf9wz2ik2r Před 4 lety +2

    Красава супер

  • @albertrain7093
    @albertrain7093 Před 4 lety +1

    Вадим, привет! У меня вопрос. Если даже пунктов меню будет не 3 а 7, или 8, то все равно правильнее через "+"-ы им марджины задавать, а не через first/last-child?

  • @martineden511
    @martineden511 Před 4 lety +4

    Вадик давай видео о зарубежной фриланс бирже. Срочно!!!

  • @tm_workout
    @tm_workout Před 4 lety +1

    spaibo ogromnoe Vadim

  • @user-pj7op1pr4v
    @user-pj7op1pr4v Před 3 lety +1

    1:07:06 не проще ли между словами добавить отступы через word-spacing?

  • @martineden511
    @martineden511 Před 4 lety

    Вадик посоветуй что делать с выпадением? Блока
    Сверху мы выравниваем padding а снизу margin. Как лучше поступать ?
    А то приходиться каждый раз дополнительно потом выравнивать. Бугаю по css свойствам.

  • @asdfTr0N
    @asdfTr0N Před 3 lety

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

  • @fortunemusic3316
    @fortunemusic3316 Před 3 lety +1

    Можно ли будет купить курс 150 долларов который через какое-то длительное время?

  • @sanik_2175
    @sanik_2175 Před 4 lety +2

    А где можно скачать папку с исходниками?

  • @kontorasb2754
    @kontorasb2754 Před 4 lety +1

    спасибо за контент, как всегда на высоте!!!!
    в теге можно не писать сразу , тогда зачем дишняя обертка?

  • @MadeinKazakhstanrider001
    @MadeinKazakhstanrider001 Před 3 lety +1

    Почему у меня не видна КОНТЕЙНЕРА через figma

  • @strangechannel4589
    @strangechannel4589 Před 4 lety +3

    У меня такой вопрос: я верстаю на ноутбуке (1366х768). Если ставить такие размеры шрифта, то будет капец как плохо. Как правильно делать, макет как-то макет уменьшать пропорционально или я просто где-то туплю? Чтобы и у меня сайт корректно отображался и у заказчика.

    • @dieeeev
      @dieeeev Před 4 lety +1

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

  • @tchimittsyrenjapov7422

    Привет! Недавно стал изучать верстку. Не легче ли использовать бутстрап для адаптации сайта на разных экранах? Или есть что-то для этого на CSS?

    • @vadymprokopchuk
      @vadymprokopchuk  Před 4 lety +1

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

  • @Sergey_D.
    @Sergey_D. Před 3 lety +1

    Добрый день! Скажите, пожалуйста, через какой графический редактор Вы работаете с PSD расширением? Есть ли альтернатива?

    • @vadymprokopchuk
      @vadymprokopchuk  Před 3 lety

      Psd через фотошоп, можно ещё использовать авакод. В видео макет не psd, там фигма

    • @Sergey_D.
      @Sergey_D. Před 3 lety

      @@vadymprokopchuk спасибо, очень доходчиво обьясняете!

  • @user-xd8so1dk3g
    @user-xd8so1dk3g Před 4 lety

    А зачем картинку которая на о=фоне вставлять через css? Тогда если эта верстка попадет на вордпресс то эта картинка получится харткодом, ее не смогут сделать динамической и менять если попросит заказчик или сам захочет поменять, можешь объяснить?

  • @Marshmallow-cl1yp
    @Marshmallow-cl1yp Před 4 lety

    Спасибо за марафон!
    Вопрос: шрифт belqis не работает, вместо него Times New Roman. В чем может быть проблема?

    • @Marshmallow-cl1yp
      @Marshmallow-cl1yp Před 4 lety

      Вопрос решился.Все работает :)

    • @user-st7ev5dd4t
      @user-st7ev5dd4t Před 4 lety

      Как Вы исправили ошибку? Потому что у меня тоже не работает и показывает Times New Roman

    • @user-Arvard
      @user-Arvard Před 4 lety

      @@user-st7ev5dd4t не знаю, нашёл ответ или нет, но на всякий случай напишу - пути проверь в подключенных шрифтах, там где указывается путь к файлам шрифтов, в какой папке они находятся и как к ним у тебя прописан путь, потому что обычно по умолчанию просто пишут fonts/***.woff, а надо исправлять на ../fonts/***.woff нужно добавлять ../ это говорит коду, что нам нужно выйти из папки в которой находится файл scss на один уровень выше и потом уже найти папку fonts

  • @user-wz9qr6ki9v
    @user-wz9qr6ki9v Před 4 lety +4

    а где начало?начинается не пойми с чего ....

  • @user-yz9zp4tw8o
    @user-yz9zp4tw8o Před 3 lety +1

    сколько стоит курс

  • @vitalyv8770
    @vitalyv8770 Před 3 lety +1

    хотел поинтересоваться, насколько актуален твой 7 часовой видос сейчас? Спустя год может уже что-то изменилось и некоторые моменты устарели?

  • @user-cr1mz3wz5r
    @user-cr1mz3wz5r Před 3 lety +1

    Все классно! Но микрофон - басс бустер, в наушниках смотреть аж больно.

    • @user-cr1mz3wz5r
      @user-cr1mz3wz5r Před 3 lety

      Когда на стол руки кладешь или печатаешь. *

  • @olegkudelkin1509
    @olegkudelkin1509 Před 4 lety +3

    Хм... Только два часа ютубчик отчехлил после трансляции(

  • @mykoladranovskyi3174
    @mykoladranovskyi3174 Před 3 lety +1

    Ребят, не работает шрифт Balqis на Mac Os, подключил верно, проверил 100500 раз, инспектор кода его видит, но в браузере отображается какой-то другой( Уже сломал голову, в чем может быть проблема?

    • @Makswell-oo5gu
      @Makswell-oo5gu Před 3 lety +1

      И у меня та же тема..., не могу понять ...

  • @seleldjdfmn221
    @seleldjdfmn221 Před 4 lety +2

    Omg yes! Is your video Software free? let's be youtube friends? xo

  • @datoshcode
    @datoshcode Před 3 lety

    Вот так будет правильнее ;)
    :root {
    box-sizing: border-box;
    }
    *,
    ::before,
    ::after {
    box-sizing: inherit;
    }

  • @ruslanegamoff5393
    @ruslanegamoff5393 Před 4 lety +1

    Продолжай делать уроки

  • @user-cw6wd4xk1v
    @user-cw6wd4xk1v Před 3 lety

    Здравствуйте) Я вообще ни разу не верстала. Подскажите, пжс, какие проги надо установить, чтобы начать верстку?

  • @serhii_chechelnytskyi
    @serhii_chechelnytskyi Před 4 lety

    А где исходники? В телеграмме нет их(((

    • @vadymprokopchuk
      @vadymprokopchuk  Před 4 lety

      есть, просто отмотай немного, все продумано))

  • @user-cp8fy7qm5l
    @user-cp8fy7qm5l Před 4 lety +1

    А почему нету ссылки на псд макет?

  • @user-ir4df6dw3v
    @user-ir4df6dw3v Před 2 lety

    мне б такого учителя в школе..нормально б хоть учился..юмор рулит

  • @alexandrandreev8344
    @alexandrandreev8344 Před 4 lety

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

    • @vadymprokopchuk
      @vadymprokopchuk  Před 4 lety

      порешаем

    • @alexandrandreev8344
      @alexandrandreev8344 Před 4 lety

      @@vadymprokopchuk спасибо что прислушиваетесь к аудитории) миллион подписчиков вам

    • @user-Arvard
      @user-Arvard Před 4 lety

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

    • @yevheniistetsenko9776
      @yevheniistetsenko9776 Před 3 lety

      @@user-Arvard при спрослушивании в хороших наушниках, слышен каждый удар рукой по столу(особенно при жестикуляции). реально бьет по ушам

  • @serg-k
    @serg-k Před 3 lety +1

    (woff)Нужно было кавычки поставить из за этого не работал шрифт('woff')Кавычки мать их

  • @pokaifu6754
    @pokaifu6754 Před rokem

    У меня я птшу 100vh не работает

    • @DmitriiBozan
      @DmitriiBozan Před rokem

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

  • @user-td1xd3df1j
    @user-td1xd3df1j Před 4 lety

    Дорогие верстальщики, подскажите, пожалуйста, что делать? Ситуация следующая:
    Я делала дизайн сайта для детской студии. Далее макет отдали на сборку какому-то программисту.
    Он собрал сайт очень коряво. Мало того что сайт на разных разрешениях отображается не так как в макете, есть еще куча косяков. Вместо текста практически везде вставлены картинки. Фотогалереи не работают. Раздел для статей собран из картинок вместо нормальных статей. Программист говорит, что он все делает по макету. Но функционал, элементарный не работает! Он даже карты в начале просто картинками вставил, а не кодом, пока я ему не объяснила что карта должна работать.

    Ссылка на сайт alferova-studio.tilda.ws/

    • @twink7077
      @twink7077 Před 4 lety +1

      Что-что делать? Переделывать, кстати, красивый дизайн, я бы такой сверстал с удовольствием!

    • @user-kp8wj5fj7u
      @user-kp8wj5fj7u Před 4 lety +1

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

    • @user-td1xd3df1j
      @user-td1xd3df1j Před 4 lety

      @@user-kp8wj5fj7u Значит это вовсе не нормально? А то он гнет палку и доказывает девочкам заказчикам, которые ничего не понимают в верстке, что так и должно быть и все сверстано по макету. А меня динамит по телефону, мол перезвоните позже или я вам перезвоню сам и быстро вешает трубку. Я даже не успеваю ничего сказать.

    • @vladimirk1394
      @vladimirk1394 Před 4 lety +1

      Имя и фамилию этого разработчика - в студию! Желательно ещё и фотографию, и ссылку на какой-нибудь его профайл: в ЛинкедИн или Фейсбук, Вконтакт, а если работает на Upwork или любой другой бирже фриланса - то ссылочку и на них. Или на то место, где вы его откопали. Запостьте эту инфу по максимуму - репостьте в соцсетях, пересылайте друзьям и т.д., чтоб побольше людей узнало, в т.ч. и потенциальных работодателей, ху из зис и как "оно" работает, с предъявлением результата этого галимого труда - чтоб не давали работу таким вот кадрам. Пусть страна знает своих героев... Но перед всем этим поговорите с этой обезьяной, и скажите, что вы всё так и сделаете, если он за приемлемый срок не сделает всё нормально...

    • @user-td1xd3df1j
      @user-td1xd3df1j Před 4 lety

      @@vladimirk1394 Согласна, что о подобных случаях надо сообщать везде, где только можно, чтобы другие люди не тратили зря время, нервы и деньги на подобных исполнителей. Пока заказчики ведут переговоры с разработчиком. Посмотрим как он будет реагировать, согласится исправлять работу или хотя бы вернет деньги. Он настаивал на 100% предоплате, хорошо хоть на 50% сошлись. Со мной, дизайнером сайта, он так и не поговорил толком и вообще ни разу за время работы над сайтом со мной не связывался, говорил ему все понятно. В нашем разговоре по телефону вчера, который все-таки состоялся после того как он динамил меня весь день и разговаривать вовсе не собирался, пока я не повысила голос, - не смогла сдержать эмоции, высказала претензии по поводу того как халтурно собран сайт. В итоге он кинул трубку, сказав, что общаться будет только с заказчиком напрямую. А там девочки - педагоги, милые, добрые и доверчивые. Хотя сейчас они уже понимают, что их водили за нос на протяжении нескольких месяцев, а по сути сделали мертвый сайт. Не знаю чем все закончится, но всю информацию по нему собираем и потом разместим где следует.

  • @KonkerE_
    @KonkerE_ Před 4 lety

    Звонил весь вечер! Не берут трубку! Отписка!!!