Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Wilson Usman
Wilson Usman
35,206 Points
Posted by 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
Nick Edwards
Nick Edwards
18,388 Points

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
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
Shawn Casagrande
Shawn Casagrande
9,501 Points

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