NeKt0

Вертел я такие задания при устройстве на работу.
Однажды тоже устраиваясь в "крутую" контору прислали большое задание. Все выходные убил на него. Потом еще две недели мурыжили собеседованиями и в итоге не взяли.
Я с тех пор никогда не соглашаюсь на тестовые задания, которые займут больше получаса моего времени.
Объемные задания должны оплачиваться. Если они очень требовательно отбирают сотрудников, то сначала надо дать простое задание/прособеседовать и уже если человек их устраивает, давать объемное задание и платить.

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

body {
font-family: 'PT Sans Caption', sans-serif;
font-size: 11px;
line-height: 120%;
font-weight: normal;
text-decoration: underline;
letter-spacing: 0px;
font-style:normal;
}

Все остальное дизайнер пусть оставит себе.

Если же это какая-то единичная каллиграфия (1-2 слова), то возможен вариант вставки картинкой (пожалуй отдельная история).

1) Не делайте отступы блокам через  , есть же padding/margin
2) Забудьте о float: left в тех местах, для которых он не предназначен. Для создания сетки используйте flex/css grids
3) Делайте осмысленные названия классов и идентификаторов у элементов. У вас куча container1, container2 и.т.д.
4) Не используйте position: absolute, где не нужно явное абсолютное позиционирование (у плавающих блоков например).
5) Соблюдайте семантику. Заголовки должны быть в h1-h6 тегах.
6) Не забывайте добавлять атрибут alt для всех картинок img
7) У вас на сайте везде (вроде везде) используется шрифт "Trebuchet MS", но задаете вы его для элементов каждый раз, хотя можно было задать глобально для body
8) Блок "ГАЛЕРЕЯ" не по центру.
9) У вас соц-иконки в футере выровнены очень странно. Иконка insta имеет очень странный отступ от левого края, который видимо предназначается для выравнивания всего блока с иконками. Сделайте контейнер

.container {
   width: 100%;
   max-width: 1040px;
   padding: 15px;
   margin: 0 auto;
}

и в него кладите элементы, которые должны быть внутри сайта. У вас через странный отступ почти все отпозиционировано. Посмотрите чужие работы, как люди делают разметку. Вы пока слабо представляете, как это все происходит.
10) Вы должны адаптировать не только под маленькие и средние экраны, но и под большие, с шириной 2560px. Не нужно делать под них широкий сайт, просто нужно делать так, чтобы на них сайт тупо не уходил влево, а был по центру.
11) Куча повторяющегося кода в css

.footer>.footer_img>.vk{
    margin: 5% 0 0 1%;
	display: inline-block;
}
.footer>.footer_img>.twitter{
    margin: 5% 0 0 1%;
	display: inline-block;
}
.footer>.footer_img>.facebook{
    margin: 5% 0 0 1%;
	display: inline-block;
}

12) Освойте БЭМ (или другую методологию). Код будет чище и проще.
13) Сайт не адаптивный абсолютно, имеется только один media запрос, и тот только для изменения шрифта у документа. Посмотрите на другие сайты, как они адаптируются.

Это основное, но список можно продолжать долго. По коду можно судить, что вы учились по старой литературе, выбросите ее. Смотрите как верстают другие, ковыряйте макеты, читайте умные статьи и сайты, тренируйтесь часто, и все будет ок.

Никакой. Изучайте разработку ПО, языки программирования, построение архитектуры ПО, алгоритмы, математику и т.д и т.п.

UPD
Приведу немного аргументации и очевидных вещей для тех, кто не понимает почему ответ именно такой. На самом деле все очень просто: в IT индустрии всё развивается и меняется очень, очень-очень быстро. И как следствие возникает проблема устаревания знаний и умений. Вот например 15-20 лет назад изучение языка программирования под названием "Дельфи" и популярной тогда его среды разработки для десктопных приложений вполне имело смысл и было популярным явлением, т.к. оно тогда довольно широко использовалось, или например Perl для создания сайтов. А где оно сейчас? Почему сегодня сайты пишутся на джаваскрипте? А как на счет десктопных приложений? А ведь те же десять лет назад попробуй скажи такое — как бы область деятельности не пришлось менять. И вот такое происходит просто с языками программирования за довольно короткое время. А основа любого CMS, фреймворка и иже с ними — это как раз таки язык программирования. И вот за время жизни языка программирования в нём случаются новые стандарты, изменения и прочее, а популярное ПО на нём переписываются десятки и сотни раз. Т.е., изменчивость продуктов какого либо языка зависит как от самого языка так и от его популярности. И чем они выше — тем чаще что-то меняется. Из всего этого вытекает очень логичный вывод: в долгосрочной перспективе выгоднее те знания, которые не устареют как можно дольше. И вот тут как раз таки знания разработки ПО и языков программирования, построения архитектура, алгоритмы и прочее имеют наибольший срок устаревания. А уж сколько тысяч лет математике можно и не вспоминать. А она, кстати именно благодаря стремительному развитию IT тоже развивается очень быстрыми темпами. Так вот, при наличии вот таких фундаментальных знаний можно легко и быстро осваивать любые новые фреймворки, CMS, языки программирования и прочее. А уж при наличии подробных мануалов, гугла, форумов и прочего большинство задач сводится тупо к вбиванию "как сделать YYY в ZZZ" в строке поиска (я вот например никак не могу понять ход мыслей людей, которые задают вопросы на форумах и прочих ресусах, ответ на которые выдается в первых же строчках гугла, складывается впечатление, что они вообще первый раз в интернете и про гугл не знают вообще ничего).
Если есть желание именно в изучении CMS — ставим себе задачу и решаем её используя разные CMS, далее выбираем наиболее понравившуюся и пользуемся пока не надоест или не устареет. А после — повторить.

Немного перефразирую сам вопрос и соседний популярный ответ:
— Каким инструментом учиться пользоваться начинающему строителю?
— Учись использовать молоток и гвозди, леса полно, доски везде используются.
Вот только строительство — это не одни только доски, в которые забиваются гвозди, а еще архитектура, сопромат и иже с ним, экстерьер, интерьер, отопление, освещение, канализация, вентиляция и ещё куча всего. Аналогично и во всех остальных областях, в том числе и web разработке.

С опытом пришло понимание, что должно быть вот так:

1) Идёшь в бухгалтерию, берешь там список имущества, которое числится на тебе / на отделе, проходишь по всем -- сверяешь, вплоть до старой гарнитуры, всё должно сойтись. Лицензии на ПО точно также. Ты должен в любой момент времени точно сказать -- где, что и сколько у тебя стоит, сколько на складе, что ты заказал, что пришло и то ли пришло. Для бухгалтерии это всё коробочки с лампочками. ОБЯЗАТЕЛЬНО! должны биться серийные номера. Если их нет требуй присвоить инвентарный. Даже на картридже для принтера. Если условная Света из логистики принесла свою мышь, у тебя должно быть это отображено. Всё с парком машин происходить только с твоего ведома.
Не бойся обращаться к руководству -- оно оценит, что ты экономишь их деньги.
Всё, что ты выдаешь -- выдавай под роспись. Это дисциплинирует.

2) Схема сети. Видеонаблюдение и телефония. Как нарисованная, так и WeatherMap в Cacti. Многие ей пренебрегают, почем зря. Ты всегда должен знать что у тебя происходит с каналами связи. Все вланы, все адреса, местоположение должно быть отражено и подписано. Все стойки и шкафы должны быть сфотографированы, так чтобы было чёткое понимание, что-куда-зачем.
Поверь, в случае аварии тебе это очень сократит время на восстановление.


3) Маркировка оборудования. Всё, нет не так -- ВСЁ!!! должно быть подписано. Все розетки, все патчи. Вообще всё!

4) Делаешь себе локальную вики, пох на чем и пишешь туда АБСОЛЮТНО всё. Как настроить порт на коммутаторе, набор основных команд, диагностика, версия прошивки, какая-то основная конфигурация. Бэкапы конфигурации храни в текстовом виде, не доверяй всяким .cfg, как настроить vlan на микроте, как поднять VPN до соседнего офиса.
Тебе это очень сильно сократит время, особенно некоторые операции надо проводить довольно редко.

5) Пиши скрипты для рутины. Скрипты тоже должны быть в вики.
Допустим обновить 5 коммутаторов или поправить ACL ненапряжно. А если их 50? 150?

6) В вики не должно быть ни одной ссылки на сторонние ресурсы. Завтра страница переедет, а ты на нее надеялся.

7) У тебя должны быть контакты всех поставщиков услуг, что касается твоего отдела: провайдеров, заправщиков, инженеров, горсетей, номера договоров, и прочая херня Если что-то случилось, ты должен очень быстро получить ответы, а не ждать на горячей линии. Держи контакты актуальными.

8) Чтобы это всё имело хоть какой-то смысл -- трать 1 час в день, чтобы заняться документацией. Иначе всё это херня.

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

React interview questions and answers

https://flexboxfroggy.com по флексам
https://cssgridgarden.com по гридам
Очень прикольные сервисы по изучению в игровой форме

Открыл вопрос и из монитора хлынул поток воды, так что сразу к вопросам:

Какое оборудование (модели) ставить на уровень доступа, распределения?

Да Микроты ставьте, если прокачаться хотите. В качестве свитчей - HP, например. Можно и D-Link, не слушайте диванных кукаретиков.

Как делать - 4 коммутатора на все устройства (в шкафу), или же по одному на этажах и центральный в серверную?

Всё в шкаф, чтоб потом не бегать по этажам и не искать причину поломки.

Как нарезать vlan? По этажам? По кабинетах?

По кабинетам геморройно, я бы вообще ничего не делал, сеть-то маленькая.

Так и не знаю делать ли интернет розетки или нет)

По уму - надо бы сделать всё грамотно, с нуля, с перфорацией, кабель-каналами и маркировкой, но лично я бы этим занимался, если бы зарплата шла от 70+ тыр минимум без последующих уменьшений и увольнений.

А, да, и AD бы всё-таки настроить и DNS с DHCP на Windows Server зарулить.

Результат на JQuery: https://codepen.io/semzhukov/pen/ZEzPyVM

потому что в строке

let products = obj.data

вы по сути в products вставляете ссылку на obj.data

а в строке

products = []

вы заменяете эту ссылку на другую

при этом содержимое

obj.data

тоже ссылка, и она остается прежней.

другими словами: если вы записали на листок телефон своей девушки а потом найдя другую девушку, про старую решили забыть и зачеркнув ее номер написали номер новой девушки то прежня девушка никуда не исчезла? она ведь по прежнему сидит на своем номере телефона и ждет вашего звонка? (в данной ситуации products и есть этот листок с номером ))))

ЗЫ: был несколько невнимателен, не достиг моего мозга последний абзац вашего вопроса. Ответили вы верно.

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () { // Корень проблемы здесь.
    // Ты обьявляешь (не вызываешь!) в цикле анонимную функцию. При создании эта функция получает
    // ссылку на внешнее лексическое окружение, которым, в данном случае, является тело цикла for.
    // Когда функция вызывается, в своем лексическом окружении i она не находит, и продолжает поиск
    // во внешнем. К моменту вызова, цикл завершен, и i в его лексическом окружении равна thumbnails.length
    fullPhoto.src = photos[i];
  });
}