Resolvi fazer um pequeno teste trocando classList.add por classList.toggle e deu o mesmo resultado. Percebi segundo a explicação do professor que .add adciona uma classe que já existe no CSS e .toggle executa essa classe. Porque usar classList.add nesse caso e não classList.toggle? E porque adcionar uma classe, sabendo que ela já existe no CSS?

Aqui o trecho do código alterado

botaoConclui.classList.toggle('check-button'); // add => adiciona o nome da classe que está entre as aspas simples

Aqui o trecho do código Original

botaoConclui.classList.add('check-button'); // add => adiciona o nome da classe que está entre as aspas simples

Aqui o código completo

const criarTarefa = (evento) => {

    evento.preventDefault();

    const lista = document.querySelector('[data-list]');
    const input = document.querySelector('[data-form-input]');
    const valor = input.value;

    const tarefa = document.createElement('li'); /* Cria um novo elemento */
    tarefa.classList.add('task'); /* Adciona a classe na 'li' criada */
    const conteudo = `<p class="content">${valor}</p>`; /* “Template String” */

    tarefa.innerHTML = conteudo; /* Faz aparecer a tag 'p' com o seu valor dentro das chaves */

    tarefa.appendChild(BotaoConclui()); /* Cria o botão através da função, com escrita, estilo e evento de click */
    lista.appendChild(tarefa); /* Cria(anexa) o elemento filho dentro do elemento pai */
    input.value = " ";
}

const novaTarefa = document.querySelector('[data-form-button]');

novaTarefa.addEventListener('click', criarTarefa);

const BotaoConclui = () => {
    const botaoConclui = document.createElement('button');

    botaoConclui.classList.add('check-button'); // add => adiciona o nome da classe que está entre as aspas simples
    botaoConclui.innerText = 'concluir'; // Adciona o texto que está entre as aspas simples dentro do botão

    botaoConclui.addEventListener('click', concluirTarefa);

    return botaoConclui;
}

const concluirTarefa = (evento) => {
    const botaoConclui = evento.target; // sabe qual o alvo do evento, ou seja, em quem clicou ou qual elemento foi clicado

    const tarefaCompleta = botaoConclui.parentElement; // Sobe um nó na árvore, que é a 'li', ou seja, busca o pai do elemento que é pai do botão

    tarefaCompleta.classList.toggle('done'); // .toggle() => Método que executa o efeito de rabisco do CSS e é capturado a classe pelo 'classList'. o toggle faz um verdadeiro ou falso (booleano)
# }