Адаптивна верстка цікавого сайту. Пояснення дій. HTML CSS JS FIGMA. Частина №1
Вставка
- Опубліковано 26 сер 2023
- Адаптивна верстка сайту на базі шаблону Чертоги Фрілансера 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
🤟 Живи, а працюй у вільний час! ©
велике дякую
«Все, все це робиться для того, щоб ви могли заробляти» - 🥲😊☺️😌😌
Спасибо за как всегда интересное аидео.Очень круто!Жду следующее😊
мужик- ти кращій!!!!!!!!!
Дуже дякую за контент
Евген, крутой стрим, обязательно посмотрю все части. Один момент хочу подсказать. Когда копируешь пункты меню в шапке например, можно выделить весь блок, нажать ctrl + c и тогда весь текст оттуда скопируется, так легче его в код перенести
великий, жирний лайкосік 👍 дуже дякую!
цікаво було диитися дякую за контент
Very good!!!
не легкий макет - дякую! і продовжуй)
Дякую за цікаве відео, скажи, будь ласка, як ти виконуєш це дивне мульти-копіювання на 58:53?
Дуже дякую за вашу працю!!Завжди з великим бажанням дивлюся ваші відео!Ви майстер своєї справи,прямо мій кумир вже))як супермен,тільки краще😁
☺️☺️☺️
Расскажи главный секрет- как ты время расширяешь??! Дякую за величезну працю!
A що змінилося в scss mixin? Раніше було rem(), а тепер toRem()? Є між ними різниця? Чи просто назву змінив?
Привіт, щире дякую за твої стріми, це дуже корисно. Можно питання щодо курсу, якщо я його куплю та пройду, чи зможу я, після завершення курсу, працювати наприклад на фрілансі або в компанії якійсь? Дуже буду вдячний за відповідь
Бувають студенти що починають ще під час курсу)
Але я наполегливо раджу після курсу працювати над власним портфоліо, і вже потім виходити на ринок
Женя, як завжди респект і подяка за туторіал. Можеш зробити окремий відос по ''Чуйній властовості'' . Думаю буде корисно для тих у кого немає підписки.
Відео по першій версії є на каналі
Підскажіть будь ласка яким чином можна копіювати відразу класи з html в scss з вкладеністю. Знайшов плагін котрий просто копіює класи але без вкладеності.
Вітаю. Вивчай хоткеї у Фіґмі. shift-D перемикання у dev-mode, і треба починати юзати розширення VS Code for Figma
Та зручно коли макет на окремому моніку, хоча тре глянути плагін, дякс,
Цікаво, треба спробувати
У майбутньому плануються макети складного рівня?
Так, як буде цікавий макет зроблю
Коли друга частина?)
наступний рівень верстки, моя повага
Білі куски внизу блоку можна задати таким чином (але буде гострий кут зрізу)
&::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);
}
Лайк, якщо корисно.
Жека как всегда крут! Почти выучил Украинский! Спасибо тебе за субтитры! Слава Украине, Героям слава!
дякую за контент українською!
где скачать файл помогите кто может
щоб скачати чертоги треба платна підписка???
Чертоги це моя вдячність тим хто підтримує канал на патреоні.
Погана якість відео. А який плагін показує шрифти? Підкажіть хто знає
Font Fascia
@@Artem_Lira дякую
как же печально, что украинский не знаю! будут стримы на русском?
російської мови на цьому каналі можете не чекати.