Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Облака: ожидание vs реальность
Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос

Илья Ерофеев

  • 133
    вклад
  • 0
    вопросов
  • 111
    ответов
  • 28%
    решений
Лайки
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как ускорить вёрстку?

    Артур Карапетян @architawr
    "Ok, Google" и все твои проблемы решены
    1) SASS и сетку для него(типа bootstrap)
    2) GULP для компиляции , а также его LiveReload и AutoPrefixer, и BrowserSync с его локальным сервером, и Bower (закачка либ)
    3) GIT
    4) Emmet
    5) BEM (БЭМ)
    6) Используйте gist от github
    Ну и прямые руки
    Ответ написан более трёх лет назад
    16 комментариев
    Нравится 25 16 комментариев
  • Как ускорить вёрстку?

    taki154 @taki154
    Для быстрой и оперативной верстки использую gulp с плагинами и препроцессорными плюшками:

    - jade (сейчас больше известен как pug) - html-шаблонизатор, синтаксис простой и понятный, поддерживает циклы, инклюды, примеси, переменные, условия и пр. использую как препроцессор и из него генерирую статичные страницы, верстаю в нем.
    - less - тут даже говорить нечего, любой css-препроцессор для разработки и скорости при умелом использовании подойдет лучше писанины на нативном css;
    - далее, до кучи всякие автопрефиксеры, минификаторы, лайврелоды, браузерсинк и прочее.

    ВАЖНО:
    если вы никогда не работали в среде npm, для легкого и понятного старта вы можете воспользоваться сервисом quenchjs.com, который сделает всю грязную работу за вас. Там есть конфигуратор, выбираете что надо и качаете архив. Ставите себе node.js, и дальше в папке, куда распаковали архив из командной строки- npm install. После того, как все пакеты будут установлены, перезапускаете в этой же папке терминал и пишите волшебную команду "gulp". И будет вам счастье. Это если совсем в двух словах. Поверьте, все это перевернет ваш опыт верстальщика и поднимет скиллы на новый уровень! Дерзайте! :)
    Ответ написан более трёх лет назад
    1 комментарий
    Нравится 8 1 комментарий
  • С какой книги стоит начать изучать html5 и css3?

    Иван @Za0r
    pop()
    1)Идешь на htmlacademy.ru и проходишь все бесплатные курсы.
    2) На этом пункте,невольно задаешься вопросом,как тебе использовать эти знания. Смотришь как верстать простейший макет https://www.youtube.com/watch?v=vFjRVugE030 на float.
    3)Проходишь все платные курсы.
    4) Читаешь https://www.ozon.ru/context/detail/id/22435909/ эту книгу. Можешь найти на просторах в инете.
    5) Берешь самостоятельно простенький макет и верстаешь его на флексах и адаптивно( на этом пункте будешь знать что это.
    6) Читаешь https://www.ozon.ru/context/detail/id/137213400/ .
    7) На этом этапе ты знаешь что существуют предпроцессоры,и хочешь изучить,советую https://youtu.be/H4cG4tbc-xQ для знакомства.
    8) читаешь такое и присматриваешь что учить дальше:
    1) glivera-team.github.io/how-to/2016/05/02/how-to-st...
    2)https://coggle.it/diagram/52e97f8c5a143de239005d1b...
    3)https://github.com/zualex/devmap
    4)blog.flppv.me/all/frontend
    5)https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    6)krekotun.ru/ui-developer-skills.html
    7)Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?
    8)webmasters.teamdev.com/#html

    9) Дальше думаю сам разберешься,Удачи!
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 57 Комментировать
  • Как влиться в тренд нынешней веб-разработки?

    Олег Драпеза @SuperOleg39ru
    Front-end разработчик
    Добрый день!

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

    flexbox, grid layout
    - это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
    Немного о новинках в css тут.
    Поддержка браузерами тут.

    gulp, webpack и пр.
    - это инструменты, которые созданы для облегчения рутинных задач.
    Для верстки очень удобно использовать gulp - вы описываете задачи, такие как создание локального сервера, мгновенная перезагрузка страницы при изменениях, минификация ваших файлов, и прочее.
    Посмотрите отличный скринкаст от Ильи Кантора!

    препроцессоры
    - представьте, что вам чего-либо не хватает в html и css.
    Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
    Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
    Популярный шаблонизатор Pug
    Один из css-препроцессоров Stylus

    пакетные менеджеры
    - это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

    Ну и конечно статьи и подкасты:
    https://habrahabr.ru/
    jsraccoon.ru

    https://soundcloud.com/web-standards
    https://radiojs.ru/

    Конкретные статьи и ресурсы для новичка:

    frontender.info/a-baseline-for-front-end-developers
    frontender.info/a-guide-to-flexbox
    css-live.ru/articles-css/pravilnye-kontrolnye-toch...
    https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    https://habrahabr.ru/company/zfort/blog/321214/
    https://frontendmasters.gitbooks.io/front-end-hand...

    Дерзайте!
    Ответ написан более трёх лет назад
    6 комментариев
    Нравится 86 6 комментариев
  • Где можно найти видео разработку проектов с использованием JS?

    kn1ght_t
    kn1ght_t @kn1ght_t
    https://www.livecoding.tv/videos/javascript/
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 5 Комментировать
  • Какую дать задачку начинающему javascript разработчику?

    vicodin
    Anton Filippov @vicodin
    Имею некоторый опыт
    Заставьте его апнуть kyu 2-3 на codewars.com
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 3 Комментировать
  • Ruby: "Дорожная карта", пoмoгите составить?

    Freika
    Eugene Burmakin @Freika
    Ruby on Rails developer
    codenamecrud.ru готовый роудмап, сразу с уроками и ссылками на материалы. можно заниматься по ним, можно просто взять за основу заголовки уроков и искать информацию самостоятельно.
    Ответ написан более трёх лет назад
    1 комментарий
    Нравится 3 1 комментарий
  • Где можно найти больше информации по CSS-анимациям?

    27cm
    Антон Захаров @27cm
    TODO: Написать статус
    Разбирайте как можно больше отличных примеров:
    codepen.io/search/pens?q=CSS+3D
    codepen.io/search/pens?q=css3+animation
    codepen.io/search/pens?q=css3+transform
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 5 Комментировать
  • Psd без фотошопа?

    zorro76
    sergey @zorro76
    К выше всему перечисленному, добавлю assets.adobe, очень удобный инструментарий для верстальщика, причем разделение по слоям, описание стилей css, цветовая гамма сайта, размеры, шрифты, работа с svg и сохранением img непосредственно в проект. Очень удобно и практично и бесплатно, получил ID Adobe и пользуйся.
    Ответ написан более трёх лет назад
    3 комментария
    Нравится 11 3 комментария
  • Только начал учить javascript как понять?

    EreminD
    Дмитрий Еремин @EreminD
    Кое-что умею
    //javascript такой: хоба! Функция, которая принимает на вход один параметр 
    //и возвращает результат в виде х*х.
    //Пожалуй, я ее запомню, потом, может, пригодится
    var square = function(x) { return x*x; }; 
    
    //потом javascript такой: ага, надо че т в консоль вывести (то, что в скобках). 
    //А че в скобках? Итить-мадрить, это ж та самая функция, котораю я прост запомнил. 
    //Надо ее вызвать и на вход подать 12. Тогда мне вернется 12*12 и это я выведу в консоль.
    console.log(square(12));
    
    //огонь


    А если понятнее, то вот
    Ответ написан более трёх лет назад
    7 комментариев
    Нравится 19 7 комментариев
  • Как дизайнеру быть в курсе возможностей верстки (html/css) и javascript?

    bootd
    Дима Турков @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Ответ очевиден. Начать верстать. Хотя бы малость. Я понимаю, это сложно, лениво, за то ваш скил, станет очень крутым. Попробуйте записаться на курс в html академии. А так же, постоянно спрашивать и спрашивать разработчиков, но после, проверять, а то многое могут вам наврать, что бы не пришлось потом делать)))

    А так же искать для себя ресурсы, где разработчики выкладывают различного рода приколюхи и эффекты на css, js.
    Читать новостные ресурсы, на подобие хабра и css live, css tricks.

    Вот пример сайтов, где есть клёвые реализации всяких эффектов:
    https://codyhouse.co/
    tympanus.net/codrops

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

    По поводу js, хз, по мне так - это сложный вопрос. Вам особо не нужно его знать, ибо он не делает магии. Наверно вам, как дизайнеру, нужны будут от js только 3 вещи.

    1) Работа с svg - анимации тоже делаются при помощи js
    2) Работа c canvas - эта штука работает только при помощи js
    3) Ajax - вы должны представлять, что это такое и как вы можете им воспользоваться. Но не грубите

    Учить то, как пишется это на js вам не нужно, но знать, что он может, для вашей работы, нужно!

    И на последок caniuse.com/. Этот сервис скажет вам о поддержке браузерами различных возможностей. По типу поддержке css свойств. Вбиваете свойство в поиск и смотрите, как оно поддерживается браузерами. Пример
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 6 Комментировать
  • В каком виде предоставляют файлы при сдаче проекта?

    sayber
    Sergej @sayber
    Да, я программирую на PHP и еще асинхронно!
    Обычная структура проекта по верстке которая сдается клиенту.
    Исходники в assets, компилированные и сжатые файлы в public.

    • assets
      • sass
      • js
      • jade
      • media
    • public
      • css
      • js
      • img
      • index.html
    • package.json
    • gulpfile.js
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать
  • Анонимный поиск работы какие площадки вы используете?

    TriKrista @TriKrista
    djinni.co
    Ответ написан более трёх лет назад
    2 комментария
    Нравится 8 2 комментария
  • Верстка из PSD макета. Как правильно верстать?

    delphinpro
    Сергей delphinpro @delphinpro Куратор тега CSS
    frontend developer
    1) руководствуясь здравым смыслом
    2) можно, руководствуясь здравым смыслом
    3) очевидно, что каждой единице измерения - своё место.
    4) это контрольные точки. дизайнер дает вам понять, как должно все работать. в этих точках, как правило, верстка должна соответствовать макету. остальное - руководствуясь здравым смыслом.
    Ответ написан более трёх лет назад
    1 комментарий
    Нравится 2 1 комментарий
  • Не могу разобраться с иконками, поможете?

    Wheelie @Wheelie
    fortawesome.github.io/Font-Awesome/examples
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 3 Комментировать
  • Как менять css-стили в зависимости от размера окна, но без использования медиа-запросов?

    paulradzkov
    Павел Радьков @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Есть техника эмуляции одного брейкпоинта через min-width, max-width и calc.
    Этот «брейкпоинт» зависит от размеров контейнера, а не от ширины окна — идеально для виждетов.

    codepen.io/paulradzkov/pen/NNgVEO — вот пример.
    https://medium.freecodecamp.com/the-fab-four-techn... — вот статья с описанием принципа работы.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 6 Комментировать
  • Как лучше всего подключать svg иконки на сайт для последующего использования через use?

    Максим @AlBandito
    Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет.
    На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались.
    Сейчас опишу, как я делаю.
    1) Создаем JS файл с inline SVG. К примеру, такой
    // Тут хранятся иконки в SVG
    var icon = '
    <svg style="display:none;">\
      <defs>\
        <symbol id="header-phone" viewBox="0 0 850.394 850.394">...</symbol>\
      </defs>\
    </svg>';    
    // Вставляем иконки в HTML        
    document.getElementById('svg-icon-placeholder').innerHTML = icon;

    2) Создаем в HTML пустой div с id svg-icon-placeholder. В него мы и будем вставлять SVG
    3) Юзаем через use :)
    Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)
    Ответ написан более трёх лет назад
    6 комментариев
    Нравится 4 6 комментариев
  • Какие есть обучающие ресурсы по фронтенд разработке?

    edward04
    rd96 @edward04
    Начинающий ninja frontend
    https://www.youtube.com/channel/UC7enHM_oJRYJOnyJr...
    https://www.youtube.com/channel/UCZeU17nbVfzczAkJV...
    https://www.youtube.com/channel/UCHHw70vvbfyM6xJQo...
    https://www.youtube.com/channel/UCIIt69f5D44s2cdb9...
    tohtml.it/post/74511047203/markup-process

    По нему скучаю искренне и иногда сижу на подоконнику с лате и смотрю на капли дождя, стекающие по стеклу:
    https://www.youtube.com/channel/UCdnFX7mzgup9moXG2...
    Это для общего развития:

    https://stepic.org/course/%D0%90%D0%BD%D0%B0%D0%BB...

    Похожий вопрос:
    Какие задачи нужно уметь выполнять на JS начинающему?

    Ваша библия:
    https://developer.mozilla.org
    Можно докинуть еще:
    webref.ru
    htmlbook.ru
    Просто случайная ссыль
    https://docs.google.com/document/d/1kehaJKKRo7zxYp...
    Еще одна:
    https://github.com/ihorzenich/html5checklist
    Еще какая то штука
    https://github.com/dypsilon/frontend-dev-bookmarks
    Лучшие практики тостеровцев
    Как вы начинаете вёрстку сайта?
    Инструменты
    fredsarmento.me/frontend-tools

    После пары часов выпускания пара из ушей, включить на всю громкость и хоть как то отвлечься от этой жизни
    https://www.youtube.com/channel/UCY0C6A3t3RTUN3BB6...

    На freecodecamp.com неплохо алгоритмы можно потренить

    Ну и конечно
    learn.javascript.ru

    PS
    еще это
    Какие ресурсы с новостями по web-разработки вы знаете?

    PSPS
    Не отвечаю за качество контента под ссылками, может кое что уже outdated.

    https://vk.com/video79753760_171233585

    Удачи, брат
    Ответ написан более трёх лет назад
    4 комментария
    Нравится 61 4 комментария
  • Есть сайты для общения начинающих программистов, или что-то подобное?

    yokotoka
    Andrey Kobyshev @yokotoka
    Python guru
    Вот здесь есть реальная движуха по теме: slack-ru.hexlet.io
    Уже почти 4000 разрабов и сочувствующих тут тусят.
    Ответ написан более трёх лет назад
    2 комментария
    Нравится 8 2 комментария
  • Как стать более менее верстальщиком за месяц?

    isquariel
    isqua @isquariel
    Научу HTML, CSS, JS, BEM и Git
    Записаться на интенсивный курс по вёрстке. Он длится чуть больше месяца, в результате у вас будет свёрстанный от и до макет. Если у вас уже есть какие-то разрозненные знания, они придут в систему, и вы научитесь применять их на практике.

    Перед интенсивом рекомендую пройти бесплатные курсы. Не будете на интенсиве тупить на мелочах. И рекомендую немного поизучать git.
    Ответ написан более трёх лет назад
    2 комментария
    Нравится 1 2 комментария
Оценили как «Нравится»
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • Следующие →
Самые активные сегодня
  • Василий Банников
    • 12 ответов
    • 0 вопросов
  • sergey-gornostaev
    Сергей Горностаев
    • 8 ответов
    • 0 вопросов
  • galaxy
    • 6 ответов
    • 0 вопросов
  • saboteur_kiev
    Saboteur
    • 6 ответов
    • 0 вопросов
  • opium
    Пума Тайланд
    • 6 ответов
    • 0 вопросов
  • solotony
    Antonio Solo
    • 5 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации