Bootcamp
Search…
2.POCE.5: Responsive Noodle Site

Introduction

We will upgrade the Noodle site we built in 1.POCE.1: Noodle Recipe Website with responsive layouts.

Setup

Fork and clone the Noodle App CSS repo.

Responsive Noodle Recipe Layouts

In 1.POCE.1: Noodle Recipe Website we created 3 types of pages.
  1. 1.
    Category page with list of all recipes in that category (e.g. onion, chicken)
  2. 2.
    Home page with list of all recipes and categories
  3. 3.
    Single recipe page with details about single recipe

Instructions

  1. 1.
    Create responsive versions of the above pages according to the wireframes below.
  2. 2.
    Use Bootstrap for layout and choose a colour scheme of 2-3 colours.
  3. 3.
    Develop for mobile first because it is easier to add elements to a page to create desktop layouts than remove elements from a page to create mobile layouts. Starting with mobile will help our mobile views be simpler.

Mobile Mockups

From left to right: 1) Category Recipe List Page, 2) Home Page, 3) Recipe Page.

Desktop Mockups

Category Page

1) Category Recipe List Page

Home Page

2) Home Page

Recipe Page

3) Recipe Page

Deploy to EC2

  1. 2.
    Inside the file server repo on EC2, clone your Noodle Site repo.
    1. 1.
      This is an exception to the rule of not having Git repositories inside repositories.
    2. 2.
      Your file server will then have access to the HTML and CSS noodle site files inside of the folder.
  2. 3.
    After you start the file server, you should be able to access your noodle site at something like http://<EC2_PUBLIC___IP_ADDR>/noodle-app-css/index.html, where we replace the <EC2_PUBLIC_IP_ADDR> with the public IP address of your EC2 machine.
    1. 1.
      Note that the URL path should match the path to the noodle files from the file server repo folder IN EC2.
How can I update my code on EC2 after I've cloned it?
Git allows us to pull changes from an existing repo with the git pull command. If you need to do this here, read ahead to 0.6: Git Pull.

Bonus: Video Poker

Try deploying your Video Poker game on the same EC2 instance by following the deployment instructions above with your Video Poker repo.
You may notice that CSS files do not load properly. If this happens, try updating the server to set the correct Content-Type header for the requested file using the example here.

Reference solution

Click here to see the reference solution for this post class.