Спасибо Вячеслав , очень интересно смотреть после изучения frontend , многое становится ясно теперь как все работает . Плюс еще и фигму изучим , очень познавательный канал .
Отличное видео, одно из самых понятных гайдов по верстке в вебфлоу. Возник такой вопрос: я верно понимаю, что контейнеры используют в основном при верстке в пикселях, а при верстке в vw можно обойтись без них?
Вячеслав, очень классная обучающая лекция. У меня имеется только один вопросик, почему в этом примере были использованны только dif blocks, а не sections?
В чем может быть глюк: header-image-line (для него задала позицию абсолют, как на видео) находится в диве header-image-container, для которого задана позиция релатив. При выравнивании по нижнему краю картинка сползает наверх и перекрывает кнопку. Делаю все по видео, по шагам, пробовала обновить страницу, все равно также.
Вообще отличный видос. Один вопрос - в самом конце видно, что гамбургер появился на десктопе. Его нужно будет убрать точно так же, как убрали кнопки для мобилки или там как-то по-другому надо шаманить?
По-хорошему на мобиле надо переиспользовать по-максимуму элементы с десктопа. Но если по-другому не сделать, то надо делать так: элементу, который мы хотим увидеть на десктопе ставим display:hide на мобиле, а элемент на мобильном наоборот.
Отличный видос, большое спасибо! Если не сложно, объясните, так как нужно понимать html, css и js, не легче ли сразу верстать кодом? Вопрос только в скорость разработки упирается или что-то ещё?
Кажется в вебфлоу действительно быстрее кастомной разработки, но у неё есть ещё плюсы: - Примерно понятно как устроено для клиента или менеджеров (поменять текст в проекте сам клиент может). - Отличная оптимизация и СЕО. Я не знаю как внутри устроено, но результаты на Гугл спид тесте всегда удивляют)). Чтобы на разработке хорошо сайт оптимизировать для Гугл спид тест у разработчика должен быть опыт и время. Также и анимации: они, насколько я понимаю, создаются на ванильном JS и CSS без библиотек. Вот хоть миллион анимаций создай и они будут работать) - Очень удобно работать с анимациями. Это кажется самый лучший инструмент в вебе для CSS анимаций. - Чем проще среда для работы, тем проще придумать конструкцию в верстке или как реализовать анимацию. - В коробке с публикацией идёт CMS. Про неё узнать подробнее можно посмотрев видос на ютубе где мы выступали на трамплине про вебфлоу. Я там показываю как на проекте мы по-максимуму из неё выжали. - Довольно простая публикация и настройка редиректов. Не надо разворачивать сервер.
Полезно, благодарю! Подскажите, а если верстка резиновая, как быть с ней на больших экранах? Вебсайт получается слишком широким. Добавлять “max-width” в VW на всех экранах? Если да, какая макс. ширина должна быть оптимальной?
В первую очередь стоит экономический вопрос поддержки UltraWide. Будет ли готов ваш клиент платить за время потраченное на гипотетических 0.01% пользователей. Также плотность пикселей у всех мониторов разная, и поэтому я могу поделиться только своими субъективными размышлениями. Я считаю в первую очередь все зависит от дизайна и задач сайта. Если сам дизайн содержит много текста, а дизайнер нарисовал и затестил на своем мониторе макет 1920, то он может быть хорошей основой и для широких разрешений. А если в дизайне не так много текста и много графики, то лучше максимальной точкой для растяжения сделать 2560, чтобы учесть мониторы 2к, которые уже достаточно распространены. А далее наращивать поля по бокам. Вопрос чтения основного текста (он должен быть самым удобочитаемым) можно решать новым правилом для текстового стиля на большие разрешения, например можно начиная с 1920 сделать основной текст пиксельным. Также если на высоких брейкпоинтах начать наращивать поля при резиновой верстке, то начнутся проблемы. Если все объекты сверстаны в VW, то при изменении ширины экрана и не меняющейся ширине основной обертки верстка поломается. Избежать этого помогут дополнительные правила для больших мониторов, либо верстка в %, EM и REM.
Див легко переставлять друг в друга. Это может быть полезно чтобы прикручивать плавный скролл или менять структуру. А контейнеры не используем потому что они подходят больше для адаптивной верстки
Класс, спасибо ребята! Неужели кто то будет показывать как верстать нормальные макеты, а то на ютьюбе в основном макеты от которых глаз дёргается)
Оооо, нашел чем заняться на зимних каникулах)
Вы потрясающий учитель! Все супер понятно! Первое знакомство с вэбфлоу и без стресса. Спасибо!
Очень толково парень рассказывает
Спасибо Вячеслав , очень интересно смотреть после изучения frontend , многое становится ясно теперь как все работает . Плюс еще и фигму изучим , очень познавательный канал .
Вау, я в восторге. Буду ждать ещё таких видео!!!
Начинаю изучать Webflow, решил посмотреть ознакомительные видео. Благодарю, всё понятно.
как успехи?
Отличная подача материала. Давайте ещё ребят!
Очень качественное видео! Скажите ещё набираете людей?
Спасибо за видео! 😻
Очень хорошие объяснения, спасибо!
Отличное видео, одно из самых понятных гайдов по верстке в вебфлоу. Возник такой вопрос: я верно понимаю, что контейнеры используют в основном при верстке в пикселях, а при верстке в vw можно обойтись без них?
Да, все верно. Упрощают работу с обычной адаптивной версткой
Вячеслав, очень классная обучающая лекция. У меня имеется только один вопросик, почему в этом примере были использованны только dif blocks, а не sections?
На самом деле хотелось бы увидеть полную разработку этого макета)
Я понимаю, что тестовое - но всё же)
@@artemkomar6686 Когда расширим отдел и у нас появится время, то попробуем заняться обучающим контентом)
В чем может быть глюк: header-image-line (для него задала позицию абсолют, как на видео) находится в диве header-image-container, для которого задана позиция релатив. При выравнивании по нижнему краю картинка сползает наверх и перекрывает кнопку.
Делаю все по видео, по шагам, пробовала обновить страницу, все равно также.
Вообще отличный видос. Один вопрос - в самом конце видно, что гамбургер появился на десктопе. Его нужно будет убрать точно так же, как убрали кнопки для мобилки или там как-то по-другому надо шаманить?
По-хорошему на мобиле надо переиспользовать по-максимуму элементы с десктопа. Но если по-другому не сделать, то надо делать так: элементу, который мы хотим увидеть на десктопе ставим display:hide на мобиле, а элемент на мобильном наоборот.
@@rediswebflow1005 спасибо за ответ.
Отличный видос, большое спасибо! Если не сложно, объясните, так как нужно понимать html, css
и js, не легче ли сразу верстать кодом? Вопрос только в скорость разработки упирается или что-то ещё?
Кажется в вебфлоу действительно быстрее кастомной разработки, но у неё есть ещё плюсы:
- Примерно понятно как устроено для клиента или менеджеров (поменять текст в проекте сам клиент может).
- Отличная оптимизация и СЕО. Я не знаю как внутри устроено, но результаты на Гугл спид тесте всегда удивляют)). Чтобы на разработке хорошо сайт оптимизировать для Гугл спид тест у разработчика должен быть опыт и время. Также и анимации: они, насколько я понимаю, создаются на ванильном JS и CSS без библиотек. Вот хоть миллион анимаций создай и они будут работать)
- Очень удобно работать с анимациями. Это кажется самый лучший инструмент в вебе для CSS анимаций.
- Чем проще среда для работы, тем проще придумать конструкцию в верстке или как реализовать анимацию.
- В коробке с публикацией идёт CMS. Про неё узнать подробнее можно посмотрев видос на ютубе где мы выступали на трамплине про вебфлоу. Я там показываю как на проекте мы по-максимуму из неё выжали.
- Довольно простая публикация и настройка редиректов. Не надо разворачивать сервер.
@@rediswebflow1005 огромное спасибо за очень развёрнутый ответ! 🙌🏻
@@rediswebflow1005 Добрый день! Дайте пожалуйста линк на видео с выступлением на трамплине по вебфлоу.
@@ttbatkovich ua-cam.com/video/7wzPbxIiU4U/v-deo.html
Полезно, благодарю! Подскажите, а если верстка резиновая, как быть с ней на больших экранах? Вебсайт получается слишком широким. Добавлять “max-width” в VW на всех экранах? Если да, какая макс. ширина должна быть оптимальной?
В первую очередь стоит экономический вопрос поддержки UltraWide. Будет ли готов ваш клиент платить за время потраченное на гипотетических 0.01% пользователей.
Также плотность пикселей у всех мониторов разная, и поэтому я могу поделиться только своими субъективными размышлениями. Я считаю в первую очередь все зависит от дизайна и задач сайта. Если сам дизайн содержит много текста, а дизайнер нарисовал и затестил на своем мониторе макет 1920, то он может быть хорошей основой и для широких разрешений.
А если в дизайне не так много текста и много графики, то лучше максимальной точкой для растяжения сделать 2560, чтобы учесть мониторы 2к, которые уже достаточно распространены. А далее наращивать поля по бокам. Вопрос чтения основного текста (он должен быть самым удобочитаемым) можно решать новым правилом для текстового стиля на большие разрешения, например можно начиная с 1920 сделать основной текст пиксельным.
Также если на высоких брейкпоинтах начать наращивать поля при резиновой верстке, то начнутся проблемы. Если все объекты сверстаны в VW, то при изменении ширины экрана и не меняющейся ширине основной обертки верстка поломается. Избежать этого помогут дополнительные правила для больших мониторов, либо верстка в %, EM и REM.
@@rediswebflow1005 крутой ответ! Спасибо
хочу к тебе в отдел 🙏
Приветствую. Набор н стажировку ещё планируется в будущем?
В будущем планируется, но не в ближайшее время)
Почему вы везде используете div, а не контейнеры и секции?
Див легко переставлять друг в друга. Это может быть полезно чтобы прикручивать плавный скролл или менять структуру. А контейнеры не используем потому что они подходят больше для адаптивной верстки