# StyledWebApp **Repository Path**: mirrors_HubSpot/StyledWebApp ## Basic Information - **Project Name**: StyledWebApp - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-09-24 - **Last Updated**: 2026-07-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # StyledWebApp Check it out at: https://boiling-bastion-10158.herokuapp.com/ _Note: Unlike with the Base Web App, you shouldn't fork and clone the code in this repo onto your machine. Instead, try to follow the instructions below, using the code in this repo as a reference._ ## Part One: Adding Pages and Navigation In this section, you’ll add additional pages to your app and create navigation for users to move through your app’s pages. . We’re going to use the example of a personal website today, but feel free to add whatever pages you’d like. #### 1. Create the pages Navigate to the `pages` folder, which holds the html pages. Create a couple more pages — an about page and a projects page, by right clicking the `pages` folder, then “New file.” Type in your filename for each, then hit “enter.” #### 2. Add content to the pages You can see that your new pages are empty right now. Copy the content from the index page, then paste it into the other two pages. Feel free to change the title so you can see which page is which. #### 3. Hook up the pages so they render Head to your “start.js” file. This function below tells your app to render the index page when it gets a request for the app’s URL: ``` app.get('/', function(request, response) { response.render('pages/index'); }); ``` Use this as a model for the other functions. Your about page should render when the user types in the url `/about`, and should render the “about” page instead of the “index” page, and the same for your projects page. How would you modify your code to do that? If you need a hint, check out the code in this repo. Once you're done, save your page and open up your terminal again. Type `heroku local web` to get your server running, and navigate to `localhost:5000`. You should still see the same page as before, but now add `/about` to the URL. You should now see your new about page render. _Note: Remember that you can stop the server in your terminal by typing "control" "c"._ #### 4. Create a navbar Typing in URLs isn’t the most user-friendly way to get around an app. Users would be much better off with a navigation bar, or navbar, with links that users can click to move from page to page. Let’s add one. Since your navigation will be every page, let’s create it as a helper and include it in all the pages, the same way the header information is included. Right click on the `helpers` folder, then add a file named “navbar.ejs.” Inside of that file, start building the navbar. Use an `