Introduction

In this chapter, we will set up a website that will hold all the aforementioned recipes. Each recipe will be a link in that website's navbar's dropdown. The structure for the complete website, with all the recipes included, is available in the code for this chapter. To preview this structure, navigate to the chapter3/app folder, and run the harp server command from the console. Then, click on the about link in the navbar. The about page lists all the files and folders in this chapter's code.

Looking at the code structure for this chapter, it is important to note the most important parts.

The app folder comprises all the recipes' files. The app folder has the following subfolders and files:

• css (created by the grunt sass command)
• js (copied by the grunt copy command)
• partial (this folder holds the following partial files:_js.ejs and _nav.ejs, called by _layout.ejs)
• www (compiled by the harp compile and/or harp server commands)
• about.ejs (holds the file tree overview)
• index.ejs
• recipe1.ejs and recipe2.ejs (these files are accessible for preview via the navigation bar in the local website that can be run via harp server)

The bower_components folder comprises the following subfolders:

• bootstrap (to install it, the bower install bootstrap#4.0.0-alpha.6 command was run)
• font-awesome (to install it, the bower install font-awesome command was run)
• hover (to install it, bower install hover was run)
• jquery (installed with Bower's Bootstrap installation)
• tether (installed with Bower's Bootstrap installation)

The grunt folder has the node_modules subfolder, as well as the following two files: Gruntfile.js and package.json.

Take a look at package.json; we can see the necessary devDependencies, which were installed via console, from the chapter3/grunt folder, running the following command:

npm install grunt-contrib-concat grunt-contrib-copy grunt-contrib-sass grunt-contrib-watch --save-dev

The root of the document holds the SCSS file main.scss, which includes main-03-01.scss, main-03-02.scss, main-03-03.scss, main-03-04.scss, and main-03-07.scss.

Having this detailed overview of the files and folders included in this chapter's code is important, as it will help us complete the recipes faster.

For that reason, all the files and folders in the chapter3-start folder have already been created. However, most of the files are empty, and in the recipes that follow, we will add code to them.