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

2023 ж. 26 Там.

31 182 Рет қаралды

Адаптивна верстка сайту на базі шаблону Чертоги Фрілансера 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
🤟 Живи, а працюй у вільний час! ©

Пікірлер

велике дякую
@pan-verstak8 ай бұрын
Дуже дякую за контент
@nataliiahomon49707 ай бұрын
Спасибо за как всегда интересное аидео.Очень круто!Жду следующее😊
@user-kq5ow1zv3m8 ай бұрын
«Все, все це робиться для того, щоб ви могли заробляти» - 🥲😊☺️😌😌
@victoriaromanchik13227 ай бұрын
мужик- ти кращій!!!!!!!!!
@escobar9298 күн бұрын
цікаво було диитися дякую за контент
@user-wp2js4pr6i7 ай бұрын
великий, жирний лайкосік 👍 дуже дякую!
@user-mw9sr4yd2q7 ай бұрын
не легкий макет - дякую! і продовжуй)
@YevheniiParkhomenko8 ай бұрын
Very good!!!
@user-bf6cp8ju1i8 ай бұрын
Білі куски внизу блоку можна задати таким чином (але буде гострий кут зрізу) &::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); } Лайк, якщо корисно.
@BRILLIANTIC17 ай бұрын
Дуже дякую за вашу працю!!Завжди з великим бажанням дивлюся ваші відео!Ви майстер своєї справи,прямо мій кумир вже))як супермен,тільки краще😁
@user-xx2tc9lc8k6 ай бұрын
- ☺️☺️☺️
  @FreelancerLifeStyle6 ай бұрын
Евген, крутой стрим, обязательно посмотрю все части. Один момент хочу подсказать. Когда копируешь пункты меню в шапке например, можно выделить весь блок, нажать ctrl + c и тогда весь текст оттуда скопируется, так легче его в код перенести
@user-qv3ws8os4c7 ай бұрын
Женя, як завжди респект і подяка за туторіал. Можеш зробити окремий відос по ''Чуйній властовості'' . Думаю буде корисно для тих у кого немає підписки.
@dmytro_bhn8 ай бұрын
- Відео по першій версії є на каналі
  @FreelancerLifeStyle8 ай бұрын
Дякую за цікаве відео, скажи, будь ласка, як ти виконуєш це дивне мульти-копіювання на 58:53?
@Dumzday7778 ай бұрын
Расскажи главный секрет- как ты время расширяешь??! Дякую за величезну працю!
@const61858 ай бұрын
Привіт, щире дякую за твої стріми, це дуже корисно. Можно питання щодо курсу, якщо я його куплю та пройду, чи зможу я, після завершення курсу, працювати наприклад на фрілансі або в компанії якійсь? Дуже буду вдячний за відповідь
@whoami22178 ай бұрын
- Бувають студенти що починають ще під час курсу) Але я наполегливо раджу після курсу працювати над власним портфоліо, і вже потім виходити на ринок
  @FreelancerLifeStyle8 ай бұрын
Вітаю. Вивчай хоткеї у Фіґмі. shift-D перемикання у dev-mode, і треба починати юзати розширення VS Code for Figma
@MrSstar123458 ай бұрын
- Та зручно коли макет на окремому моніку, хоча тре глянути плагін, дякс,
  @FreelancerLifeStyle8 ай бұрын
- Цікаво, треба спробувати
  @maximka22468 ай бұрын
У майбутньому плануються макети складного рівня?
@1-2168 ай бұрын
- Так, як буде цікавий макет зроблю
  @FreelancerLifeStyle8 ай бұрын
наступний рівень верстки, моя повага
@KukharyshynOleh8 ай бұрын
Коли друга частина?)
@deviant66468 ай бұрын
A що змінилося в scss mixin? Раніше було rem(), а тепер toRem()? Є між ними різниця? Чи просто назву змінив?
@scarboro36897 ай бұрын
Підскажіть будь ласка яким чином можна копіювати відразу класи з html в scss з вкладеністю. Знайшов плагін котрий просто копіює класи але без вкладеності.
@user-es4iy2gp4l7 ай бұрын
Жека как всегда крут! Почти выучил Украинский! Спасибо тебе за субтитры! Слава Украине, Героям слава!
@user-gx5eq1jp6h8 ай бұрын
дякую за контент українською!
@user-cu6kf2hv4g7 ай бұрын
где скачать файл помогите кто может
@olenavucinec27606 ай бұрын
Погана якість відео. А який плагін показує шрифти? Підкажіть хто знає
@user-ei2hv2sf3p8 ай бұрын
- Font Fascia
  @Artem_Lira8 ай бұрын
- @@Artem_Lira дякую
  @user-ei2hv2sf3p8 ай бұрын
щоб скачати чертоги треба платна підписка???
@user-gy5uf6en3q5 ай бұрын
- Чертоги це моя вдячність тим хто підтримує канал на патреоні.
  @FreelancerLifeStyle5 ай бұрын
как же печально, что украинский не знаю! будут стримы на русском?
@elaaframess8 ай бұрын
- російської мови на цьому каналі можете не чекати.
  @user-qd6hu2tr3u8 ай бұрын