Skip to content

Coffee Guide coffeeGuide.html

Screen Resolution

Depending on your screen resolution, zoom setting, and monitor size you will see the line breaks appear at different locations. This is ok and expected!

coffee guide output

Page Requirements

  • The document is named coffeeGuide.html
  • The title displayed in the browser tab is Coffee Guide

Header & Navigation

  • Identical to index.html, except for the heading text.
  • Heading text reads, Coffee Guide.

Main Content

  • Create eight <article> elements. Each article contains a heading element, image, and paragraph text.
  • Each <article> has a unique id identifying itself.
  • After the last <article> element, there is a link named, “Back to top”, that takes the user to the top of the page (see example image above).

Article #1

Heading: Americano

Image: americano.png

Paragraph: A single shot of espresso added to a cup of hot water. Many like to drink this as they would a regular brewed coffee with milk and sugar. Purists say to keep milk to a minimum to get the most flavor from the espresso.

Article #2

Heading: Caffe Latte

Image: caffeLatte.png

Paragraph: A cafe latte, or “latte” for short, is an espresso-based drink with steamed milk and micro-foam added to the coffee. This coffee is much sweeter compared to espresso due to the steamed milk.

Article #3

Heading: Caffe Mocha

Image: caffeMocha.png

Paragraph: A mocha is a mix between a cappuccino and a hot chocolate. It is made by putting mixing chocolate powder with an espresso shot and then adding steamed milk and micro-foam into the beverage.

Article #4

Heading: Cappuccino

Image: cappuccino.png

Paragraph: A cappuccino is like a latte. However, the key difference between a latte and cappuccino is that a cappuccino has more foam and chocolate placed on top of the drink. Further, a cappuccino is made in a cup rather than a tumbler glass.

Article #5

Heading: Espresso

Image: espresso.png

Paragraph: A strong, concentrated coffee made by forcing pressurized water through finely-ground coffee beans. Served in a small cup called a demitasse, and meant to be taken quickly, like a shot.

Article #6

Heading: Espresso con Panna

Image: espressoConPanna.png

Paragraph: Espresso con panna, which means "espresso with cream" in Italian, is a single or double shot of espresso topped with whipped cream.

Article #7

Heading: Flat White

Image: flatWhite.png

Paragraph: Flat white is a coffee that is popular in Australia and New Zealand. It is made the same as a cappuccino expect it does not have any foam or chocolate on top.

Article #8

Heading: Macchiato

Image: macchiato.png

Paragraph: Espresso with either steamed milk or foamed milk, and flavoring. The most common combination is the caramel macchiato – espresso, vanilla, steamed milk, drizzled with caramel.

  • Identical to the index.html footer.