Ответы пользователя по тегу Вёрстка
  • Как сделать такое лого используя чистый css?

    Hyubert
    @Hyubert
    JS
    Градиентом можно, но псевдоэлементами будет больше контроля, хотя выбор всегда за вами.
    Вот накидал небольшой пример
    Ответ написан
    2 комментария
  • Как правильно сверстать такой блок?

    Hyubert
    @Hyubert
    JS
    В принципе можна воспользоваться математикой и свойством calc посчитав отступ для блока без контейнера
    calc(50% - 970px / 2)
    970px - ширина контейнера

    Вот пример

    ЗЫ. с позиционированием текста в середине блока думаю разберётесь сами.
    Ответ написан
    Комментировать
  • Верстка с нуля: какие основные этапы работы?

    Hyubert
    @Hyubert
    JS
    - win+r
    - cmd
    - cd ../
    - git clone
    - npm i
    - sblm project_name
    - npm start
    Ответ написан
    3 комментария
  • Блок не отображается в IE. В чем может быть ошибка?

    Hyubert
    @Hyubert
    JS
    Вы можете зделать что-то типа такого
    Ответ написан
    Комментировать
  • Как можно сверстать вот такие кнопки со стрелками?

    Hyubert
    @Hyubert
    JS
    Вот держи костиль

    UPD: если нужно имено адаптив, попробуй так 7ea6dba57d0c41118e2bb770aa50ad87.png

    подели на row (красный блок на рисунку) каждую строку, и к последнему елементу добавляй вертикальную линию, а появления дополнительного блока в row регулируй media

    Что бы компенстровать промежутки между медиа, используй решение Sergey Goryachev, с флексбоксами
    Ответ написан
    Комментировать
  • Считаюсь ли я программистом?

    Hyubert
    @Hyubert
    JS
    Извиняюсть что так много, но тут полное разъяснение.

    Web Developer

    Синонимы: веб-разработчик, веб-инженер

    Обычно, подразумевает использование каких-либо CMS. Некоторые люди на полном серьёзе считают, что начинающие используют «простые CMS», а эксперты – «продвинутые CMS». Хинт: если человек спрашивает – Какую CMS используете? у компании программистов в конференц-зале – вероятно, он полный нуб. И это не обвинение, а констатация факта. Серьёзные современные проекты не используют CMS, ну разве что в качестве вспомогательного инструмента. Wordpress для ведения блога компании – да, возможно. Wordpress в качестве магазина – уже сомнительно. «Социальная сеть на Joomla» – фантазии подростка. CMS имеют свое место на рынке, но они давно перестали быть «государствообразующим» элементом.

    «Делать сайт на CMS» примерно тоже самое, что «клепать дизайны под ThemeForest». «Копейка рубль бережёт!» – Nuff Said.

    Веб-инженер занимается контентом, «правит» вёрстку, делает разное и (occasionally) программирует. Web Developer – это низший уровень из всех возможных «веб-разработчиков». В случае с фрилансом, под веб-разработчиком, обычно, подразумевается «человек-оркестр», а точнее – «человек-батрак».

    CSS / HTML Developer / Markup Developer

    Синонимы: верстальщик

    Должность, на которой требуется верстать дизайн. Требования к знанию JS и программирования минимальные или отсутствуют. Желательно необходимо знание основ дизайна, т.к. дизайн почти никогда не переводится из PSD в HTML один-к-одному. «Pixel-Perfect» – фраза-«звоночек». Маркер менеджера-самодура, ни имеющего ни малейшего понятия о том, как работает браузер и замеряющего качество работы попиксельным (с зумом!) сравнением PSD макета и HTML страницы. Попытки объяснить разницу между рендерингом шрифта в фотошопе и в браузере, обычно, воспринимаются как «споры вместо работы». Избегайте «попиксельных» вакансий всеми силами.

    Верстальщик всегда дорабатывает за дизайнером. Веб-программист всегда дорабатывает за верстальщиком. Соседние пары в этой цепочке почти всегда недолюбливают друг-друга по этой причине.

    FrontEnd Designer / Web Designer

    Синонимы: веб-дизайнер

    Самизнаетекто™. От специалиста требуется знание визуального дизайна (возможно, дизайна интерфейсов), знание типографики, владение Photoshop. Знание JS, обычно, не требуется.

    На западном рынке, дизайнеры обычно занимаются и вёрсткой. Во-первых современная вёрстка, с учётом респонсив- и адаптив- приставок и анимаций посредственно описывается статической картинкой. Вы часто видели дизайнера показывающего анимацию и мобильную версию? Я тоже. Обычно, их возможности ограничиваются выбором из библиотечных анимаций (подобранных программистом!). Во-вторых (но по той же причине), настоящему специалисту часто оказывается проще сделать дизайн сразу в виде вёрстки. Зачем делать работу X + Y, если можно обойтись Y?

    На нашем рынке, ввиду технологического отставания, дизайнеры и верстальщики – разные люди.

    Interface Developer / UI-UX Designer

    Похоже на предыдущий вариант, но с упором на дизайн интеракций. Специалисты на этой должности, обычно, много общаются с программистами, с клиентами, с менеджерами, потом опять с программистами... По этой причине, желательно знание основ разработки ПО и коммуникативные навыки. Очень часто, вакансия также требует знания специфики мобильной разработки, т.к. двух UI/UX экспертов нанимают довольно редко. Имейте в виду, что по этому направлению сложно найти материал для самообучения, что может идти как в плюс (меньше конкуренция) так и в минус (сложнее освоить). Если же вы способны учиться на примерах – проблем быть не должно.

    Mobile / Tablet FrontEnd Developer

    Должность для разработчика, специализирующегося на мобильных устройствах. Требуется знание специфики платформ IOS и Android. React Native – современный вариант этой специализации, позволяющий использовать веб-технологии для создания нативных приложений. Хинт: веб-приложения, гибридные приложения, нативные приложения и нативные приложения на веб-технологиях – это всё разные вещи.

    FrontEnd Developer / Engineer

    Синонимы: фронтендщик, фронтенд-разработчик

    Обобщённое название должности для разработчика, владеющего HTML / JS / CSS. Обычно встречается в небольших компаниях, где на одного человека возлагается широкий спектр задач. Знание дизайна, вероятно, не требуется, но будет идти как бонус. В современных условиях, всё чаще заменяется на титул конкретной технологии: jQuery Developer, Backbone Developer, React Developer, Angular Developer... Умения программировать и верстать входят в пакет требований.

    JS Developer / FrontEnd Programmer

    Синонимы: JS разработчик* / JS программист

    То же, что и предыдущее, с большим упором на программирование и меньшим на вёрстку и дизайн. Вообще, термин Developer (Engineer в меньшей степени) вместо Programmer, может означать что программирования будет меньше, а «всякой всячины» – больше. Кроме случаев, когда язык программирования указан явно (JS developer ~= JS programmer).

    JS Developer может означать и FullStack (см. ниже). В этом случае, компания, вероятно, планирует определиться с вашей специализацией позже – когда будут ясны ваши сильные и слабые стороны. Или же когда иные рабочие места распределятся. Поэтому, JS Developer почти всегда идёт в паре с Junior или Senior / Middle.

    FrontEnd SEO expert

    Редкая должность, на которой требуется оптимизировать HTML код согласно требованиям и пожеланиям поисковых систем (Google / Yandex). Специфические знания: микро-форматы, микро-разметка. Учитывая, что SEO вымирает и заменяется классическим маркетингом – рекомендую избегать всего, что содержит данный акроним. Если поиск работы не ваше хобби, конечно.

    FrontEnd Accessibility expert

    Упор на оптимизацию сайта под специальные ридеры (например, для людей с ограниченным зрением). Исключительно редкая должность. Занесена в Красную книгу. Встречается только на крупных проектах.

    FrontEnd Dev. Ops

    Должность для специалиста по вопросам сборки, автоматизации, интеграции фронт-енд приложений. Встречается, преимущественно, в крупных компаниях, т.к. подразумевает довольно узкий спектр задач. Актуальные знания: Webpack / Gulp / Grunt. Со временем, у вас начнут спрашивать чем вы, собственно, занимаетесь...

    FrontEnd Testing / QA

    Должность для специалиста по тестированию / контролю качества фронтенд приложений. Встречается в крупных и средних компаниях. Актуальные знания: юнит-тесты, функциональные тесты, A/B тесты, ручное тестирование и автоматизация. Коммуникативные способности входят в список требований.

    Многие люди ошибочно полагают, что «тестировщик» – более простая работа, чем «программист». Да, иногда встречаются вакансии где можно «кликать по ссылкам» и «составлять отчёты». Но это исключения.

    Заставить Selenium NightmareJS гулять по приложению, создавая скриншоты и выполняя регресионные тесты не так уж и просто. Ведь это, по сути, фуллстек разработка. Работа ведётся сразу в нескольких средах (Electron + Chromium) и требует хороших фундаментальных знаний.

    FullStack Developer / Engineer / Programmer

    Должность для эксперта по полному стеку веб-технологий. Подразумевает понимание клиент-серверного взаимодействия, опыт работы с базами данных, знание асинхронного программирования и др. Выбор серьёзно настроенных людей.

    FullStack делится на две категории: FullStack-JS и всё остальное. В первом случае, как несложно догадаться, на сервере и на клиенте используется JS. Во втором случае – на сервере используется Ruby / Python / PHP.

    Для начинающих, чтобы не распыляться между разными языками и платформами, настоятельно рекомендую отдавать предпочтение первому варианту (по возможности). Учить сразу несколько языков – работа на износ.

    FullStack JS предполагает использование феб-фреймворков на базе NodeJS. Это может быть монолитный фуллстек фреймворк (типа MeteorJS), реактивный бекенд с минималистичным клиентом (типа HorizonIO) или сборка из независимых библиотек (типа KoaJS + ReactJS). Все они имеют свои преимущества и недостатки.

    FullStack JS часто используется в приложениях реального времени: чаты (а-ля Slack / Gitter), финансовые приложения (масштабируемость, PayPal...), игровые сервера. Возможность пушить информацию на клиент (создавая риал-тайм) практически «из коробки» – основной двигатель роста этой технологии.
    Ответ написан
    Комментировать
  • Как сделать выпадающее меню при помощи div?

    Hyubert
    @Hyubert
    JS
    надеюсь я правильно понял

    codepen.io/anon/pen/yezKMv
    Ответ написан
    Комментировать