Step 1 Challenge and Bonus Answers

Mon Jul 22 2019

TL/DR: Answers to the Challenge and Bonus questions posed at the end of Step 1.

coding design

Table Of Contents

The Good Fellas Agency Step 1 Challenge and Bonus Answers

Challenge and Bonus Answer

Alright, everyone let's get straight to business and answer the challenges of putting together your partials and linking them in your templates and then finding the right links to go intor your navbar. First, lets cover the challenge question and talk about the navigation between pages.

For our example we need to navigate between 4 pages: your index, about, services, and contact page. With the way our current routes read you would need the following href values in your navbar that you would put in:

  • Link to your index.ejs: href= "/"
  • Link to your about.ejs: href= "/about"
  • Link to your contact.ejs: href= "/contact"
  • Link to your services.ejs: href= "/services"

Now, lets get them in the header.ejs partial and see what we have right now for the rest of the pages. The partial I am using going forward is as follows:

Now to include this partial in the about, services, and contact templates you have to add in at the very top of each file the include statement of: <% include ./partials/header.ejs %>. The ./ is imperative since it tells you where the partial is located inside the views directory. To add the footer files to all the pages you can use the same include statement with just a small tweak. To connect the footer simply put in <% include ./partials/footer.ejs %> at the bottom of the file.

Now that you have connected your partial file, create the file with touch views/partials/footer.ejsand then copy from the <-- Scripts --> tag to your inclue statement to fill in the content for the footer partial:

BONUS ANSWER: Put a container around your content to make it have a nice margin and flow easily. Thankfully, MDBootstrap has a prefixed container calss we can use that makes this way simplier than you would think. All you need to do is directly under your include statement for your header partial of <% include ./partials/header.ejs %> is add an opening div tag with the class container like this

, and then the line above your footer partial <% include ./partials/footer.ejs %> just close the div tag
. Its that easy. All your content will flow and look more professional. Step two should be ready friday so look out for that on how to connect MongoDB and RESTful routing as we expand our app.