Mary Солнечная

Надо добавить блоку #news
position:relative; z-index:1;
а картинке:

position: relative;
 z-index: -1;

Тыц

теперь css такой:

.clearfix:after{
  content:'';
  display:table;
  clear:both;
}
#news a{
  display:block;
}
#news {
  float: left;
  width: 100%;
  height: 300px;
  background: #3E3E3E;
  position: relative;
  z-index: 1;
}

#news article {
  width: 400px;
  height: 250px;
  margin: 15px;
  box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);  /*Тень*/
}

#news article img {
  width: 400px;
  height: 250px;
  position: relative;
  z-index: -10;
}

#news article h1 {
  position: absolute;
  top: 190px;
  left: 15px;
  font-size: 1.1em;
  color: #FFF;
}

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

стоило заглянуть в sourses, а тааам... чудеса! :)

//gradient animations
    var colors = new Array(
        [62,35,255],
        [60,255,60],
        [255,35,98],
        [45,175,230],
        [255,0,255],
        [255,128,0]);

    var step = 0;
//color table indices for:
// current color left
// next color left
// current color right

// next color right
    var colorIndices = [0,1,2,3];

//transition speed
    var gradientSpeed = 0.002;

    function updateGradient()
    {

        if ( $===undefined ) return;

        var c0_0 = colors[colorIndices[0]];
        var c0_1 = colors[colorIndices[1]];
        var c1_0 = colors[colorIndices[2]];
        var c1_1 = colors[colorIndices[3]];

        var istep = 1 - step;
        var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
        var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
        var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
        var color1 = "rgb("+r1+","+g1+","+b1+")";

        var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
        var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
        var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
        var color2 = "rgb("+r2+","+g2+","+b2+")";

        $('#gradient').css({
            background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
            background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

        step += gradientSpeed;
        if ( step >= 1 )
        {
            step %= 1;
            colorIndices[0] = colorIndices[1];
            colorIndices[2] = colorIndices[3];

            //pick two new target color indices
            //do not pick the same as the current one
            colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
            colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

        }
    }

    setInterval(updateGradient,10);

});

Не на codepen, но типа таво. Это один из многих вариантов верстки такого блока
Тыц

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

а вы инициализировали сам плагин карусельки?

типа таво:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Создаете родительский блок, вокруг которого будут несколько дочерних:

<div class="content_wrap">
    <div class="content_box">
         <i></i>
         <span>Признание</span>
     </div>
<div class="content_box">
         <i></i>
         <span>Отношение</span>
     </div>
</div>
<div class="content_box">
         <i></i>
         <span>Самосовершенствование</span>
</div>

и т.д.

Родительскому - position: relative
Дочерним - position: absolute и вертите их и переставляйте как вам надо

Внутри дочерних у вас идет иконка и текст. Делаете внутренности блочными элементами, выравнивайте по центру и они сами встанут куда надо

1. Каким образом лучше и продуктивнее продвигаться в освоении? Сидеть за книгами или верстать из шаблонов все подряд поглядывая в htmlbook или гулять по ютубу в поисках видео?

Да! Много верстать

2. Есть какой-либо смысл покупать "индивидуальные курсы"?

на htmlacademy хорошие курсы. Там есть бесплатные уроки, а потом платные. Посмотрите, может вам понравится бесплатные и вы захотите платные купить, там все интерактивненько и интересненько. Мне лично бесплатных хватило, просто так, для интереса)

3. Конечно же советы от себя.

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

Совет № 1 - не бойтесь пользоваться новыми штуками, но все с умом.
Совет № 2 - найдите наставника. Иногда помощь человека соображающего очень нужна. Он и ревью сможет сделать, и тукнуть чо почитать надо, где потренироваться, а то и пендаля даст. Главное - не задалбывать.

Удачи вам!