How to fix the bugs in this project, complete the flashcard project successfully, and win at life!

Step one:

Unfortunately, in this video an incorrect class is assigned. In the app.pug template file, '.namecard-login' should be changed to '.namecard-hello'

So app.pug should look like this:

extends layout

block main
    section.namecard
        .namecard-hello
            if name
                p.namecard-greeting Welcome, #{name}!
                form.namecard-exit(action='/goodbye', method='POST')
                    button(type='submit')
                        img(src='/static/img/close.svg')
            else
                p.namecard-greeting Hello, student!
        block intro
    block card

Step two:

In the cards.pug template file, add the 'side' variable as a fourth property to the templateData object. So it should look like:

const template = { id, text, name, side };

Step three:

If you haven't already done so, download the designer assets available at the bottom of the teacher's notes and in addition to creating a 'stylesheets' sub-folder within the 'public' folder, also create an 'img' sub-folder and include all the designer supplied image assets. And if you plan on doing the additional challenge, create a 'js' sub-folder and create an 'app.js' file within that sub-folder.

Step four:

Celebrate 🎉

Thank you to everyone in this older post for helping figure this out.