Responsive web design in 37 minutes + layout. You don’t need Bootstrap!

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

Комментарии • 2,2 тыс.

  • @FreelancerLifeStyle
    @FreelancerLifeStyle  5 лет назад +353

    Ценю твой ЛАЙК и КОММЕНТ!
    Содержание:
    00:00 - Вступление
    01:05 - Подходы к верстке
    01:30 - О контейнере
    03:01 - Фиксированная верстка
    06:46 - Отзывчивая верстка
    11:52 - Адаптивная верстка (тебе не нужен Bootstrap)
    17:29 - Отзывчиво адаптивная верстка
    19:50 - Какой тип верстки использовать
    20:34 - Медиа запросы
    28:05 - Mobile First
    29:00 - Хорошие практики адаптива
    36:13 - Домашнее задание + макет
    Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
    Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
    Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
    Instagram: instagram.com/freelancer.lifestyle/
    Facebook: facebook.com/freelancerlifestyle/

    • @ULADZISLAUKRAUCHUK
      @ULADZISLAUKRAUCHUK 5 лет назад +1

      Привет, возможно не по теме, но хотелось бы узнать про Responsive в Chrome это расширение или что та другое ?

    • @СергейДемин-г5в
      @СергейДемин-г5в 5 лет назад +1

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

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +17

      @@СергейДемин-г5в про mobile first в видео я говорил. Использовать что то или нет дело каждого. Я даю советы на основе 12ти летнего опыта работы на фрилансе. Можно принимать совет, а можно нет))

    • @SergiyPolar
      @SergiyPolar 5 лет назад +2

      @@СергейДемин-г5в я для быстрых не сложных проектов свою сетку написал, плюс кое какие плюшки js как итог только в сетке вместо трёх с лишним тысяч строк вышло всего 450 (без учёта минификации инфа) , а это как понимаешь жирный плюс к скорости загрузки. На написание и тестирование своего мини фреймворка ушло чуть больше 2х часов. Как-то так

    • @ЕвгенийТихонов-н1ф
      @ЕвгенийТихонов-н1ф 5 лет назад +1

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

  • @andreylebedev1053
    @andreylebedev1053 4 года назад +837

    Он еще и домашку дает. Боже храни этот канал! Куча годной инфы. Один из тех самых моментов, когда алгоритмы ютуба не подвели!

    • @sergeyturin7946
      @sergeyturin7946 3 года назад +14

      Только из за этого комента посмотрел видос)))))))

    • @AlejandroFedorov
      @AlejandroFedorov 3 года назад +3

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

    • @maximvolkov9398
      @maximvolkov9398 3 года назад +4

      @@AlejandroFedorov на самом деле это слишком тяжело сделать самостоятельно. Если все повторять за видосом то офк повторишь, но как начать верстать самостоятельно не понятно(

    • @it6077
      @it6077 3 года назад +28

      @@AlejandroFedorov злая обиженка, которая не может принять информацию и применить её, не говори за всех. Не все такие тупые

    • @sadmearise6202
      @sadmearise6202 3 года назад +8

      @@AlejandroFedorov а как иначе учиться? Здесь рассказывают основы, без которых ты далеко не уйдёшь, а уже применение этих основ зависит только от тебя и если ты не понимаешь как это реализовать, то наверное дело в тебе? Как упомянули ранее: "не все такие тупые"

  • @TakuatChanel
    @TakuatChanel 5 лет назад +786

    Ты хоть представляешь, насколько ты всем помог?! Уважение тебе за такие старания.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +59

      Надеюсь помог! Спасибо! 🤘👍

    • @vd7533
      @vd7533 4 года назад +14

      @@FreelancerLifeStyle делаю сейчас сайт для финального проекта курсов. Буду использовать ваши советы из видео. Спасибо!

    • @МусхабЯ
      @МусхабЯ 3 года назад +2

      @@FreelancerLifeStyle Очень 🤝

    • @Кира-ы4с
      @Кира-ы4с 2 года назад

      @@FreelancerLifeStyle скинь код

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  2 года назад +13

      @@Кира-ы4с код

  • @dimalesnik5226
    @dimalesnik5226 4 года назад +93

    хочу описать свою благодарность тебе как учителю, но честно говоря, не могу найти подходящих слов, одни эмоции:)) На столько всё КРУТО! Я считаю, все кто обучаются по твоим видео, обязаны тебе мат. поддержкой твоего канала, в том числе и я. Конечно же, после того как учёба даст свои плоды;) ОГРОМНЫЙ ЛАЙК Жека!:) Цены тебе нет!

  • @AntaresOneTwo
    @AntaresOneTwo 4 года назад +64

    Одно только выражение: "Живи, а работай в свободное время" меня мотивирует. Спасибо за уроки, очень информативно. За неделю уже научился неплохо так понимать что к чему и верстать небольшие простенькие сайты.

    • @СергейТаран-и3к
      @СергейТаран-и3к 3 года назад

      Я занимаюсь уже 4 месяца. Ты за год чего-то достиг?

    • @ВсеволодХрусталев
      @ВсеволодХрусталев 2 года назад +1

      @@СергейТаран-и3к а чего ты достиг за 5 месяцев? Я просто всего полтора занимаюсь, интересно.

    • @Кира-ы4с
      @Кира-ы4с 2 года назад

      Скинь код

    • @virtualasylum1
      @virtualasylum1 2 года назад

      @@ВсеволодХрусталев а ты чего достиг за 5 месяцев просто занимаюсь 4недели, интересно узнать уже фрилансишь? Сколько зарабатываешь и какие сайты делаешь

    • @NahNahNahnana
      @NahNahNahnana 2 года назад

      @@virtualasylum1 А ты чего то достиг за 2 месяца? Я просто всего 10 минут занимаюсь интересно узнать, уже фрилансишь?

  • @АлексейКожевников-ж4з

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

    • @GamerGDS
      @GamerGDS 11 месяцев назад

      Это так не работает)

    • @aleksandrkremer6556
      @aleksandrkremer6556 5 месяцев назад

      @@GamerGDS не говори за всех)

  • @Mifuragon
    @Mifuragon 5 лет назад +134

    Как круто, что ютуб мне порекомендовал этого человека! один из лучших учтилей по вёрстке, что я встречал! спасибо, что там понятно всё описываете

  • @АлександрШвец-г4з
    @АлександрШвец-г4з 5 лет назад +310

    Это совершилось!!...на конец то годный видос про адаптив!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +11

      Спасибо!

    • @ЕвгенийТихонов-н1ф
      @ЕвгенийТихонов-н1ф 4 года назад +1

      @@FreelancerLifeStyle А у меня не работает

    • @yuliyagryschenko8051
      @yuliyagryschenko8051 3 года назад

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

  • @AlexBurkun
    @AlexBurkun 3 года назад +30

    Просто "ВАУ!".. Спасибо огромное за отлично сделанную работу, проходил онлайн-курсы у одних товарищей, которые сейчас много где на слуху, сколько бы не морочился с их видео и вопросами к "наставникам" всё опять ссылалось на возвращение к пересмотру видео с практикой, а тут всё не просто кратко, а ЛАКОНИЧНО, что сейчас крайне большая редкость, попросту 0 воды, я даже удивился что прошло почти 40 минут, так как у конкурентов пришлось бы потратить часов 6 и то, не факт что помогло бы (ведь не просто так я попал сюда).В общем, ещё раз благодарю за сделанную работу, видео сохраняю к себе и подписываюсь, потому что только после Вас смог свои сразу 4 макета превратить в полностью отзывчивую верстку на разных устройствах, над которыми морочился неделями и задавал все значения отдельно каждому медиа запросу, пока не сдался и, к счастью, попал сюда. Удачи в развитии канала, добрейший человек!

  • @mariadawnwork9387
    @mariadawnwork9387 4 года назад +6

    И дело даже не в том, что информация прекрасно подана, а для меня пожалуй важнее человечный человек несущий знания, воплощающий на практике: "Счастья всем и за даром и пусть ни кто не уйдёт обиженным!" Стругацкие - "Пикник на обочине"
    Такие люди возвращают во мне потерянную веру в человечество. Спасибо)))

  • @ithinkitsatiger1864
    @ithinkitsatiger1864 4 года назад +97

    Как же хорошо что я попал сюда, для меня как человека который начал осваивать frontend не канал а драгоценность!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +2

      Супер! Я рад!

    • @Prichuks
      @Prichuks 3 года назад

      как там с фронтэндом друг? Как два месяца начал сам и уже по сути заканчиваю осваивать верстку. Как успехи?

    • @ithinkitsatiger1864
      @ithinkitsatiger1864 3 года назад +1

      @@Prichuks Да никак!:) Я человек такой который меняет увлечения как носки, вчера интересовался фронтом, а сегодня уже во всю погрузился в 3д моделирование) Я не удивлюсь если через месяц буду учить ui/ux и херачить дизайн) Беру от жизни все что могу, зачем сидеть на месте?

    • @sashakuk3365
      @sashakuk3365 3 года назад

      @@Prichuks как успехи? Пробовал ли брать заказы на фрилансе?

    • @flashback8504
      @flashback8504 3 года назад

      @@ithinkitsatiger1864 Как моделирование? Раньше тоже моделированием увлекался на недолгое время , в блендере моделировал, а ты как?

  • @ЕвгенийБаркас
    @ЕвгенийБаркас 5 лет назад +54

    501й коммент)) Жека, у тебя просто дар преподавателя!. Даже слов нет , как тебя ещё назвать)

  • @sterd0
    @sterd0 4 года назад +14

    Ну наконец то появился нормальный учитель и объяснил простым языком на примерах, адаптив. Все по делу и без всякой слизи. Так держать!!!

  • @andykud63
    @andykud63 4 года назад +84

    Лучшая годнота что я видел по верстке. Чувак тебе определенно некогда лить воду.

  • @abdullaevfarhad7884
    @abdullaevfarhad7884 Год назад +1

    Начинал смотреть эти видео, когда пришел на первую работу. Прошло уже три года, я дорос до мидла, и все равно их пересматриваю по необходимости (на работе почти не верстаю и всякое забывается). Женя, Спасибо тебе за твой труд сквозь года.

  • @КостяТрубин-д5х
    @КостяТрубин-д5х 3 года назад +1

    Видно, что бескорыстно учит. Просто Женя -- учитель от Бога, он испытывает потребность обучать людей.

  • @МихаилРазуваев-ь6л
    @МихаилРазуваев-ь6л 5 лет назад +14

    Вот это ты залепил!!! За неполных 40 мин. гора полезной инфы. Многие из нас, новичков, дни тратим, чтобы разобраться в таких нюансах... А здесь всё коротко и по теме! Спасибо!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      Спасибо! Еще есть что рассказать уже более подробно и на примерах, но общую информацию постарался изложить)

  • @deuscrowley7456
    @deuscrowley7456 4 года назад +6

    Если честно, я в полном шоке! Так шикарно подать материал, кратко, по делу, но очень понятно и развернуто. После роликов, длинной в 4 часа и разговоров ни о чем, это прям, как глоток свежего воздуха. Спасибо огромное за ваш труд!

  • @ukraine_son
    @ukraine_son 4 года назад +3

    Никогда не встречал подобного упорядоченного руководства для создания адаптивности, на ютубе. Спасибо!

  • @onebytesiteit30-75
    @onebytesiteit30-75 4 года назад +9

    и теперь я понял почему это видео №1 в выдаче по запросу "адаптивная верстка" .
    А я всем бутстрап советовал использовать а тут делов то . эх... не буду оправдываться просто сделаю ролик как делать адаптив без бутстрапа.
    Жека. Респект тебе , ты просто перевернул игру в мире верстке на Ютубе!!!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +1

      Спасибо!

    • @andreybessonov5895
      @andreybessonov5895 3 года назад

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

  • @гоблинвася-п7о
    @гоблинвася-п7о 4 года назад +7

    Первое видео, которое посмотрел на канале.
    Учился сам, мучался, искал годный контент, посоветовали разобраться с Бутстрапом. Скачал, посмотрел обучалку и подумал: "Что это за костыли такие, неужели нельзя такую фигню руками сделать?".
    Залез на Ютуб с соответствующим запросом - БАМ Жекино видео "Вам не нужен Бутстрап!" И понеслось :)

  • @paltseveugeny
    @paltseveugeny 5 лет назад +8

    Потрясающее видео про адаптивность. Все четко и разложено по полочкам. Очень полезная фича про вложенность медиазапросов внутрь селектора - код становится более понятным и читабельным. Спасибо за такие видео!

  • @Oxi-s9j
    @Oxi-s9j 4 года назад +21

    Господи, чтоб вы долго жили. Как же всё понятно🤯❤️

  • @hanagakiarasawa3171
    @hanagakiarasawa3171 4 года назад +6

    Боже Жень, спасибо тебе большое!) Каждый день расту и понимаю все больше и больше! Это самое крутое ощущение в жизни. Понятно что это не середина и возможно даже не начало пути, но уже ловлю дикое удовольствие, когда заставляю что то работать так, как хочу :D

  • @demarziomihalich5580
    @demarziomihalich5580 Год назад

    Пересмотрел столько всяких кучей по вëрстке, и в основном адаптивной. Часов так на дофигилион насмотрел. Но за эти 36 минут узнал столько нового и полезного. Спасибо тебе, мил человек. Где ж ты раньше был? Ну или я где был?))) Спасибо, Друже!!!

  • @МихаилПопков-ь1л
    @МихаилПопков-ь1л 4 года назад +1

    Только начал этим заниматься. Сверстал пару макетов и разговор зашел про адаптивность сайтов. 2 дня я курил ману и не понимал, что и как делать и тут этот видос. Привет из Алматы автору и крепкого здоровья в такое время)

  • @ЛеонидТолстых-н9о
    @ЛеонидТолстых-н9о 3 года назад +6

    Замечательно! Вы не только Фрилансер по жизни, но и крутой преподаватель! Большое спасибо за Ваши работы! Дальнейших Вам творческих успехов! Леонид

  • @Kamar-j9j
    @Kamar-j9j 4 года назад +4

    Я от тебя тащусь, превосходная подача материала, от такого оригинального начала чуть не расплакался :D

  • @sersus2762
    @sersus2762 3 года назад +19

    Такие занятия я бы смотрел и смотрел! И снято и смонтировано круто, это помимо того, что сам контент на цену золота! Спасибо огромное и отдельное за домашку !!

  • @АлександрДемьянченко-у7р

    О боже! Как всё просто рассказано, а ведь на входе я готовился к сложным структурным завихрениям, подключаемым библиотекам и прочим усложнениям... И как я раньше жил, не зная про макеты размеров в Яндекс.Браузере. Дай бог тебе здоровья, автор!
    P.S. Комментарий получился очень уж набожным, но это потому что эмоции переполняют :)

  • @mosostep2478
    @mosostep2478 5 лет назад +8

    Всё-таки не поленюсь и напишу тебе этот комментарий, потому что заслужил:
    Очень помогает, когда ты подробно объясняешь всё и повторяешь по несколько раз (чтоб догнали).
    Да и то, как ты относишься к своему делу - похвально. Визуально всё выглядит крайне качественно и уютно!
    Хотелось бы побольше видео про вёрстку и лэндинг (по возможности) - с чего начать и чем закончить.
    Ты большой молодец, повторяй в том же духе. Поверь, твой труд ненапрасен!
    P.S. какой плагин добавляет линии на строках кода (если работаю на VS Code)?

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +1

      Спасибо! Я стараюсь)
      VS Code по по-моему без плагина можно включить. Будет по нему выпуск.

  • @romanromanoff6526
    @romanromanoff6526 3 года назад +3

    Жека, Ты просто находка для новичка такого как я. Начал заниматься по твоим урокам - просто бомба, рэспэкт и уважуха !!! Держу курс на Тебя !!! )

  • @afterlifereality
    @afterlifereality 5 лет назад +21

    Красава, Жека! Видно, что развиваешься! Классные заставки на видео! Очень сильно помогаешь мне, спасибо.

  • @СергійК-з5т
    @СергійК-з5т 3 года назад

    Бомбезний ВідеоУрок!!!!
    Величезне Вам Спасибі за Весь Цей Океан Вашого Безцінного Особистого Досвіду , здобутого "потом та кров"ю" !!!!
    Респект Величезний!!!

  • @oshimel
    @oshimel 4 года назад +1

    Самый лучший курс! Слава Богу, что встретила не через какое-то время когда уже плюнешь и бросишь заниматься. Я первый раз сайт делаю. Так всё понятно излагаешь, а не так чтобы специально непонятно. Спасибо большое! Буду рекомендовать!

  • @andreyfedotov1974
    @andreyfedotov1974 5 лет назад +7

    Самый полезный канал по верстке который я видел. Удачи в продвижении. Интересно кто поставил 1 дизлайк

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      Спасибо большое! Я стараюсь! Ну как же без дизов)

    • @ivanzhelanov
      @ivanzhelanov 5 лет назад +4

      Дизлайк Хауди поставил видимо))

    • @viktoriacherepennikova5416
      @viktoriacherepennikova5416 4 года назад

      уже 131 дизлайк. Откуда??

  • @yurakirichenko9770
    @yurakirichenko9770 5 лет назад +15

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

  • @Polite_person_
    @Polite_person_ 5 лет назад +21

    Очень круто! За подачу и монтаж отдельный респект!

  • @Ts-pg4gq
    @Ts-pg4gq 6 месяцев назад

    Сколько не смотрю канал Жеки, всегда информация заходит отлично. В преподаватели нужно ему идти! Жить и развиваться - верно подмечено !

  • @artemnikitin9696
    @artemnikitin9696 2 года назад +1

    Женя, раньше адаптив казался мне страшной вещью, теперь же, все мои страхи развеялись. Большое спасибо за твоё творчество.

  • @nicosotnik5225
    @nicosotnik5225 4 года назад +3

    Жека, Привет из Барсы !!! Респект и уважуха за твои выдосы. Твои обьяснения СУПЕР понятны, НО !!!! Несколько раз повторно попадал на твои видео что уже смотрел раньше, и заметил, что опять узнал что то новое что пролетело мимо моих ушей раньше. По чуть чуть пересматриваю снова. Спасибо ОГРОМНОЕ !!!! Здоровья , удачи и процветания !!!! Закончится карантин, будешь планировать поездку в Барсу, соообщи. Удачи !!!!

  • @alexkreyn386
    @alexkreyn386 4 года назад +7

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

  • @СвятославГончар-е6ь
    @СвятославГончар-е6ь 4 года назад +2

    Мужик, честно, как же ты крут! Спасибо за твой труд!

  • @аленаракович-р9с
    @аленаракович-р9с 2 года назад

    уже голова болит от информации, но не могу остановиться)))сейчас прохожу онлайн-курсы. там 90% практики, всё пока что нравится, но поверхностно, и однобоко(что-то рассказано 1 вариант и вскользь упомянуты другие варианты) но мне нравится, они дают вектор развития! А твой канал появился в моем поле зрения благодаря их наставлениям (Подписаться минимум на 2-3 блогера по теме и пару групп с обсуждениями тем, которые изучаю)отличный канал!

  • @АндрійХалявка
    @АндрійХалявка Год назад +1

    Не думав, що один ролик зможе вирішити майже всі мої проблеми, класний ролик

  • @alexgrinberg1888
    @alexgrinberg1888 3 года назад +5

    Привет Жека! Невероятно полезный контент. Пересмотрел кучу всяких тюториалов но ни в одном не было такого простого и понятного объяснения адаптивной верстки как у тебя. В следующих выпусках пожалуйста объясни подробнее о флекс баксе и флекс гриде. Это было бы супер!! Спасибо! Продолжай в том же духе!

  • @maksimrugalov3158
    @maksimrugalov3158 4 года назад +3

    Это топ видео про верстку. Благослови тебя Господь!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад

      Пожалуйста!

    • @maksimrugalov3158
      @maksimrugalov3158 4 года назад

      @@FreelancerLifeStyle сегодня шаблон верстал использовал meta content="width= 1300", затем попробовал написать @media для div, но он не сработал, это из-за этого "meta content="width= 1300" "???

  • @stanislavfuzik4064
    @stanislavfuzik4064 4 года назад +1

    Классные точные советы без всякой воды и мусора. (и нормальным русским языком без всяких непонятных "умных" сокращений"). ЛАЙК! Никогда не любил (и не люблю) пользоваться готовыми решениями типа ЦМС и ФреймВорков, и еще ни разу ни один дизайнер не сделал так, как я хочу и вижу. А вот использование таких маленьких хитростей.... по сути сами себе делаем удобный фреймворк. Ещё раз нахожу, и видео тому подтверждение, что хочешь сделать хорошо - сделай это сам.
    Еще раз лайк.

  • @АлександрМайстр
    @АлександрМайстр 2 года назад +1

    Женя Спасибо. Прям глаза открылись) реально вспомнил ваши слова про то что бесплатный контент бывает лучше чем платный. Кидаю донат. Спасибо вам большое за качественный контент и то что делитесь своими знаниями

    • @АртёмРуа
      @АртёмРуа Год назад +1

      жаль знания уже не нужны(((верстальщиков миллионы!

  • @ИринаИванова-х6м3э
    @ИринаИванова-х6м3э 3 года назад +3

    Талант автора- он и в африке-талант!

  • @vasylkirshak5724
    @vasylkirshak5724 5 лет назад +8

    Дякую за шикарний випуск, з нетерпінням чекаю контент про адаптив картинок

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +2

      Дякую, буде!

    • @awenn2015
      @awenn2015 4 года назад

      Чего делаешь? Дякуешь ?)) типа дакаешь но через я?

  • @pravnik84
    @pravnik84 4 года назад +7

    Норм, все доходчиво и понятно, без лишней воды и нудятины))
    Лайк + подписка)

  • @marshmylow7413
    @marshmylow7413 4 года назад +1

    Я просто в восторге. Столько работы проделано автором. Впервые вижу настолько доступную и прекрасно поданную информацию.
    Подписался и впервые выставляю колокольчик, именно на вас!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +1

      Спасибо! На канале уже много всего полезного! Советую посмотреть)

    • @marshmylow7413
      @marshmylow7413 4 года назад +1

      Фрилансер по жизни - IT и фриланс это даже не обсуждается! Видимо, я ещё и стану впервые патроном

  • @anastasi6542
    @anastasi6542 3 года назад +1

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

  • @progprog796
    @progprog796 4 года назад +2

    Спасибо Жека за твои труды!!!! Я иногда пытался смотреть другие видео по верстке учебные не ложатся они мне в мози и уши, а твои видео это реальный учебник (все доходчиво о сложном) еще раз огромно спасибо, не перестаю учится и только с тобой.

  • @artyomvoytenko1237
    @artyomvoytenko1237 5 лет назад +206

    Жека вот тебе тема для "как это сделать" - слайдер, какой-нибудь не очень сложный с минимумом js. Думаю многим будет интересно.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +37

      Да, будет, спасибо!

    • @alexey6794
      @alexey6794 5 лет назад +6

      Navigator UA залайкайте в топ

    • @anatoliysobko7981
      @anatoliysobko7981 4 года назад +3

      slick слайдер топчик

    • @PHP_Architect
      @PHP_Architect 4 года назад +5

      дык, слайдер даже с 3d эфектами на голом css можно запилить на изи без js (от слова совсем без js)

    • @dronandreewi4547
      @dronandreewi4547 4 года назад

      А можно пожалуйста слайдер на ванильном Js, без всякой дряни вроде jQuery, slick, qodeSlider...

  • @son9261
    @son9261 4 года назад +1

    Дорогой, спасибо тебе, качество 150%, пользы 10000%, ты очень крутой особенно в этой ниши, тебя не скучно и не занутно смотреть, все по факту не какой воды, ты просто золото, уважуха тебе и огромный респект)

  • @orchidkido3966
    @orchidkido3966 3 года назад

    Мужик, ты на вес золота, ей-Богу. Объясняешь по факту за "спасибо" в миллионы раз лучше преподов на разных курсах.

  • @GamesHleb
    @GamesHleb 5 лет назад +7

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

  • @ЕлизаветаЗеленая-ы5ч
    @ЕлизаветаЗеленая-ы5ч 4 года назад +4

    Отличный и подробный ликбез, спасибо))) Всех благ тебе, автор)))

  • @БакиКаримов-ь2и
    @БакиКаримов-ь2и 4 года назад +2

    Низкий поклон за ваши труды. Огромное спасибо.

  • @ДмитрийЯворский-ы2ы
    @ДмитрийЯворский-ы2ы 4 года назад +1

    1 слово: умничка! Реально, без воды, понятно, конкретно и суть! Спасибо. Подписался.

  • @1_dimasik_1
    @1_dimasik_1 4 года назад +1

    Жека ты крут, ещё ни у кого не видел, чтоб оставляли домашку, да и контент хорошо структурирован. Лайк однозначно

  • @ea5970
    @ea5970 5 лет назад +4

    Класс тёска, спасибо) За 40 мин узнал больше чем пару дней гугла

  • @Snegurjan
    @Snegurjan 4 года назад +5

    В начале видео ,когда Жека появился на 4х экранах,я думал он скажет ....Привет ,я хочу сиграть с тобой в игру ))))))))))))))

  • @КириллЧунаев-ш3в
    @КириллЧунаев-ш3в 5 лет назад +4

    Спасибо! Лучший канал по вёрстке)

  • @romanmikleushanu9943
    @romanmikleushanu9943 3 года назад

    Фрилансер, благодаря тебе у меня теперь есть представление, что представляет из себя адаптивная верстка. Очень доходчиво и подробно рассказал. Спасибо тебе!

  • @Шурикпубличный
    @Шурикпубличный 4 года назад +1

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

  • @dimaburichin7726
    @dimaburichin7726 4 года назад +4

    Что не видео то гайд! Как всегда лайк!

  • @lihonespit
    @lihonespit 5 лет назад +4

    Лайк 👍 і коментар: Все як завжди класно!!!

  • @stelsboii
    @stelsboii 4 года назад +4

    20:36 - с-ука занием))
    Спасибо, Жека! очень полезный у тебя канал! Будут еще стримы по разбору наших работ?

  • @Ayt0_on
    @Ayt0_on 3 года назад +1

    Я вперые вижу такое восхитительное интро, так как он никто материал не припадаёт, спасибо

  • @mila4308
    @mila4308 4 года назад +1

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

  • @alexdragni5925
    @alexdragni5925 5 лет назад +12

    да , спасибо автору . Хорошо подаёшь информацию. Подписываюсь

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +1

      Спасибо! На канале уже много всего интересного

  • @ekstra-agency
    @ekstra-agency 4 года назад +3

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

  • @ruslanfedorov5168
    @ruslanfedorov5168 4 года назад +3

    Отличное видео, большая благодарность автору))

  • @alioshyn
    @alioshyn 4 года назад +1

    Привет! Наконец-то я понял, как отличить резиновую и адаптивную вёрстку! Отдельная благодарность за хаки! Молоток! С удовольствием понабиваю руку на твоих воркшопах!

  • @zdorovedarom
    @zdorovedarom 3 года назад

    Жека, объясняешь конечно замечательно, Респект! Сидел, гонял пару занятий, что по ушам "лупасит", понял. Микрофон у тебя очень чувствительный, все шумы улавливает. Каждый взмах руки в ушах отзывается. :)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 года назад

      Да, немного оплошал со звуком( дальше исправился

  • @gooodwin7558
    @gooodwin7558 5 лет назад +4

    Ждем верстку макета из примера!

  • @MykhailoKaplan
    @MykhailoKaplan 5 лет назад +4

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

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      Отлично! Рад что помог!

    • @nikitak7602
      @nikitak7602 5 лет назад

      А что мешало их применять тогда?

    • @Astdaban
      @Astdaban 5 лет назад

      @@nikitak7602 Скорей всего ему мешало всеобщее нытьё о том, что без бутстрапа никак и никуда. Помню это хорошо. Все вокруг твердили об необходимости учить бутстрап. Настаивали просто. Ох и насмеялся я тогда. Вот и ягодки пошли. Оказывается, что можно и без библиотек! Жду теперь, когда начнут разбивать в пух и прах ждейквери. Тоже будет ржака!

  • @rinsletdreamwalker2832
    @rinsletdreamwalker2832 4 года назад +7

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

  • @saidahmedov2486
    @saidahmedov2486 4 года назад +2

    я просто оставлю этот коммент в 2020, это просто лучший канал по верстке, спасибо тебе огромное!

  • @Verginia_l2m
    @Verginia_l2m 4 года назад +4

    Спасибо, от души.

  • @BohdanVR666
    @BohdanVR666 4 года назад +9

    Видео: bootstrap больше не нужен
    я, услышав это слово в первый раз: буду знать

    • @ssidorchik
      @ssidorchik 4 года назад +1

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

  • @КостяКреон
    @КостяКреон 5 лет назад +34

    Слушай...ну ты молодец. Низко кланяюсь.

  • @MegaTesei
    @MegaTesei 4 года назад +1

    Пока смотрел - мозг вспотел три раза. Переваривать придётся некоторое время. Вся информация ценна. Требуется практика для экспериментов с полученной информацией. Надеюсь ДЗ сможет проработать нужные навыки.

  • @denissimo2025
    @denissimo2025 4 года назад +1

    Увидел этот видеоролик, и, остался на всегда с автором. Даже не знаю как звать. В настоящий момент только начал изучать html и CSS синтаксис, поэтому положил этот видеоролик в закладки, до того момента, когда уже реально смогу применить эти знания на практике. Очень давно хотел узнать как масштабировать контент и разбрасывать его иначе под различные размеры экранов, а тут сразу ответы на практически все вопросы сразу!)) Я б за кружкой пива с автором посидел!))

  • @petiaduskin891
    @petiaduskin891 5 лет назад +5

    А я вот еще не учил бутстрап, но умею верстать без него, стоит ли начинать учить bootstrap?

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +1

      Только если это будет необходимо. Умение верстать чисто намного выше ценится чем шаблонный код

    • @petiaduskin891
      @petiaduskin891 5 лет назад

      @@FreelancerLifeStyle а это правда, что сейчас уже все использую elementor для создания сайтов, и код сводится к абсолютному минимому?

    • @ИмяФамилия-э4ф7в
      @ИмяФамилия-э4ф7в 5 лет назад +3

      Стоит. Там учить особо и нечего. Объясню главную идею bootstrap. Допустим, тебе нужно сделать блок карточек товаров, чтобы на большом экране они располагались в 3 колонки, на среднем в 2 а на мобилках в 1. Как ты это сделаешь? Скорее всего, ты в CSS создашь класс, пропишешь ему правила, настроишь медиазапросы с правилами, и т.д. И я так сделаю. И ещё тысячи так сделают. Так почему бы не создать подобные классы для типовых задач, чтобы просто указывая класс элементу сразу получить нужное поведение? Поздравляю, вы только что изучили bootstrap. Дальше только конкретные названия классов, которые добавляют то или иное поведение, которые прекрасно расписаны в документации.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад

      @Имя Фамилия в видео тоже самое сделано несколькими строками и одним классом container. Дальше только менять по дизайну, а не как прописано в бутстрапе. Заказчику пофиг что там написано)

    • @ИмяФамилия-э4ф7в
      @ИмяФамилия-э4ф7в 5 лет назад +1

      @@FreelancerLifeStyle согласен. Человеку сверху не стоит изучать bootstrap, пусть всё руками пишет.

  • @mityaoreh
    @mityaoreh 4 года назад +5

    йо, видос классный, но пару вопросов:
    1) почему ты верстаешь в пикселях, а не в процентах? проценты же дадут больше адаптивности, нет?
    2) почему ты не говоришь об MDN, если не рассказываешь о всех вариантах применения медиа-запросов? спека же всегда важна, тем более, что она очень хорошо написана на русском

  • @red53dhj5ry32rtty83e
    @red53dhj5ry32rtty83e 3 года назад +9

    а ну-ка признавайтесь, у кого черно-белые мониторы? ))

    • @Horizon_in
      @Horizon_in 6 дней назад

      Это для электронных книг на базе андроид)

  • @SANseivich
    @SANseivich 4 года назад +2

    Жень, твои уроки мотивирую развиваться в вэб-разработке. Очередное спасибо за урок! Пора тебе открывать свою школу.

  • @aleksg3565
    @aleksg3565 4 года назад

    Крутой! как всегда. Я вот недавно Начал верстать - сверстал пару проектов с нуля до натяжки на Wp. Ух и сложно было, не то что уроки смотреть. Но теперь за то смотришь твои видео и уже на практике понимая, могу забирать себе некоторые кейсы. Спасибо огромное!

  • @Astdaban
    @Astdaban 5 лет назад +10

    Держи лайк чисто за нативность! Я тоже за нативность. В жопу библиотеки!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +1

      Спасибо!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  5 лет назад +1

      @@VladimirKrygin-j4d не нужно ничего бояться и писать свой)

    • @Astdaban
      @Astdaban 5 лет назад

      @@VladimirKrygin-j4d Та не боюсь я этого. Вопрос в другом. Если передо мной стоит задача подключить гору библиотек, написать за их счёт пару строчек и неоправданно нагрузить сайт, или самому написать 20 - 40 строчек, я выбираю второе, я выбираю хардкор. Это во-первых. Во-вторых, натив меня развлекает. Прикольно, знаешь ли, посидеть поломать голову, если столкнулся с чем-то неведомым. Но это я действую по такой стратегии только для себя, в своих проектах. На фрилансе там конечно временные рамки и такой подход провален.

  • @checkTM
    @checkTM 4 года назад

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

  • @ЯнаМакельська
    @ЯнаМакельська 4 года назад +2

    Мне Ютуб чисто случайно выдал Ваше видео,и это было очень вовремя.
    Я очень благодарна Вам,за то, что все так понятно,максимально сжато и ясно подано, как для новичка,так и для человека разбирающегося в теме))
    А еще,мне очень нравится то, что на каждом видео Вы присутствуете внизу экрана) Очень приятно слушать Вас и смотреть при этом не только на сайт,но еще и на вас! Очень хороший у вас подход.Как в живую с преподавателем,чувствуется Ваш посыл еще сильнее) И очень приятно на вас смотреть.Люблю смотреть преподавателю в глаза на уроке, а у Вас еще и бонус-они голубые)) (очень не люблю обычные видео других пользователей с закадровым голосом,когда вообще не понимаешь,кто тебе говорит там все, и половина текста идет мимо ушей)
    Спасибо огромное за работу Вам! Это для меня драгоценная находка!)Лайк, подписка и обеспечение сарафанного радио от меня)

  • @ЭйсВентура-б8д
    @ЭйсВентура-б8д 4 года назад +1

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

  • @cat_ashere
    @cat_ashere 4 года назад +1

    Очень круто. Как для начинающего web-разработчика прямо приятно, когда такие обучающие материалы выкладывают. Да еще и в свободном доступе. Большое вам спасибо.

  • @semyonsergeev1677
    @semyonsergeev1677 3 года назад

    Ждешь лайк и комментарий - получай! Спасибо за урок, все предельно понятно. В процессе освоения адаптивной верстки на практике наверняка пересмотрю твоё видео ещё 9 раз))

  • @MxM_5835
    @MxM_5835 4 года назад +1

    Красавчик! Приятный голос, доступное и простое изложение! А главное много примерах и объясняешь все на пальцах! Спасибо.

  • @notelovoyadecir6563
    @notelovoyadecir6563 4 года назад +1

    Не стал верить комментариям под твоими видосами, решил убедится сам, Хах а ты реально крут!!) Спасибо за контент, очень полезно!