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 (2015) Using Templates with Express Scaffolding Your Project’s Templates

Edwin Carbajal
Edwin Carbajal
4,133 Points

Here is the updated code for this project(.Pug not .Jade)

First of, this project is a bit outdated simply because it still uses .jade extensions. Jade has changed to .pug. So you should be using npm install pug --save

Also there is an issue with using pipes in the code. To fix, i just removed all pipes from the code.

This is the layout.pug file

doctype html
html(lang="en")
    head
        title Landing Page

    body#page-top
        nav#mainNav.navbar.navbar-default.navbar-fixed-top
            .container-fluid
                // Brand and toggle get grouped for better mobile display
                .navbar-header
                    button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                        span.sr-only Toggle navigation

                        span.icon-bar

                        span.icon-bar

                        span.icon-bar

                    a.navbar-brand.page-scroll(href='/') FitLog.io
                // Collect the nav links, forms, and other content for toggling
                #bs-example-navbar-collapse-1.collapse.navbar-collapse
                    ul.nav.navbar-nav.navbar-right
                        li
                            a(href='/blog') Blog
                        li
                            a.page-scroll(href='#about') About

                        li
                            a.page-scroll(href='#services') Services

                        li
                            a.page-scroll(href='#portfolio') Portfolio

                        li
                            a.page-scroll(href='#contact') Contact
                        // /.navbar-collapse
                        // /.container-fluid
        block content

This is the index.pug file

extends ./layout.pug
block content

    header
        .header-content
            .header-content-inner
                h1 Fitness meets data science.

                hr

                p
                     FitLog allows youo easily log and track workouts.  Analyze your results and progress. Push yourself to be the best you can be, while you maximize your recovery.

                a.btn.btn-primary.btn-xl.page-scroll(href='#about') Sign up now!

    section#about.bg-primary
        .container
            .row
                .col-lg-8.col-lg-offset-2.text-center
                    h2.section-heading Unleash the competitor.

                    hr.light

                    p.text-faded
                         Labore XOXO kogi, labum tousled assumenda sriracha before they sold out. Labore mlkshk Helvetica Marfa health goth Austin magna sunt, yr aesthetic artisan heirloom chillwave commodo lo-fi.

                    a.btn.btn-default.btn-xl(href='#') Get Started!

    section#services
        .container
            .row
                .col-lg-12.text-center
                    h2.section-heading Powerful tech, at your finger tips.

                    hr.primary

        .container
            .row
                .col-lg-3.col-md-6.text-center
                    .service-box
                        i.fa.fa-4x.fa-diamond.wow.bounceIn.text-primary

                        h3 Easy Logging

                        p.text-muted Easily input your workout data, straight from your mobile device.

                .col-lg-3.col-md-6.text-center
                    .service-box
                        i.fa.fa-4x.fa-paper-plane.wow.bounceIn.text-primary(data-wow-delay='.1s')

                        h3 Predictive Analytics

                        p.text-muted Custom analytics, just for you.  Analyze past results, predict future performance.

                .col-lg-3.col-md-6.text-center
                    .service-box
                        i.fa.fa-4x.fa-newspaper-o.wow.bounceIn.text-primary(data-wow-delay='.2s')

                        h3 Access Anywhere

                        p.text-muted Your next workout is waiting.  Set goals, and access metrics right from the gym.

                .col-lg-3.col-md-6.text-center
                    .service-box
                        i.fa.fa-4x.fa-heart.wow.bounceIn.text-primary(data-wow-delay='.3s')

                        h3 Safe and Secure

                        p.text-muted We protect your data with the utmost integrity.  Your privacy is our priority.

    aside.bg-dark
        .container.text-center
            .call-to-action
                h2 Meet athletes like you!

                a.btn.btn-default.btn-xl.wow.tada(href='#') Start your free trial!

    section#portfolio.no-padding
        .container-fluid
            .row.no-gutter
                .col-lg-4.col-sm-6
                    a.portfolio-box(href='#')
                        img.img-responsive(src='/static/img/portfolio/1.jpg', alt='')

                        .portfolio-box-caption
                            .portfolio-box-caption-content
                                .project-category.text-faded
                                     Endurance Athlete

                                .project-name
                                     Marge Simpson

                .col-lg-4.col-sm-6
                    a.portfolio-box(href='#')
                        img.img-responsive(src='/static/img/portfolio/2.jpg', alt='')

                        .portfolio-box-caption
                            .portfolio-box-caption-content
                                .project-category.text-faded
                                     Weight Lifter

                                .project-name
                                     Jack Johnson

                .col-lg-4.col-sm-6
                    a.portfolio-box(href='#')
                        img.img-responsive(src='/static/img/portfolio/3.jpg', alt='')

                        .portfolio-box-caption
                            .portfolio-box-caption-content
                                .project-category.text-faded
                                     Endurance Athlete

                                .project-name
                                     Reda Niman

                .col-lg-4.col-sm-6
                    a.portfolio-box(href='#')
                        img.img-responsive(src='/static/img/portfolio/4.jpg', alt='')

                        .portfolio-box-caption
                            .portfolio-box-caption-content
                                .project-category.text-faded
                                     CrossFitter

                                .project-name
                                     Magnus Jorgenson

                .col-lg-4.col-sm-6
                    a.portfolio-box(href='#')
                        img.img-responsive(src='/static/img/portfolio/5.jpg', alt='')

                        .portfolio-box-caption
                            .portfolio-box-caption-content
                                .project-category.text-faded
                                     Weight Lifter

                                .project-name
                                     Liz Vasques

                .col-lg-4.col-sm-6
                    a.portfolio-box(href='#')
                        img.img-responsive(src='/static/img/portfolio/6.jpg', alt='')

                        .portfolio-box-caption
                            .portfolio-box-caption-content
                                .project-category.text-faded
                                     CrossFitter

                                .project-name
                                     Fit Fittington

    section#contact
        .container
            .row
                .col-lg-8.col-lg-offset-2.text-center
                    h2.section-heading Who we are

                    hr.primary

                    p
                         At Treehouse, we loveo show you how realistic projects are built.  There's a lot going on here, but you'll be ready to roll after this course.

                .col-lg-4.col-lg-offset-2.text-center
                    i.fa.fa-phone.fa-3x.wow.bounceIn

                    p 800-4Fit-Log

                .col-lg-4.text-center
                    i.fa.fa-envelope-o.fa-3x.wow.bounceIn(data-wow-delay='.1s')

                    p
                        a(href='mailto:huston@teamtreehouse.com') Email your teacher!

This is the post.pug file

extends ./layout.pug
block content
        section.post
            .container
                .row
                    .col-lg-8.col-lg-offset-2.text-center
                        h2.section-heading #{post.title}

                        hr.light

                        p.text-faded
                            | #{post.description}
                        .article
                            | #{post.description}
Tavin Lin
Tavin Lin
12,434 Points

Thank you for the updated code!

Thanks buddy !

Anthony Albertorio
Anthony Albertorio
22,587 Points

Thanks alot man! Wish I could upvote this. You have save me some time.

3 Answers

Thank you so much for this!

Jacob Wylie
Jacob Wylie
10,893 Points

Thanks Edwin. Saved me a huge headache!

Thank you.