Code Monkey home page Code Monkey logo

c3projects--sinatrasite's Introduction

SinatraSite

Hi! This project's requirements are a bit different than the others we've done so far. We will be adding functionality to this project in waves, so, instead of multiple tiers (breakfast/lunch/dinner), I'll be adding requirements in waves.

Each wave describes a minimum feature set for the project and has its own due date. You'll 'turn in' a wave by opening a pull request from your fork to the project master repository. Once it's been reviewed, we'll merge the PR. Rinse and repeat for the next wave. :)

Wave 1: Learn Sinatra

The PR for this wave is due by 9am on Wednesday, June 3rd.

The requirements for this wave are:

  • Create a Sinatra application
  • Use that application to serve static HTML pages
  • At least one of the static pages must include at least 2 images

Wave 2: Use CSS to apply style and struture to our website

The PR for this wave is due by 10pm on Sunday, June 7th.

The requirements for this wave are:

  • Add class and/or id attributes to your html tags where appropriate
    • Use class names that semantically say what the content is, not what it looks like.
    • Remember that an id must be unique to the page.
  • Use CSS to...
    • Fix the width of all your entire page to a predetermined size (I'd suggest 960px).
    • Center your content (the blocks, not the text) so that it remains in the middle of the page even if the browser size changes.
    • Add a background color to your repeating page headers and footers.
    • Style your headings (<h1>, <h2>, etc.) so they are visually distinct.
    • don't use <br> tags to separate content; apply margin and padding where appropriate to space out content.

Wave 3: DRY up your markup by utilizing layouts and ERB

The PR for this wave is due by 10pm on Sunday, June 7th.

The requirements for this wave are:

  • Extract the common elements of your html pages into a layout.
  • Change your Sinatra app to serve ERB views instead of static html.
  • Extract your repeating <header> and <footer> code into a partial.
  • Use ERB to include your partial in your layout.
  • Add and style a new page to your website using a Sinatra route and ERB view (content your choice).
  • Include a copyright/copyleft statement in your website footer. Utilize Ruby/ERB to ensure the year of the notice will always be current.

c3projects--sinatrasite's People

Contributors

acmei avatar jnf avatar kariabancroft avatar wangg131 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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.