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

Рет қаралды 9,449

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
🤟 Живи, а працюй у вільний час! ©

Пікірлер: 21

@gyurchenko77 8 ай бұрын

Дякую за матеріал українською.

@zinarazinkova6648 7 ай бұрын

Женя, дякую за крутезний майстер-клас. Я дуже багато чому навчилась, завдяки вашим відео з прикладами верстки.

@UdavBlog 8 ай бұрын

Дякую за навчальний контент!

@const6185 7 ай бұрын

Спасибо!

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

Wonderful!!!

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

я встроил в шаблон gsap, barba js, locomotive scroll, кому нужно пишите отправлю за спасибо) whoisleshalight) Героям слава! Жека знову ДЯКУЮ!

@BRILLIANTIC1 7 ай бұрын

Дякую! Все вийшло. Зробили великий обсяг роботи. Єдиний момент, при завантажені на GitHub картинка з блоку talk типово знаходиться зліва, під текстовим блоком...)

@sergmalin210 8 ай бұрын

Євген чоловік. Чудово робить свою роботу.

@SuperRAilya 8 ай бұрын

talk: 38:28 1:09:33 (комментарий для себя)

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

Мобильная верстка немного отличается от макета. Заказчику объяснить, что так удобнее для пользования? Я возможно прослушал этот момент. А так спасибо за работу, наконец-то можно поверстать этот сайт самостоятельно

@harpeter9752 7 ай бұрын

Якщо говорити про навчання практичної верстки - корисний матеріал. Зараз вже є Galaxy Fold з шириною екрану 280px. Хочеться бачити адаптив з врахуванням такого пристрою. Хай Бог тебе благослоить, збереже і дасть тобі мир

@33mika777 8 ай бұрын

Привіт! На 52:46 для кониейнера та блоку з картинкою потрібно grid-area: 1 / 1 і питання вирішено :) для контенту потім z-index задати, щоб кнопки клікались. До кінця не переглянула ще. Можливо ви і використали це рішення.

@33mika777 8 ай бұрын

Це замість transform translate чи position absolute. Grid - це магія. Батьківському display: grid Двом внутрішнім grid-area: 1 / 1

@33mika777 8 ай бұрын

І воно 'триматиме' висоту. Не буде тієї проблеми, як з абсолютним позиціюнюванням.

@33mika777 8 ай бұрын

Я знаю 3 способи вирішити цю задачку - винесення зображення за обмежуючий контейнер. Два на flex (один із вашого каналу) і один на grid. Grid оптимальніше - менше стилів.

@SuperRAilya 8 ай бұрын

так не понятно. пожалуйста снимите видео. или скиньте ссылку где увидели этот способ. у меня не получилось так как вы описали

@marikowka 7 ай бұрын

Доброго дня, шукаю ментора по верстці, можу виконувати якісь рутинні завдання, хочу вчитися і розвиватись

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

1:10 убрать block__container задать block__grid_2row_2coloumn auto auto / 1fr 1fr выравнивание justify-items end прижимаем содержимое в право в 1 колонке 1 ячейке max-wid block__container/2 кладем декор в 1 колонке 2 ячейке max-wid block__container/2 кладем контент в 2 колонку grid-row span 2 кладем картинку стилизуем

@RomanPrykhodko-cx1rt 2 ай бұрын

Женя, ніде не знайшов інформації як зібрати проект на продакшн, тобто готові файли без сміття

@FreelancerLifeStyle 2 ай бұрын

Для цього потрібні збірки gulp webpack або готові стартові шаблони як мій template.fls.guru/template-docs/dlya-chego-nuzhny-chertogi-frilansera-v3-prezentaciya-shablona-i-ego-vozmozhnostej.html