Адаптивная верстка интернет-магазина с нуля. Часть #1. GULP SCSS JS
HTML-код
- Опубликовано: 14 июл 2020
- Адаптивная верстка интернет-магазина с нуля. Я буду комментировать все свои действия. Использовать буду свою сборку GULP, наработки на чистом JS и SCSS.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Все части: • Адаптивная верстка инт...
☝️ Во время мастер-классов и марафонов не обязательно все знать, важно смотреть на принимаемые решения и практики!
👉 Макет (в открытом доступе) - / 39022542
👉 Настройка редактора VS Code - • VS Code настройка уста...
👉 БЕСПЛАТНЫЙ КУРС по верстке сайтов (Front End). Уроки HTML CSS JS:
• БЕСПЛАТНЫЙ курс по вер...
🤟 Результат верстки будет выложен для подписчиков на патреоне - / 40044799
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Спасибо, что вы учите нас за бесплатно! Респект!
Женя: "Я буду верстать медленно..."
Так же Женя: "Ctrl+C Ctrl+V Ctrl+C Ctrl+V Ctrl+C Ctrl+V Ctrl+C Ctrl+V, итак, шапка готова!"
Дай угадаю, этот момент ты тоже писал с помощью Ctrl+C Ctrl+V
@@anrynasa1501 yeeep!
Ты офигенен! Твои уроки - шедевр, спасибо большое!
Спасибо Женя за видео. Очень правильно, что показываешь на макете со сложностями! Как правило на практике идеальных макетов не бывает.
Евгений Вы большой молодец! Продолжайте в этом же духе. Жду таких же марафонов и спасибо за контент!
Женя, ты святой человек. Как же хорошо, что я наткнулся на тебя здесь
Рад что полезно!
Хотел посмотреть стрим, и спокойно писать одновременно с тобой, в итоге пришлось разбираться с scss и prepros'ом. Спасибо большое, вышло очень познавательно, лайк и подписка уже стоят)
Спасибо огромное за крутые видео как раз хотел узнать побольше о интернет магазинах
Вижу, что пошел негативчик! Я, чтобы понять этот видос, 4 месяца возилась в теме. Конечно изучала верстку, js, даже до react дошла, но последний бросила, т.к. сложновато для такого новичка как я. Вновь вернулась к роликам Жени... И, о, чудо! Все ответы теперь я находила в его же роликах! Просто раньше, из-за незнания, я не обращала внимания на важные моменты. А подписка на патреоне не при чем. Сборку Gulp я слизала с экрана, базовый макет с его миксинами разбирала дня три, пока разобралась и привыкла. Его часовой ролик я могу два дня разбирать и удивляюсь людям, которые сборку gulp за день осмыслили - я 3 дня возилась, плагины вычитывала смотрела чем таски от пайпов отличаются, короче вникала. Из всех Жека по верстке и Иван Петриченко по js мне подошли больше всего. И, да! Учиться программированию больно! Но дорогу осилит идущий! Жека, спасибо Вам, удивительные люди живут на этой планете!
Как прогресс?
Лена) вы такая не одна) с галпом тоже 3 дня возился. И js тоже Петриченко курс.
особенно если учитывать, что gulp сборка какая-то кривая. У Жеки с шрифтами никаких проблем у меня же нужно перед каждым запуском проект удалять в scss все шрифты потому что сборщик не может проверить и обойти уже подключеные шрифты. А еще на тяжеловесных шрифтах он захлебывается до полной остановки
Можно поковырять и научится самому, но все же, зачем выкладывать видео с настройкой сборщика который по своей сути кривой?
и так же с обработкой картинки, и не только у меня такое
да и в описании можно было бы приложить ссылки на необходимые уроки, которые нужны для полного написания этого проекта
Я сайт делаю:) на JS+HTML+CSS+PHP
У меня в 2023 вообще сборка gulp не работает
Лучший, я наоборот рад, что меню такое кривое попалось, столько инфы подчеркнул
Супер!
Супер. Спасибо, что делитесь своими знаниями
Очень интересно наблюдать за твоей работой, ты классный)
крч смотрел эту вёрстку полгода назад - нихрена не понимал
ща всё понял, классно)
Рад!
Спасибо, Жень, за такое подробное комментирование. Суперполезно
Пожалуйста!
Да и кстати, именно по твоим урокам я научился верстать! Спасибо тебе огромное, ждём JS))
Я рад!
А я заново перенаучился верстать)
Верстаю кст с 2000 года)
а за счет чего исчез выступ бэкграунда на 1:59:50 ??
и как успехи)? за сколько научился? работаешь?
Жека, вот и хорошо, что шапка такая нестандартная, кривая и безсеточная. Именно такое и нужно показывать как верстать. А не так как другие блогеры делают, беря идеальные дизайны.
Мне же практически постоянно попадается вот такое. И с иконками та же муть, когда приходится и перекрашивать и убирать фоны. И с бекграундами. И с фото, предоставленными только маленькими.
Раньше просил переделывать. Сейчас - быстрее уже самому, как правило. Кроме тех случаев, когда вопиюще неадекватно сделано.
Да, хороший пример
довольно позитивно-ламповые стримы. Спасибо за них, Евгений. Можно посмотреть за работой мастера, и что-то интересное подметить себе в код. Делайте в все в том же духе, удачи
Спасибо!
Невероятно интересно наблюдать за тем, как профессионал решает проблему. Всматриваюсь, вдумываюсь в каждую строчку кода. Огромное спасибо!
Жека, просто лучший.
Настоящий профи своего дела!
У тебя учиться и учиться и еще раз учиться)
Спасибо тебе огромное за то что ты делаешь!
Верстаю третий сайт по твоим стримам - и это суперрр! Знаний и практических навыков в 10 раз больше, чем за все пройденные ранее курсы вместе взятые)))
Спасибо!!!
Пожалуйста!
Спасибо за стрим, зафиксировала себе несколько очень интересных и полезных твоих решений! =)
Я как, заказчик, просто в экстазе от того как ты анализируешь макет и объясняешь это другим. Особенно мне нравится когда ты говоришь о том что не надо лениться. Немного стыдно за непродуманные до конца макеты, которые приходится отдавать верстальщику, но реальная жизнь она отличается от учебника. Спасибо что так это ясно и просто показываешь это вживую!
Guru как всегда на высоте! По больше бы, таких видосов как ты снимаешь
Будут
Спасибо за онлайн обучение! С моей стороны огромная благодарность и за комментарии верстки - доступно и легко воспринимается речь.
Супер! Я рад!
Жека, спасибо за твой труд!
Спасибо за видосы, очень сильно помог с пониманием БЭМа, т.к постоянно было чувство, что что то делаю не так ибо не было хороших примеров.
Просто топчик) спасибо большое за полезную информацию
Жека, это нереально круто! Спасибо тебе большое за твои уроки и твою искренность. Ты лучик света в этом темном мире!) Твои уроки очень вдохновляют и мотивируют, а также заряжают позитивом!! Спасибо тебе еще раз большое!! Не останавливайся ни в коем случае, а то мы пропадем без тебя!)))
Хех, спасибо за поддержку! Давайте беречь друг друга)
@@FreelancerLifeStyle Согласна))
Столько полезных фишек, спасибо!
Лучше выключать чат во время верстки, а включать на разбор полетов (мое мнение!) За видео огромное спасибо!
Согласен!
Огромное спасибо за труд🔥
Женя, спасибо за хороший контент
Хороший стрим,сложно пока что,но интересно и классно сделано.Очень полезный стрим!
Очень крутой урок, именно проблемы и сложности возникают при создании шапки и при адаптиве, особенно многостраничных сайтов.
Спасибо за урок, лучший!)
С нетерпением жду продолжения!
Круто, большое спасибо! Я поняла, что не догоняла в вёрстке шапки! И здорово, что сложный макет, простой я и сама сверстаю :))
шикарно! Жень, шапка огонь!!! Благодарю!
Я теперь твой патрон. Потому что все видео информативные и качественные. Ты делишься всеми знаниями без хитрости, не то что некоторые инфоцыгане. За это тебе респект и денежка.
Супер, давно искал видео про функциональный интернет магазин.
Все видео старые, 5 летней давности.
А тут такой сюрприз, спасибо!
Скоро будут и остальные части
Спасибо за контент.
Респект и уважение
Жек, умники и хейтеры всегда будут, не трать на это свою энергию и запал. Тебе добра и положительных эмоций. Познавательный контент! Видосы с версткой рил помогают.
Спасибо огромное за крутые видео как раз хотел узнать побольше о интернет магазинах
4
Спасибо тебе! шикарно все объясняешь!
Отличное видео!!! Почерпнул для себя новые варианты выхода из неоднозначных ситуаций, хорошо что макет попался кривой (это же супер прокачка скилла). Жека не бомби ты так от комментариев отдельных индивидуумов, это же интернет, тут каждый 2й считает себя самым умным а то и каждый 1й)) Я, например, уже почерпнул просто тонны полезной инфы на твоем канале и надеюсь, что ты будешь продолжать в таком же темпе и дальше, а критики они всегда будут.
Молодца!!!!!!Лучшее обучающее видео которое я видел!!!
Я рад!
Стрим просто огонь. Спасибо за кучу полезной информации в 1 видео. Ждём вторую часть. Жень, может не стоило пузико логотипа убирать, оно придавало свою изюминку шапке😀
Спасибо ! Очень круто!
Пожалуйста!
Спасибо тебе! И дай Бог здоровья!
Пожалуйста!
спасибо за лайфхаки из твоего бесценного опыта по верстке! ")
Мой кот поставил лайк :) Крутые фишки с адаптивом и стилями! Прям WOW effect!
спасибо тебе огромное за твою работу!
Пожалуйста!
Спасибо! Полезный стрим!
Положительный гендерно-нейтральный комментарий для продвижения видео состоящий не менее чем из 3 слов.
Ахах, спасибо!
🥳за тебя! Классный учитель! (нравятся шутки )
Очень интересно посмотреть на профессионала в деле!!!
Спасибо!
Познавательно, молодец!
Спасибо!
Молодчина, такой сложный макет и так здорово получается!!!!!!!!!!!
Спасибо за все, что ты делаешь на канале🙏, очень полезен контент🔥🇺🇦
Пожалуйста!
Чуваки, 107 407 просмотров, а лайков всего 4700.
Не скупитесь нажать палец вверх.
Евгений делает титанический труд!
Спасибо вам Евгений!
Это круто! Спасибо!
Дякую Жекан, відос просто бомба!
супер, спасибо. будем трудится )))
Очень хороший видос. Спасибище. Ииииии не надо лохматить бабушку!!!! Жека - the best of the best of the best!
Женя, вот как-нибудь я обязательно приеду к тебе, что бы лично выразить свою благодарность за то что ты помогаешь людям изменить свою жизнь. У тебя такой богатый багаж опыта, знаний и наработок. И когда думаешь каким же трудом это все человеку досталось, тем не менее он так всем этим делится. Это действительно невероятно круто.
Золотой парень, не много такого контента на ютуб.
Спасибо, это то что все так долго ждали)
Как всегда топ)
Жека, мне кажется, что ты б мог выкладывать просто записи марафонов. И тебе проще было бы и никто б не дергал с вопросами))
думаю, перфекционист, который сидит в каждом из нас не даст реализовать подобное. А супер-пупер марафон в запси делать слишком затратно по времени
Там, где вы прописывали параметры для data-da=".menu_body, 640,0" так работает. Я посмотрела ваш JS, вверху зелёными буквами написан образец, как писать. Это кайф, осознавать, что у меня получается. Я ведь повар )
Агонь, просто пушка ))))))
Большущее спасибо!
Сверстал по видео вместе с Женей за 2 дня, не так все просто оказалось. Начал понимать за что платят верстальщику и заметил за собой уже такую привычку, некоторые сайты начинаю смотреть на адаптив и смотрю все ли там ровно расставлено=) Спасибо за то, что делаешь для нас. Я уже патрон, если что=)
Я рад! Пожалуйста!
Спасибо! Классно!
Если бы проводили анализ этого марафона на самое повторяемое слово - это были бы словосочетания со словом "......дизайнер" ))) Жека молодец! Лайк по любому..
Женечка, огромная тебе благодарность за твои труды...жаль что я сечас ничего не понимаю ...и сейчас между нашими странами огромная бездна ... мое уважение к тебе как к человеку и как к профессионалу .счастья тебе и твоей семье и всего хорошего .дьякою
ти що зробила щоб війни не було? на площу іди, а не тут сидиш
@@user-xr4vl2rd4w чтобы потом загреметь ни за что в отдел, а в итоге ничего не добиться. Она никак не повлияет на то, чтобы война завершилась. Слово народа там ничего не значит, давно уже пора запомнить) Тем более девушка ничего плохого про Украину не писала, к чему ей пустая претензия?
@@navaimamedov8481 если бы вы нормальные были - войны бы не было, вы бы скинули окурка того. Вы загреметь боитесь, а нас убивают! Тряпки ссаные
@@user-xr4vl2rd4w =) это тебе так кажется) Путлер- диктатор - выходец из спец служб. Обычный народ его никак не скинет. Это тебе ни какой-то смехоподобный янык.
Жека, лайфхак по адаптивным margin вообще пушка)) сейчас на одном макете попробовал - всё шикарно работает, а главное - экономит кучу времени)) Спасибо!
И еще просьба есть, можешь выложить музыку, которая на фоне играет во время стримов?)))
увидел запись стрима только сейчас, понял что я тупой а ты красава))
То чувство когда поглащаешь каждую секунду видео)
Огромное спасибо!!!
Пожалуйста!
ты красава !!!! СПАСИБО БОЛЬШОЕ
Спасибо за видео)) много новых интересных нюансов, до которых сам еще неизвестно когда допрешь, а они уже вот тут вот и объяснены) Динамический адаптив просто сказка какая-то))) Патроню на патреоне по мере сил, чтобы немножко сбить привкус несправедливости из-за того, что "да как же такой первосортный контент и за бесплатно раздаривается?!")))
Спасибо!
Стрим супер! Ждем продолжения! P.S Три колонки меню перед лого можно разделить не гридами, а флексами на 0 0 25%, а lastchild 0 0 50%
Можно по разному, хотел впихнуть гриды)
Жека(обращаюсь так, ориентируясь по надписи на руке:) ), не агрись так сильно! Береги себя)
Спасибо за очередное классное видео!
.... Один минус - смотрю как ты верстаешь и перестаю верить в свои возможности))))
Отличный материал, спасибо! Только я бы несколько видоизменил. Мне кажется, что оставлять рядом кнопку звонка и корзину - не лучшее решение, так как, все мы прекрасно понимаем, что будут миссклики. И одно дело, миссклик на другую страницу, и другое - на окно вызова номера. Это могло бы раздражать. Я бы, скорее всего, попробовал или запихнуть это в удобный и органичный виджет, либо изменил бы компоновку самих элементов. Моё ИМХО - на последнюю инстанцию не претендую)
Привет из Узбекистана!
Евгений, спасибо за годный контент. У меня вопрос. Какой плагин используешь, когда сжимаешь окно браузера в правом верхнем углу показывает размер окна?
Сколько полезной информации! Огромное вам спасибо за ваш труд! Единственное чего я не понимаю, это почему у вас до сих пор не миллион подписчиков!
Хех, полезная информация которая меняет мир мало кому нужна))
@@FreelancerLifeStyle Всё равно, я надеюсь аудитория, которая хочет развиваться скоро найдёт ваш канал, и подписчиков всяко будет больше миллиона))))), потому что у вас реально самый лучший канал по обучению вёрстке на всем ютуб 😊.
@@user-wc9kq3mi4o какой именно архив тебе нужен?
@@user-wc9kq3mi4o все что я использую можно найти в видео на канале абсолютно БЕСПЛАТНО. Твои притезнии отбивают желае в принципе что-то делать. Успехов
@@user-wc9kq3mi4o это и есть претензия. Ты не ценишь то что для тебя делается. Тебе я ничего никогда не дам. Успехов
Вроде видео идет 2+ часа а я делаю этот кусочек 3 дня, ибо о а по этому есть отдельный урок, а по этому тоже есть урок идите смотрите. Пока все посмотрел пока разобрался потестили, подвигал ползунки так сказать. Но круто спасибо. Запутаный макет это да, туда сюда, трудно не потеряться где что пишем, но вроде вышло.
Спасибо!
Узнал про пунктир под ссылками, что это вызов попапа. У меня как раз в макете есть такое и я теперь знаю для чего это)!
Теперь не боюсь жертвовать иконками))))
В общем мега полезный стрим!
Жека, не лохмать бабушку, давай побольше боевых проектов)
Спасибо 👍
Пожалуйста!
Жека, ты лучший препод по верстке, я дизайнер, всегда хотел освоить верстку, только благодаря твоим роликам я сверстал сам себе сайт, полностью понимаю верстку теперь, конечно нужно подтягивать js, до полноценного верстальщика, но твои уроки реально лучше всего заходят, благодарю (anika-design ру, то, что навоял если что...)
Спасибо!
крутяк, мне дизайн понравился
@@iwindowsubuntu2787 благодарю, если кому чего, пиши)))))
хорош, круто получилось, а инет-магазин на аника груп на опенкарте или самописка?
UPD : wp? сами делали?
@@user-me2to3qj1q это не cart, это натянуто на wordpress, для удобства заказчика, но можно натянуть подобное и на open cart
На 47:50 вы упомянули слово chedule как расписание, но оно пишется как schedule и читается как ['skedju:l]. Сам раньше спотыкался о данное слово.
Привееет! Совсем недавно начал изучать вёрстку, обучение HTML подходит к концу, спасибо тебе за ролики: что не видео, так отторваться не могу!
Хотел бы увидеть запись о блочной, вложенной вёрстке. А то я вроде понимаю, а вроде нет :/
Посмотри видео на канале, тут есть уроки
У кого не работает динамический адаптив, время на видео - 2:22:40, в момент когда вешаем data-da="menu__body,2,640" при уменьшении до 640 пикселей никакой реакции.
В новой сборке Gulp нужно писать data-da=".menu__body,640,2"
а если я не пользуюсь галпом что нужно сделать чтоб заработало
благодарю
@@reychev13 Не за что.
Спасибо тебе Добрый человек!
Огромное спасибо за твой колосалный турд, у суперские видосы, у меня такой вопрос, а почему ты используешь flex вместо grid css?, flex удобней ?.
Жека лучший верстальщик спасибо!
Хех) стараюсь
ти крутий дякую за то що ти робеш
Жека, привет! Вода, которая заряжается флюидами верстки и твоего позитива, в стаканах у мониторов, доступна подписчикам?)
Ахах) конечно, нужно ставить перед моником во время стримов))
Жека забей ты на этого объективного, строит из себя самого умного, я согласен с тобой что можно использовать несколько способов , лишь бы они работали😊
Здравствуйте. подскажите пожалуйста каким образом вы скопировали классы с html в scss? или может название расширения подскажите?
Наставьте на путь истинный, кто шарит? 1)Создал js файл для динамического адаптива 2)в него положил расширенную версию функции для адаптива из видоса Жеки(про адаптив динамический)3) этот js файл подключил к html 4) в header.html data-da прописал, все четко.
Но при достижении 640px мои нижние элементы хедера не убегают в бургер.
Привет, ждем следующие части!)
По шапке: думаю, label Москва может быть задействован на сайте, в зависимости от города может отличаться стоимость товара, не раз встречал подобное поведение на сайтах. А корзину на мобильных устройствах я бы привязал к правому нижнему углу, чтобы она листалась вместе с контентом - очень удобно)
Да, всю шапку можно зафиксить
Согласен на счет корзины, лучше ее вниз закрепить и добавить рядом с ней иконки входа и регистрации, личного кабинета и избранного)) Не много теряется место для основного контента, зато более удобно пользоваться личным кабинетом и корзиной
@@diitcash5874 ну там пикселей 50 нужно для второго этажа. Получается только из-за логина который не участвует в продажах. Думаю тут нет одного решения. Мне мое нравится :)
@@FreelancerLifeStyle за скрипт динамического адаптива отдельный респект, даже в закладки себе добавил, постоянно пользуюсь)
Вопрос по слик слайдеру: я что-то не так делаю или он не поддерживает centermode на сафари? может была подобная проблема..
@@FreelancerLifeStyle согласен, а свой вариант оставлю себе как домашнее задание