Задать вопрос
  • Как расположить элементы как на картинке?

    vilka_2009
    @vilka_2009
    Верстаю
    Привет! В целом выглядит как таблица, не находишь?) Чтобы это работало как таблица, но на флексах, нужно подумать о том как сделать ячейки первого столбца одинаковой ширины + justify-content сделать start. Думаю вполне может помочь min-width, ну или ещё что-то
    Ответ написан
    1 комментарий
  • Как правильно подбирать цвет?

    vilka_2009
    @vilka_2009
    Верстаю
    Первое, чтобы выбрать сочетания цветов по кругу Иттена. Если честно инструмент мне не очень, но все равно полезный.
    Второе. Поиграйся с количеством темных и светлых оттенков.
    Третье, чтобы смотреть уровень контрастности, особо применимо при размещении текста на фоне
    Думаю этого тебе хватит.
    Ответ написан
    1 комментарий
  • Как верстать 18 колоночный макет?

    vilka_2009
    @vilka_2009
    Верстаю
    Тру решение для 1024 - scale всей страницы ))))
    Ответ написан
    Комментировать
  • Оцените пожалуйста верстку?

    vilka_2009
    @vilka_2009
    Верстаю
    1) Тег section не в правильном месте используешь. Он означает что-то более глобальное и общее.
    <div class="limpon-is">
            <div class="bg-color"></div>
            <div class="squares-bg"></div>
            <div class="wrapper">
                <div class="brandon-img"></div>
                <section class="limpon-text">
                    <div class="small-button"></div>
                    <h3>Limpon Is Suitable For<br> Anytype LandingPage</h3>
                    <p>Lorem ipsum...</p>
                    <a href="#" class="btn btn230blue">get started now</a>
                </section>
            </div>
        </div>

    Например тут section-ом должен быть блок с классом ".limpon-is", а у тебя просто его текстовая часть. Он должен объединять в себе весь логический блок, пусть в нем даже есть какие-то декоративные блоки.
    2) Так же, я бы не стала делать такие декоративные блоки (.bg-color, .squares-bg) и декорировала псевдо-элементами, потому что они не несут никакой смысловой нагрузки, в отличие от скриншотов и иконок.
    3) .testi-bg - почему картинкой, а не css-ом? если что-то можно верстать, то нужно верстать. Например, радиокнопки в форме - это обычно кружок в кружочке. Это точно не стоит лишних обращений к серверу за картинкой, их отрисовка и хранение. Здесь тоже не вижу никакого смысла делать вместо фона с закруглением - картинку.
    4) .review-block1 - Вот таких классов не должно быть ни в коем случае, .review-block - таких тоже лучше избегать. Это все равно что диву назначить просто класс block. Див - это же итак блок. Или еще круче div с классом div. Будет вообще шикарно.
    5) в blockquote в твоем случае излишне вставлять параграф .
    6) .review-block - фотографию автора обзора нельзя делать псевдо-элементом. Это не просто декоративный элемент, это как имя автора отзыва и относится не к самому блоку, а к его содержимому. Поэтому должен быть тег с классом .author-photo, например.
    Как лучше делатьь:
    <div class="review">
                <blockquote>It is a long established fact that a read her will be distracted by the readable content of a page when looking.</blockquote>
                <div class="review-author">
                    <img class="author-photo" src="image.jpg" alt=""/>
                    <span class="author-name">Rolin B. Mirano</cite>
                    <cite class="author-company">ceo, uihub</cite>
                </div>
        </div>

    Тут мы объединяем смысловые элементы одним родителем .review-author
    7) .plans-header - зачем тут делать ширину блока? Излишне.
    8) Список услуг в тарифах должен быть списком, а не одним параграфом. Жирный минус!
    unexceptable

    hqdefault.jpg
    9) Опять же, список тарифов - это section. А у тебя этим тегом каждый тариф выделен. ".team-list" - это не section. ".our-team" - это section.
    10) .team-plus - мой совет: не парься высчитыванием радиуса в пикселях. когда тебе нужно сделать круг. Просто border-radius: 50%, можно 100%, можно 9999рх. В любом случае, если нужно будет поменять размер круга, то не нужно будет менять размер радиуса.
    11) Такие штуки как .team-position - это не параграф в тексте или статье. Поэтому не используй тег пожалуйста. Используй тег .
    12) При желании в форме обратной связи можно оформить текст авто-заполнения, чтобы не было сильных отличий.
    13) В любом поле формы должен быть padding, как левый, так и правый. У тебя ни в одном поле нет правого падинга. Поэтому при длинном тексте он наедет на иконку. А длинным может быть и фио, и почта. А не только текст в текстареа.
    5d27626ad09e1936454445.png
    5d2764e97c3cb017292066.png
    14) Кнопочка "submit now" - иконка должна быть псевдоэлементом у текста. Иначе если текст поменяется придется и ее двигать.
    15) .foot-so - не делай сокращенные имена классов. Тут невозможно понять что это. Ступня?! footer-social, хотя бы.
    16) Предпочтительнее все таки футеру тоже назначать класс. footer.footer получается
    17) На ссылках хочется эффектов наведения (кроме cursor: pointer), а на кнопках - плавности наведения (transition).
    18) .subscribe button - попробуй border-radius: 9999px. Лайфхак, если радиус в 2 раза меньше высоты кнопки ;)
    19) А что это так? Почему только ко второму заголовку такое правило?
    .text-scroll h4:nth-of-type(2) {
        margin-top: 27px;
    }

    20) Центрируем флексами без подгонки пикселей отступов.
    .burger-areal {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer
    }
    .burger {
      width: 30px;
      z-index: 333;
    }
    .burger span:last-child {
      margin-bottom: 0;
    }


    Надеюсь ты не примешь критику близко к сердцу, а сделаешь из нее правильные выводы. В основном, честно, мне все очень понравилось. Все замечания чисто на опыте. Удачи тебе в развитии!
    Ответ написан
    4 комментария
  • Какой хороший курс по JS (для среднего уровня)?

    vilka_2009
    @vilka_2009
    Верстаю
    1) Открыла для себя такой ресурс: Экзерцизм Суть в том, что ты берешь на выполнение задачу, скачиваешь, решаешь, загружаешь, проходишь авто-тесты, можешь обратиться к ментору за помощью (вроде как есть бесплатные и платные), можешь запросить оценку задания ментором. Я еще не пробовала, но планирую, и кажется это должно быть круто и удобно. Как раз для среднего уровня пойдет, чисто практика.
    2) Ну и посмотри интенсивы на htmlacademy.ru
    Вот, как раз для среднего уровня Профессиональный JavaScript, уровень 2
    Ответ написан
    Комментировать
  • Хороший пример структурированного CSS файла?

    vilka_2009
    @vilka_2009
    Верстаю
    Senseich, в принципе, ты на верном пути. Но, как порекомендовал, Алексей используй normalize или ему подобные файлы, и то что ты написал выпадет из основного файла css.

    И начнется у тебя файл с написания стилей для конкретно твоего случая, без обнуления стилей браузера и прочих подобных фич, которые дает тебе normalize.

    Будет так: сначала стили для html, body, потом для общего центровщика - wrapper, потом стили по стайл-гайду - все как у тебя: заголовки, параграфы, списки, ссылки, кнопки, изображения. Порядок тут не особо важен и скорее зависит от дизайна и того, как ты будешь верстать. Но закономерность можешь проследить в моем перечислении:
    1) сначала идут заголовки: всегда и везде в тексте сначала идет заголовок.
    2) потом параграфы: когда ты что-то читаешь после заголовка всегда идет параграф.
    3) потом в обычной статье мы можем что-то перечислить как сложно-сочиненным предложением, так и распределив перечисление в список, поэтому после параграфов идут списки.
    4) потом дополнить статью мы можем ссылками
    5) а ссылки можем сделать в виде кнопок
    6) а может и в виде картинки
    7) а может картинка - это не ссылка, подумаешь ты и поставишь стили для нее раньше ссылок. Но вдруг она когда-нибудь будет ссылкой, поэтому лучше стили для картинок поставить после ссылок, чтобы, если что, переопределить стили ссылки.

    Дальше стилизуешь уже более глобальные элементы, например формы, социальные кнопки, пагинация, хлебные крошки и т.п. Дальше больше: меню, асайды, слайдеры. Ну и т.д.
    Ответ написан
  • Как сделать такой background?

    vilka_2009
    @vilka_2009
    Верстаю
    Как один из вариантов - Маска:
    1) Подготовить в фотошопе белую волну
    2) Под тестом фоном использовать двойной background, например:
    background: url("image/pic-mask.png") no-repeat bottom, #000 top;
    background-size: 100% auto, auto;

    3) Пример можно глянуть тут в первом же блоке https://vilka-vk.github.io/sedona/
    Ответ написан
    Комментировать
  • У всех не работает шрифт Noto Serif Italic в Safari?

    vilka_2009
    @vilka_2009 Автор вопроса
    Верстаю
    Проблема оказалась в том, что для Сафари нужно не только в настройках шрифта указывать стиль шрифта, но и в том месте, где применяешь шрифт. Например:
    @font-face {
      font-family: 'Noto Serif';
      src: url('<%= font_path "noto/NotoSerif-Italic.eot" %>');
      src: url('<%= font_path "noto/NotoSerif-Italic.eot" %>?#iefix') format('embedded- 
      opentype'),
      url('<%= font_path "noto/NotoSerif-Italic.woff2" %>') format('woff2'),
      url('<%= font_path "noto/NotoSerif-Italic.woff" %>') format('woff'),
      url('<%= font_path "noto/NotoSerif-Italic.ttf" %>') format('truetype'),
      url('<%= font_path "noto/NotoSerif-Italic.svg" %>') format('svg');
      font-weight: normal;
      font-style: italic;
    }

    div {
      font-family: 'Noto Serif';
      font-style: italic;
    }


    Вот при таком использовании шрифт будет отображаться в сафари.
    Ответ написан
    Комментировать
  • Как заставить Visual Studio Code форматировать выделенный блок CSS, LESS, SASS, Javascript?

    vilka_2009
    @vilka_2009
    Верстаю
    Я понимаю, что вопрос уже решен. Но мне интересно, поможет ли тебе в этой задаче стандартный функционал vsc? 5af41fb5684b3125872753.png Тут нужно галочку поставить.
    Ответ написан
    Комментировать
  • Ссылка вернуться назад в react-native-navigation?

    vilka_2009
    @vilka_2009
    Верстаю
    Мы в проекте использовали функцию pop(), но у нас не 'react-native-navigation' использовался, а expo. Судя по документации к твоему плагину, нужно использовать pop(params = {}) Это отсюда https://wix.github.io/react-native-navigation/#/sc...
    В общем, учись юзать документации))
    Ответ написан
    Комментировать
  • Как верстать картинки которые шире блока?

    vilka_2009
    @vilka_2009
    Верстаю
    По ходу дела позиционирование не нужно. В левой колонке текст, в правой - фотка, которая появляется при разрешении в 1100px
    @media all and (max-width: 1099px) {display: none; visibility: hidden;}

    Родителю overflow: hidden; чтобы он обрезал картинку, если она вылезает за пределы родителя. Картинке определенный размер задать, например: width: 1300px;
    Ответ написан
    Комментировать
  • Ваша структура проекта под верстку?

    vilka_2009
    @vilka_2009
    Верстаю
    шапка, футер, сайдбар - безусловно являются компонентами.
    логотип, меню, переключатель языков, соц сети, гамбургер:
    лого - да, меню - да,
    переключатель языка - не обязательно, но если код этого блока занимает много места, можно вынести в отдельный компонент,
    соц.сети - обычно да. Потому что обычно соц.сети много где на сайте используются,
    гамбургер - наверное не стоит, потому что: 1) является неотъемлемой частью шапки, 2) не занимает много места.
    При желании мелкие штуки типа гамбургера можно вынести в подкомпонент, если система сборки позволяет.

    Итак, что такое компонент:
    1) независимый блок - часть кода, используемая независимо от родителя, может применяться в разных местах
    2) большой блок - большой кусок кода, который имеет конкретный замысел, типа баннера, слайдера и тп. Пускай он нигде и никогда не будет больше использоваться, кроме как на главной, но он большой и самостоятельный мальчик. Так что селим его отдельно.

    Вот как минимум две отличительные черты компонентов от некомпонентов.

    Ой, это я что-то про разметку все говорила =))

    Про стили - как говорили выше, все нужно отделять. Отлично, если каждый css-файл будет содержать верстку только одного логического блока.

    ПыСы: глядя на твой скриншот, складывается впечатление, что папки для этих файлов не нужны. Смысл в таких длинных и повторяющихся путях?! components/header/header.scss Да никакого
    Ответ написан
    7 комментариев
  • Какие проблемы решает качественный дизайн сайта?

    vilka_2009
    @vilka_2009
    Верстаю
    Я думаю ты вообще не с той колокольни смотришь на ситуацию. Проблема любого начинающего менеджера-продажника в том, что он думает, что продать можно только тогда, когда предлагаешь человеку то, что он купил бы. А ты попробуй продать то, что понравилось бы людям, посетителям сайта. Представь себя целевой аудиторией.
    1) Спроси себя, как ты относишься к сайтам, особенно данной тематики? Цепляет ли тебя сайт, если у него качественный продуманный дизайн? Сравни с другими "некачественными". Отсюда ты почерпнешь какие проблемы можно решить дизайном.
    2) Дальше спроси себя, если у сайта будет хороший дизайн, как бы ты им пользовался? Как часто заходил бы? Как долго на нем был бы? И т.п. Отсюда ты почерпнешь выгоды.
    3) Если тебе плевать на дизайн сайтов, то забей на него и иди продавать то, что тебе нравится.
    Ответ написан
    Комментировать
  • Первая работа для верстальщика, как получить?

    vilka_2009
    @vilka_2009
    Верстаю
    Честно говоря, работа похожа на то, что ты скачал готовый шаблон и попытался его освоить и переверстать под адаптив. Видно, что какие-то вещи, типа слайдера, эффектов слишком хорошо сделаны, продуманы, а в исходники смотришь, а там то сасс файлы, то scss.. то скрипт называется common, то script.min.js, хотя это два одинаковых и не минифицированных скрипта. Видно, как хорошо сделана десктопная версия, и как плохо - мобильная. Взять то же меню в мобильной версии: появляется панель с кнопками, в которой не продолжена стиллистика сайта, нет эффектов наведения. Ошибки новичка. Но вот на десктопной версии у тебя очень удачно получилось продумать эффекты наведения.. Хмм, что мешало сделать так же в меню?! Падазрительнааа --
    Ну и самое важное: где история изменений в гите? Зачем выкладывать репозиторий, если в нем нет истории?
    Итог: работу найти не можешь, поэтому пишешь сюда, считая, что тостер - это неплохая площадка для само-рекламы. При этом нихера не сделано по существу, и не видно как ты работал. и ты ли вообще.
    В последнее время много таких людей стало, кто ищет работу на тостере под предлогом вопроса: что я делаю не так, как устроиться на работу, почему меня никто не берет, ну возьмите уже наконец меня, прям тут.. Тьфу. Вопросов таких целая куча и ответов к ним тоже. Но искать людям лень. Да и хватит себя жалеть. Нарабатывай портфолио в гите, с ИСТОРИЕЙ! Не пудри мозги людям.
    Но! Если это и впрямь твоя верстка, то можешь смело искать себе работу, хотя бы на поддержку готовых проектов. Я уже через 3 месяца после начала учебы нашла, на 23к не в Москве, а в райцентре таксказать. Главное терпение и усё будет.
    Ответ написан
    2 комментария
  • Как правильно сделать спрайт из svg иконок?

    vilka_2009
    @vilka_2009
    Верстаю
    Уверен, что плагин виноват? Как ты иконки из макета сохраняешь? Ведь плагин на входе должен получить сами иконки, а на выходе выдать спрайт. Так проблема по ходу дела в том, как ты сохраняешь иконки из макета.
    Ответ написан
  • Корректно ли использовать bootstrap3 и flexbox одновременно?

    vilka_2009
    @vilka_2009
    Верстаю
    Корректно ли? Нет. Но почему бы не Да?!
    1) В идеале, если нужен бутстрап и флексы, то берите Bootstrap4 и не парьтесь.
    2) В реальной же жизни, приходится пользоваться тем, что дает нам судьба >< Хе-хе
    Можно делать все что угодно, но нужно оценить трудозатраты, удобства и возможность использования другого стека технологий исходя из собственного опыта и мнения. Решать только Вам.
    Ответ написан
    1 комментарий
  • Чего бы сложного сделать на javascript?

    vilka_2009
    @vilka_2009
    Верстаю
    Мой один знакомый пытался написать веб-приложение для организации, которая шьет шторы. Приложуха должна принимать на вход фотку окна, стены и подобное, а в самой приложухе можно будет на это окно повесить штору (кот. представляет из себя фотку шторы или принт). Эту штору можно конфигурировать - задавать размеры, карниз, способ крепления шторы, собрать штору с одной стороны на веревочку (не помню как эта штука называется)) В общем все это он собирался делать на JS (не знаю, получилось ли. Надеюсь, что да). 3D трансформации, чтобы складывать шторки. В общем, в итоге: человек, зашедший на сайт (то может быть и просто покупатель, и дизайнер) смог примерить шторы в своей комнате по фотке, выбрать что-то и купить или скачать результат.
    Вообще, в мире много чего нереализованного или реализованного коряво. Как пример -
    куча всяких конструкторов, помогающих простым обывателям проявить фантазию над своей квартирой, но нифига не работающих.
    Ответ написан
    Комментировать
  • Возможно ли изменить высоту скроллбара с помощью CSS?

    vilka_2009
    @vilka_2009
    Верстаю
    nicescroll слишком тормознутый и работает не плавно. Попробуй вот этот плагин manos.malihu.gr/jquery-custom-content-scroller Там тоже куча готовых тем, а так же возможностей самостоятельной кастомизации.
    Ответ написан
    Комментировать
  • Удаленная веб-студия, как?

    vilka_2009
    @vilka_2009
    Верстаю
    EvilMartians, по-русски Злые Марсиане. Русские ребята, раскиданы по всему миру. Ооочень крутая компания.
    Вот тут кто выше пишет, что удаленный офис - это проигрышный вариант, видимо сами имеют отрицательный опыт в подобной работе и делятся тут своим "диванным" проигрышем. Компаний с удалёнкой - тьма тьмущая. Я работаю в такой, у которой есть свой офис с небольшим количеством сотрудников (один из нас в другом городе по удалёнке работает), а заказов из нашего города - 0. Ни одного! Все из Москвы. У наших товарищей так же, правда они разрослись в компанию из 25-30 человек, переехали на днях в свой новый офис с ремонтом за 3 лимона. Заказы из нашего города = 0. В основном с Америки и Азии. Вот так вот.
    Ответ написан
    2 комментария
  • Bootstrap - плохая практика добавлять к элементам фреймворка свои классы / стили. Как тогда лучше в моем случае?

    vilka_2009
    @vilka_2009
    Верстаю
    Автор, я такого ни разу не слышала.
    • Если вот так подумать, то наверно плохим тоном будет считаться добавление классов, которые потом будут в себе сочетать правила, касающиеся и размеров, и отступов, и стилизации оформления.
    • Бывают такие случаи, когда необходимо переопределить колонке внутренние/внешние отступы. Я думаю здесь лучше добавить класс к этой колонке, который будет отвечать за внутренние/внешние отступы.
    • Бывают такие случаи, когда необходимо стилизовать именно колонку. Как раз из-за этих самых отступов (не могу привести пример, память уже не та) - добавляй класс к ней.
    • Да в конце концов, бутстраповская сетка лишь помогает тебе не задумываться о ширине и отступах.
    • Мне изначально было вбито в голову, что большая вложенность - это плохо. Никто не запрещает, но нужно стараться избегать этого.
    • И самое главное, в нашем сообществе разработчиков слишком много людей, которые придумывают всяческие правила и нормы "поведения". По большей части из-за того, что они привыкли жить по правилам. А жизнь - это импровизация.
    Ответ написан
    Комментировать