Адаптивная верстка сайта с объяснением действий. Добавление товара в корзину, AJAX подгрузка из JSON
Вставка
- Опубліковано 16 чер 2024
- Адаптивная верстка сайта. В этом видео я покажу подробную HTML CSS JS верстку очень интересного макета FIGMA с кучей полезных решений и лайвхаков! Это одностраничный сайт с корзиной и товарами. Первым делом нас ждет интересная шапка с выпадающим меню и поиском. Конечно же мы реализуем меню-бургер. Сразу же сверстаем подвал где, в том числе, использую свою разработку - адаптивные спойлеры. Далее приступим к нестандартному главному слайдеру, где применим все свои знания flex и grid верстки, а также динамический адаптив. Ниже нас ждет блок с товарами. Помимо интересных решений построение grid-сетки мы научимся добавлять товары в корзину, а также подгружать больше товаров из JSON файла! Заключающим блоком будет очень интересная галерея картинок, где будут реализованы flex и grid сетки, открытие картинки в попапе, а также плавное движение галереи при движении курсора мыши.
😱По промокоду YT_FREELANCER вы получите скидку 50% при заказе виртуального хостинга на месяц, квартал или полгода - r.hostiq.ua/itf-hosting
Материалы урока:
👉Макет, картинки, иконки, JS-код для шаблона товара и JSON файл с товарами (открытый доступ): / maket-dlia-figma-52447608
👉Стартовый шаблон "Чертоги фрилансера": / chertogi-v2-0-js-41164505
👉Результат верстки: / 52518912
Полезные ссылки:
💪 Набор на курс по верстке: edu.fls.guru
👉Бесплатный курс по верстке: • БЕСПЛАТНЫЙ курс по вер...
👉Иконочный шрифт: • Иконочный шрифт. Подкл...
👉Интересные спойлеры: • Спойлер и аккордеон на...
👉Меню-бургер: • Меню бургер на чистом ...
👉Слайдер Swiper: • Слайдер SWIPER. Подроб...
👉Gulp: • Gulp настройка установ...
👉Динамический адаптив: • Динамический адаптив /...
👉Адаптивное свойство: • Адаптивное (отзывчивое...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00:00 - В видео
00:00:50 - РЕКЛАМА
00:02:16 - Подготовка к работе
00:04:02 - Подготовка к работе: Подключение шрифтов
00:12:32 - Подготовка к работе: Цвета
00:13:28 - Подготовка к работе: Размеры
00:16:06 - Верстка хедера сайта
01:19:36 - Верстка футера сайта
01:49:18 - Верстка главного слайдера
02:48:35 - Изменение хедера при скролле
02:53:29 - Верстка блока с преимуществами
02:59:43 - Верстка блока с товарами
04:02:17 - Верстка слайдера Rooms
04:26:12 - Верстка слайдера Tips & Tricks
04:36:17 - Верстка галереи Furniture
04:52:51 - Заключение
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟 Я вам 5 часов годноты, вы мне ЛАЙК ПОДПИСКА КОММЕНТАРИЙ!
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Спасибо
Огромное спасибо, Жека!!!🔥🔝
Спасибо за труд!!!
@@vitaliyspilok9222 пожалуйста!
@@user-xo4cz5nk7r пожалуйста!
Женю, як же ти мене витягуєш із мороку тотальної безнадії. Працюю з цим тренувальним проектом на базі третьої версії стартового шаблону, зіткнувся з чимось незрозумілим - іконічний шрифт, перейшов на канал, подививсь з чим його їдять, далі подививсь ролік про збірку gulp, повернувся до цього роліку і так далі. Просто не уявляю де ще я б так швидко і з таким задоволенням набрав би такого об'єму практичної інформації. Низький земний уклін за все, що ти робиш!
Радий що корисно
AJAX подгрузка из JSON - офигенно!!! И корзиночка!)))) 5 часов удовольствия!! Это стоило ожидания! Спасибо, Жека! Важнейшая тема)
Пожалуйста!
то чего я хотел сказать)))
Досмотрел до конца. Женя, можешь опять в отпуск отправляться, минимум недельки на две, пока мы 10 раз пересматриваем, всё изучаем))))
ОООООчень много годноты, капец)
Супер, я рад!
Вау! Женя, ты нереально крут! Это самая интересная верстка на всем ютубе, да еще и с самыми лучшими объяснениями от тебя! Спасибище тебе огромное! Как же я тебя обожаю)))
Рад что нравится!
Делай 10 интеграций в видео!!! Это того стоит, и мы с удовольствием посмотрим. Ты старался, и должен заработать!!!
Ваши видео люблю больше всего😍
Всё простыми словами и без воды🙌🏻
Огромное Вам спасибо 🙏🏻
Пожалуйста!
5 часов контента в готовом виде это очень много сил и труда ,спасибо Женя!
Пожалуйста!
Смотрю канал уже больше года, ты сильно прокачал свой уровень вёрстки и соответственно уровень вёрстки своих зрителей.
Но хотел бы отметить именно то, что сам автор прокачивается благодаря постоянной практике , поиску решений , лайфхаков , ведь что бы объяснить другому ты должен сам очень хорошо разобраться в теме.
100%
вауу, вот это я понимаю мастер-класс, непростой макет с кучей нестандартных фишек)
спасибо, Жека)
Пожалуйста!
Я хоть и не давно начал учить верстку! Для меня этот макет безумно тяжёлый, но как ты объясняешь, сразу становиться все понятно! Спасибо большое за такие видео!
Пожалуйста!
ЕвГений! Это просто ШИКАРНО! БЛАГОДАРЮ за Ваш труд - все Ваши уроки всегда помогают в практике, только после Вашего курса по верстке все в голове разложилось по полочкам и я начала нормально верстать) Вы учитель на 1'000'000$
Спасибо большое!
5 часов!!! у меня аж челюсть отпала:))) спасибо огромное, Женя! твои видео бесценные!
Просто невероятный урок! Даже слов не хватает, чтобы вас отблагодарить! Наконец-то очень хорошо разобралась, как работать с нестандартными слайдерами и корзиной. Спасибо вам!
Пожалуйста! Рад что полезно!
Божественно. Ты показываешь как круто и быстро можно работать. Большое спасибо за интересную вёрстку и кучу плюшек)
Пожалуйста!
Очень крутое решение. Многие на канале уже не новички, а имеют более, менее норм опыт, а макет как раз таки хороший для опыта, спасибо!
Пожалуйста!
Спасибо за такие мастер-классы и отдельно за подачу материала.Особенно за фразу "не переключайтесь")
Держи комментарии, Мен! Лучший канал по этой теме)! Успехов во всём!!!
Женя, це бомба!!! Всі справи відкладаю і дивлюсь до кінця 🤗
Супер!
Жека, це улееееет)
кайф у чистому вигляді!)
дякую, тобі безмежно за твою роботу!
Человечищеее, спасибо огромное за ваш труд!
Очень круто, Женя! Не перестаешь удивлять! Спасибо! ❤️👍
Еще часа не просмотрел, но вот такие у меня чувства:
Ребята, это не просто годнота, это концетрат годноты! :-)))) Это выше всяких похвал, моя благодарность зашкаливает! Этот наставник достоин, чтобы подписаться на его патрион даже без всяких плюшек, находящихся там! Говорит быстро, четко, все только лишь по делу. Вообще нет ничего лишнего. Ни мычания, ни причмокивания, ни ошибок, ни тягостных раздумываний... Все это осталось за кадром. К учащимся поступает лишь сплошная питательная информация! Браво!
Только интересно, сколько времени требуется, чтобы снять такой вот по продолжительности ролик? От подбора материала и подготовки до заливки на ютуб? И сколько при этом персонала участвует? Хочется оценить твои трудозатраты
Це найкраще, що я бачила в Ютуб! Женя ти супер! Як все чітко, без лишньої води, а виконання вище всяких похвал!
Наконец досмотрела-доработала всю верстку (до болезни 3,5 часа и после болезни все заново и с не меньшим удовольствием). Огромное спасибо за выбор такого нестандартного макета! Фантастика в принятии решений!
Спасибо за классный контент! Автор один из немногих, кто интересно и понятно рассказывает.
Я рад!
С тобой не возможно не радоваться жизни) Спасибо огромное за твой труд!
Пожалуйста!
Обалдеть, пересматриваю уже во второй раз, Женя это одни из лучших фишек за последние время, которые я когда-либо видел, спасибо тебе огромное)))
Пожалуйста!
Я восхищаюсь вашей работой, у меня нет слов, очень здорово!!!!!!!!!!
Рад что полезно!
Груда не то слово. Я благодаря этому мастер-классу вырос вдвое как Front-end разработчик, огромное спасибо!)
ААА! Я над этим тренировочным проектом вторую неделю зависла, думала уже плюнуть и взять пока что-то полегче. И тут как манна небесная! Спасибо огромное за видео, просто в точку!
Пожалуйста!
Женя !!! Вам огромное спасибо! Ваши уроки просто супер!!!
Пожалуйста!
Еще не смотрел видео, но в начале попросили поставить лайк вот я и поставил. Ну а за такой видос не жалко и сказать что автор молодец.
Как всегда нет слов на похвалы, уровень обучающихся материалы просто фантастического класса,
Я рад!
Просто огромное спасибо за всё, что ты делаешь. Добра твоему дому !
то что сейчас нужно! я этого и хотела) спасибо! это нереальный труд!
Пожалуйста!
Большое спасибо за труд! Жду новые видосы, как выход новых серий сериала
Пожалуйста!
Евгений, считаю на сегодняшний день твой канал лучший, по качеству контента который ты делаешь. Являюсь твоим патроном уже около года, очень рад что мой маленький вклад помогает развиваться твоему каналу и делать такой контент как это видео. Хочу отдельно отметить твой курс по JS, и обратить внимание на то, что именно твоя подача материала мне зашла. Всем, кто хоть мало-мальски интересуется версткой, я рекомендую твой канал. Так держать, спасибо!
Я рад! Развиваюсь вместе с вами! Спасибо за поддержку!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Спасибо большое. Вас очень приятно слушать и смотреть. И самое главное это что вы делитесь с нами такой полезной информацией.
Я рад! Пожалуйста!
Супер! Куча материала для изучения! 👍🏻 И я не понимаю, как можно дизлайк поставить за такой контент
Рад что полезно!
круто! благодаря вашим урокам выучила за месяц html/css, успехов и процветания каналу!
Рад что полезно!
Крутяк-наикрутейший!!!! Жека, спасибо тебе огромное!!!! Материал, который ты нам даришь становится всё лучше и лучше!!! Очень заметно, что ты "не стоишь на месте", развиваешь канал даже в "мелочах", всё это заинтересовывает, мотивирует и делает обучение нереально продуктивным!!!! Респект тебе и уважуха!!!!😁 P.S. Также ждём выпуска по событиям в JS)))))
Спасибо! Урок в работе!
@@FreelancerLifeStyle Ещё раз СПАСИБО!!!!!
Я люблю тебя Жека!
Столько труда и времени в это вложено!
Это да..
Огромное спасибо за вашу работу! Очень помогает в развитии. Желаю счастья, удачи и всего доброго.
Пожалуйста!
Отлично, сижу разбираюсь в твое стартере и тут годный видос подъехал!
Я рад)
За первые 12 минут видео получил кучу новой инфы и пошёл лопатить свой галпфайл. А впереди ещё 4 часа 😂
Спасибо Женек за твой труд от души 👍
Пожалуйста!
Прекрасное видео. Думаю что это лучшая верстка которую я видел на youtube. Узнал очень много нового и полезного. Сборка просто огонь. Еще разбираться и разбираться. Большое спасибо автору за такой полезнейший контент.
Мастер спасибо тебе!!!!! Я стал спать по 5 часов в сутки , мне 30 и мне пофиг на возраст. Наконец-то я понял чем хочу заниматься!! Я уже верстаю около 3 х месяцев и при виде прогресса мотивация зашкаливает. Сейчас как заверстаем вместе с мастером и будет новый скил!!!!!!!!
Нк вот прошел месяц и как оно сейчас! Работу нашел?
@@richarddaniel7088 я к первой работе что бы стать с# разработчиком учился 4 года.
Спасибо Женя, это лучшие уроки на UA-cam по вёрстке. Скоро хочу оформить подписку, как закончу вёрстку хотя бы 2-3 макетов!!!
Евгений! Не перестаёте удивлять качеством и масштабом полезного материала в своих видео. Огромное спасибо и пальчик вверх! :)
это симфония!! Женя, ты мой учитель и мотиватор!)
Я рад!
Почти досмотрел, просто 🔥 верстка, много чего полезного рассказал, спасибо большое!
Огромное спасибо за полезную и ценную информацию ! Отдельная благодарность за прекрасную подачу !
Пожалуйста!
То состояние, когда ты не посмотрел видео, но знаешь что оно будет крутым и сразу лайк
недавно закончил твой бесплатный курс а это верстка была очень крутой практикой для меня спасибо большое!!)
Дай Бог тебе счастья и удачи - за твой труд на благо людей!
Все самые актуальные и полезные фишки у тебя.СУПЕР.
К сожалению для создателей контента, я редко пишу комментарии, но этот ролик безусловно заслуживает гораздо больше пары строчек текста! Тысяча благодарностей автору!
Информации о сфере IT - в особенности о вэбе - очень много в сети, и ее количество продолжает расти. Обучение становится все доступнее и проще благодаря таким ресурсам, как этот канал, создателю которого я мысленно не раз пожимал руку; в наш век каждый при желании может обучиться достойной профессии. Например, для такого пятнадцатилетнего подростка, как я, обучение даётся просто ввиду юного возраста и отсутствия занятости, и я безмерно благодарен возможности поглощать полезную информацию из открытых источников.
Я рад что полезно!
Сразу захожу и ставлю лайк за такую огромную проделанную работу!
Спасибо!
@@FreelancerLifeStyle Идея вам для следующего ролика: я сейчас верстаю интернет магазин и заметил, что на ютубе практически нет уроков, как написать на чистом js фильтрацию карточек, если фильтры в виде , , ... В основном видео на vue, react...
Я писал ранее коментарий, но блин спасибо еще раз, это наверное самый ценный интесив на ютубе по верстке
Благодаря твоим урокам стал фрилансером и начал зарабатывать! Респект!
Не пройшло і три тижні, як я все зробила. Женя, дякую тобі! Це відео - просто клондайк!
Будь ласка!
Крутяк ! Спасибо огромное. Осталось самому только node mailer в node js добавить и заказы принимать))
Жека, респект!
Подписался, чтобы всем рекомендовать. (да и сам посматривать буду)) Качественный контент. Сверх качественный.
Спасибо огромное. Очень круто. Сейчас изучаю бэкенд на php, уже делал функционал добавление и удаления товара через базу данных mysql, мне кажется там как то попроще с добавление и удалением товара, но тут показано с очень крутым эффектом таким, очень круто. Представляю, сколько ты сил вложил в эту работу. Эффект с щелчком пальцев, просто бомбический :)
Я рад!
Вот так подарок :). Спасибо. Только сейчас дошли руки посмотреть, но это того стоит. Собственно лайк как всегла
спасибо за то, что объясняете все детали
Любой новичок сразу все поймет и скачае т
Спасибо, хороший материал. Евгений, как всегда , дает только полезные полезности )))
Спасибо! Рад что полезно!
Вот просто лайк, просто лайк, днями ищу эту инфу про ajax и вот оно ! Спасибо фрилансер, не раз спал в трудные ситуации !
Спасибо! Побольше бы вот таких сложненьких сайтиков поверстать))
Чем больше смотрю уроки, тем больше они мне нравятся!
Жека как всегда, нереально круто!!!!!!!!!! Вы большая умничка!! Твое видео смотрю с большим удовольствием!!!!!
Рад что нравится!
Огромное спасибо Женя! Очень интересно! Вдохновляет! Круто =)
Спасибо , Жека, никто не делает такого крутого контента по веб-разработке как ты !!!!!!!!!!
це просто неймовірний майстерклас особливо з галереєю я ніяк не міг продумати структуру галереї як би я верстав її а тут все так просто, дякую за цей майстер клас дуже корисний
Огромнейшее спасибо! Стоооолько лайфхаков!!!
Пожалуйста!
Спасибо большое за такую огромную работу! 🔥
Супер круто. Куча полезностей, благодарю!
Пожалуйста!
Спасибо большое за такой качественный контент!
Пожалуйста!
Как же это круто, Женя!
Рад!
Жека, спасибо большое. То что ты делаешь - круто!
Пожалуйста!
Женя, спасибо. Видео просто бесподобные.
Пожалуйста!
Ого, это прям 💣
Спасибо за видео!)
Бомба. Тоже делал этот сайт ранее для практики и мне очень повезло что Жека выбрал именно его для мастер-класса ☺️... Спасибо 🤗
Сразу нашел у себя кучу ошибок в адаптиве и в структуре сайта в принципе... Очень благодарен за такой контент!👍
Несколько дней изучал этот видос🙏 А от JS наворотов голова идёт кругом...😅👍
Рад что полезно!
Ого!!!!! Огромное вам спасибо! Пошла смотреть!!!!!
Пожалуйста!
это супер!!! спасибо! как всегда Вы лучший))
Это просто супер!!!! Ждем ещё!!! Спасибо!
Пожалуйста!
Большое человеческое тебе спасибо за твой труд!
Пожалуйста!
А что тут коментить? Жена, завтрак подождёт - тут Жека вкуснятины на день подогнал)
Приятного!
Жека спасибо, что обясняешь всё по ходу урока
Спасибо за труды))) однозначно лайк (подписался давно)). Будет чем вечерком (скорее всего и не одним) заняться.
Я рад!
Спасибо, Жека! БЛАГОДАРЮ за ТВОЙ труд!!!😊
Жека, привет, очень люблю твой канал, спасибо за все, что ты делаешь. Я пока только на начале верстальского пути)) Учу адаптив по твоим видео. Сними, пожалуйста, видео про косой фон, а то в разных макетах часто вижу, а как делать-не знаю
Не зря я на патріот писав Бог Версти! Жека ти крутяк, мені допомагаєш розвивати хобі до великих маштабів Дякую!!!
Жалко, что нельзя ставить лайк бесконечно
Но можно сделать репост! :)
Спасибо за видео, все очень круто! В адаптивном свойстве, к миксину можно прикрутить дополнительный параметр принимающий тип единиц измерения (px, rem, %), на мой взгляд это полезное улучшение в некоторых случаях.
Лучший контент по вёрстке❤
Спасибо за ролик! Всё супер, удачи тебе
Спасибо большое - отличное видео! От себя добавил бы в корзину еще кнопку "Оформить заказ")