Адаптивна верстка цікавого сайту. Пояснення дій. HTML CSS JS FIGMA. Частина №1

Рет қаралды 30,746

8 ай бұрын

Адаптивна верстка сайту на базі шаблону Чертоги Фрілансера 3. Пояснення дій. HTML CSS JS FIGMA. Слайдери, спойлери, меню бургер, анімації при скролі, підвантаження з JSON та інше!
👉 Усі частини майстер-класу: • Адаптивна верстка ціка...
👉 Що такє стартовий шаблон "Чертоги Фрілансера": template.fls.guru/template-do...
👉 Посилання на стартовий шаблон з напрацюваннями "Чертоги Фрілансера" 3 (патреон): / startovyi-v3-59380989
👉 Макет (відкритий доступ): / 88064356
👉 Результат верстки (Patreon - Junior): / rezultat-verstki-89199655
👉 Інші безкоштовні майстер-класи з верстки сайтів: • Адаптивная вёрстка лен...
🔴Канал з практикою без слів Code Only - / @codeonly
Курси:
🟢 Курс по верстці: edu.fls.guru/
🟢 Платні майстер-класи: master.fls.guru/
💪 ГетьТривогаЧелендж: t.me/freelancer_lifestyle/496
❤️ Отримати доступ к екстра-контенту + підтримати канал: / freelancerlifestyle
❤️ Спонсорувати канал: / @freelancerlifestyle
Корисні посилання:
👉 Безкоштовний курс по верстці: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно навчатись: • Как правильно учиться ...
👉 План розвитку фронтенд розробника (+МАПА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Мапа каналу: miro.com/app/board/o9J_lZB3YKI=/
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
👋 Мене звати Женя Андріканич, я IT - спеціалист, займаюсь розробкою сайтів.
Посилання на канал: / freelancerlifestyle
🤟 Живи, а працюй у вільний час! ©

Пікірлер: 38

@pan-verstak 8 ай бұрын

велике дякую

@victoriaromanchik1322 7 ай бұрын

«Все, все це робиться для того, щоб ви могли заробляти» - 🥲😊☺️😌😌

@user-kq5ow1zv3m 8 ай бұрын

Спасибо за как всегда интересное аидео.Очень круто!Жду следующее😊

@user-xx2tc9lc8k 6 ай бұрын

Дуже дякую за вашу працю!!Завжди з великим бажанням дивлюся ваші відео!Ви майстер своєї справи,прямо мій кумир вже))як супермен,тільки краще😁

@FreelancerLifeStyle 6 ай бұрын

☺️☺️☺️

@nataliiahomon4970 7 ай бұрын

Дуже дякую за контент

@BRILLIANTIC1 7 ай бұрын

Білі куски внизу блоку можна задати таким чином (але буде гострий кут зрізу) &::before, &::after { content: ""; @include adaptiveValue("width", 470, 260, 0, $containerWidth, 991.98); position: absolute; bottom: 0; height: toRem(50); background-color: $bgColorWhite; } &::before { left: 0; clip-path: polygon(0% 0, calc(100% - 50px) 0, 100% 100%, 0% 100%); /* Визначення форми обрізання зліва*/ } &::after { content: ""; right: 0; clip-path: polygon(50px 0, 100% 0, 100% 100%, 0% 100%); /* Визначення форми обрізання справа*/ } Або додати через background-image (Не забудьте змінити на свої назви файлів) &::before, &::after { @include adaptiveValue( "width", 470, 260, 0, $containerWidth, 991.98 ); position: absolute; bottom: 0; height: toRem(45); background-repeat: no-repeat; } &::before{ content: ""; left: 0; background-image: url(../img/hero/Decoration-left.svg); background-position: right; } &::after { content: ""; right: 0; background-image: url(../img/hero/Decoration-right.svg); } Лайк, якщо корисно.

@user-qv3ws8os4c 7 ай бұрын

Евген, крутой стрим, обязательно посмотрю все части. Один момент хочу подсказать. Когда копируешь пункты меню в шапке например, можно выделить весь блок, нажать ctrl + c и тогда весь текст оттуда скопируется, так легче его в код перенести

@user-mw9sr4yd2q 7 ай бұрын

великий, жирний лайкосік 👍 дуже дякую!

@user-wp2js4pr6i 7 ай бұрын

цікаво було диитися дякую за контент

@escobar929 4 күн бұрын

мужик- ти кращій!!!!!!!!!

@user-bf6cp8ju1i 7 ай бұрын

Very good!!!

@YevheniiParkhomenko 8 ай бұрын

не легкий макет - дякую! і продовжуй)

@Dumzday777 8 ай бұрын

Дякую за цікаве відео, скажи, будь ласка, як ти виконуєш це дивне мульти-копіювання на 58:53?

@dmytro_bhn 8 ай бұрын

Женя, як завжди респект і подяка за туторіал. Можеш зробити окремий відос по ''Чуйній властовості'' . Думаю буде корисно для тих у кого немає підписки.

@FreelancerLifeStyle 8 ай бұрын

Відео по першій версії є на каналі

@const6185 8 ай бұрын

Расскажи главный секрет- как ты время расширяешь??! Дякую за величезну працю!

@whoami2217 8 ай бұрын

Привіт, щире дякую за твої стріми, це дуже корисно. Можно питання щодо курсу, якщо я його куплю та пройду, чи зможу я, після завершення курсу, працювати наприклад на фрілансі або в компанії якійсь? Дуже буду вдячний за відповідь

@FreelancerLifeStyle 8 ай бұрын

Бувають студенти що починають ще під час курсу) Але я наполегливо раджу після курсу працювати над власним портфоліо, і вже потім виходити на ринок

@scarboro3689 7 ай бұрын

A що змінилося в scss mixin? Раніше було rem(), а тепер toRem()? Є між ними різниця? Чи просто назву змінив?

@user-es4iy2gp4l 7 ай бұрын

Підскажіть будь ласка яким чином можна копіювати відразу класи з html в scss з вкладеністю. Знайшов плагін котрий просто копіює класи але без вкладеності.