Михаил Р.

Сделайте макеты на 1920, 960 и 600px.
320-600 - для мобил
600-900 - планшетов
все что больше для ПК

media и viewport в помощь ))

Не совсем удачное название аргумента callback-функции в вызове (последняя строчка).

Вместоf(true, 500, callback => console.log(callback));
может, лучше

const myCallback = arg => console.log(arg);
f(true, 500, myCallback);

Завсит от цели, для чего это спрашивается.

Если чтобы поприставать с нубскими вопросами - то нигде.
Если чтобы почитать умных мыслей - РНР дайджест на Хабре прекрасно суммирует все, что было написано за две недели. У меня например никогда не хватает времени, чтобы прочесть всё. Куда больше-то - я уж и не знаю.
Если чтобы поучаствовать в серьезном прокете - на гитхабе, выбирай любой.
Если чтобы послушать интересные доклады и пообщаться вживую - то конференции.
Если интересует внутренне устройство языка - то php internals.
Если интересует, что пишут пхп селебрити про что угодно, кроме программирования - то твиттер (Расмус показывает картинки из аэропортов и роботов, которых собирает его сын, Сара постит котиков - и так далее).

Где точно не тусуются:
Тостер и всякие подобные ресурсы типа стаковерфлоя.
Ну то есть специалиста можно найти, если поискать, но концентрация будет гомеопатическая, если учитывать количество восторженных щеночков, которые увидели язык вчера, и спешат срочно поделиться уже накопленным багажом знаний.
Чаты. Телеграм, дискорд - вот это вот все.
Самая адовая трата времени, которая в принципе бывает в жизни.
Опять же, люди пишут о чем угодно, кроме программирования, и ради пары полезных строчек надо убить весь день.

then ждет на вход коллбек, т.е. функцию.
А вы ему пихаете промис, да еще и стартуете все эти промисы одновременно.

Если сделать так
.then(() => animation(2, 1000, log))
то animation выполнится, когда резолвится промис -> будет выполнен коллбек, в котором запускается следующая animation

Вы не понимаете, как работают промисы и JS. Это самая главная ошибка.

Попробую чуть-чуть объяснить.
fn(a,b,c).then(fn(k,m,n))
Вот так вы пишете. Что здесь происходит.
fn срабатывает и сразу же возвращает объект типа промис, в котором вы вызываете метод then. Этот метод принимает две функции - для успеха и для фейла. В качестве функции успеха вы указываете выражение fn(k,m,n). Окей, далее JS вычисляет это выражение, то есть буквально выполняет эту функцию и в качестве результата получает новый промис, который используется в качестве callback функции успеха для первого промиса.

Внимательно перечитайте документацию.
https://learn.javascript.ru/promise

Исправлением ошибки будет что-то вроде этого:

animation(1, 500, log)
    .then(e=>animation(2, 1000, log))
    .then(e=>animation(3, 2000, log))
    .then(e=>animation(4, "500", log));

Что бы Вы изменили в коде?

Все.

const uid = () => Math.random().toString(36).slice(2);

class App extends React.Component {
  state = {
    tasks: [
      {
        id: uid(),
        title: 'title',
        description: 'description',
      }
    ]
  };

  handleCreateTaskClick = () => {
    this.setState(state => ({
      tasks: [
        ...state.tasks,
        {
          id: uid(),
          title: 'title',
          description: 'description',
        },
      ],
    }));
  };

  render() {
    const { tasks } = this.state;

    return (
      <div>
        <button onClick={this.handleCreateTaskClick}>Добавить задачу</button>
        <ul>
          {tasks.map(task => (
            <li key={task.id}>
              id: {task.id} | {task.title} | {task.description}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    tasks: [
      {
        id: 1,
        title: 'title',
        description: 'description',
      },
    ],
  }

  createTask = () => {
    this.setState(({ tasks }) => ({
      tasks: [
        ...tasks,
        {
          id: 1 + Math.max(0, ...tasks.map(n => n.id)),
          title: 'title',
          description: 'description',
        },
      ],
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.createTask}>Добавить задачу</button>
        <ul>
          {this.state.tasks.map(({ id, title, description }) => (
            <li key={id}>id: {id} | {title} | {description}</li>
          ))}
        </ul>
      </div>
    );
  }
}

В рендер функции нельзя менять стейт. Это аксиома, надо запомнить.

P.S. Можешь обойтись без биндингов.

class App extends React.Component {

    constructor() {
        super();
        this.state = {
          prop: 1,
        }
    }

    stateChange = () => {
        this.setState({
          prop: this.state.prop + 1,
        });
    }

    render = () => {
        return <div>
            <p>{this.state.prop}</p>
            <input type="button" value="Обновить" onClick={() => {this.stateChange()}}/>
        </div>;
    }

}

ReactDOM.render(<App/>, document.getElementById('body'));

incProp = () => {
  this.setState(state => ({
    prop: state.prop + 1,
  }));
};

render() {
  return <button onClick={this.incProp}>...</button>;
}

Все есть в коде

Другое дело что это сделано реактивно

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

СЕО - не только работа по чеклисту, настройка тех. части и написание текстов, давно уже СЕО - совокупность работы маркетолога, программиста и дизайнера, ну и где-то там копирайтер, и самая ответственная работа тут у маркетолога-аналитика, который будет анализировать сайт, поведение и стараться сделать сайт лучше, составлять ТЗ на разработку новых компонентов, которые упрощали бы пользование сайтом, давали новый полезный функционал и, собственно, все то, что было бы необходимо для того, чтобы посетитель нашел ответы на все его вопросы, иными словами сделать так, чтобы сайт с ним "говорил" не хуже манагера-консультанта в магазине.

Это такой продукт, который можно улучшать бесконечно.

Заходите на страницу с объявлением и ищите это:

<span class="show-phones" id="tm-telephone-body" data-url="/a/ajaxPhones?id=28104015" data-id="28104015">
  Показать телефон
</span>

Далее берёте ссылку из атрибута data-url и выполняете запрос с заголовком XMLHttpRequest:

curl -X GET \
  'https://krisha.kz/a/ajaxPhones?id=28104015' \
  -H 'x-requested-with: XMLHttpRequest'

В ответ получаете:
["+7 707 892 8095"]

Забыли вызвать родительский конструктор в потомке: Construct1.apply(this, arguments);.

Это функциональный стиль.
Посмотрите про прототипный стиль тут https://learn.javascript.ru/prototypes