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

Марафон по верстке сайта. За 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

Пікірлер: 102

  • @xeniya5489
    @xeniya54893 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    3 жыл бұрын

    Благодарю

  • @tatyanaaverkova8378
    @tatyanaaverkova83784 жыл бұрын

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

  • @user-jz6oy4fd8z
    @user-jz6oy4fd8z4 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    Благодарю

  • @sergeychaus8842
    @sergeychaus88424 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    Sergey Chaus благодарю

  • @semen_spider
    @semen_spider4 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    Благодарю!

  • @jek126
    @jek1264 жыл бұрын

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

  • @UzDevWave
    @UzDevWave4 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    Благодарю!

  • @deutschc9058
    @deutschc90584 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    спасибо, рад что все полезно

  • @abroad_fam5243
    @abroad_fam52434 жыл бұрын

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

  • @user-oh5wh7qm6m
    @user-oh5wh7qm6m3 жыл бұрын

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

  • @user-sf2iy6uz6w
    @user-sf2iy6uz6w4 жыл бұрын

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

  • @realtalk3736
    @realtalk37364 жыл бұрын

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

  • @user-108andalu
    @user-108andalu3 жыл бұрын

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

  • @vladko5635
    @vladko56353 жыл бұрын

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

  • @KIMI-lz5ym
    @KIMI-lz5ym4 жыл бұрын

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

  • @tumblersoft1566
    @tumblersoft15664 жыл бұрын

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

  • @NoNo-fl6oq
    @NoNo-fl6oq3 жыл бұрын

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

  • @user-ve7tx3ud6n
    @user-ve7tx3ud6n3 жыл бұрын

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

  • @BillieBonse
    @BillieBonse4 жыл бұрын

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

  • @megalodonn9356
    @megalodonn93562 жыл бұрын

    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
    @alexbigar97694 жыл бұрын

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

  • @UzDevWave
    @UzDevWave4 жыл бұрын

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

  • @toperarley7777
    @toperarley77774 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    обязательно

  • @user-pp3cv4nz4n
    @user-pp3cv4nz4n3 жыл бұрын

    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

    3 жыл бұрын

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

  • @walterwhite4407
    @walterwhite44072 ай бұрын

    Вадим,ти the BEST

  • @user-lf4bc7vq7n
    @user-lf4bc7vq7n3 жыл бұрын

    Благодарю)

  • @isiddiif3641
    @isiddiif36413 жыл бұрын

    Спасибо !)

  • @user-Arvard
    @user-Arvard4 жыл бұрын

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

  • @user-wp8ky5dz4e
    @user-wp8ky5dz4e4 жыл бұрын

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

  • @user-pf9wz2ik2r
    @user-pf9wz2ik2r4 жыл бұрын

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

  • @albertrain7093
    @albertrain70934 жыл бұрын

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

  • @martineden511
    @martineden5114 жыл бұрын

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

  • @tm_workout
    @tm_workout4 жыл бұрын

    spaibo ogromnoe Vadim

  • @user-pj7op1pr4v
    @user-pj7op1pr4v3 жыл бұрын

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

  • @martineden511
    @martineden5114 жыл бұрын

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

  • @asdfTr0N
    @asdfTr0N3 жыл бұрын

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

  • @fortunemusic3316
    @fortunemusic33163 жыл бұрын

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

  • @sanik_2175
    @sanik_21754 жыл бұрын

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

  • @kontorasb2754
    @kontorasb27544 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    в теге menu можно не писать

  • @MadeinKazakhstanrider001
    @MadeinKazakhstanrider0013 жыл бұрын

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

  • @strangechannel4589
    @strangechannel45894 жыл бұрын

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

  • @dieeeev

    @dieeeev

    4 жыл бұрын

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

  • @tchimittsyrenjapov7422
    @tchimittsyrenjapov74224 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

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

  • @Sergey_D.
    @Sergey_D.3 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    3 жыл бұрын

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

  • @Sergey_D.

    @Sergey_D.

    3 жыл бұрын

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

  • @user-xd8so1dk3g
    @user-xd8so1dk3g4 жыл бұрын

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

  • @Marshmallow-cl1yp
    @Marshmallow-cl1yp4 жыл бұрын

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

  • @Marshmallow-cl1yp

    @Marshmallow-cl1yp

    4 жыл бұрын

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

  • @user-st7ev5dd4t

    @user-st7ev5dd4t

    4 жыл бұрын

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

  • @user-Arvard

    @user-Arvard

    4 жыл бұрын

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

  • @user-wz9qr6ki9v
    @user-wz9qr6ki9v4 жыл бұрын

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

  • @user-yz9zp4tw8o
    @user-yz9zp4tw8o3 жыл бұрын

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

  • @vitalyv8770
    @vitalyv87703 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    3 жыл бұрын

    актуален

  • @user-cr1mz3wz5r
    @user-cr1mz3wz5r3 жыл бұрын

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

  • @user-cr1mz3wz5r

    @user-cr1mz3wz5r

    3 жыл бұрын

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

  • @olegkudelkin1509
    @olegkudelkin15094 жыл бұрын

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

  • @mykoladranovskyi3174
    @mykoladranovskyi31743 жыл бұрын

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

  • @Makswell-oo5gu

    @Makswell-oo5gu

    3 жыл бұрын

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

  • @seleldjdfmn221
    @seleldjdfmn2214 жыл бұрын

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

  • @datoshcode
    @datoshcode3 жыл бұрын

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

  • @ruslanegamoff5393
    @ruslanegamoff53934 жыл бұрын

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

  • @user-cw6wd4xk1v
    @user-cw6wd4xk1v3 жыл бұрын

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

  • @maksimkasyanov9070

    @maksimkasyanov9070

    3 жыл бұрын

    Googlechrome, figma, VSCode

  • @user-cw6wd4xk1v

    @user-cw6wd4xk1v

    3 жыл бұрын

    @@user-mk3qg3zt2z Спасибо за совет!

  • @serhii_chechelnytskyi
    @serhii_chechelnytskyi4 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

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

  • @user-cp8fy7qm5l
    @user-cp8fy7qm5l4 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    потому что макет в figma

  • @user-cp8fy7qm5l

    @user-cp8fy7qm5l

    4 жыл бұрын

    @@vadymprokopchuk ?

  • @user-ir4df6dw3v
    @user-ir4df6dw3v2 жыл бұрын

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

  • @alexandrandreev8344
    @alexandrandreev83444 жыл бұрын

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

  • @vadymprokopchuk

    @vadymprokopchuk

    4 жыл бұрын

    порешаем

  • @alexandrandreev8344

    @alexandrandreev8344

    4 жыл бұрын

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

  • @user-Arvard

    @user-Arvard

    4 жыл бұрын

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

  • @yevheniistetsenko9776

    @yevheniistetsenko9776

    3 жыл бұрын

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

  • @serg-k
    @serg-k3 жыл бұрын

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

  • @pokaifu6754
    @pokaifu6754 Жыл бұрын

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

  • @DmitriiBozan

    @DmitriiBozan

    Жыл бұрын

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

  • @user-td1xd3df1j
    @user-td1xd3df1j4 жыл бұрын

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

  • @twink7077

    @twink7077

    4 жыл бұрын

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

  • @user-kp8wj5fj7u

    @user-kp8wj5fj7u

    4 жыл бұрын

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

  • @user-td1xd3df1j

    @user-td1xd3df1j

    4 жыл бұрын

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

  • @vladimirk1394

    @vladimirk1394

    4 жыл бұрын

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

  • @user-td1xd3df1j

    @user-td1xd3df1j

    4 жыл бұрын

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

  • @KonkerE_
    @KonkerE_4 жыл бұрын

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

Келесі