CSCI 446 Unit #8

Programming Assignment

For this assignment you will create a small app similar to the example. See the figures below and review the specific requirements. Your CSS should not be the same as the figures... design your own application.

List of courses — Figure 1: Home page with list of courses

Course info page — Figure 2: Course information page

Hints

Issues I encountered while walking through the tutorial, and a few suggestions:

Spacing is critical for pug. For example, my sidebar didn't line up right at first because I didn't have it indented at the right level.
The author doesn't really explain all of the pug syntax. I suggest you review https://pugjs.org/api/getting-started.html. I view this in Chrome (to see navigation). In particular, I needed to read https://pugjs.org/language/plain-text.html to understand the use of the pipe and &nbsp.
Use a debug tool, such as the Inspector in FF, to help you understand what html is generated and how the CSS is applied. Without this type of tool, I'm not sure I would have completed this assignment.
Be sure to save the Heroku url. For convenience, I put a .txt file in the root of my application. You can also retrieve this by logging into Heroku.
Some useful links for Bootstrap4: