Randell Dawson 06da30e48a feat(learn): Basic CSS Cafe Menu instructions and hints/tests (v7) (#39407)
* feat: created step instructions for cafe menu

fix: added instructions to steps 1-31

fix: changed steps 29-31

fix: added instructions for steps 32-42

fix: changed prototype class definition

fix: padded file names

fix: added instructions for steps 43-61

fix: add object id to final.md and final prototype to meta.json

fix: correct typos in steps 26 and 27

fix: misc wording changes

fix: added forward slash to closing html tag

fix: added instructions for steps 62-75

feat: added instructions to steps 76-79

fix: added FOOTER comment for steps 68-75

fix: add steps 68a and 68b

fix: add steps 69a and reorder steps

fix: added instructions to the final steps

* fix: remove final.md

* fix: fixed typo of menue to menu

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* fix: changed wording to improve readability

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* fix: changed wording to improve readability

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* fix: changed wording to improve readability

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* fix: combined two lines into same paragraph

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2020-09-16 11:54:13 +05:30

1.3 KiB

id, title, challengeType, isHidden
id title challengeType isHidden
5f356ed6cf6eab5f15f5cfe6 Part 21 0 true

Description

The menu takes up the full width of the page. You can use a div element to hold all the elements located in the body element and then apply some special styling to it. The div element is used mainly for design layout purposes unlike the other content elements you have used so far.

Start by adding a div element inside the body element and then move all the elements located in the body element inside it.

Tests

tests:
  - text: Test 1
    testString: ''

Challenge Seed

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camper Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  --fcc-editable-region--
  <body>
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffees</h2>
      </section>
    </main>
  </body>
  --fcc-editable-region--
<html>
body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}