Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Express Basics Serving Static Files in Express Merging the Design Files

Wilson Usman
Wilson Usman
35,206 Points

How to fix the app.pug CSS in the Flashcards tutorial?

I spent a lot of trying to research this myself without any success.

In my app.pug file here is what I have:

extends layout

block main
    section.namecard
        .namecard-login
            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

But this is what I get:

my flashcards app link

Can someone lead me in the right direction or let me know if you need any other code.

FYI I've even gone through and replaced all the files with the download files. I tried changing the .namecard-greeting to .namecard-hello and that still didn't look right. It added the border, but the padding was off and the exit button was still displaying the same.

Solution:

But I still don't understand why it's not setup this way on the video.

extends layout

block main
    section.namecard
        .namecard-hello // Changed it to .namecard-hello and it works now
            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

Thank you for your post! That was driving me nuts and I couldn't figure it out.

1 Answer

Peter Gess
Peter Gess
16,553 Points

For whatever reason the space where content-header-question/answer.png files are is grayed out. Guessing it may be a CSS issue? Did you have any issues with this?

Shawn Casagrande
Shawn Casagrande
9,501 Points

I had to add side to the templateData object in card.js