Create a Simple and Stylish Node Express App

Blog Discussions
, , ,
15

@craigz Thank you for sharing the repo! It helps tremendously. I found the source of trouble for your project:

That’s the tricky part of Pug, white spacing controls structuring:

	div.View.WelcomeView
	h1.Banner WHATABYTE

The Banner element gets pushed down because it’s a sibling of the WelcomeView element. If you indent it, it becomes its child :slight_smile:

At that point in the tutorial, the index.pug template should look like this:

extends layout

block layout-content
  div.View.WelcomeView
    h1.Banner WHATABYTE
    div.Message
      div.Title
        h3 Making the Best
        h1 Food For Devs
      span.Details Access the WHATABYTE Team Portal
    div.NavButtons
      if isAuthenticated
        a(href="/user")
          div.NavButton Just dive in!
      else
        a(href="/login")
          div.NavButton Log in

Please let me know if that fixes the issue :+1: