Ответы пользователя по тегу Вёрстка
  • Стоит ли делать несколько инлайновых элементов на одном уровне, следуя БЭМ?

    iiiBird
    @iiiBird Куратор тега HTML
    Пока ты спишь - твой конкурент совершенствуется
    второй вариант

    И да, если второй, то как лучше давать классы?

    так как внутри этого блока могут быть и другие элементы формы, а не только input. А также они могут быть использованы во многих местах сайта, то лучше выделить его как отдельный блок. т.е. к примеру .form-item
    Ответ написан
    1 комментарий
  • Как называть картинки в реальном проекте? 01-02 или полное название?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    Называй так, что если ты сверстал проект и прошло несколько месяцев и ты открыл папку images - и смотря на названия картинок ты понимал, где именно ты использовал в проекте эту картинку.
    p.s. если по простому - называй так, чтобы было понятно к какому блоку или месту относится та или иная картинка. к примеру есть у тебя блок about-item, где какая то инфа "О компании", к примеру. и там несколько картинок. то называй их about-item-img-1, about-item-img-2 и т.д. Тогда и сам будешь понимать откуда эти картинки и другим будет легче разобраться
    Ответ написан
    Комментировать
  • В чем отличие резиновой и адаптивной версток?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    резиновая верстка не популярна как раз потому что ее сложно адаптировать. тебе нужно прописать кучу media breakpoint'ов просто потому что "вот в этом момент этот блок ушел не туда".

    bootstrap - это фреймворк с кучей вещей. но это не значит, что тебе они все нужны. он хорошо кастомизируется через scss исходники. ты можешь оттуда забрать только то, что тебе нужно. тогда и размер исходного css будет маленьким.
    Ответ написан
    Комментировать
  • Как актуально писать css?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    Не очень понятно, чем тебе библиотеки Bootstrap Tailwind и т.д. мешают дальше писать "использую scss модули с использованием _variables & _mixins"?
    я уже писал где то про Bootstrap, что это в первую очередь инструмент. и используют его, когда в нем есть необходимость. ты ж другие npm зависимости не используешь везде, правильно? а ставишь только те, которые тебе пригодятся в этом проекте.

    ну а про гриды ваще бред. это просто css стиль. это то же самое что говорить "border я выучил, а outline мне не нужен. стоит ли учить outline?" и так говоришь, что тебе на их изучение год потребуется.
    Ответ написан
    Комментировать
  • Как правильно вставлять видео с ютюба в slick-slider?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    Ответ написан
    Комментировать
  • Как сверстать подобное?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    тут по сути тебе 2 плагина найти:
    1) соединительные линии по типу https://github.com/anseki/leader-line
    2) и плагин для перетаскивания по типу https://interactjs.io/
    Ответ написан
    1 комментарий
  • Сколько брать за верстку сайтов, когда у тебя большой опыт?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    html, css и js (по типу, открыть закрыть меню, слайдеры и т.п.)

    в этой категории фриланс уже переполнен. а учитывая, что ты говоришь что через биржи ни разу не работал - за нормальный ценник ты работу взять не сможешь.
    т.е. тебе нужно будет либо сильно снижать цену, либо пойти выше в полноценный фронт.
    Ответ написан
    Комментировать
  • Как в инпуте сделать фокус перед placeholder?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    делай свой placeholder через отдельный блок, который абсолютом расположишь поверх инпута. и с ним уже сможешь работать как душе угодно. скрывать когда захочешь, сдвигать и пр.
    Ответ написан
    Комментировать
  • Как разместить картинку через background, при этом она должна быть по центру и вверху текста?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    лучше делай так:
    Ответ написан
    Комментировать
  • Как при наведении на картинку наложить на нее прозрачный слой?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    Ответ написан
    1 комментарий
  • Как правильно делать по бэм?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    почему вы всегда забываете, что блоки вы можете плодить как угодно и где угодно. вкладывать блоки внутрь блоков тоже сколько угодно.
    в твоем случае, если у тебя меню получается слишком громоздким, то сделай из него отдельный независимый блок.
    который даже к header может не относиться. т.е. внутри .top-header у тебя будет блок .main-navigation или .main-menu
    и использовать уже сможешь его не только в хедере, а где угодно.
    Ответ написан
    4 комментария
  • Как на яндекс-карте разместить элементы в контейнере с максимальной шириной 1400px?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    к примеру так:
    Ответ написан
    Комментировать
  • Самый быстрый способ верстки?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    первым делом тебе нужно самому узнать, где именно у тебя идут тормоза:
    1) долго сидишь над элементом и не знаешь как правильно его сверстать или верстаешь, а потом понимаешь, что не учел какие-то детали и весь элемент нужно переверстать - тут только опыт. верстай больше
    2) в голове уже все продумано на несколько шагов вперед, а в редакторе не успеваешь все это воплотить - учись быстрее печатать, учись верстать вслепую(когда ты пишешь код не смотря на результат в браузере)
    3) понимаешь, что много элементов из проекта в проект повторяются, а ты еще не сделал себе готовые наработки - значит делай эти готовые наработки. готовые блоки кода в https://gist.github.com/ а готовые компоненты в https://jsfiddle.net/ и копируй.

    в общем анализируй свою работу и выявляй слабые места и пытайся их исправить
    Ответ написан
  • Идеальный алгоритм вёрстки сайта?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    если именно брать как "идеал" и частично этого придерживаться, то нормальный алгоритм. но в реальных условиях слишком дотошный алгоритм.
    если ты все это мастерски отточил и щелкаешь как семечки - мое уважение.
    но если это уменьшает скорость верстки (а при реальных условиях это очень сильно может уменьшить скорость верстки) - то тут уже лучше подумать и не быть таким дотошным. потому что такой "идеал" не нужен никому кроме тебя самого.
    т.е. если брать твои 15 страниц, о которых ты ведешь речь и верстаешь их неделю - это уже можно считать, что долго. и за эту неделю ты бы мог сверстать в 2 раза больше страниц и получить также в 2 раза больше денег.

    про SASS, PUG, GULP и пр. спорить не буду. если нужно будет - сам дойдешь до этого со временем.
    Ответ написан
    3 комментария
  • Почему не отображается блок с position:absolute?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    .list-hover-slide li {
        background-color: #444A51;
        border-top: 1px solid #7B8591;
        position: relative;
        overflow: hidden; <--- проблема тут
    }
    Ответ написан
    Комментировать
  • Нужно ли что бы верстать знать какую то методологию?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    нет, но если с нуля начинаешь, то лучше придерживайся какой-нибудь. чтобы потом не пришлось переучиваться
    Ответ написан
    Комментировать
  • Когда не следует использовать сетку bootstrap или как ее подогнать под дизайн?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    скорее всего вы путаете именно "сетку" и обычные элементы на странице.
    если макет сделан под эту сетку - ширина и паддинги у блоков не должны расходиться с бутстраповскими.
    а уже обычные элементы, которые рядом стоят - как раз и НУЖНО просто через display: flex делать
    Ответ написан
    1 комментарий
  • Как убрать надпись с формы file-drop?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    для input {opacity: 0;}
    а все остальное что там должно показываться - навешивай поверх
    Ответ написан
    2 комментария
  • Как расположить картинки справа, bootstrap?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    ну бутстрап тут вряд ли тебе поможет. обычным flex сделай 3 колонки и в них картинки засунь. ну и для картинок задай свои width которые должны быть. примерно так:
    zPndOm8E.jpg?download=1&name=%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%2007-01-2021%2017:53:24.jpg
    синим выделил отступы
    Ответ написан
    Комментировать
  • Как сделать вёрстку сравнения товаров?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    левый блок статичный. правая сторона слайдер.
    при адаптации уменьшаешь слайды.
    в конечном итоге оставляешь 2 блока шириной 50%, в котором уместишь все.
    НО можешь пойти правильным путем и переделать так как сделали тот же днс и ситилинк. там структура совершенно другая.
    Ответ написан
    Комментировать