[Sugestão] Criando os cards dinamicamente com JavaScript

Olá! Primeiramente, adorei o curso e amei o Bootstrap. Juliana manda muito bem na explicação!

Tomei a liberdade de ir além e vou deixar aqui como inspiração para os colegas que quiserem.

Criei dois arquivos JavaScript: o primeiro (receitas.js) contendo uma lista de objetos com as informações das receitas:

const receitas = [
    {
        "titulo": "Tigela de abacate",
        "texto": "Receita refrescante e cheia de vitaminas para o seu café da manhã!",
        "imagem": "src/img/receita-abacate.jpg",
        "alternativo": "tigela de mingau com kiwi, vista superior"
    },
    {
        "titulo": "Salada de kiwi",
        "texto": "Receita refrescante e cheia de vitaminas para o seu café da manhã!",
        "imagem": "src/img/receita-kiwi.jpg",
        "alternativo:": "tigela de mingau com kiwi, vista superior"   
    },
    {
        "titulo": "Mix de vegetais",
        "texto": "Receita refrescante e cheia de vitaminas para o seu café da manhã!",
        "imagem": "src/img/receita-mix.jpg",
        "alternativo:": "prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior"   
    },
    {
        "titulo": "Pimentões à Juliana",
        "texto": "Receita refrescante e cheia de vitaminas para o seu café da manhã!",
        "imagem": "src/img/receita-pimentoes.jpg",
        "alternativo:": "prato de salada de pimentões com alguns ingredientes ao lado, vista superior"
    },
    {
        "titulo": "Prato oriental",
        "texto": "Receita refrescante e cheia de vitaminas para o seu café da manhã!",
        "imagem": "src/img/receita-oriental.jpg",
        "alternativo:": "tigela com salada de vegetais estilo oriental, vista de cima"
    },
    {
        "titulo": "Beterrabas assadas",
        "texto": "Receita refrescante e cheia de vitaminas para o seu café da manhã!",
        "imagem": "src/img/receita-beterrabas.jpg",
        "alternativo:": "tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo"
    }
]

E o segundo arquivo (main.js), a manipulação do DOM:

const cardReceita = document.querySelector('#lista-receitas');

receitas.forEach(receita => {
    cardReceita.innerHTML += `
                    <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-sm-4">
                        <img class="card-img-top imagem-card" src="${receita.imagem}" alt="${receita.alternativo}">
                        <div class="card-body">
                            <h4 class="card-title">${receita.titulo}</h4>
                            <p class="card-text">${receita.texto}</p>
                            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                        </div>
                    </article>
    `
});

Agora você poderá apagar todos os articles que dividiam os cards dentro do HTML, ficando dessa forma:

<section class= "bg-light" id="receitas">
            <div class="container">
                <div class="row justify-content-center" id="lista-receitas">
                    <!--Inserido dinamicamente com JS-->
                </div>
            </div>
</section> 

OBS(1): Inseri um id="lista-receitas" dentro da div que englobava os articles. É com esse id que eu estou referenciando no arquivo main.js.

OBS(2): Lembre-se de referenciar os dois arquivos js criados lá no HTML, do mesmo modo que os arquivos js do bootstrap foram.

<script src="...

Espero que eu possa ter contribuído com o conhecimento de vocês. Qualquer dúvida, pode mandar!