Ответы пользователя по тегу Вёрстка
  • Как сделать слайдер-сравнение до/после с png изображениями?

    Anitamsk
    @Anitamsk
    Frontend Dev
    Before\After Slider
    На codepen по тэгу before\after slider много вариаций с перекрытием, на любой вкус.
    Ответ написан
  • Зачем тестировать верстку на локальном сервере?

    Anitamsk
    @Anitamsk
    Frontend Dev
    Gulp и локальный сервер нужен не для тестирования в своем большинстве, а для удобной разработки и в дальнейшем отладки.

    Представьте, вы верстаете свою первую html страничку, пляшете и в восторге хлопаете в ладоши, оно вам нравится, вы получаете кайф от технологий, верстки и тд. Проходит время - вы добавили в своё портфолио 2,3 работы. Верстка становится однотипной, немного рутинной, процесс такой же долгий как в первый раз и вы начинаете думать об "автоматизации" процесса. В вашей голове возникает мысль "Я не хочу постоянно жать F5 и обновлять страницу после каждого изменения, хочу что бы все было на лету". Вы ставите gulp-browsersync и получаете наслаждение от того что процесс автоматизирован. Дальше вы ставите gulp-минификацию, конкатенацию, префиксы, сжатие, возможно какие-то приблуды для отладки, которые помогают вам верстать быстрее, лучше, делать код чистым и красивым.

    Рынок очень динамичный, если вы будете разрабатывать старым дедовским способом открывая каждую отдельную страничку html - далеко вы не уедите. Не говоря уже о CMS системах, через которые удобно работать на локальном сервере в связки с gulp. Там вы уже пишете не html, а допустим php - и browsersync все так же работает.
    Ответ написан
  • Критичны ли погрешности при верстке макета?

    Anitamsk
    @Anitamsk
    Frontend Dev
    Все зависит от дизайнера, они тоже люди и часто когда мне приходят макеты, на нем стабильно разные отступы между элементами, бывает корявое отображение блоков, и тому подобное, первое время играл внутренний перфекционист, и я постоянно указывала дизайнеру на погрешности, а потом поняла что конечный итог - монетизация, и я просто трачу своё время впустую, и легче сверстать по нормальному, именно так как я вижу. Клиентам же доходчиво объясняю что такое pixel perfect, и если они это хотят и настаивают, накидываю еще сумму к заказу, обычно услышав её - клиент перестает хотеть или отваливается = profit.
    Ответ написан
  • Как сдвинуть меню вправо?

    Anitamsk
    @Anitamsk
    Frontend Dev
    Находите класс которым описана стилизация меню, и если не хотите особо заморачиваться, напишите к этому классу - transform: translateX(-50px) - где 50 px нужное вам значение по горизонтали. Сразу предупреждаю - это не самый лучший подход и при смене разрешения экрана, вам контент будет ползти.
    5d3947f5c3fb6122729764.png
    Как и написали выше - проблема с версткой, и с горе верстальщиком)
    Ответ написан
  • Оцените верстку?

    Anitamsk
    @Anitamsk
    Frontend Dev
    Ошибок довольно много. Из тех что я увидела:
    1. Ваш контент не центрирован, используйте нативный центровщик либо библиотеки типа Bootstrap4, делайте отдельный div и закидывайте его туда, сейчас ваш контент расползается, и это учитывая то, что у вас просто Desktop версия, не адаптивная.
    2. Название классов - когда вы пишите код, старайтесь использовать методологию, например БЭМ, пишется не header_menu_button, а примерно header__menu-button, header__menu-button--active, 2 нижних подчеркивания это элемент, две черты после элемента - модификатор, и ваш код будет более читабельный.
    3. Старайтесь думать о том что бы не писать код 2 раза, если ваша кнопка на сайте будет повторяться 2 раза, то для кнопки пишется базовый стиль допустим site-button, а в header__menu-button вы уже дописываете стили позиционирования и в итоге ваша конструкция имеет вид
    4. Научитесь использовать правильную вложенность, вы должны представлять сайт как лего, правильно перебросив контент по блокам, так как если у вас будет адаптивная верстка, вам нужно продумывать еще и адаптацию этих блоков к экранам с меньшим разрешением.
    5. И последнее, скачайте какие нибудь платные курсы - бесплатно, допустим HTML Academy или другой конторки обучающей новичков, и вам будет легче учится верстать правильно
    Ответ написан
  • Какой размер центровщика в данном макете?

    Anitamsk
    @Anitamsk
    Frontend Dev
    Почему бы центровщик не сделать по секциям? Сейчас очень много проектов где одна секция находится в центровщике, вторая секция допустим слайдер с партнерами отпускается на всю ширину. Сделайте центровщик в виде примеси, и добавляйте его в нужную секцию. Одна у вас будет с контейнером. Вторая секция допустим без.
    Ответ написан