Владимир Проскурин

Вы видимо гуглите на русском. На английском по запросу "free psd" куча сайтов с современными макетами. https://freebiesbug.com/psd-freebies/ https://www.freepik.com/free-psd/web-templates

Ну, прячьте в стилях все блоки (или все, кроме страны по умолчанию, например России). И в этом условии пишете

if (ymaps.geolocation.country == 'Россия') { // Если сделать Россию по умолчанию, этот блок условия можно убрать
   document.getElementById('RU').style.display = 'block';
}
else if (ymaps.geolocation.country == 'США') {
   document.getElementById('US').style.display = 'block'; 
}

Ну или класс добавляете "visible" и в стилях его определяете в .visible { display: block; }

Не используйте сторонние онлайн сервисы для проверки адаптивности (если они правда не предоставляют реальную виртуальную машину), т.к. они просто имитируют маленький экран. С этим лучше справляется встроенная функция инструмента разработчика в хроме


Скорее всего ваш сервис неправильно устанавливает ширину экрана. Верьте хрому.

Если правильно понял

// Функция проверки вхождения текущего часа в отрезов от from до to (не включительно)
function isHourRange(from, to) {
   var now = new Date();
   var curHour = now.getHours();
   return curHour >= from && curHour < to;
}

if(isHourRange(0, 9)) {
   $('.ageWindow').fadeIn(100);
}

Все правильно получается. Ведь он возвращает позицию символа в переданной строке, а второй аргумент не режет строку, он просто задает начало писка в нужного символа, он не повлияет на возвращаемое значение (только на поиск). Получаете вы именно номер символа в вашей строке.
UPD:
По поводу

'Синий кит'.indexOf('', 9); // вернёт 9
'Синий кит'.indexOf('', 10); // вернёт 9

Тут ситуация в том, что номер начала поиска больше или равен длине строки (в котором ищем). А по спецификации, если искомая строка имеет нулевую длину, а начальный индекс поиска больше или равен длинны исходной строки, то всегда возвращается начальный индекс поиска. Если вы сделаете так:
'Синий кит'.indexOf('C', 10);
То искомая строка уже не с нулевой длинной, и если начальный поиск больше или равен длине строки, то по спецификации всегда возвращается -1.

Надеюсь правильно объяснил, если что, спрашивайте.

Так имеете ввиду? https://jsfiddle.net/jct8gq1r/1/

На #page-content задается min-height, в файле custom.js на строчке 40

$('#page-content').css({
    'min-height': page_height
})

Уберите этот код, у вас и так высота слайдера устанавливается самим слайдером.

Куча людей просили сделать возможность убрать кнопку закрытия https://bugs.chromium.org/p/chromium/issues/detail... но разработчики сказали "нет". В Firefox есть что-то подобное. В Vivaldi (он на базе хромиума) есть такой параметр в настройках

Ну так у вас используется плагин smoothState.js для перехода по страницам без перезагрузки страницы. В блоке #page-transitions находится контентая часть, которая уникальная для каждой страницы, поэтому она подружатся динамически. Остальное не меняется, а значит скрипт заново не выполняется (можете посмотреть в F12, кусок со скриптом не меняется при переключении страниц).
Попробуйте засунуть скрипт в блок #page-transitions тогда он будет выполняться.

nastya_zholudeva, видимо у вас импорт вот так выглядит
import getApiToken from './file'
В таком случае он импортирует все из export default {api_config, setApiToken, getApiToken}
Пишите так
import { getApiToken } from './file'

И уберите default в экспорте
export {api_config, setApiToken, getApiToken}

Как-то так. https://jsfiddle.net/ch51d9mh/
Добавил туда кнопки, которые будут выполнять действия (т.к. в jsfiddle не реализовать многостраничность). Кнопка "Сделать акции прочитанными" выполняет функцию setReadStock, которая запоминает номер последней просмотренной акции. Вторая кнопка просто добавляет акции, ее можете удалить, т.к. как я понял, акции у вас добавляются на сервере.

<div class="stock">
  <div class="stock__item" data-id="1">Акция 1</div>
  <div class="stock__item" data-id="2">Акция 2</div>
  <div class="stock__item" data-id="3">Акция 3</div>
</div>

<div class="count-actions">
  <p>
  Непрочитанных акций <span class="count-actions__value">0</span>
  Последняя прочитанная акция <span class="count-actions__read">0</span>
  </p>
</div>
<div class="buttons">
  <input type="button" class="buttons__item" value="Сделать акции прочитанными" id="set_read">
  <input type="button" class="buttons__item" value="Добавить акцию" id="add_stock">
</div>

// ID последней сохраненной акции
function getLastSaveStockID() {
  var stockId = getCookie('last_stock_id');
  if(stockId === undefined) {
     return 0;
  }
  return stockId; 
}
// ID последней выведенной акции
function getLastStockID() {
  var ids = $('.stock__item').map(function() {
    return this.dataset['id'];
  }).toArray();
  return Math.max.apply(null, ids);
}
// Количество акций, у которых id больше last_id
function getStockCount(last_id) {
  return $('.stock__item').map(function() { 
   if(+this.dataset['id'] > last_id) {
      return this;
   } 
  }).length;
}
// Делать все акции прочитанными
function setReadStock() {
  var last_id = getLastStockID();
  var last_read_id = getLastSaveStockID();
  if(+last_id > last_read_id) {
  	setCookie('last_stock_id', last_id);
  }
}
// Добавление акции
function addStock() {
  var last_id = getLastStockID();
  var new_id = last_id + 1;
  $('.stock').append('<div class="stock__item" data-id="' + new_id +'">Акция ' + new_id + '</div>');
  printCountStock();
}
// Отображаем кол-во новых акций
function printCountStock() {
  var last_id = getLastSaveStockID();
  var stockCount = getStockCount(last_id);
  
  jQuery('.count-actions__value').html(stockCount);
  jQuery('.count-actions__read').html(last_id);
}
// При загрузке страницы выводим кол-во новых акций.
printCountStock();
 
document.getElementById('set_read').addEventListener('click', function() {
  setReadStock();
  printCountStock();
});
document.getElementById('add_stock').addEventListener('click', addStock);

// Установка кукисов
function setCookie(name, value, options) {
  options = options || {};

  var expires = options.expires;

  if (typeof expires == "number" && expires) {
    var d = new Date();
    d.setTime(d.getTime() + expires * 1000);
    expires = options.expires = d;
  }
  if (expires && expires.toUTCString) {
    options.expires = expires.toUTCString();
  }

  value = encodeURIComponent(value);

  var updatedCookie = name + "=" + value;

  for (var propName in options) {
    updatedCookie += "; " + propName;
    var propValue = options[propName];
    if (propValue !== true) {
      updatedCookie += "=" + propValue;
    }
  }

  document.cookie = updatedCookie;
}
// возвращает cookie с именем name, если есть, если нет, то undefined
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.

родителю задайте text-align: center

Что может лучше практиковать навыки чем реальные задачи? Берите макеты и верстайте.

Ну на CSS селекторы есть вот такая штука https://flukeout.github.io/
Есть вот такая крутая штука для флексов www.flexboxdefense.com https://flexboxfroggy.com/#ru https://cssgridgarden.com/#ru

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

Сделать dev сборку, в которой не будет производится минификация. Она же вам нужна только для отправки на продакшн, а во время разработки можно использовать не сжатые скрипты (так даже легче отлаживать в браузере). т.е. пишите в консоли
gulp build --env development
И получаете для разработки, без минификации. Если так
gulp build --env production
То с минификацией.
Вот эта штука поможет https://www.npmjs.com/package/gulp-environments и тогда просто замените на

var environments = require('gulp-environments');
var development = environments.development;
var production = environments.production;
.....
.pipe(production(uglify()))

Самый простой способ, сравнить строку со строкой наоборот. Например было "строка", а вторая строка "акортс", и если они равны (нужно сравнивать в нижнем регистре toLowerCase), то слово палиндром, если нет, то не палиндром.
UPD: Также можно обрезать пробелы, чтобы третий пример работал.

Мне кажется по логике, строка состоит из 2-х под-строк, и если в одной строке только одна под-строка, то эта строка должна быть по центру. Например если будет всего 4 дива, то последний див (который должен быть справа) не должен быть по центру, т.к. в каждой строке по 2 под-строки.
Примерно так https://codepen.io/VladIT4/pen/OZpOjb

toJson импортируется из
impor { toJson } from "unsplash-js";
UPD:
Вот код этой функции

function toJson(res: Object): Object {
  return typeof res.json === "function" ? res.json() : res;
}