can i get help here please

Don't worry. Some times things get a bit confusing. But once you get it, it will stick to your brain. This is a process and we've all been there. Maybe the only thing you're missing is how the DOM tree works. Child elements are nested inside the parents tags. The parent elements have a higher hierarchy. Sibling elements are not one inside of the other. They are on the same hierarchy level, hence they "stand" side by side.

Take a look at the ul children:

<li><p>Element Selection</p><button>Highlight</button></li>
<li><p>Events</p><button>Highlight</button></li>
<li><p>Event Listening</p><button>Highlight</button></li>
<li><p>DOM Traversal</p><button>Highlight</button></li>

Each li element is parent of both a p element and a button element. You can see both p and button tags are inside li and stand side by side (meaning they are not one inside of the other).

So, if you use the even.target property to identify which button was clicked, you can get a reference to the p element doing

var p = e.target.previousElementSibling

You can do this and be sure it will give you a p element because you already conditioned the handler to run the code if the event target is a button element.

So, your solution would look something like this (SPOILERS! Don't look at the snippet below if you just wanna keep trying yourself):

var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    var p = e.target.previousElementSibling;
    p.className = "highlight";
  }
});