Акмалжон Тожибоев

document.addEventListener("click", (e) => {
    let currentId = "";
    if (e.target.classList.value === "playing-field-item") {
        currentId = e.target.id;
    }
    console.log(currentId);
})

Попробуйте так:

function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false 
  });
  done();
}

на sass :

.pipe(browsersync.stream())

Вот Вам пример
jsfiddle.net/LsMEU

добавьте в success и все заработает

setTimeout(function() {  
      $('select').trigger('refresh');  
    }, 1)

Зеленая это select, а не section. Тут использован именно этот тег, потому что элемент принадлежит к форме поиска на сайте. И при запуске поиска будет автоматически считано состояние этого переключателя.

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

npm uninstall -g gulp

Доброго дня!

Никакой критики, я только поддерживаю вас. И ниже три совета.

1) Респект вам за решимость постигать программирование и фронтэнд в частности.
2) Не слушайте тех, кто говорит о критичности работы в офисе для скорейшего проф. развития. Да, это основной вариант, если у человека плохо с самообучением, т.е. он просто не может собраться и сам изучать дисциплины, гуглить, яндексить, задавать вопросы на спец. ресурсах. Это явно не ваш случай. Поэтому, если брать во внимание отсутствие тяги к высокой массовой доли беспредметных разговоров в офисах, и желание оставаться собой, т.е. интровертом, все хорошо. В будущем, если захотите, и коммьюнити найдете и поспорить о технологиях сможете, и даже вещать, будучи каким-нибудь евангелистом ))
3) Предлагаю такой роадмэп на ваше рассмотрение: у вас сейчас только один лэндинг, поэтому сделайте еще один-два хороших проекта для себя, создайте хороший сайт-портфолио, найдите в своем городе еще пару-тройку заказов на лэндинги/сайты-каталоги. Положите и их в портфолио. Тогда можно будет обновить резюме везде, в том числе и на hh.ru и на МоемКруге, в поле "О себе", кроме указания на высокую мотивированность, хорошо бы, если есть, упомянуть про свои смежные компетенции (дизайн интерфейса, психология, бэкэнд, математика и пр.). Кстати, на том же hh.ru вполне можно найти работу в удаленном формате для Junior. Есть довольно много небольших и неизбалованных контор, на которых "продвинутые ребята" не обращают внимания. И они просматривают отклики таких специалистов, как вы (т.е. как вы после вышеописанного). И этот путь недолгий, т.к. у вас уже есть, как понимаю, довольно много навыков.

Удач! *___*

Полифил это хорошо, но работает он весьма медленно, поэтому лучше стараться не полифилить такие вещи.
Для фоллбека до процентов можно использовать простую конструкцию:

width: 100%;
width: 100vw;
height: auto;
height: 100vh

Если браузер знает vw \ vh, то предыдущея строчка перекроется. Если не знает, будет использовать первую с процентами \ auto.

Самый правильный вариант — с помощью clip-path, потому что с его помощью безо всякого вращения можно обрезать по формуле блок сверху и снизу. При этом, можно использовать значения по типу calc(100% - 50px), чтобы при изменении ширины экрана, область «скоса» всегда равнялась, как в значении выше, 50 пикселям, что упрощает совмещение нескольких таких блоков с помощью отрицательных margin'ов ( margin: -50px 0; ).

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

Одна проблема — поддержка clip-path со стороны браузеров. Вот пример реализации такого подхода: proappliancerepair.com. У меня не стояло задачи поддерживать старые браузеры, поэтому использовал clip-path смело.

Серьезные заказы никогда не приходят сразу. Никто не доверит что-то солидное новичку без вменяемого и большого портфолио и высокого рейтинга.

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

Плюс всегда нужно стараться повышать свои шансы максимально. Учить английский, пилить свои проекты для портфолио, пытаться попасть на серьезные биржи вроде Toptal.com и т.д.

https://jsfiddle.net/g57okvdn/

Если без фреймворка, а просто верстка по макету, то:

• Emmet - быстрый кодинг html и сss
  
• less - переменные для шрифтов, вложенность селекторов или бэм-нейминг.
  
• flexbox - для сетки, расположения элементов и респонсива.
  
• autoprefixer - добавление css-префиксов
  
• Imagemin-pngquant - для сжатия картинок
  
• gulp - для сборки вышеперечисленного
  
• slick - карусели и слайдеры
  
• remodal - модалки
  

Если использовать фреймворк, например, bootstrap, то быстрее будет работать с исходниками бутстрапа и потом собрать их:

• переопределить переменные
  
• подключить нужные js-скипты из коробки
  
• подключить нужные less-стили
  
• собрать это всё галпом
  

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

Вкратце, полноценный клиентский разработчик должен знать:
– html5/css3 + bootstrap
– один-два препроцессора (less/stylus)
– чистый js и пару-тройку клиентских библиотек или фреймворков (knockout/backbone/angular/react)
– немного node.js, чтобы уметь пользоваться пакетным менеджером (npm) и билд-менеджером (gulp/grunt)

Этот список покрывает большинство клиентских задач в средней студии или стартапе.

В реальности, от разработчика требуется только одно – уметь быстро накостылять какую-нибудь фичу к релизу, который должен был быть вчера. Собственно, если внимательно посмотреть на список, который я привел, можно заметить, что все эти вещи направлены на максимально быструю разработку – тут костыль, там костыль – и в продакшн. Как бы ни пытались нагнать пафоса на собеседовании, в бою будет именно так.

Другой вопрос – что со всем этим делать.

Я обычно предлагаю попытаться начать свой маленький проект. Какой-нибудь простенький личный сайт, игру на js (тот же flappy bird или 1048 – много ума здесь не нужно). Посложнее – свою тему или библиотечку. Это будет хорошим практическим опытом, который не стыдно описать в резюме.

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

Если говорить о личном опыте, то я неплохо подтянул js с помощью codewars – задачки начинаются от самых простых (преобразование строк, перебор массива), до очевидно тяжелых (собственные интерпретаторы и преобразование данных изображения).

А вот попытка спихнуть на верстальщика UI/UX – это уже экономия со стороны отдельных контор, которые по какой-то причине не хотят нанимать отдельного дизайнера/проектировщика в штат или по контракту. Тут, к сожалению, придется мириться и смотреть статьи по теме – тот же GoodUI.

Вы наверное слышали, что каждый уважающий себя программист обязан написать несколько велосипедов? И JavaScript-программисты тоже так делают и еще как! Так вот в этом нет ничего плохого, это отличное самообучение.

Для начала заходите на любой каталог плагинов для JavaScript или jQuery. Находите интересный, не очень сложный на вид плагинчик (например карусель, лайтбокс, слайдер и т.п.) и пытаетесь сделать похожий, только лучше. Поначалу будет выходить черти что, но, это будет уже реальная задача, где вы начнете сталкиваться с реальными особенностями языка. Вот тут то знания и начнут обретать какую-то структуру у вас в голове.

Не пытайтесь брать сразу сложные вещи, начинайте с малого. Как заметили выше, не смотрите пока что на очень сложные книжки, их читать сейчас почти бесполезно.