Oi Lurian, tudo bem?

Vamos lá,

A propriedade textContent aponta para o conteúdo que está entre tags HTML que exibem informações, como por exemplo as tags h1, p e li.

<h1>Título exemplo<h1>

Título exemplo

<p>Paragrafo exemplo<p>

Paragrafo exemplo

<li>Item de uma lista exemplo<li>

• Item de uma lista exemplo

Para identificar as tags de informações, observe que o conteúdo à ser exibido está entre as tag de abertura e as tags de fechamento.

Já a propriedade value aponta para o conteúdo/valor que fica armazenado no atribulo de uma tag HTML, esse atributo é definido dentro da tag de abertura do elemento com o mesmo nome value, como por exemplo nas tags progress e na tag input de diferentes tipos.

<progress value="50" max="100"></progress>

<input type="text" value="valor padrão">

<input type="password" value="valor padrão">

O HTML que está sendo manipulado aqui é o seguinte:

<input class="frase"><button class="botao">Copiar</button><span class="copia"></span>

Neste caso, a propriedade value aponta para o conteúdo salvo no atributo value do seguinte código.

<input class="frase" value="TEXTO À SER COPIADO">

Enquanto, a propriedade textContent aponta para o conteúdo salvo entre as tags de abertura e fechamendo span

<span class="copia">TEXTO SERÁ COPIADO AQUI</span>

Olá Lurian tudo bem?

Vou comentar linha a linha.

<input class="frase"> <!-- esse é um input cuja classe se chama frase, é aí onde o usuário vai digitar a frase-->
<button class="botao">Copiar</button> <!-- esse é um botão cuja classe se chama botao , é nele que o usuário vai clicar em copiar -->
<span class="copia"></span> <!-- esse é um span (elemento sem valor semantico) cuja classe se chama copia, é aqui onde vai parar a frase copiada -->
<script> <!-- aqui temos o início da tag script onde vai o Javascript -->
    var inputFrase = document.querySelector('.frase'); //define a variável inputFrase para o input frase
    var botao = document.querySelector('.botao'); //define a variável botao para o botão
    var copia = document.querySelector('.copia'); //define a variável copia para o span da classe copia

    function botaoHandler() { // função do clique do botão que copia do input para o span copia

         copia.textContent = inputFrase.value; //na pratica se não me falha a memória só input tem value o resto é textContent ou innerText. textContent pega todo texto visível e invisível, o innerText pega só o que é visível excluindo scripts, styles e elementos com estilo display:none . então aqui o código define que conteúdo de texto do span é igual o valor do input (ou seja o texto dentro)
        inputFrase.value = ''; //limpa o input
    }

    botao.addEventListener('click', botaoHandler); // faz com que ao clicar no botão execute a função botaoHandler
 </script>

Espero ter ajudado!!!

André Victor, me ajudou BASTANTE da forma como explicou!!! Mas ainda me restou essa dúvida, estou fazendo confusão nessa parte:

<input class="frase"><button class="botao">Copiar</button><span class="copia"></span>
<script>
    var inputFrase = document.querySelector('.frase');
    var botao = document.querySelector('.botao');
    var copia = document.querySelector('.copia');

    function botaoHandler() {
        copia.textContent = inputFrase.value;  // então, essa parte quer dizer que: vai pegar o textContent (que é oque o usuário digitou para ser copiado) e jogar para <span>  ?  devo estar errada certo?
// Porque para mim parece não fazer sentido :(
// ENTÃO,
// O QUE ESSA PARTE ESTÁ FAZENDO? 
               inputFrase.value = '';

    }

    botao.addEventListener('click', botaoHandler);
 </script>

Lurian, boa noite. Nesse caso, ele joga o valor da variável inputFrase no textContet do span, logo o span vai apresentar o texto contido na variável, na linha de baixo, onde acontece o seguinte caso

inputFrase.value = '';

ele simplesmente está limpando o conteúdo da variável, deixando a mesma vazia.

Obrigada Henrique.