pizza.md

Pizza pamphlet

Create & deploy a response online pizza pamphlet for a friend that's starting a local pizzeria called Perfect Pizza.

• Use this html template : https://github.com/codex-academy/perfect-pizza/blob/gh-pages/index.html

• Create style.css file.

• link it with your html file.

• copy the code below, into your css file.

  .small img { width: 4em; }

  .medium img { width: 5em; }

  .large img { width: 7em; }

Pick a fun color scheme from: https://coolors.co/ style the existing CSS

Select:

• a background color
• a different color for each of the small, medium & large pizza boxes
• a different color for the footer.

The color scheme has 5 colors.

For example: https://jsbin.com/boqaleperu/13/edit?output

Use:

• font-family to change the pamphlets font
• the box model to create space between elements - margin, padding & border
  • display: inline
• make it responsive using:

  • flexbox

    • display:flex
    • display: inline-flex

  • floats

    • collapsing elements
    • clearing floats

  • SimpleGrid - https://simplegrid.io/

Learn about:

• inline & block elements
• different layout approaches - floats, flexbox
• responsive web sites
• media queries

Deployment

• Create a GitHub repository called pizza-pamphlet
• Link your local git repository to this remote repository using the git remote add origin <REMOTE_ORIGIN_HERE> command. You can copy the setting from GitHub.
• Commit your local changes:
  • git add .
  • git commit -m 'describing what I've done.'
• Branch your local changes into a gh-pages branch:
  • git branch gh-pages
• Move into the gh-pages branch:
  • git checkout gh-pages
• Push your changes to GitHub:
  • git push origin gh-pages

Your web page should now be deployed to http://<YOUR_GITHUB_USERNAME>.github.io/pizza-pamphlet

Thought

It might make sense to work through this tutorial in a workshop: http://learnlayout.com/toc.html