Варианты создания первого экрана сайта, как сделать 1й экран правильно, на webflow. Урок №5

[@sandramonterocervantes7099]

какой Вы прекраный учитель! Обьяснения чёткие, логические, вобще без воды, как 99% туто-циган на Ютубе.

[@freelance-pro]

Спасибо 😊 очень приятно, рад что вам понравилось)))))

[@Artem-er6ol]

Дмитрий, огромное спасибо за очень подробный разбор. Как говорится респект и уважуха )) А всем ребятам хочу посоветовать, тем кто просто просматривает, повторяйте сразу все на практике и будет вам счастье ))

[@freelance-pro]

Пожалуйста 😊

[@user-rl5tj3sr9j]

Кааак приятно и интересно смотреть, спасибо за Ваши усилия и заражающий позитивный настрой 🔥

[@freelance-pro]

Пожалуйста ☺️ и мне ооооочень приятно было читать ваш комментарий

[@freelance-pro]

- Матеиалы с данного видео freelance-blog.webflow.io/course - Полезные штуки для webflow freelance-blog.com/webflow/ - Индивидуальное обучение freelance-blog.com/study/ ••••••••••••••••••••••••••••••• Таймкоды: 00:00 Начало всего... Настройки body для будущего сайта 02:15 Добавление первой секции и ее настройка 05:38 Добавляем ограничитель для контента (контейнер) 07:51 Загружаем первую картинку предварительно ее подготовив 14:46 Задаем фоновую картинку для секции и рассматриваем все варианты ее настройки 16:07 Добавляем заголовок (H1) 16:45 Подготавливаем альтернативный вариант главной картинки 20:58 Дизайним вертикальный вариант первого экрана с центрированным заголовком 30:15 Где брать информацию? 36:37 Варианты стилизации для главной картинки 49:34 Второй вариант первого экрана с текстом по левому краю 01:02:41 Третий вариант первого экрана с картинкой сверху и текстом снизу 01:09:26 Четвертый вариант с наложением контента внутрь гланого изображения 01:22:04 Пятый вариант с ассиметричным расположением картинки и текста 01:32:53 Реверс 01:37:00 Выводы

[@user-yj9sh9hw4t]

Дмитрий, спасибо большое. Всё доступно, понятно. Конечно нужно всё повторять за тобой!!! Особая благодарность за хорошее и доброе отношение к людям!!!❤

[@freelance-pro]

Пожалуйста ☺️ рад слышать

[@jevgenisuija]

Спасибо за видео, уже смотрю как сериал, до развязки с заглавной страницой так и не дошли, смотрим дальше!

[@freelance-pro]

Пожалуйста ☺️ смотрим дальше значит ))

[@Prima-Streichquartett]

Очень объемный урок, долгий 🙂но ПОЛЕЗНЫЙ!!! Круто видеть как Вы прямо как рыба в воде себя в Webflow чувствуете!!!! Спасибо за то что делитесь своими знаниями и опытом с нами! Да еще и бесплатно!!!

[@StanOwden]

Можно смотреть на скорости 1.5. Все прекрасно воспринимается.

[@user-ze6qx5sw9r]

@@StanOwden я так и делаю

[@freelance-pro]

Пожалуйста 😊

[@user-rq9vb8xc1i]

Спасибі за правду , і за те пояснення супер.

[@freelance-pro]

Будь ласка

[@katerynaklymenko4306]

спасибо Вам большое за Ваши старания🤩. возилась почти день, как вставить кнопку поверх изображения в grid, наткнулась на Ваше видео и сразу все получилось! спасибо огромное)))

[@freelance-pro]

Пожалуйста ☺️ на канале еще много полезного 😉

[@user-gb5ys9oc8t]

Лучший курс!

[@freelance-pro]

Спасибо 😊

[@CLABA_CC]

Дякую що навчаєш, я вже не можу дочекатись як дійду до повноцінного відео де робиться повний сайт. Ти вмієш зацікавити! Дякую😊

[@freelance-pro]

Будь ласка)) ну то що, пройшли данний курс? Як враження?

[@danielsgoat10]

очень крутой ролик! Наконец то все встало на свои места в голове!!!!! Смотрю дальше!!! супер! спасибо!

[@deniskazantcev]

Мне очень понравился этот урок! Благодарю, Дмитрий!

[@freelance-pro]

Пожалуйста ☺️ рад что урок понравился 😊

[@user-uj4zy3qo6l]

Очень подробное объяснение

[@freelance-pro]

Рад что вам нравится 😊

[@Sergey_878_]

Отличный урок! Всё подробно и чётко! Спасибо👍

[@freelance-pro]

Пожалуйста 😊

[@user-qt7jm6oz9u]

Дмитрий, спасибо. Все очень понятно и структурировано 👍

[@freelance-pro]

Пожалуйста 😊

[@Evebot-Georgia]

Спасибо огромное. Все очень понятно и доступно.

[@freelance-pro]

Пожалуйста ☺️

[@id7308]

Молодец! Невероятно полезный урок. Большое спасибо!

[@freelance-pro]

Пожалуйста 😊

[@miss_poli1731]

Супер курс! Супер крутая подача информации!

[@freelance-pro]

Рад стараться 😎 спасибо ☺️

[@sergeyshmelev8350]

Пофессиональная манера преподавания материала выгодно и очень качественно отличает Дмитрия среди специалистов по WebFlow!! Скурпулезный разбор материала позволяет усваивать материал планомерно и качественно . понимая всё то что хочет донести учитель ! Спасибо , Дмитрий и еще раз СПАСИБО !!

[@freelance-pro]

Пожалуйста 😊

[@fam1150]

супер супер мужик у тебя большая душа и прибор спс за такую инфу бро !

[@freelance-pro]

Пожалуйста 😊 рад слышать

[@НикитаТигров-к8и]

Благодарю, очень информативно и полезно!

[@freelance-pro]

Пожалуйста ☺️

[@Aleshatyan]

Благодарю 🙏

[@freelance-pro]

Пожалуйста ☺️

[@ELFMEDIA]

Хорошо бы все преподаватели информатики в школах так объясняли! ) Спасибо

[@freelance-pro]

Пожалуйста 😊

[@user-ju1fm5dj7x]

Благодарю! Очень крутая информация🤝🤝🤝

[@freelance-pro]

Пожалуйста! 😊

[@anddrew5841]

спасибо автору за эту подробную работу!

[@freelance-pro]

Пожалуйста ☺️ от автора

[@youoneofus]

Супер курс!

[@freelance-pro]

Спасибо ☺️

[@HansultanEdilbaiuulu]

Благодарю за полезный контент!

[@freelance-pro]

Пожалуйста 😊

[@user-wn1jm4hp5k]

Классно, спасибо за контент, за огромную работу над блогом для нас!)

[@freelance-pro]

Пожалуйста 😉 рад что нравится 😊

[@Aumrita_life]

Благодарю! Очень классный контент 👍🏻

[@freelance-pro]

Пожалуйста! 😊 рад что мой контент вам нравится

[@zorg520]

все супер, двигаюсь дальше по урокам)))

[@freelance-pro]

Это хорошо))

[@katyaberehova]

Дякую ✨

[@freelance-pro]

Будь ласка

[@user-ho5xh9cm3c]

Спасибо за курс

[@freelance-pro]

Пожалуйста 😊

[@sasha8782]

Курс супер👍 Спасибо за твоё труд

[@freelance-pro]

Пожалуйста 👍👍👍👍👍

[@vovastetsiuk9107]

Как всегда великолепно!

[@freelance-pro]

Я очень рад, что вам нравится 😊

[@MegaGlug]

Круто, а нормальная история, что здесь в примерах встречаются отступы внешние и внутренние вместе (просто в предыдущих уроках говорил про расчеты браузера) или стараться использовать конкретные отступы

[@freelance-pro]

Все зависит от ситуации

[@spiritualhealing4u]

Отличный выпуск! В конце не получилось скруглить картинку в углу )

[@freelance-pro]

Значит что-то сделали не так, скругление нужно прописать и оверфлоу хидден активировать, при этом картинка должна занимать все пространство

[@zhenikosha]

Хороший курс, только лекции слишком длинные для ytube

[@freelance-pro]

Возможно

[@mishatuschuk2776]

Хай! Зделай видео про подключение сайта к Гугл аналитики и Теги

[@freelance-pro]

Надо будет, спасибо за идею!

[@onandwon]

Класс! 👍

[@freelance-pro]

Рад слышать 😊

[@IvannaIv-cy6sj]

Огромное спасибо

[@freelance-pro]

Пожалуйста 😊

[@showreel2024]

FANTASTIC

[@freelance-pro]

👍👍👍

[@miroed]

Постепенно, энтузиазм от первых уроков угасает. Столько всего сложного, что сомневаюсь в своей способности разобраться. Мне кажется, проще было бы, если б сначала показывали макет, а потом говорили это делается так, а вот это так. А следить за свободным полётом творчества лектора, образно не представляя конечного результата - намного сложнее. Но всё равно, спасибо за время и старания.

[@freelance-pro]

Макета нет я же дизайнить учу а не верстать))))) приходите на обучение научу мыслить 😉

[@miroed]

@@freelance-pro Сейчас попробую научится азам знаний. Если будет по душе, возможно приду к Вам за менторством. Спасибо.

[@freelance-pro]

Буду рад вас обучать

[@user-kg4st5nx9c]

Круто

[@freelance-pro]

Это хорошо 🥳

[@victoriachudnaja4897]

Здравствуйте, у меня проблемы с добавление картинки. Пишет что максимальный размер должен быть не больше 4 mb.

[@freelance-pro]

В Гугле по запросу «сжать картинку онлайн» можно найти много сервисов сам пользуюсь тайнипнг и айлавимг сжимаете через них картинки и они будут загружаться в вебфлоу 😉

[@mikakhassenova8352]

Такой канал классный, но из-за интонации и голоса очень сложно слушать! Эти срывы на визги, как у подростка, у которого ломается голос, переходы на шепот и детская манера рассказывать отвлекают от информации. Есть школы/тренеры, которые помогают поставить голос, наладить дикцию, обратите на них внимание. В обучении важен не только материал, но и подача. Я вначале удивлялась, почему так мало просмотров, старалась не обращать внимания на голос, но это жесть конечно, жаль что придется искать другие источники информации, но это именно СЛУШАТЬ невозможно просто, особенно в наушниках!

[@user-ze6qx5sw9r]

для меня долго можно сделать короче. Если нашел другой курс, то можешь поделиться?

[@freelance-pro]

Бывает

[@freelance-pro]

С таким подходом оно вам вообще не нужно 🥳

[@MisterCat8887]

Отличные уроки! В последней версии первого экрана как сделать адаптив под телефон? у меня грид с картинкой обрезается, хотя ставлю cover. Также обрезается если уменьшаю ширину экрана.

[@freelance-pro]

Рад что вам нравится! 😊 Как сделать адаптив далее в плейлисте будет показано, смотрите курс полностью и все увидите

[@sitebuy]

Дмитрий спасибо за урок. Есть одна рекомендация, отучайтесь говорить выражения "как угодно и что угодно". Не считал, но показалось что много раз сказали ;)

[@freelance-pro]

Да, надо от слов паразитов избавлятся)) хотя именно эти слова в полной мере передают простоту работы с вебфлоу и создания сайтов в целом.

[@user-nq2ue3rg3y]

Отличное урок. Только у меня так и не получилось картинку растянуть до самого края, думаю дальше получится)

[@freelance-pro]

Виз 100% пропишите и она растянется

[@datoshcode]

Все интересно, только почему б для контейнера сразу не задать внутренние отступы, например по 10px?

[@freelance-pro]

Что бы на ПК версии сайт был шире на 20 пх

[@procrastinator3219]

А почему у тебя фон жмг когда задаешь высоту 400, а ширина авто фотография отображается нормально, а у меня вертикальной линией и мне еще приходится задавать минимальную ширину?

[@freelance-pro]

Потому что делаете не так как на видео 😉 надо 1в1 повторять, не видя ваш проект причину найти невозможно но на вскидку предположу что для блока в котором находится жмг (что бы это не было) заданы флексбоксы с центрированным выравниванием

[@goldensales2794]

Дмитрий, как на windows мерить пиксели курсором? (Когда ты на заголовке мерил отступ у тебя курсор показывал пиксели) - это какая то клавиша зажимается или сторонняя программа нужна?

[@freelance-pro]

На виндовсе скриншотилку установите любую например джокси

[@user-mf9md4lc5w]

Дмитрий, приветствую. Видел функцию переноса дизайна из фигмы в вебфлоу. Скажите, пожалуйста, стоит ли тратить время на подготовку макета, а затем экспорт из фигмы в вебфлоу?

[@freelance-pro]

Нет, вебфлоу для дизайнеров инструмент, дизайн делаю в нем сразу

[@hot-short82]

Привет, можно ли в webflow вертикальную картинку в секции расположить так, чтобы она заполняла 50% секции полностью, но при этом, чтобы не налезала на другие секции и была полностью видна картинка?

[@freelance-pro]

Привет, да, конечно же, по сути в вебфлоу возможно все.

[@user-ce9mh7ij6o]

А в webflow нельзя взять цвет пипеткой, как в браузере, что бы подобрать сразу под цвет картинки?.. Что бы отдельно фотошоп не открывать для этого?..

[@freelance-pro]

Можно есть расширение для Гугл хром которое установится после нажатия по пипетке в интерфейсе вебфлоу

[@ЮрийМедведев-о9ы]

Привет, такой вопрос, а где ты берёшь качественные картинки, которые не размываются, например, при постановке на фон секции?

[@freelance-pro]

Привет, ищу в гугле указав в настройках поиска "большие" что бы мне он показывал только с огромным расширением изображения. Или же на стоках ищу, фрипик например. Так же есть ещё супер лайфхак, но он секретный и только для учеников, так что приходите на обучение и научу тому, что нельзя говоришь в широкие массы 😉

[@user-sg5ms7xy2d]

freepik

[@freelance-pro]

Как вариант )) есть видео на канале о том где брать бесплатно графику 😉

[@hot-short82]

Привет, хочу узнать, нужно ли использовать на Webflow сетку, чтобы понимать ровно расположены элементы на странице или нет? Потому что, если я включаю сетку, то вижу, что элементы располагаются не по ней, а по границам контейнера (к примеру) и смотрится это не очень

[@freelance-pro]

Привет, нет встроенная в вебфлоу сетка не нужна и я её никогда не использую, как правильно делать сайты, что бы было все ровно и правильно показываю на канале, в своих бесплатных курсах. Один из которых судя по видео под которым комментарий, вы успешно начали проходить.

[@alexandrlelux6932]

@@freelance-pro Привет! Так есть все-же сетка, например, как в Фигме, или нет? Если есть, то как включить?

[@freelance-pro]

Привет, да есть, и даже не одна)) как их включить показано в этом видео kzbin.info/www/bejne/jaCtm4tsd8tpmdE

[@mariavivace8927]

Большое спасибо за информацию, но... зАголовок, пОверх, ложим, сиркл - ааа...

[@freelance-pro]

Пожалуйста

[@freelance-pro]

И да я НЕ Русский мне ударения без разницы

[@sergiigunko5067]

именно это видео как для человека, первый раз делающего страничку, слишком заумное. довольно сложно.

[@freelance-pro]

А вы предыдущие 5 посмотрели? Если тут сложно то предыдущие точно обязательны к просмотру, если их смотрели тот это нужно повторить за мной 1в1 а не просто смотреть так лучше усваивается информация

[@SvetlanaTonkich]

Понравился прием откусывания с помощью позиционирования. Подскажите, что нужно выставить, что бы при сжатии до мобильной версии по вертикали этот кружок тоже уменьшался, а не перекрывал 1/4 картинки?

[@freeze996]

здраствуйте,это называется резиновая верстка,все просто:ставите размеры для кружка не в width и height а в max h и max w

[@freelance-pro]

Во vw задавать значения

[@user-iy6sd2oe9v]

Суперский урок!!!

[@freelance-pro]

Рад слышать 😊