Адаптивна верстка цікавого сайту. Пояснення дій. HTML CSS JS FIGMA. Частина №4
Вставка
- Опубліковано 11 вер 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
🤟 Живи, а працюй у вільний час! ©
Дякую за матеріал українською.
Женя, дякую за крутезний майстер-клас. Я дуже багато чому навчилась, завдяки вашим відео з прикладами верстки.
Дякую за навчальний контент!
я встроил в шаблон gsap, barba js, locomotive scroll, кому нужно пишите отправлю за спасибо) whoisleshalight) Героям слава! Жека знову ДЯКУЮ!
Wonderful!!!
Спасибо!
Євген чоловік. Чудово робить свою роботу.
Якщо говорити про навчання практичної верстки - корисний матеріал. Зараз вже є Galaxy Fold з шириною екрану 280px. Хочеться бачити адаптив з врахуванням такого пристрою. Хай Бог тебе благослоить, збереже і дасть тобі мир
Дякую! Все вийшло. Зробили великий обсяг роботи.
Єдиний момент, при завантажені на GitHub картинка з блоку talk типово знаходиться зліва, під текстовим блоком...)
Привіт! На 52:46 для кониейнера та блоку з картинкою потрібно grid-area: 1 / 1 і питання вирішено :) для контенту потім z-index задати, щоб кнопки клікались.
До кінця не переглянула ще. Можливо ви і використали це рішення.
Це замість transform translate чи position absolute.
Grid - це магія.
Батьківському display: grid
Двом внутрішнім grid-area: 1 / 1
І воно 'триматиме' висоту. Не буде тієї проблеми, як з абсолютним позиціюнюванням.
Я знаю 3 способи вирішити цю задачку - винесення зображення за обмежуючий контейнер. Два на flex (один із вашого каналу) і один на grid.
Grid оптимальніше - менше стилів.
так не понятно. пожалуйста снимите видео. или скиньте ссылку где увидели этот способ. у меня не получилось так как вы описали
Мобильная верстка немного отличается от макета. Заказчику объяснить, что так удобнее для пользования? Я возможно прослушал этот момент. А так спасибо за работу, наконец-то можно поверстать этот сайт самостоятельно
Женя, ніде не знайшов інформації як зібрати проект на продакшн, тобто готові файли без сміття
Для цього потрібні збірки gulp webpack або готові стартові шаблони як мій template.fls.guru/template-docs/dlya-chego-nuzhny-chertogi-frilansera-v3-prezentaciya-shablona-i-ego-vozmozhnostej.html
Доброго дня, шукаю ментора по верстці, можу виконувати якісь рутинні завдання, хочу вчитися і розвиватись
talk:
38:28
1:09:33
(комментарий для себя)
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 кладем картинку
стилизуем
Привііііт