Сергей

https://scrollmagic.io/

есть вот ui-kit https://wiredjs.com/

ещё нарыл такую штуку https://bootswatch.com/sketchy/

Проще всего display: grid + подложка на svg и медиа-запросами переключать подложки.

Делегирование, назначаем обработчик клика один раз:

// при клике по кнопке определяем её индекс и хватаем .photos__like-count с таким же индексом
document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('photos__like-icon')) {
    const index = [...document.querySelectorAll('.photos__like-icon')].indexOf(t);
    const counter = document.querySelectorAll('.photos__like-count')[index];
    const count = counter.textContent;
    counter.textContent = t.classList.toggle('active') ? -~count : ~-count;
  }
});

// но если у каждой пары icon-count если отдельный общий предок, то можно и попроще сделать
document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.photos__like-icon')) {
    t
      .closest('селектор общего предка кнопки и элемента с количеством')
      .querySelector('.photos__like-count')
      .textContent -= t.classList.toggle('active') ? -1 : 1;
  }
});

Назначаем обработчик клика каждой кнопке индивидуально:

const toggleLike = function({ target: t }) {
  this[t.dataset.index].innerText -= [ 1, -1 ][+t.classList.toggle('active')];
}.bind(document.querySelectorAll('.photos__like-count'));

document.querySelectorAll('.photos__like-icon').forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', toggleLike);
});

// или, при наличии отдельных общих предков у каждой пары .photos__like-icon и .photos__like-count
const toggleLike = ({ target: t }) => t
  .closest('селектор общего предка кнопки и элемента с количеством')
  .querySelector('.photos__like-count')
  .innerText -= t.classList.toggle('active') ? -1 : 1;

for (const n of document.querySelectorAll('.photos__like-icon')) {
  n.addEventListener('click', toggleLike);
}

Давайте сначала про дороговизну )

Как правило, найти сильного разработчика, работающего на себя, за которым не нужен отдельный проджект-менеджер, аналитик в помощь и тестировщик, это редкость и если рассматривать индивидуальных разработчиков, то сейчас сильные фронтендеры, которые обладают достаточным объемом как технических, так и коммуникационных навыков, зарабатывают в районе 170-250к до вычета налогов в компаниях, где за них платят еще и страховые и пенсионные отчисления и где они имеют оплачиваемый отпуск. За эти деньги такой разработчик работает условные 8 часов (по факту, 6 - это обычно максимум) в день в течение 248 рабочих дней. При этом, у работодателя у него есть еще 28 дней отпуска, что уменьшает количество рабочих дней до 220, практически не уменьшая сумму его зарплаты.

Соответственно, опытный разработчик, который разбирается в рынке, запросит как минимум 170000 * 12 / 220 = 9272 руб/день, а более уверенный в себе - все 13636 руб/день, что является вилкой от 1159 руб. до 1704 руб (или от $18 до $27) в час при 8-часовом рабочем дне (а при 6-часовом от $24 до $36), что для мирового рынка является достаточно низкой ставкой для таких услуг. Эту сумму вы можете считать некой планкой качества, ниже которой риски взаимодействия с недостаточно опытным разработчиком существенно возрастают.

Теперь по вашему вопросу: разработчикам с такой ставкой интереснее работать на зарубежных заказчиков и продвигаться на upwork.com им, вероятно, будет комфортнее, чем работать на российском рынке. Я сам много лет работал на апворке и по себе, например, могу сказать, что на заказы со ставкой >$35 уже обращал внимание. Моя гипотеза в том, что $25-35 это нижняя планка, за которую можно найти разработчика и искать лучше именно там (хотя есть и другие биржи, но делюсь своим личным опытом) и именно там они обитают и я слышал много историй успеха (и в т.ч. был ей), где люди и компании находили очень достойных исполнителей. Важный момент только брать проверенных исполнителей с хорошими отзывами.

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

С уважением,
Иван Томилов
CEO of Athanor

Из документации:

(attr) Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

(prop) Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

В адаптации Google Translate:

"(attr) Получите значение атрибута для первого элемента в наборе согласованных элементов или установите один или несколько атрибутов для каждого согласованного элемента."

"(prop) Получите значение свойства для первого элемента в наборе согласованных элементов или установите одно или несколько свойств для каждого согласованного элемента."

Собственно вот и вся разница: первый метод читает/устанавливает значение атрибута элемента (Мержевич по теме), а второй - свойство объекта представляющего элемент. Если вкратце, то разница в том, что они из разной среды: атрибут это термин HTML - вы устанавливаете его в разметке и значение атрибута как-то обрабатывается, влияя на какие-то свойства элемента. А свойства это значения относящиеся непосредственно к DOM объекту элемента.

Например, class, один из самых привычных атрибутов для тега, в элементе представлен свойством className. Если у тега нет атрибута class, то у самого элемента есть свойство className, которое содержит пустую строку. Ну и соотвественно задать класс элементу можно либо изменив атрибут class с помощью attr, либо изменив свойство className с помощью prop.

Издержки печатной верстки:

• Чтобы набралось число страниц делимое на 4.
  
• Чтобы очередная глава началась с правой страницы.
  

1. Адекватность и самостоятельность.
Детальнее: Умение понять суть задачи, чтобы выполнить ее. Самостоятельно решать проблемы - в это слово входит не только то, что возникла проблема - порешал. А умение решить проблемы, которые ты решить не можешь. То есть организовать решение проблемы. Заблочили аккаунт? Выяснить, вызвонить, попинать, чтобы разлочили побыстрее. Не знаешь как решить какую-то техническую проблему - достучаться до куратора. Не сидеть и ждать три дня, пока он вспомнит про твою проблему, а регулярно уточнять. Занят куратор - подойти к другому. Не успеваешь решить в срок - прийти к куратору заранее, а не за час до конца срока.
В общем, чтобы за тобой не бегали.

2. Умение ставить правильные вопросы.
Сперва загуглить, потом задать вопрос для уточнения. В идеале ставить вопросы, на которые ответ будет "да" или "нет", но это я утрирую. Не бояться спрашивать вещи, которые совсем не понимаешь, но тут не нужно ожидать что все будут разжевывать - следует задать вопрос, чтобы понять куда копать. Иногда достаточно знать пару ключевых слов, по которым можно загуглить.

3. Желание учиться.
Не бояться изучить лишнее, потому что "мне же это не пригодится". Умение гуглить по ключевым словам. Не лениться изучать как что-то работает, чтобы понимать почему это происходит. Понимание принципов работы очень сильно увеличивает интуицию.

Решение найдено
https://codepen.io/anon/pen/xopBZw


блок сверху светло-фиолетовый (фон добавила для наглядности, так разумеется он прозрачный) это :before
со стилями:

{  
  min-height: 20px;
    max-height: 80px;
    flex-grow: 8;
    width: 100%;
}

т.е. от текста до верхней и нижней границы блока .box (тот, что с розовым border) одинаковое расстояние (стрелки) вне зависимости от количества текста, если нет переполнения.
При переполнении верхний блок сжимается

теряется обратная совместимость между версиями - меняем первую цифру
добавляется новый функционал - меняем вторую цифру
исправляются баги - меняем третью цифру

.block {
  $this: &;

  color: red;
  
  &__element { font-size: 12px; }

  &:hover &__element { transform: scale(1.1); }

  @media () {}

  //==
  //== Модификация какая-то
  //== ==========================

  #{$this}_mod {
    color: green;
    &__element { font-size: 16px; }
    @media () {}
  }
  #{$this}__mod:hover &__element { transform: scale(1.1); }

  //==
  //== Другая модификация
  //== ==========================

  &_mod { background: yellow; }
  @media () {}
}

Советую обратить внимание на курсы, которые я указал ниже.
Обучение
• Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
• ru.learnlayout.com
• htmlacademy.ru/program
• w3schools.com
• flexbox.ninja
• Карта развития веб-разработчика

Видеокурсы HTMLAcademy
• htmlacademy «Базовый HTML и CSS»
coursehunters.net/course/bazovyy-html-i-css-18-2017
• htmlacademy «Продвинутый HTML и CSS»
coursehunters.net/course/prodvinutyy-html-i-css-po...
• htmlacademy «Профессиональный HTML и CSS Уровень 1»
coursehunters.net/course/professionalnyy-html-i-cs...
• htmlacademy «Профессиональный HTML и CSS Уровень 2»
coursehunters.net/course/professionalnyy-html-i-cs...

Справочники
• htmlbook.ru
• webref.ru
• developer.mozilla.org/ru/

Выполнение заданий
• flukeout.github.io (изучение селекторов в CSS)
• flexboxfroggy.com/#ru (изучение flexbox в CSS)
• flexboxdefense.com (изучение flexbox в CSS)
• dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
• cssgridgarden.com/#ru (изучение gridbox в CSS)

Задачи для практики:
• htmlbook.ru/practical

Макеты для практики:
• drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
• freebiesbug.com/psd-freebies/website-template/
• symu.co/freebies/templates-4/
• dcrazed.net/free-photoshop-psd-website-templates/

Вместо того, чтобы вручную переключать классы каждого блока, сделаем функцию, которая будет принимать блок в качестве параметра и выполнять все необходимые действия:

function toggleClasses(block) {
  const info = block.querySelector('.infoWrapper');
  block.classList.toggle('marginBottom10');
  block.classList.toggle('marginBottom120');
  info.classList.toggle('displayNone');
  info.classList.toggle('displayBlock');
}

Подключение отдельных обработчиков клика к каждой кнопке заменим одним делегированным обработчиком, а вместо ручного перебора всех блоков просто будем искать открытый:

document.addEventListener('click', function(e) {
  const block = e.target.closest('.blockSvg');
  if (block) {
    const prevBlock = document.querySelector('.blockSvg.marginBottom120');
    if (prevBlock && prevBlock !== block) {
      toggleClasses(prevBlock);
    }

    toggleClasses(block);
  }
});

В результате, объём кода сократился на два порядка.

Ну и конечно, надо перевёрстывать, потому что вот это вот "подправляем положение блоков" - позорище какое-то.

На js можно просто offsetLeft элемента сравнивать с offsetLeft следующего, если больше, то это последний в строке.
Примерно так:
https://codepen.io/anon/pen/aPPbGV

var yourButton = $('Ваша кнопка');
var lastScrollTop = 0;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   st > lastScrollTop ? yourButton.hide() : yourButton.show();
   lastScrollTop = st;
});