Задать вопрос
  • Какой фреймворк по flexbox взять?

    MyaFF
    @MyaFF
    Верстальщик
    gridlex хорош как основа для допиливания, на мой взгляд.
    [class*=] можете переписать просто как классы, добавить своих итд.
    Фреймворки - гибкие настраиваемые инструменты для работы, вы ими пользуетесь когда надо, сколько надо, как надо, а не они вам диктуют, что делать.
    Ответ написан
    Комментировать
  • Что верстальщики хотели бы донести до веб-дизайнеров?

    MyaFF
    @MyaFF
    Верстальщик
    Если опустить банальности....
    Узнайте (если еще не знаете) о композиции слоев и комментариях в фотошопе. О композиции слоев особенно.
    Текст пиксель-в-пиксель от края до края блока и больше места не предусмотрено - считайте, что он не влез.
    Рисуя версию для мобилы шириной 320, держите в уме, что ее растянут до 650-760.
    Рисуя версию для планшета, держите в уме, что ее скорее всего будут и тянуть в большую сторону, и сжимать в меньшую по ширине. Не надо делать элементы совсем впритык, оставьте место для маневра.
    Помните, что у видео-проигрывателей и карт есть элементы управления (и если вы вдруг решили наложить перекрывающий карту слойчик и в нем инфу - покажите, что вы планируете делать с элементами управления).
    Комментируйте состояния (или соответствующе называйте слой) - просто три кнопки/ссылки разного цвета - это просто три разные кнопки/ссылки.
    Помните, что у полей форм есть состояния: обычное, в фокусе, заполнено, заполнено правильно (по желанию), заполнено не правильно, disabled, некоторые поля требуют пояснений по заполнению. У самой формы есть состояния - отправлена успешно, ошибка - не правильно заполнена, ошибка - не отправлена хз почему. Покажите ответы формы, если у вас формы и на странице, и во всплывашках, и хз где еще - покажите для каждого вида. В макетах надо показать все виды полей (хотя бы основные), а не только те два текстовых поля, которые требуются в конкретной форме "заказать звонок".
    Типовая текстовая страница должна содержать оформление основных текстовых элементов (заголовки, абзацы, списки всех видов, таблицы, картинки и их взаимодействие с окружающими элементами. А не только заголовок и пару абзацев.
    256 оттенков серого и текст размеров 12, 13, 14, 15, 16, 18, 20, 22, 24, 26 итд. конечно держат верстальщика в тонусе, но все же старайтесь несколько ограничивать палитру и количество стилей текста. Будет неплохо, если в них даже будет какая-то логика.
    Используя все доступные начертания парочки шрифтов в макете помните, что парочка шрифтов по 8-10 начертаний - это 16-20 подключаемых шрифтов, а не 2.
    Иконки и картинки смарт-объектами - это удобно, очень.
    Ответ написан
    Комментировать
  • Как сделать внутри флексбокса с вертикальным направлением оси инлайн-блочные элементы?

    MyaFF
    @MyaFF
    Верстальщик
    align-items: flex-end;

    шпора
    live
    смотреть
    раз уж почитать про флексы не нашли
    Ответ написан
    Комментировать
  • Как разделить меню изнутри?

    MyaFF
    @MyaFF
    Верстальщик
    Ответ написан
    Комментировать
  • А вы используете Flexbox в продакшене?

    MyaFF
    @MyaFF
    Верстальщик
    Около года назад начали использовать на некоторых блоках, если в ТЗ нет требования IE8+ (по умолчанию его нет уже давненько), основную сетку пока используем бутстрап. Тоже вот думаю, не пора ли и основную сетку флексами делать.

    А у банка (и у госов и "окологосов") скорее всего будет нужна поддержка самых распоследних динозавров
    Ответ написан
    Комментировать
  • Как оцениваются знания HTML/CSS?

    MyaFF
    @MyaFF
    Верстальщик
    Не обязательно все знать наизусть, важно знать, где посмотреть. Со временем все само собой запомнится.
    На начальном этапе не нужно заморачиваться специфическими приемами (типа "делаем красивое выпадающее меню в стиле таком-то" - это можно посмотреть, когда припрет.
    Нужно разобраться с основными принципами - в html с назначением элементов, их логической структурой;
    в css - свойства можно условно разделить на две группы: отображение (display, position + разные способы позиционирования, отступы, поля, box-sizing и его влияние на отступы и поля), и оформление (цвет, фон и подобное). Вот первую группу - отображение, позиционирование, расчет размеров нужно очень хорошо понимать - без этого никуда. А оформление - достаточно знать, что оно есть и где посмотреть подробнее.
    Вообще, пользоваться справочниками, шпаргалками - это нормально. Чтоб быстрее запомнилось, на начальном этапе не пользуйтесь автодополнением, подсказками в редакторе, печатайте ручками, они все сами запомнят.
    Ответ написан
    Комментировать
  • Какие проекты должны быть у начинающего фронтенда, чтобы его с руками и ногами взяли на любую работу?

    MyaFF
    @MyaFF
    Верстальщик
    Чтобы верстальщика взяли на работу (обычную, не любую), ему можно проектов не иметь вообще, а просто хорошо выполнить тестовое задание, правда еще ему стоило бы быть скромнее - вот это Front-End Developer (все с большой буквы, это важно) - вот ни к чему оно.
    Если честно, вот если б ты завтра пришел к нам в студию устраиваться и сказал: "я знаю вот это хорошо, вот это планирую узнать в ближайшее время, а вот этому научите, я сам не понял / научусь в процессе" - я бы сказала "ну, давайте попробуем на испытательный", и мой голос бы учли при принятии решения.
    Если б ты пришел вот с этим agnaman-shamansky.com/ и прям такой с порога "я Front-End Developer, берите меня с руками и ногами", я бы сказала "нах" и мой голос был бы последним.

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

    MyaFF
    @MyaFF
    Верстальщик
    codepen.io/anon/pen/OMZzEy
    если можно использовать calc(), :after{} и vw
    Ответ написан
    3 комментария
  • Как вы создаёте адаптивный дизайн и всегда ли это нужно?

    MyaFF
    @MyaFF
    Верстальщик
    Адаптировать или нет - зависит от проекта и, к сожалению, желания и бюджета заказчика. Не адаптивные проекты встречаются все реже, но и в них используем как минимум модульную сетку.
    Количество контрольных точек, в которых перестраивается макет, и их значения зависят от дизайна, также бывают дополнительные медиа-запросы для элементов, которые на какой-то ширине/высоте начинают плохо выглядеть.
    Основной принцип - конкретный дизайн должен хорошо выглядеть всегда, без привязки к размерам конкретного устройства (но дизайнеры все равно рисуют 320, 768 и "большой" - какой? по настроению дизайнера), все, что не нарисовано, додумывает верстальщик на ходу.
    Элементы форм, анимацию, кнопки, ссылки - все, с чем взаимодействует пользователь, также делим по принципу тач/не тач.
    Ответ написан
    Комментировать
  • Как разделить таблицу на части (сохранив размеры колонок)?

    MyaFF
    @MyaFF
    Верстальщик
    codepen.io/anon/pen/RryLZG

    (изменено анимируемое свойство, требуется поддрежка CSS-transform, минус - информация под таблицей все равно скачет)
    Ответ написан
    Комментировать