Ответы пользователя по тегу Вёрстка
  • Как сделать, чтобы последний добавленный div был виден в родительском div.overflow-auto?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Нужно при добавлении элемента, перемещать позицию скролла блока на позицию, равную высоте скролла scrollHeight. Пример на jQuery

    без jQuery
    https://jsfiddle.net/Lms1y5vw/1/
    Ответ написан
    Комментировать
  • Блок компания делают абсолютом.Или можно проще?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Не надо абсолютом, он же у вас (судя по заголовку) занимает 50% от ширины родителя. Поэтому сделайте либо его display: inline-block, а родителю text-align: right, либо флексом, ну или как пожелаете.
    Ответ написан
  • Как называется CSS фреймворк / библиотека для вёрстки только именами классов?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Есть shed-css
    Но это жесть, ИМХО.
    Ответ написан
    Комментировать
  • А вы делаете бесплатное тестовое задание?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Я бы лучше предпочел выполнять тестовое задание на 1 час, чем проходить техническое интервью, т.к. я могу больше сказать о себе кодом, нежели словами, да и меньше нервов.
    Если же задание на целый рабочий день, и вы уровня выше мидла, то вероятнее всего, вас хотят бесплатно эксплуатировать.
    Ответ написан
  • Какой выбрать монитор для верстальщика?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    21:9

    Удобно. Сам использую LG 29UM68-P, очень удобно использовать для верстки. Часть экрана занимает браузер с livereload, а другую часть редактор. Это намного удобнее, чем два монитора, т.к. не надо сильно шеей мотать. Также нет рамки посередине. Еще к плюсу можно отнести то, что фильмы снимаются под такую пленку, и нет полос вверху (но в сериалах и ютуб-видео есть полосы по бокам), также очень кайфово можно поиграть.
    На работе у меня два 24' моника, а дома один широкий на 29', и в сравнении, один широкий гораздо удобнее чем два обычных.
    Ответ написан
    Комментировать
  • Что лучше Фреймворк или Дримвивер?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Начинающему ни тем ни другим. Берете текстовый редактор на выбор - sublime text, vscode и.т.д., и просто учитесь и верстаете на чистом HTML+CSS.
    Ответ написан
    8 комментариев
  • Как сверстать макет, ширина которого больше, чем ширина экрана моего монитора?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    1) Купить нормальный fullhd монитор, т.к. сейчас все сайты нужно на нем смотреть.
    2) В хроме F12, слева кнопочка Toggle device toolbar, и вверху вводите нужную ширину экрана.
    Ответ написан
    Комментировать
  • Какие сетки вы используете в своих проектах? И куда двигаться дальше?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    но разброс советом просто колоссальный

    Тут будет еще колоссальнее.
    инструментов для разработки

    Инструментов разработки огромное количество, и не нужно под копирку ориентироваться на кого-то. Выбирайте свой инструмент, который подходит больше вам.
    если смотреть на hh по объявлениям.

    Вакансии по чистой верстке не такие объемные по требованиям. Но часто требуют JS, сейчас без него никуда.
    Сейчас задалась вопросом как писать и делать проекты, поспрашивала у знакомых

    Прошлогодний ответ, но все еще актуальный Верстка с нуля: какие основные этапы работы?
    Кто-то советуют делать адаптивные сетки самостоятельно сливая вместе флексы и гриды и писать на ванильном css без фреймворков, много советуют фреймворк smartgrid, пара используют bootstrap и плюют на все остальное считая это лишними усилиями.

    При хороших знаниях css, в особенности flex и grid, вам не нужно будет использовать всякие фреймворки. Никогда не любил их использовать, всегда одинаково по времени разработка занимала как с css фреймворками, так и без. Но вы должны ориентироваться на себя. Попробовать стоит и так и так, но на начальных этапах советую делать упор на чисты css, чтобы лучше понимать, как это работает. Фреймворки лишь обертки.
    И понять, кто прав и кому верить я не смогла

    Тут будет также. Единственный выход, послушать всех, попробовать самой и принять решение.
    Но хочу сразу идти в правильную сторону зацепляя меньше граблей.

    Грабли, как и ошибки, довольно полезная вещь в изучении. Помогает оценить, почему так ошибся, как сделать так, чтобы больше так не ошибаться.
    Если дадите пару развернутых советов по примерном выборе стека и аргументов в пользу него, буду очень благодарна.

    Учите чистый css, html и js, по мере работы будете понимать, какие инструменты вам необходимы, чтобы облегчить/ускорить разработку. Закидаете себя сейчас инструментами - перегорите и бросите.
    Ответ написан
    Комментировать
  • Оценка уровня верстки?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    1) Фон зеленого блока сделан некоретно. Нужно либо использовать цвет с альфой rgba, либо если и делать картинкой, то размером 1x1px
    2) Кириллица в CSS файлах.
    3) Освойте какую-нибудь методологию (популярен БЭМ, но можете посмотреть также на аналоги, например RSCSS или Atomic CSS).
    4) Надо бы сделать hover для кнопок, чтобы цвет менял.
    5) .main-form input распространяется даже на кнопки, добавляя к кнопке лишний border-bottom
    6) Почему-то заголовок "СОВРЕМЕННЫЙ ПОДХОД К АВТОМАТИЗАЦИИ ..." имеет шестой уровень, хотя по логике, это h2
    7) В адаптивке есть косяки, например прижатые к краям экрана блоки, текст под заголовком "Современный подход к автоматизации " имеет странный левый отступ.
    8) В модальном окне есть форма, и в ней каждое поле имеет margin-top: 20px, допустим. Но к этому еще добавляется тег br между полями, хотя он там никакой роли не играет, т.к. поля занимают всю ширину, и насильственные переносы строк там не нужны, куда лучше обернуть каждое поле в отдельный div.
    9) e-mail'ы и номера телефонов лучше засовывать в ссылку mailto: и tel:.

    Это основные ошибки и замечания, остальное либо не заметил (т.к. проверял поверхностно), либо заметил, но посчитал это слишком субъективным.
    Ответ написан
    1 комментарий
  • $() функция не работает JQUERY, что не так?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вот эта строка у вас должна вызывать подозрения
    <script> src="slick/slick.js"</script>
    смотрите, как вы подключаете jquery и как этот slick.js
    Еще вот это. Закройте фигурную скобку и обычную сразу за ней.
    <script>
        $( "div.foo" ).click(function() {
    </script>
    Ответ написан
    2 комментария
  • Как отключить подсказки при заполнении форм?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Самым действенным советом будет, поменять атрибут name у поля. Вероятно, у вас стоит address, country (или еще что-то такое стандартное), и браузер пытается подсказать пользователю, тут не для всех браузеров autocomplete сработает. Поставьте другое название, нестандартное, например user-country.
    Ответ написан
    1 комментарий
  • Как с помощью JS сделать замену на странице в тексте, но не в атрибутах тегов?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    По хорошему, такое надо делать на стороне сервера, с кешированием. т.к. в js мы рискуем потерять привязку событий к элементам, да и не уверен, что это будет отзывчиво и без бликов всяких.
    Есть на гитхабе готовое решение, не очень быстрое, но под вашу задачу подходит отлично. findAndReplaceDOMText
    Использовать вот так
    findAndReplaceDOMText(document.getElementById('txt'), {
      find: /\d+/g, // искомая строка
      wrapClass: 'myclass', // класс элемента, в который будем оборачивать текст
      wrap: 'span' // название тега, в который будем оборачивать текст.
    });

    живой пример
    jsfiddle.net/er0w4nxm/1
    Ответ написан
    Комментировать
  • Учить jQuery в 2019?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Ну, в первую очередь, вы должны понимать сами, нужен ли вам jQuery, или нет. Я jQuery использую только для legacy сайтов (где уже есть jQuery), для WordPress (т.к. там он из коробки, то почему бы и нет), для прототипов и landing-page, для чего-то сложнее нужны фреймворки.
    Никогда не учил jQuery, но работать с ним умею. Если знаете css query, работу с dom, и сам JS, то вам хватит чтения документации и просмотра пары примеров. Не так много времени на это нужно. Не думаю, что вначале стоит заострять на этом внимание, по мере работы освоите, поэтому лучше учите чистый JS, потом переходите к фреймворкам.
    Ответ написан
    Комментировать
  • Что можете сказать о верстке (новичок)?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    1) Не делайте отступы блокам через  , есть же padding/margin
    2) Забудьте о float: left в тех местах, для которых он не предназначен. Для создания сетки используйте flex/css grids
    3) Делайте осмысленные названия классов и идентификаторов у элементов. У вас куча container1, container2 и.т.д.
    4) Не используйте position: absolute, где не нужно явное абсолютное позиционирование (у плавающих блоков например).
    5) Соблюдайте семантику. Заголовки должны быть в h1-h6 тегах.
    6) Не забывайте добавлять атрибут alt для всех картинок img
    7) У вас на сайте везде (вроде везде) используется шрифт "Trebuchet MS", но задаете вы его для элементов каждый раз, хотя можно было задать глобально для body
    8) Блок "ГАЛЕРЕЯ" не по центру.
    9) У вас соц-иконки в футере выровнены очень странно. Иконка insta имеет очень странный отступ от левого края, который видимо предназначается для выравнивания всего блока с иконками. Сделайте контейнер
    .container {
       width: 100%;
       max-width: 1040px;
       padding: 15px;
       margin: 0 auto;
    }

    и в него кладите элементы, которые должны быть внутри сайта. У вас через странный отступ почти все отпозиционировано. Посмотрите чужие работы, как люди делают разметку. Вы пока слабо представляете, как это все происходит.
    10) Вы должны адаптировать не только под маленькие и средние экраны, но и под большие, с шириной 2560px. Не нужно делать под них широкий сайт, просто нужно делать так, чтобы на них сайт тупо не уходил влево, а был по центру.
    11) Куча повторяющегося кода в css
    .footer>.footer_img>.vk{
        margin: 5% 0 0 1%;
    	display: inline-block;
    }
    .footer>.footer_img>.twitter{
        margin: 5% 0 0 1%;
    	display: inline-block;
    }
    .footer>.footer_img>.facebook{
        margin: 5% 0 0 1%;
    	display: inline-block;
    }

    12) Освойте БЭМ (или другую методологию). Код будет чище и проще.
    13) Сайт не адаптивный абсолютно, имеется только один media запрос, и тот только для изменения шрифта у документа. Посмотрите на другие сайты, как они адаптируются.

    Это основное, но список можно продолжать долго. По коду можно судить, что вы учились по старой литературе, выбросите ее. Смотрите как верстают другие, ковыряйте макеты, читайте умные статьи и сайты, тренируйтесь часто, и все будет ок.
    Ответ написан
    3 комментария
  • Как создавать такую анимацию?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    В данном случае, вот так anpzenit.ru/wp-content/themes/lawbusiness/images/i... :D
    А по хорошему, вот так https://css-tricks.com/svg-line-animation-works/
    Ответ написан
    Комментировать
  • Почему не отображается :after?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Добавьте к after display: block
    Ответ написан
    2 комментария
  • Почему на одном и том же разрешении могут не срабатывать CSS запросы?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Нет стандартного разрешения 1360х768, есть 1366×768
    Ответ написан
    1 комментарий
  • Как убрать отступ браузера справа?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Скорее что-то вылезает за пределы body. Напишите селектор
    * {
       outline: 1px solid rebeccapurple;
    }

    и по рамкам сможете понять, какой элемент выпирает.
    Ответ написан
    1 комментарий
  • Как сделать переход к слайду slick по клику на якорь?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    У slick есть метод slickGoTo, передаете в него номер слайда соответствующий вашему якорю, и он проскролит. Вот пример работы этого метода https://gist.github.com/galdiolo/4b73c81925f659320b5a
    Ответ написан
    Комментировать
  • Как при background-size: cover; держать точку на нужном месте?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Делайте img, кидайте его в div с position: relative, и этот div будет иметь такие же размеры, как и картинка в нем. Маркер тоже кидайте в этот div, и задавайте left, top в процентах, они будут относительный размера блока (который такого же размера как картинка).
    Пример
    Ответ написан
    2 комментария