Alams Stoyne

Я долго мучался с iOS решение такое:

<video autoplay loop muted playsinline preload="yes" poster="poster/1.jpg">
				<source src="video/1-test.m4v" type="video/mp4">
			</video>

Пример работы тут - переключение видео на 1-2-3

"Не боги горшки обжигают" (с)
То что тебя поразило называется WebGL штука красивая но бесполезная на мой взгляд (видимо старею наигрался).

С какого места подступиться:
1) Математика
2) Физика
3) Программирование

Читать основы
есть различные библиотеки, но для создания подобных шедевров лучше писать своё под себя.

Ну и не забывай про необходимость 3D-моделирования ;)

В этом посте описан процесс разработки игры на чис...

Всё проще:

$('select').selectize({
  allowEmptyOption: true,
  create: true
});
var cloneID = 1;
$(document).on('click', '.btn-clone', function(e) {
  e.preventDefault();
  var lastRow = $(this).parents('.b-parent').find('.b-items').last();
  cloneID = lastRow.find('select').size();
  var newRow = lastRow.clone().insertAfter(lastRow);
   newRow.find('select').each(function(e) {
   	cloneID++;
   	$(this).attr("id","select-"+cloneID);
   });
});

Тоже долго подбирал решение, у меня работает (на любых устройствах включая ios) так:

<video autoplay="" loop="" muted="" playsinline="" preload="yes" poster="poster/1.jpg">
<source src="video/1-test.m4v" type="video/mp4">
</video>

Размеры высоты и ширины - задавал через css

Стили к ссылкам №1 - если я правильно понял задачу

.nav-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;    
    margin-top: 2%;
    border: 1px solid #e7e7e7;
    background: #f3f3f3;
    list-style: none;
    height: 2.5rem; 
}
.nav-menu li{
  display: flex;
  flex : 1 1 auto;
  height: 2.5rem;
}

.nav-menu a {
    margin: auto 0;
    text-transform: uppercase;
    color: #c8c8c8;
    text-decoration: none;
    font-size: .875rem;
    text-align: center;
    width: 100%;
}
.nav-menu li:hover,
.nav-menu li:hover a{
    color: #fff;
    background: #29c5e6;
}

Стили к ссылкам №2
- отлавливай наведение у общего родителя объектов и применяй стиль

.links {
    width: 100%;
    height: 50px;
    background: #f3f3f3;
    border-bottom: 1px solid #e7e7e7;
}
.links ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 15px;
    List-style: none;
}
.links ul li a {         
    display: block;
    text-decoration: none;
    color: #8f8f8f;
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: 300;
}
.links span {
    margin-right: 10px;
    padding: 0 10px;
    width: 24px;
    height: 24px;
    background: #8f8f8f;
    color: #fff;
}
.links ul li:hover a {
    color: #29c5e6;
}
.links ul li:hover span {
    background: #29c5e6;
    color: #fff;
}

У стрелок нет изображений это SVG
icn-arrow-l-light

<svg class="icn-arrow-l-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 24">
	<path d="M12 0L0 12l12 12"></path>
</svg>

icn-arrow-r-light

<svg class="icn-arrow-r-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 24">
	<path d="M0,24l12-12L0,0"></path>
</svg>

Например так:

<button id="minus"></button>
<input type="text" id="number" val="0">
<button id="plus"></button>

document.getElementById("minus").addEventListener("click", function( event ) {
        var num_input = document.getElementById("number");
        var num_input_val = document.getElementById("number").value;
        num_input.value = num_input_val--;
}, false);
document.getElementById("plus").addEventListener("click", function( event ) {
        var num_input = document.getElementById("number");
        var num_input_val = document.getElementById("number").value;
        num_input.value = num_input_val++;
}, false);

Как-то так например:

setInterval(function(){  
	$.ajax({
	      url: '../core/remote_ip.txt',
	      success: function(data) {
			$("#txtIP").val(data);
	      }
	});
}, 1000);

Если задача что бы эффект увлечения фото не пропадал при наведении на #описание то добавь правило для элемента с классом "rubric"
pointer-events: none;
Но учти что тогда и на клик элемента с классом "rubric" перестанет реагировать (но это не беда так как судя по коду картинка тоже является ссылкой )

$('.sf-box').each(function(){	
	$(this).addClass('item-li-'+$(this).find('li').length);
});

Или так:

.ya-share2__list_direction_horizontal {display: flex; width: 100%;}

.ya-share2__item {
    height: 32px !important;
    width:  20%!important; 
    margin: 0!important;
}
.ya-share2__link, .ya-share2__badge{
height: 32px !important; 
  width: 100%;
  display: flex!important;
  justify-content: center;
}

"Опыт получается только в боевых условиях, всё остальное теория." (с)

На мой взгляд есть 2 пути научиться:

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

П.с.: с такими возможностями по времени Вы мало перспективный "падаван", но на вас могут сбрасывать рутину, проверять её и тем самым вы будете прокачивать свой скилл.

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

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