Giter VIP home page Giter VIP logo

personalwebapp's Introduction

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.

personalwebapp's People

Contributors

zsobin avatar tswartz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.