[Dúvida] Nada esta funcionando | Lógica de programação: explore funções e listas

Eu digitei o meu código, mas os botões não funcionam. Eles só causam erros no console, dizendo que os botões não estão definidos.

“Uncaught ReferenceError: mensagemConsole is not defined”

O título h1 também não funciona.
É um problema no navegador que estou usando (Firefox) ou alguma atualização no Visual Studio ou no Java mudou como as funções funcionam?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1></h1>
    </header>
    <main class="container">
        <button onclick="mensagemConsole()" class="button">Console</button>
        <button onclick="alertaAlert()" class="button">Alert</button>
        <button onclick="perguntaPrompt()" class="button">Prompt</button>
        <button onclick="somaParse()" class="button">Soma</button>
    </main>

      <script src="app.js"></script>
</body>
</html>

app.js

let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora do Desafio';

function mensagemConsole() {
    console.log('O botão Console foi clicado');
};

function alertaAlert() {
    alert('Esse programa foi feito com JS');
};

function perguntaPrompt() {
    let cidade = prompt('Digite o nome de uma cidade qualquer');
    alert('Estive em ${cidade} e lembrei de você.');
};

function somaParse() {
    let primeiroNumero = parseInt(prompt('Digite o primeiro número'));
    let segundoNumero = parseInt(prompt('Digite o segundo número'));
    let resultado = primeiroNumero + segundoNumero;
    alert(${primeiroNumero} + ${segundoNumero} = ${resultado});
};