• Какое видео посмотреть по вёрстке?

    @bogomazov_vadim
    Посмотри у Юрия Артюха. У него были стримы, как он верстает макеты в риалтайме. Ну и в принципе у него есть что посмотреть.
    Ответ написан
    Комментировать
  • Как верстать 18 колоночный макет?

    @esvlad
    Веб-разработчик
    В чём проблема? Верстай не колонками, меньше проблем, больше управляемости. Заказчика убеди, что на 1024 будет УГ, а не сайт, пусть дизы делают макет на 1024 нормальный и 640(320) для мобилок, для таких сайтов обычно просят ещё макет на 1366 (ведь тексты никуда не денешь), припомни им, что на планшетах есть ещё и книжный режим на 768 и меньше, как тогда сайт должен выглядеть?, если агрятся и цена меньше 100k шли их куда подальше, сэкономишь нервы.
    Ответ написан
    2 комментария
  • Как создать сайт типа пикабу?

    samodum
    @samodum
    Какой вопрос - такой и ответ
    Ребят, пользуясь случаем хочу спросить, как мне сделать сайт типа Авито. Ну или Яндекс.Маркет - не особо важно.
    Главное, чтобы денег заработать.
    Какую мне библиотеку скачать для этого?
    Ответ написан
    2 комментария
  • Сколько стоит час веб-разработчика-фрилансера?

    @deliro
    Ты веcь такой кругом молодец, то знаешь, это знаешь. А теперь представь себе среднестатистический проект, который должен приносить бизнесу деньги. За две недели работы ты едва напишешь хлипкий CRUD для данных, неправильно смаппив бизнес-сущности в объекты ORM, ещё через месяц натянешь какой-то слайдер на jQ, попутно захватив 2мб JS кривых библиотек, а через два заказчик поставит тебе плохую оценку, потому что твой ценник он оплатил не за то, что ему нужно, а потому что ты знаешь монады, которые ему даром не сдались.

    А теперь давай представим простого программиста. Из алгоритмов он с трудом вспоминает сортировку пузырьком, а двусвязный список — предел его знаний о структурах данных, и даже этим списком он пользовался два раза в жизни. Хаскель он никогда не видел в глаза, C++ учил только в школе, вместо этого пишет неэффективный код на PHP. И у него есть опыт. За день он распишет сущности, за второй сделает универсальный CRUD, на третий день поднимет фронт на React'е с SSR. Да, внутренности проекта будут "медленными". Вместо O(logN) что-то будет выполняться за O(N) или даже O(N^2), но всем похер. Пока всё работает на приемлемом уровне — бизнес радуется.

    Кстати, к чему эта поучительная лапша? Я хотел сказать, что всеми этими модными словами можно пугать друзей и преподавателей, но в реальной жизни все алгоритмы уже реализованы, все типы данных уже подобраны оптимально. Знать их полезно для себя (чтобы мозг не атрофировался), но не для работы. Для работы тебе нужны такие навыки как:

    * Оптимальный баланс между говнокодом и идеальным кодом
    * Оптимальный баланс между скоростью разработки и оптимизацией кода
    * Оптимальный баланс между поддерживаемым кодом и костылями
    * Умение использовать те инструменты, с которыми ты работаешь. Опять же, для того, чтобы писать быстро, при этом имея минимальное количество говнокода и обеспечивая максимальную поддерживаемость (в пределах сроков). Например, можешь выкинуть в помойку свой Vim, как бы круто ты себя не чувствовал, разрабатывая в консольном редакторе, если продукты от JetBrains позволят за это же время сделать что-то лучше или чего-то больше
    * Чувство "знаю больше менеджеров". Это то чувство, когда тебе кажется, что "вот эта фича скоро изменится" и надо сделать архитектуру заранее более гибкой. Или "вот эту фичу мы через месяц выпилим" и не надо тратить на неё силы — напиши костыль и через месяц с чистой совестью удали его
    * Знания, как сделать ту или иную фичу. Потому что фичи повторяются (немного видоизменяясь) от проекта к проекту. И если ты сделал что-то за два дня, в следующий раз ты похожее сделаешь за три часа

    Что касается инструментов, выбери любой полноценный фреймворк, который умеет решать 90%+ потребностей "из коробки": Symfony, Django, Laravel

    Всякие "минималистичные" поделия вроде Falcon, Flask (в PHP не знаю, я на питоне пишу) оставь хипстерам. Пусть они говорят: "Мой фалкон такой быстрый, он написан на Cython". Тебя это не должно волновать, потому что бизнес с твоей скоростью разработки уже заработал достаточно денег, чтобы купить ещё десять серверов, пока фалконисты неделю гуглили, как прикрутить миграциии и запустить юнит-тесты на VPSке за пять баксов.
    Ответ написан
    5 комментариев
  • Как создают подобные сайты?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    WebGL, Three.js, Vertex & Fragment Shaders... + Canvas + mindblowing fantasy + analytics and math skills.
    Поищите на YouTube: Юра Артюх.
    Ответ написан
    Комментировать
  • Примеры хорошей верстки?

    vicodin
    @vicodin
    Имею некоторый опыт
    посмотрите видеоролики Юрия Артюха, у него хороший стиль, есть нюансы, но они незначительные
    Ответ написан
  • Почему многие компании пишут web-приложения на Java, а не на Node или php?

    @4tlen
    Если ты пишешь на джаве, клиент с меньшей вероятностью соскочит: "никто" за ту же цену что и ты не станет поддерживать и развивать проект.
    Ответ написан
    Комментировать
  • Как сделать анимацию трансформирующую один элемент в другой?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

    По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


    С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
    Комментировать
  • Как быстро и эффективно прокачать скилы в верстке?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    танцы с бубном... прокачать навыки верстки максимально быстро и при этом достаточно углубленно... Главное - результат и время.


    Был в похожей ситуации. Могу сказать, что очень полезно порисовать картинки с помощью CSS (если не сталкивались - сходите на CodePen, там это дело очень полюбили). Звучит глупо, но тем не менее такая деятельность помогает очень быстро освоить те свойства CSS, которые обычно все гуглят и не понимают. Это своеобразные "концентрированные" задачи на верстку. Если в одном макете 5 сложных моментов, то тут в одной картинке - 25.
    Ответ написан
    3 комментария
  • Кто знает простые альтернативы JQuery?

    VanillaJS, очень хороший фреймворк. Перешел на него с jQuery и всем советую.
    Ответ написан
    3 комментария
  • Что именно можно описывать в блоке, элементе и модификаторе при БЭМ?

    werty1001
    @werty1001
    undefined
    Все довольно просто:

    блок - это независимая и самодостаточная единица, например кнопка, ссылка, логотип, весь сайт это лишь набор блоков. В стили можно писать все (кроме отступов и позиционирования*).

    модификатор позволит добавить какие-то особенности блоку или элементу, для модификатора блока в стили можно писать все (кроме отступов и позиционирования*), для модификатора элемента можно все.

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

    *position, display, float, margin
    Ответ написан
    6 комментариев
  • Как сверстать такой элемент?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.
    Ответ написан
    1 комментарий
  • Не сталкивался с таким, нужно сверстать блок?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Сделай двумя картинками (или тремя).
    Каждая для своего медиа-запроса.
    Почему так?
    Потому что судя по тематике эскиза, этот сайт проживет полгода максимум, ты его ни в портфолио не добавишь, ни пользы он никакой не принесет никому...

    А от svg планшеты пухнут! Это все, что надо знать о svg.
    Ответ написан
    3 комментария
  • Это вообще люди делают?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Поделюсь с вами вот такой ссылкой:
    https://www.youtube.com/playlist?list=PLswdBLT9llb...
    Ответ написан
    1 комментарий
  • Научился создавать сайты, но не обладаю "дизайнерским взглядом", как его получить?

    delphinpro
    @delphinpro
    frontend developer
    Не согласен с предыдущими ораторами. Фронтэндер должен обладать хотя бы минимальным "чувством прекрасного". Также не согласен с тезисом, что "это либо дано либо нет".

    Возьмите книжек по UI и UX и просвещайтесь.
    Ответ написан
    10 комментариев
  • Как научится понимать Bitrix за один вечер?

    Maksclub
    @Maksclub
    maksfedorov.ru
    Найдите подходящий скринкаст на Ютубе
    Ни пуха ни пера вам -- для верстальщика это будет испытание:)
    Там не все так просто, как с обычными легкими цмс, у которых есть шаблоны

    Время на теорию у меня всего один вечер (а скорее всего ночь).

    Помимо Битрикса вам нужно изучить методологии разработки, в частности ФФФ, где подразумевается ТРЕЗВАЯ оценка и договоренность по времени с запасом, чтобы не планировать ВПРИТЫК (я молчу про дичайший дедлайн в один вечер), тк в ее основе лежит принцип:
    "Всегда пойдет все не так, как задумал, тк живем среди живых людей и что-то обязательно сдвинет сроки"

    - Пообещали сделать за вечер и сделали за вечер -- всего лишь выполнили обещанное (хотя вам это много стоило)
    - Пообещали за вечер и сделали за 3 -- вы облажались в 3 раза
    - Пообещали сделать за неделею и сделали за вечер или за 3 -- вы супер обслужили быстрее в разы и потрясли заказчика
    Выбирайте
    Ответ написан
    1 комментарий
  • Как сделать эффекты как на сайте примере?

    Есть такой канал Юрий Артюх, он проводит стримы как раз на тему анимации.
    Думаю у него вы найдете много чего полезного для выполнения этой задачи
    Ответ написан
    4 комментария
  • Возможен ли план самообучения WEB разработке?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Советов надавали, я накидаю ссылок:
    Веб-стандарты Этот канал интересен уже тогда, как основа заложена. Много полезных и интересных докладов.

    Дмитрий Лаврик Много бесплатных материалов, классные платные курсы, для новичков и для среднего уровня.

    HTML Academy Много хороших материалов для изучения

    Илья Кантор Много материала по JS

    Master-CSS Здесь я нашел много бесплатных видео по настройке разных плагинов, в общем, для старта отлично, но когда поймешь JS, то сам сможешь разбираться.

    Шпаргалка по jQ В голове такие вещи обычно не держу, что-то, что часто использую помню наизусть, а так - всегда подсматриваю.

    Learn JavaScript RUS Классный учебник по JS.

    CodePen и JSFiddle В процессе обучения важно на практике применять полученные знания. Каждый раз собирать файлы, шаблоны, подключать либы, настраивать сборщики и тд лениво, очень классно, что можно в браузере сразу все сделать и даже сохранить, расшарить.

    Webmassa SVG Видео по работе с SVG.

    Юра Артюх Классные стримы по созданию анимаций. WebGL, SVG, Canvas, CSS - все тут.

    StackOverflow Авторитетный ресурс по поиску решений.

    Документация MDN Документация от разработчиков Mozilla. Есть на русском. Вообще, надо научится читать и понимать документацию, так как знать все на все случаи жизни нереально, профи умеют искать и читать документации. Для этого надо бы подтянуть английский.

    W3C Specs, W3School - инфа из первых рук.

    Писал ссылки по мере попадания под руку)

    Успехов!
    Ответ написан
    Комментировать
  • Как заставить WebStorm автоматически заворачивать длинные строки?

    loratokareva
    @loratokareva
    html верстальщик
    я не помню с какой такой идеи я влепил птичку в View|Active Editor| Use Soft Wraps


    Долго билась с проблемой переноса длинных строк.
    Народ, вот оно!!!

    098c12011fbd4d368e2bf93f301ece00.jpg

    Всем добра)
    Ответ написан
    Комментировать