freeCodeCamp/part-094.md at b3cbbe0f3dc0b36b53aa5d0c0338a13c7ebf847e

fix(learn): Broke several steps down into smaller steps for the Cafe Menu project - v7 (#39778 )

* fix: made some verbiage changes to existing steps

* fix: rewrite step 45 instructions

* fix: added two steps between 45 and 46

* fix: miscellaneous edits for steps 21,22, 27

* fix: change step 35 to allow for smaller steps

* fix: update 36-41 seed code

* fix: added new step between 41 and 42

* fix: add new step between 42 and 43

* fix: broke step 33 into 4 new steps

* fix: removed unnecessary step 37

* fix: change wording of step 33 instructions

* fix: corrected ERM syntax

* fix: corrected seed code typos in steps 45 and 46

* fix: corrected typo

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

* fix: changed wording to improve readability

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: changed "Free Code Camp" to "freeCodeCamp"

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

* fix: corrected typo and improved wording

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

* fix: corrected typo

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

* fix: correct typos

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: corrected punctuation

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: corrected punctuation

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: corrected punctuation

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: added missing period

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: corrected typo

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: added the missing word "larger"

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: corrected typo

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

* fix: change paragraph to `p`

* fix: reorderd steps after step 37 deleted

* fix: added two new steps to fix missing steps problem

* fix: added missing ERMs for step 69

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

2020-10-13 17:27:40 -05:00

7.2 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5f47fe7e31980053a8d4403b	Part 94	0	true

Description

It would be nice if the vertical space between the h2 elements and their associated icons was smaller. The h2 elements have default top and bottom margin space, so you could change the bottom margin of the h2 elements to say 0 or another number.

There is an easier way, simply add a negative top margin to the img elements to pull them up from their current positions. Negative values are created using a - in front of the value. To complete this project, go ahead and use a negative margin of 25px in the img type selector.

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>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <hr>
      <main>
        <section>
          <h2>Coffees</h2>
          <img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr class="bottom-line">
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p class="address">123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
<html>

body {
  background-image: url(https://tinyurl.com/coffee-beans-fcc);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

--fcc-editable-region--
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
--fcc-editable-region--

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

Solution

<!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>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <hr>
      <main>
        <section>
          <h2>Coffees</h2>
          <img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr class="bottom-line">
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p class="address">123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
<html>

body {
  background-image: url(https://tinyurl.com/coffee-beans-fcc);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

7.2 KiB Raw Blame History

Description

Tests

Challenge Seed

Solution

7.2 KiB

Raw Blame History