Mobile first метод. Верстка сайта html/css. Адаптивная верстка. ч.1

Подписаться 84 тыс.

Просмотров 76 тыс.

50% 1

Друзья, в видео я полностью расскажу, что такое метод верстки mobile first. Не только расскажу, но и как всегда, мы закрепим с вами все на практике, и сверстаем полностью сайтец с дизайном на 5 экранов. Посмотрим на другой подход к адаптиву в верстке.
Макет:
drive.google.com/open?id=15Ih...
Начальная сборка:
drive.google.com/open?id=1AO1...
Шрифты делал тут:
onlinefontconverter.com/
Видео по препроцессорам:
• Препроцессоры SCSS/SAS...
Видео по gulp:
ч1 - • Gulp 4
ч2 - • Gulp, рабочая сборка д...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

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

13 апр 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 216

@user-kp8wj5fj7u 4 года назад

До слез друг, спасибо что ты есть. Сверстал все твои сайты. Единственное галп серф сложный для меня стал на месяц на нем застрял, садился и засыпал, так как он был очень сложен для понимания, много нюансов, много дивов, много контента, просто начинал засыпать, голова отключалась. Опускались руки, но ты опять начинаешь делать, новые сайты и показывать их и во мне опять появляется жизнь, я опять заряжаюсь позитивом. И опять я хочу работать.

@vadymprokopchuk 4 года назад

круто, спасибо за такой отзыв, да серф просто вообще не типичный макет

@user-il5ix1yz8p 20 дней назад

11:43 Одно из лучших объяснений по галп, освоил по твоим видео 👍

@user-nj7nn6vh8z 4 года назад

Огромная благодарность за титанический труд. Когда год назад искал на Ютубе толковых верстальщиков по БЭМ и прочим толковым штукам, то поиски были напрасны и со временем интерес мой к вёрстке угас, благодаря твоему видосу он разгорелся с новой силой и это была первый долгий видос по вёрстке, который я досмотрел до конца. Так что сил тебе да побольше, добр молодец на новые труды)

@ukolove 4 года назад

Дай тебе бог здоровья!) Как же приятно и полезно смотреть твой канал)

@vadymprokopchuk 4 года назад

Благодарю)

@AlejandroFedorov 2 года назад

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

@_Iokanaan_Marusidze_ 4 года назад

Благодарю ! Очень хорошая у вас подача материала, приправленная юмором и главное весьма толково. Мой Вам RESPECT и уважуха !

@vadymprokopchuk 4 года назад

Благодарю!

@variety313 2 года назад

Зашла на просмотр видео. За 5 минут уже понятно, что есть смысл просмотреть видео, подписаться и пересмотреть все видео на канале. Класс. Спасибо

@elenaromanukha1044 2 года назад

Не только полезно, но и увлекательно! Прямо заряжаешься кайфом от верстки! Спасибо огромное!

@irinazhuravleva3609 4 года назад

Очень круто! Четкая теория, объяснение зачем эта теория нужна, красивый макет, ценный опыт и юмор для поддержки мотивации. Спасибо, Вадим)

@vadymprokopchuk 4 года назад

Спасибо)

@user-pc4eg6rz2m Год назад

Только начал смотреть. За первые 10 минут видео ответил на все интересующие и пугающие новичка вопросы. Спасибо, очень познавательное и полезное видео!!!

@user-ms9xu1jz9d 3 года назад

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

@alexdev75 4 года назад

Вадим! Огромное Вам спасибо за Ваши уроки. Всё просто классно. Подача материала превосходная. Вы просто фантастичен.

@vadymprokopchuk 4 года назад

Спасибо, очень рад)

@user-oz3ft2le7x 4 года назад

Супер! Очень нужная, свежая и актуальная тема! Спасибо.

@nurbolatnurlanuly 3 года назад

Очень крутой, полезный с юмором урок. Спасибо Вам большое :)))

@LKeyman_ 4 года назад

самые крутые вечеринки у Вадима на канале! Спасибо за контент! Может быть скоро завяжу с недвижимостью и пойду верстать благодаря тебе!)

@ellavrubel 4 года назад

Ждем-ждем 2 часть! Спасибо большое за 1-ую :)

@LastWeg 4 года назад

Спасибо Вадим, очень понятно и близко рассказываете. Лайк, подписался!!

@valentynvalentyn1279 4 года назад

Спасибо за видео, как всегда доступно и понятно. Ждем продолжение

@andreyermolaev5391 4 года назад

Лайк+подписка+колокольчик!Спасибо за урок!Ждём верстку на много-много страниц)))

@Olga-gb8vz 4 года назад

Класс! Настроение сразу поднялось! Спасибо!

@vadymprokopchuk 4 года назад

Оч рад)

@webprogrammer2289 4 года назад

Супер. Спасибо большое.

@user-gh3re3zj5b 4 года назад

Вадим спасибо за качественный контент !!! Долгожданная тема на канале !

@vadymprokopchuk 4 года назад

как и обещал)

@igr3943 4 года назад

Сразу лайк! Спасибо за контент:)

@user-lv6um8ue1z 4 года назад

О что-то годное, спасибо за контент

@fieryaspiration-thechronic5166 4 года назад

Спасибо большое за видео. Все доступно и ясно.

@user-cn7ri9cp7b 2 месяца назад

просто красавчик. всегда поражаюсь твоей усидчивости и педантичности!

@vadymprokopchuk 2 месяца назад

Благодарю

@user-te1ut5ev8w 3 года назад

Здравствуйте! Благодарю Вас за видео!

@oleksandrilchuck8482 3 года назад

Спасибо за труд! Всех благ!

@user-cq1ds5un5g Год назад

Очень крутой урок,замахнулся на него не по уровню,но уже похоже освоил препроцессор, миксины, элементы работы с Js.Еще воодушивило то,что даже профессионалы допускают ошибки в процессе написания и нужно их не бояться, а исправлять.

@daniilsan2445 Год назад

Согласен

@annroman1 4 года назад

Лайкос не глядя, а потом 3 часа приятного времяпрепровождения!!! Вадим респект!!!

@vadymprokopchuk 4 года назад

круть, спасибо

@Vllad_Ko 3 года назад

Иногда, под видосом, так не хватает кнопки - супер лайк! Здесь именно такой случай.

@oleksiik4473 4 года назад

Турбо пушка! Спасибо !!! сначала лайк, ну а вечерком - ВЕРСТАТЬ!!!!

@vadymprokopchuk 4 года назад

Норм тема)

@user-xd4mv4mk4c 4 года назад

спасибо! всегда интересно с тобой верстать под фирменные прибаутки!))

@vadymprokopchuk 4 года назад

Крутяк, это радует)

@Jazzzzby 4 года назад

Спасибо за видос, уже посмотрел, лайк прожал, комент написал. В начале 21:37 описка в слове after.

@Ultegra_ 4 года назад

Вот это другое дело Вадим, такого еще на твоем канале не было. Контент очень полезный, спасибо, ждем продолжения. 👍

@vadymprokopchuk 4 года назад

Тянуть не буду!

@evgeniyanikin8302 4 года назад

За время карантина ты стал таким уже родным, Вадим! ^

@vadymprokopchuk 4 года назад

спасибо))

@kostasancez2358 3 года назад

Звоню дизайнеру... Еду в гости к контейнеру.... Видос супер, очень люблю верстать хоть давно и работаю фронтом пишу на реакте, все равно очень интересно смотреть

@simplyspenser887 4 года назад

Было дико познавательно, спасибо большое:)

@ivanvodonaev3957 2 года назад

Красаучег. У тебя есть отличное свойство, изза которого новички предпочтут, тебя, в качестве обучения, в отличие от того же фрилансера пж. Ты умеешь доносить простым языком, все поэтапно, учитывая тонкости чтоб новички сумели принять информацию, имея скудные знания и навыки... Не теряй эту фишку.

@user-qf5sl4jb7o Год назад

Спасибо за крутой проект и крутое объяснение!

@user-tf7ut3hv7q 4 года назад

Спасибо за то что вы есть

@denismaltcev3356 4 года назад

приветствую Вас . было огромное удивление , пришёл с работы и тут такой видос )) огромное спасибо Вам за ваши уроки )

@vadymprokopchuk 4 года назад

Вечер верстки )

@olegkotsubko2894 3 года назад

1:58:00 С этого момента пошло не очень хорошо. Нижний паддинг лучше дать слайду, чтобы на `slick-dots` не наезжал на контент. А кнопку вынести в отдельный класс `btn` и два модификатора `btn btn--light` и `btn btn--accent`

@QwiniTRON 4 года назад

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

@no4e 3 года назад

Термин normal - это значение свойства в CSS равное 400, то есть его используют в CSS, когда верстают. А термин regular - это начертание шрифта 400, его используют дизайнеры шрифтов (и на гугл фонтс так обозначено). То есть эти два термина говорят об одном и том же. А он всё пытается 500 найти, которого там и в помине не было. P.S. 500 - это medium.

@kirillhmk Год назад

Спасибо, всё круто обьясняешь.

@anvara.6709 4 года назад

Вадим наконец-то радует новым контентом, крутяк!)

@user-frond-end_dev 2 года назад

классный канал, много полезного, спасибо за годный контент!

@dvsDesing 4 года назад

Отлично! :) спасибо!)

@serhiiromanenko1908 3 года назад

Братан, ты крут! Теперь буду смотреть и учится у тебя !!!

@MrSemyon87 4 года назад

Круто! Ждем продолжения.

@OlgaVeduga 4 года назад

You make my day)

@user-vx3ve7jn2g 4 года назад

О интересная тема , лайк не глядя

@user-zw2fu5iu1f 2 года назад

Спасибо за знания !!!

@kapchakap5257 4 года назад

Дядя Вадим , вы лучший

@vadymprokopchuk 4 года назад

спасибо)

@user-qu9yl6bv6m 4 года назад

блин...Вадик ты очень крут! не один блогер столько времени не тратит на объяснения...вообще You are in the first place for me!

@vadymprokopchuk 4 года назад

Благодарю!

@bama2619 8 месяцев назад

Спасибо Смотрю и пока еще не все понимаю Решил пока повременить и вернусь позже Но суть для mobile first уловил Это размер и верстка

@user-de3fu3fw4m Год назад

Спасибо, Вадим! Че делал бы без твоих видосов - хз : )

@melissasofie7681 4 года назад

Спасибо. Это прям то что доктор прописал!!!

@vadymprokopchuk 4 года назад

Это хорошо)

@serhiiretsenko2237 3 года назад

"Я конешн извиняюсь. Наша метода где-то дала збой :)" ахахахах!! )) Обожаю этого парня! )))

@vadymprokopchuk 3 года назад

спасибо)

@veterok54 4 года назад

Лайк, спасибо

@ZimaTimofey 4 года назад

однозначно лайк.

@sergeyaleksandrovich1958 4 года назад

Спасибо Вадим! Когда вторую часть планируете выкладывать?)))

@setforweb 4 года назад

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

@mhermuradyan6583 4 года назад

Как всегда на вершине, жду от тебя уроки по wordpress

@vadymprokopchuk 4 года назад

Карантин сделает своё дело))

@user-my5nw2kg6l 4 года назад

Огонь видос

@sandu_yoga 2 года назад

ты крут! Спасибо!

@user-ll6yy2lz6k 3 года назад

Лучший контент на ру ютубе по верстке. Спасибо тебе большое, Вадим!

@mambasacaremamba2671 4 года назад

Радости нет предела, ты бог верстки, ждал ролик с нетерпением

@vadymprokopchuk 4 года назад

круть, теперь изучать)

@user-xs8tp4bj2g 4 года назад

как всегда великолепен)

@glok0517 3 года назад

Самый юморной верстальщик!!!

@alexdivola 4 года назад

Рекомендую использовать плагин gulp-group-css-media-queries, и писать медиа-запросы возле каждого стиля, так как править потом будет удобней, а плагин потом сам все сгруппирует по размеру экрана и запишет в конце файла.

@shairongodly3815 2 года назад

Вадим в данном случае работал без gulp, а вообще заметка хорошая

@yuragrivicki5272 4 года назад

Годнота!

@Nahapet1982 4 года назад

Вадос это пападос на лайк, однозначно 👍.

@vadymprokopchuk 4 года назад

попадос))

@vladimirplay1807 4 года назад

Господи как ты вовремя!!!!!!!

@vadymprokopchuk 4 года назад

Хух , успел)

@fakesega6730 3 года назад

Вадим, привет. Ты спрайты часто собираешь?

@27sosite73 2 года назад

прикольний чувак спс за видос

@faluna2957 3 года назад

Всем по привету! Скажите, пожалуйста, кроме woff и woff2 не нужно подключать остальные форматы шрифтов? Я имею ввиду eot, ttf, svg, otf.

@serhii_chechelnytskyi 4 года назад

Спасибо!

@rostyslavputas5661 3 года назад

Привет, все нравиться вот только микрофон как то поправь что клавиатура так по ушам не стучала. А так все прекрасно, лайк и подписка)

@elenaga4585 3 года назад

Зашел плюсанул.

@strel9 4 года назад

используешь какие то сниппеты для медиазапросов? каждый раз их копировать это такая боль) я нашел разные варианты, но они все с какими то косяками

@tinalee8686 2 года назад

Спасибо👍

@BraentR 9 месяцев назад

Спасибо

@denispepper2830 Год назад

круто!

@user-om1jz6wd4n 4 года назад

Видео класс спасибо Почему ты решил сделать кнопку тегом button и псевдоэлементами можно же было сделать проще тег "a" и внутри 3 span и тогда можно даже будет анимировать эту кнопку

@user-bv4dh6jh6l 4 года назад

Вадим спасибо за видос)))

@vadymprokopchuk 4 года назад

Спасибо за коммент

@user-bv4dh6jh6l 4 года назад

@@vadymprokopchuk На 7 строчке в CSS очептяка)

@user-ci5ix4hq1n 4 года назад

когда входить второй выпуск? ждем))

@itga1qadam941 Год назад

Годното, и хороший опыт

@vadymprokopchuk Год назад

благодарю

@user-ez6yz9eg2n 3 года назад

Привет! получается, что компилятор не читает то, что написано после медиазапроса для десктопа, если мы с мобилки например? в этом же смысл мабайлферста?

@logwi-n 2 года назад

Насколько правильно и хорошо, каждому шрифту давать свой нейминг в контексте одной фэмили? Обычно я подключаю, к примеру font-family Roboto, и уже в каждом меняю его ширину.

@user-jn8pd6mo1e 4 года назад

еще маленькая проблемка, в самом конце видео нужно в медиа запросе поменять размеры стрелок на 70 пикселов, но этого почему то не происходит, может где то еще что то прописано, что не дает выполнить данное условие?

@user-lp9ch4rk3d 4 года назад

агонь!!!!

@strel9 4 года назад

ты пишешь @media () { } я видел пишут еще такие варианты: @media screen and () { } @media only screen and () { } в каких случаях нужно их использовать?

@green3216 4 года назад

Вадим, салют. Про box-sizing не вижу что-то ссылки)) может пора к окулисту мне?)

@user-jz1dh5wh3h 4 года назад

Большое спасибо за данное видео. Только со звуком какие-то проблемы при нажатии на клавиатуру)

@vadymprokopchuk 4 года назад

Та все не настрою другой микрофон( этот как мне кажется ловит звуки со всего дома=)

@fieryaspiration-thechronic5166 4 года назад

Скажи пожалуйста, будет продолжение верстки по этому макету?

@userScKonov 2 года назад

годный контент) Ну ты буржуй! воду из фужера пить)

@user-gf8mu1fe3j 3 года назад

Спасибо Вам огромное за Вашу работу. Единственное не поняла как Вы несколько одинаковых строк одновременно редактируете.

@xempl2842 2 года назад

alt+пкм и у тебя + 1 бегущая строка. Отменить на esc

@user-vc6lj6zr2p 4 года назад

Вадим скажи пожалуйста какие еще стоят расширения на Vscode? Потому что, после установке LiveSass хост просто прекращает работу, и блокирует работу самого Emmet. Чем можно если что заменить данное расширение? За ранние благодарен

@user-vc6lj6zr2p 4 года назад

Спасибо тебе огромное за видос, все заработало)))

@vadymprokopchuk 4 года назад

Круть

@melissasofie7681 4 года назад

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

@vadymprokopchuk 4 года назад

да, бывает всякое)