Mobile first метод. Верстка сайта html/css. Адаптивная верстка. ч.1
HTML-код
- Опубликовано: 13 апр 2020
- Друзья, в видео я полностью расскажу, что такое метод верстки 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
Дай тебе бог здоровья!) Как же приятно и полезно смотреть твой канал)
Благодарю)
хотелось бы мне, чтобы мне так в комментах писали. а то как я создаю годный контент - так тишина, а тут как говнокод - так в опу целуют. ппц несправедливость.
Огромная благодарность за титанический труд. Когда год назад искал на Ютубе толковых верстальщиков по БЭМ и прочим толковым штукам, то поиски были напрасны и со временем интерес мой к вёрстке угас, благодаря твоему видосу он разгорелся с новой силой и это была первый долгий видос по вёрстке, который я досмотрел до конца. Так что сил тебе да побольше, добр молодец на новые труды)
Благодарю !
Очень хорошая у вас подача материала, приправленная юмором и главное весьма толково.
Мой Вам RESPECT и уважуха !
Благодарю!
Вадим! Огромное Вам спасибо за Ваши уроки. Всё просто классно. Подача материала превосходная. Вы просто фантастичен.
Спасибо, очень рад)
Очень круто! Четкая теория, объяснение зачем эта теория нужна, красивый макет, ценный опыт и юмор для поддержки мотивации. Спасибо, Вадим)
Спасибо)
До слез друг, спасибо что ты есть. Сверстал все твои сайты. Единственное галп серф сложный для меня стал на месяц на нем застрял, садился и засыпал, так как он был очень сложен для понимания, много нюансов, много дивов, много контента, просто начинал засыпать, голова отключалась. Опускались руки, но ты опять начинаешь делать, новые сайты и показывать их и во мне опять появляется жизнь, я опять заряжаюсь позитивом. И опять я хочу работать.
круто, спасибо за такой отзыв, да серф просто вообще не типичный макет
Зашла на просмотр видео. За 5 минут уже понятно, что есть смысл просмотреть видео, подписаться и пересмотреть все видео на канале. Класс. Спасибо
Не только полезно, но и увлекательно! Прямо заряжаешься кайфом от верстки! Спасибо огромное!
Только начал смотреть. За первые 10 минут видео ответил на все интересующие и пугающие новичка вопросы. Спасибо, очень познавательное и полезное видео!!!
Человечище, благодарю!!! Ты мегакрут! Удачи и процветания!
Вадим, классные видео и главное что ты держишь внимание и получаются и знания и чувство юмора! Спасибо
Супер! Очень нужная, свежая и актуальная тема! Спасибо.
Очень крутой, полезный с юмором урок. Спасибо Вам большое :)))
Вадим спасибо за качественный контент !!! Долгожданная тема на канале !
как и обещал)
Ждем-ждем 2 часть!
Спасибо большое за 1-ую :)
самые крутые вечеринки у Вадима на канале! Спасибо за контент! Может быть скоро завяжу с недвижимостью и пойду верстать благодаря тебе!)
Класс! Настроение сразу поднялось! Спасибо!
Оч рад)
Лайкос не глядя, а потом 3 часа приятного времяпрепровождения!!! Вадим респект!!!
круть, спасибо
Лайк+подписка+колокольчик!Спасибо за урок!Ждём верстку на много-много страниц)))
Вот это другое дело Вадим, такого еще на твоем канале не было. Контент очень полезный, спасибо, ждем продолжения. 👍
Тянуть не буду!
Спасибо за видео, как всегда доступно и понятно.
Ждем продолжение
11:43 Одно из лучших объяснений по галп, освоил по твоим видео 👍
Вадим наконец-то радует новым контентом, крутяк!)
За время карантина ты стал таким уже родным, Вадим! ^
спасибо))
Спасибо Вадим, очень понятно и близко рассказываете. Лайк, подписался!!
Спасибо за труд! Всех благ!
спасибо! всегда интересно с тобой верстать под фирменные прибаутки!))
Крутяк, это радует)
Турбо пушка! Спасибо !!! сначала лайк, ну а вечерком - ВЕРСТАТЬ!!!!
Норм тема)
Сразу лайк! Спасибо за контент:)
просто красавчик. всегда поражаюсь твоей усидчивости и педантичности!
Благодарю
О что-то годное, спасибо за контент
Супер. Спасибо большое.
Иногда, под видосом, так не хватает кнопки - супер лайк! Здесь именно такой случай.
Спасибо большое за видео. Все доступно и ясно.
Было дико познавательно, спасибо большое:)
приветствую Вас . было огромное удивление , пришёл с работы и тут такой видос )) огромное спасибо Вам за ваши уроки )
Вечер верстки )
Здравствуйте! Благодарю Вас за видео!
Спасибо за труд!
Круто! Ждем продолжения.
Спасибо за то что вы есть
Дядя Вадим , вы лучший
спасибо)
Спасибо за крутой проект и крутое объяснение!
Радости нет предела, ты бог верстки, ждал ролик с нетерпением
круть, теперь изучать)
Отлично! :) спасибо!)
Спасибо. Это прям то что доктор прописал!!!
Это хорошо)
блин...Вадик ты очень крут! не один блогер столько времени не тратит на объяснения...вообще You are in the first place for me!
Благодарю!
Братан, ты крут!
Теперь буду смотреть и учится у тебя !!!
Спасибо за видос, уже посмотрел, лайк прожал, комент написал. В начале 21:37 описка в слове after.
классный канал, много полезного, спасибо за годный контент!
You make my day)
Спасибо за знания !!!
как всегда великолепен)
Звоню дизайнеру... Еду в гости к контейнеру.... Видос супер, очень люблю верстать хоть давно и работаю фронтом пишу на реакте, все равно очень интересно смотреть
О интересная тема , лайк не глядя
Самый юморной верстальщик!!!
Спасибо, всё круто обьясняешь.
Красаучег. У тебя есть отличное свойство, изза которого новички предпочтут, тебя, в качестве обучения, в отличие от того же фрилансера пж. Ты умеешь доносить простым языком, все поэтапно, учитывая тонкости чтоб новички сумели принять информацию, имея скудные знания и навыки... Не теряй эту фишку.
Огонь видос
Господи как ты вовремя!!!!!!!
Хух , успел)
Как всегда на вершине, жду от тебя уроки по wordpress
Карантин сделает своё дело))
Спасибо за контент
Вадос это пападос на лайк, однозначно 👍.
попадос))
однозначно лайк.
Лайк, спасибо
Спасибо, Вадим! Че делал бы без твоих видосов - хз : )
"Я конешн извиняюсь. Наша метода где-то дала збой :)"
ахахахах!! )) Обожаю этого парня! )))
спасибо)
Годнота!
ты крут! Спасибо!
Очень крутой урок,замахнулся на него не по уровню,но уже похоже освоил препроцессор, миксины, элементы работы с Js.Еще воодушивило то,что даже профессионалы допускают ошибки в процессе написания и нужно их не бояться, а исправлять.
Согласен
Зашел плюсанул.
Лучший контент на ру ютубе по верстке. Спасибо тебе большое, Вадим!
прикольний чувак
спс за видос
Вадим спасибо за видос)))
Спасибо за коммент
@@vadymprokopchuk На 7 строчке в CSS очептяка)
Спасибо!
Привет, все нравиться вот только микрофон как то поправь что клавиатура так по ушам не стучала. А так все прекрасно, лайк и подписка)
1:58:00 С этого момента пошло не очень хорошо. Нижний паддинг лучше дать слайду, чтобы на `slick-dots` не наезжал на контент. А кнопку вынести в отдельный класс `btn` и два модификатора `btn btn--light` и `btn btn--accent`
агонь!!!!
Спасибо Смотрю и пока еще не все понимаю Решил пока повременить и вернусь позже Но суть для mobile first уловил Это размер и верстка
Спасибо Вадим! Когда вторую часть планируете выкладывать?)))
Годното, и хороший опыт
благодарю
Спасибо👍
Термин normal - это значение свойства в CSS равное 400, то есть его используют в CSS, когда верстают.
А термин regular - это начертание шрифта 400, его используют дизайнеры шрифтов (и на гугл фонтс так обозначено).
То есть эти два термина говорят об одном и том же.
А он всё пытается 500 найти, которого там и в помине не было.
P.S. 500 - это medium.
круто!
Рекомендую использовать плагин gulp-group-css-media-queries, и писать медиа-запросы возле каждого стиля, так как править потом будет удобней, а плагин потом сам все сгруппирует по размеру экрана и запишет в конце файла.
Вадим в данном случае работал без gulp, а вообще заметка хорошая
Большое спасибо за данное видео. Только со звуком какие-то проблемы при нажатии на клавиатуру)
Та все не настрою другой микрофон( этот как мне кажется ловит звуки со всего дома=)
Спасибо
Крутяк
Видео класс спасибо
Почему ты решил сделать кнопку тегом button и псевдоэлементами можно же было сделать проще тег "a" и внутри 3 span и тогда можно даже будет анимировать эту кнопку
годный контент) Ну ты буржуй! воду из фужера пить)
Спасибо Вам огромное за Вашу работу.
Единственное не поняла как Вы несколько одинаковых строк одновременно редактируете.
alt+пкм и у тебя + 1 бегущая строка. Отменить на esc
Новечку веб-дизайнеру повезло что взяли его макет. Бабка моя на колькуляторе и то лучше нарисует.
да, бывает всякое)
когда входить второй выпуск? ждем))
Намного легче когда один раз задали медиа и пишем туда классы
Шикардос ! лайк и подписка !!!! такой вопрос ! обещание закончить эту верстку еще в силе ? и еще , по настроению если будет возможность посмотреть mobail-first верстку бургера !!!! Спасибо за труд !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Привет. все будет, все сделаем
не внатуре класс
Web-евангелиста ты в зеркале увидишь, Вадим))
=))
Все классно, но в реале, 96% заказов - тебе дают только Desktop-версию , очень редко попадается что все отрисовано. Многие дизайнеры просто ленятся! ) Мне за 10 лет всего раз 15 попадались со всеми версиями)
К сожалению это не дизайнеры ленятся, а зачастую клиент не хочет платить дополнительные средства, и дизайне продать не может дополнительные страницы под мобильную версию. Но если верстальщик со свой стороны сделает не так как захочет клиент, тогда больше времени и нервов потеряет сам верстальщик
@@user-vc6lj6zr2p насчет жлобства клиента согласен. А вот насчет верстальщика не сказал бы. Я обычно делаю на свое усмотрение, незначительные правки то фиг с ним, а если серьезные то говорю что мобильный макет не был предоставлен, я делал как считал нужным, и если переделать как вы хотите, то это уже не правки а доделки и переделки, соответственно дополнительная оплата
@@LectorWeb Мне вот интересно мнение верстальщика, будь у вас макет с разными разрешениями, будете делать в первую очередь мобильную версию?
@@evgeniyk.4618 я бы не стал, не вижу смысла, часто в мобильных версиях некоторые элементы просто отключают. А если верстать наоборот, ты верстаешь страницу на мобильный, потом возвращаешься в начало страницы, довёрстываешь элементы которые тебе надо добавть, потом идешь отключаешь их в медиазапросах, потом смотришь что бы не поплыла твоя предыдущая верстка. Так же очень велик шанс, что тебе просто придется полностью переверстывать отдельный элемент, потому что ты не учёл какой то момент со структурой. Как по мне, куда лучше верстать полноценную версию, но располагать элементы с оглядкой на мобильную версию, если она предоставлена дизайнером.
Всем по привету! Скажите, пожалуйста, кроме woff и woff2 не нужно подключать остальные форматы шрифтов? Я имею ввиду eot, ttf, svg, otf.
еще маленькая проблемка, в самом конце видео нужно в медиа запросе поменять размеры стрелок на 70 пикселов, но этого почему то не происходит, может где то еще что то прописано, что не дает выполнить данное условие?
почему .slick-dots {position: absolute; bottom: 0;} работает относительно .top-slider__item? Ведь .top-slider__item не задали position: relative, а значит три точки должны были уйти в самый самый низ
потому что .top-slider задано position: relative и .slick-dots {position: absolute; bottom: 0;} работает относительно .top-slider без 'item'