Creating an html Family Tree

asasass · November 2, 2021, 2:25pm

.container is called the parent

.inner-container is called what?

<div class="container play1 with-curtain">
		<button class="playa thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
          <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>
    </button>
		<div class="inner-container curtain curtain1">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="CHahce95B1g"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <g id="exit">
            <title>exit</title>
            <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
            <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
          </g>
        </svg>
      </button>
		</div>
	</div>

TechnoBear · November 2, 2021, 2:42pm

Child, if you are asking about its relationship to .container.

asasass · November 2, 2021, 3:25pm

In creating an Html family treee,

What is the .outer div called? https://jsfiddle.net/9L7tvqkn/

And did I do the rest right?

Did I make any mistakes?

<div class="outer">
  <div class="container play1 with-curtain">
    Parent
    <div class="inner-container curtain curtain1">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="CHahce95B1g">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play2 with-curtain">
    Parent
    <div class="inner-container curtain curtain2">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play3 with-curtain">
    Parent
    <div class="inner-container curtain curtain3">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play4 with-curtain">
    Parent
    <div class="inner-container curtain curtain4">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play5 with-curtain">
    Parent
    <div class="inner-container curtain curtain5">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame">Sibling</div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play6 with-curtain">
    Parent
    <div class="inner-container curtain curtain6">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play7 with-curtain">
    Parent
    <div class="inner-container curtain curtain7">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play8 with-curtain">
    Parent
    <div class="inner-container curtain curtain8">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container play9 with-curtain">
    Parent
    <div class="inner-container curtain curtain9">
      Child
      <div class="ratio-keeper">
        Child
        <div class="wrap">
          Child
          <div class="video video-frame" data-id="-Xgi_way56U">Sibling</div>
        </div>
        <div class="sliding-panels">
          Child
          <div class="panel-left">Sibling</div>
          <div class="panel-right">Sibling</div>
        </div>
      </div>
    </div>
  </div>
</div>

DaveMaxwell · November 2, 2021, 3:36pm

.outer is the parent element to the .container elements.
the .container elements are siblings within .outer
.container is the parent to inner-container
.inner-container is the parent to .ratio-keeper
.ratio-keeper, which is parent to .wrap and .sliding-panels

All relationships in html deal with either parent/child (one contained within another) or sibling (two elements within the same container), and are one level. It doesn’t deal further than that (or I’ve never seen defined relationships beyond that.

Semantic note, but the play# classes should probably be ids, not classes. Classes are meant to be repeated. Unique elements should be defined as ids (which I’m guessing the play# elements are - different styles, etc). The other option would be to define one play class with common traits, then apply nth stylings for occurrence specific styling.

asasass · November 2, 2021, 3:58pm

Do I have this right?
Would you add anything?

<div class="wrap">
.wrap, which is the parent to video

<div class="video video-frame" data-id="CHahce95B1g">
video, which is the child of .ratio-keeper and .wrap

</div>
</div>
<div class="sliding-panels">
.sliding-panels, which is the parent to .panel-left, .panel-right

<div class="panel-left">
.panel-left, which is the child of .sliding-panels

<div class="panel-right">.panel-right, which is the child of .sliding-panels
</div>

DaveMaxwell · November 2, 2021, 4:07pm

.video is the child of .wrap, not .ratio-keeper and .wrap.

Again, there are only parent/child and sibling relations. There are no grandparents, aunts/uncles, cousins. Not even any father’s brother’s nephew’s cousin’s former roommates

asasass · November 2, 2021, 4:30pm

I fixed it here: https://jsfiddle.net/nv5s694h/

Thank you for helping me understand it better.

<div class="outer">
  .outer is the parent element to the .container elements.<br><br>
  <div class="container play1 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain1">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play2 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain2">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play3 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain3">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play4 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain4">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play5 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain5">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play6 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain6">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play7 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain7">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play8 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain8">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="container play9 with-curtain">
    .container elements are siblings within .outer<br>
    .container is the parent to inner-container<br><br>
    <div class="inner-container curtain curtain9">
      .inner-container is the parent to .ratio-keeper<br><br>
      <div class="ratio-keeper">
        ratio-keeper, which is parent to .wrap and .sliding-panels<br><br>
        <div class="wrap">
          .wrap, which is the parent to video<br><br>
          <div class="video video-frame" data-id="CHahce95B1g">
            video, which is the child of .wrap
          </div>
          <br>
        </div>
        <div class="sliding-panels">
          .sliding-panels, which is the parent to .panel-left, .panel-right
          <br> <br>
          <div class="panel-left">
            .panel-left, which is the child of .sliding-panels
          </div>
          <br>
          <div class="panel-right">
            .panel-right, which is the child of .sliding-panels
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

asasass · November 2, 2021, 4:45pm

Were you saying that: <button class="playa thePlay"

Should be: <button id="playa thePlay"

instead?

Working Code: https://jsfiddle.net/gqf35tys/

<div class="outer">
	<div class="container play1 with-curtain">
		<button class="playa thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
          <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>
    </button>
		<div class="inner-container curtain curtain1">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="CHahce95B1g"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <g id="exit">
            <title>exit</title>
            <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
            <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
          </g>
        </svg>
      </button>
		</div>
	</div>
	<div class="container play2 with-curtain">
		<button class="playb thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain2">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play3 with-curtain">
		<button class="playc thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain3">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play4 with-curtain">
		<button class="playd thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain4">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play5 with-curtain">
		<button class="playe thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain5">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play6 with-curtain">
		<button class="playf thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain6">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play7 with-curtain">
		<button class="playg thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain7">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play8 with-curtain">
		<button class="playh thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain8">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
	<div class="container play9 with-curtain">
		<button class="playi thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
		<div class="inner-container curtain curtain9">
			<div class="ratio-keeper">
				<div class="wrap">
					<div class="video video-frame" data-id="-Xgi_way56U"></div>
				</div>
				<div class="sliding-panels">
					<div class="panel-left"></div>
					<div class="panel-right"></div>
				</div>
			</div>
			<button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
		</div>
	</div>
</div>

DaveMaxwell · November 2, 2021, 5:23pm

Nope, because that’s invalid. You can’t cascade ids like that.

What I’m saying is if you’re applying the same css style to multiple objects, then it should be a class. If you’re applying it to a singular, unique object, then it should be an id.

So referring back to your original code markup (please stop moving the goal posts by changing code markup…), my point is that this…

  <div class="container play1 with-curtain">
    Parent
    <div class="inner-container curtain curtain1">

should probably be something like

  <div id="play1" class="container with-curtain">
    Parent
    <div id="curtain1" class="inner-container curtain">

And your css styles would be then applied to the id’s instead

#play1 { font-weight: 700; }
#curtain1 { border: 1px solid red; }

And that’s if you’re even applying a style to that class/id. If you’re not, or you don’t have javascript looking for those identifiers, do you even need them at all?

It’s a step I always take before releasing code - optimization. The more markup used, the longer it takes the browser to render it. Removing unnecessary classes or combining classes when possible. For example, you almost always have container and with-curtain. Do you ever use just container on any other page? If not, combine the two classes into one. Same with inner-container and curtain.

system · February 2, 2022, 9:10pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
What exactly is .containers job in this code, and should it be called something else other than container? HTML & CSS	5	653	October 12, 2021
Making changes to the CSS now that the play buttons are inside their own container HTML & CSS	150	9898	December 26, 2022
Mapping buttons to containers JavaScript	6	2088	February 20, 2023
Rearranging the css to line up with the html HTML & CSS	5	1108	March 11, 2022
Changes to cope with separating HTML players and covers JavaScript	160	12718	March 14, 2022

Creating an html Family Tree

Related topics