Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 105721b Sep 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
project restructure to mimic HelloWorld Sep 9, 2018
.gitignore added base Apr 18, 2017
Procfile restructure to mimic HelloWorld Sep 9, 2018
README.md Update README.md Sep 14, 2018
app.json create base Apr 18, 2017
package.json restructure to mimic HelloWorld Sep 9, 2018

README.md

Personal Web App

Check it out at: https://pacific-plateau-64936.herokuapp.com/

Make sure you've followed all instructions for BaseWebApp

  1. Add new app pages: Add pages called about.ejs, projects.ejs, contact.ejs to html/pages. These files can be empty for now, or you could add something like <h1> Hello! </h1> so you know it's rendering.

  2. Add routing - modify your server-side code in project/start.js to support routing. See code here

*Since this updates the code that runs on the server, you need to restart your server to view the changes locally. You can do this by pressing control + c, and then then running heroku local web again.

    app.get('/', function(request, response) {
      response.render('pages/index');
    });

    app.get('/about', function(request, response) {
      response.render('pages/about');
    });

    app.get('/projects', function(request, response) {
      response.render('pages/projects');
    });

    app.get('/contact', function(request, response) {
      response.render('pages/contact');
    });

  1. Add a file to your helpers called navbar.ejs: https://github.com/zsobin/PersonalWebApp/blob/master/project/html/helpers/navbar.ejs

  2. Add that navbar to all of your app pages (index.ejs, about.ejs, projects.ejs), and contact.ejs so that people can navigate around your app:

  <header>
    <% include ../helpers/navbar %>
  </header>
  1. Copy all the CSS over to your project/css/main.css file so your pages look a little prettier! https://github.com/zsobin/PersonalWebApp/blob/master/project/css/main.css.

  2. Make it your own!

    • Change images to your own
    • Add your own project descriptions and bio
    • Add more pages + routing
    • Style it to look prettier! Check out the components available through bootstrap here.
You can’t perform that action at this time.