Дмитрий

Я тоже считаю, что дизайн дело практики или таланта
Нужно просто иметь выработанный вкус, чувство стиля
Этому не научат на курсах

Сделал вот так

var acc = document.getElementsByClassName("event-accordion-item");
var i;
 
for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");
    var fas = this.querySelector('.eventAccordion-icon');
    if(fas.classList.contains("fa-plus-circle")){
      fas.classList.remove("fa-plus-circle");
    }
    else{
      fas.classList.add("fa-plus-circle");
    }
        fas.classList.toggle("fa-minus-circle");
    
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
       panel.style = 'margin-top: 0px; margin-bottom: 0px';
    } else {
       panel.style = 'margin-top: 25px; margin-bottom: 25px';
      panel.style.maxHeight = panel.scrollHeight + "px";

    } 
  });
}

Я начал с вёрстки. Сейчас изучаю js. С декабря того года активно учусь.
Фронтендеру обязательно знать вёрстку, без нее не будет понимания основ

Пример рабочей карусели
Попробуй просто заменить картинки на свои и запустить

<div class="carousel slide" data-ride="carousel" id="slides">
		<ul class="carousel-indicators">
			<li data-target="#slides" data-slide-to="0" class="active"></li>
			<li data-target="#slides" data-slide-to="1"></li>
			<li data-target="#slides" data-slide-to="2"></li>
			<li data-target="#slides" data-slide-to="3"></li>
		</ul>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img src="img/slider/1.jpg">
				<div class="carousel-caption">
					<h1 class="display-2">Программирование</h1>
					<h3>Научитесь программировать</h3>
					<button type="button" class="btn btn-ounline btn-lg btn-white">
						Подробнее
					</button>
					<button type="button" class="btn btn-warning btn-lg">
						О нас
					</button>
				</div>
			</div>

			<div class="carousel-item">
				<img src="img/slider/2.jpg">
				<div class="carousel-caption">
					<div class="container-fluid">
						<div class="row juistify-content-start">
							<h1 class="design__headline"><span>3D</span> Design</h1>			
						</div>	
					</div>
					
			
				</div>
			</div>
			<div class="carousel-item">
				<img src="img/slider/3.jpg">
			</div>
			<div class="carousel-item">
				<img src="img/slider/4.jpg">
			</div>
		</div>
	</div> <!--end карусель-->