Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <div class="main-body">
    <nav id="navbar">
      <header>Jump Ahead!</header>
      <ul class="navit">
        <li><a href="#How_does_a_French_Press_work?" class="nav-link">How does a French Press work?</a></li>
        <li><a href="#The_lid,_plunger_and_filter" class="nav-link">The lid, plunger and filter</a></li>
        <li><a href="#The_beaker,_base_and_handle" class="nav-link">The beaker, base and handle</a></li>
        <li><a href="#Measurements" class="nav-link">Measurements</a></li>
        <li><a href="#What_you_will_need" class="nav-link">
            What you will need</a></li>

        <li><a href="#Coffee_to_Water_Ratio" class="nav-link">
            Coffee to water ratio</a></li>

        <li><a href="#Step_by_step_Instructions" class="nav-link">
            Step by step Instructions</a></li>
      </ul>
    </nav>
  </div>
</header>

<h1>What is a French Press and how do you use it?</h1>

<div id="image">
  <img src="https://i.postimg.cc/R0W97x6G/How-Many-Tablespoons-of-Coffee-for-French-Press.jpg" alt="Image of a French Press Coffee Maker"> </div>

<main id="main-doc">
  <section class="main-section" id="How_does_a_French_Press_work?">
    <header>How does a French Press work?</header>
    <p>The French Press works by steeping coffee grounds and hot water in a beaker. Once the coffee is done steeping, a metal mesh filter is pressed to the bottom of the beaker which separates the coffee grounds from the liquid coffee destined for your mug. The metal mesh filter allows the natural oils found in coffee and fine particles to pass through it giving the coffee a thick body.

      This process of steeping coffee and water together for an extended time is called immersion brewing because the coffee is immersed in the water as opposed to drip brewing where the water flows through the coffee grounds.</p>

    <p> Since the coffee and water are mixed together it is easy to get a uniform extraction with immersion brewers. However this method is vulnerable to over extraction if the coffee is ground too small or the coffee and water are left to steep for too long.</p>
    <code>
      x = 5;<br>
      y = 6;<br>
      z = x + y;
    </code>
  </section>

  <section class="main-section" id="The_lid,_plunger_and_filter">
    <header>The lid, plunger and filter</header>

    <p>French Presses use a metal filter that allows natural oils and fine particles from the coffee beans to pass through into your cup. This is what gives French Press coffee it's rich and hearty body compared to brewing methods that use a paper filter.

      The filter is connected to a metal rod that passes through the top known as the plunger which is used to press the filter to the bottom of the beaker and earn the French Press the latter half of its name.</p>

    <p> The lid fits onto the top of the beaker and the filter is sized to snugly slide into the beaker with enough pressure on the side walls to prevent coffee particles from sliding by when its pressed.</p>
    <code>
      x = 5;<br>
      y = 6;<br>
      z = x + y;
    </code>
  </section>

  <section class="main-section" id="The_beaker,_base_and_handle">
    <header>The beaker, base and handle</header>
    <p>The beaker is usually made from glass but some models use plastic, metal or ceramic. Its purpose is to hold the coffee and water while it steeps and make it easy to pour the brewed coffee into your mug.

      The configuration of the body and handle can vary depending on the materials used to make the French Press. We dive into these variations in the section about buying a french press.

      The French Press is widely used because you do not need fancy equipment like a long neck kettle, a supply of paper filters or any electricity to brew with it. The minimum ingredients to make French Press coffee are hot water, ground coffee and a French Press.</p>

    <p>The quality of coffee you brew will significantly increase with a few additional tools. Using a burr coffee grinder to freshly grind your beans just before brewing will make the biggest impact. Once coffee is ground it begins to oxidize and lose flavor which means pre-ground coffee is not an option if the goal is to make quality coffee.

      A burr grinder will also produce a consistent grind with uniform particle sizes. This is especially important when making French Press coffee because the coffee grounds are steeped with the water for so long. If you have uneven particle sizes, like the ones produced by a blade grinder, the small particles will get over-extracted (bitter) and the large ones will be under-extracted.</p>

    <code>
      x = 5;<br>
      y = 6;<br>
      z = x + y;
    </code>
  </section>

  <section class="main-section" id="Measurements">
    <header>Measurements</header>
    <p>It is impossible to consistently produce a quality cup of coffee if the ratio of coffee and water is not measured. A scale is the best way to measure coffee because coffee beans have different densities depending on how they were grown, processed and roasted.

      Measure coffee for french press

      If a scale isn't available it is possible to measure by volume. The measurement marks on the Handground hopper in the picture above each represent ~10g.</p>

    <p> Lightly roasted coffee generally weighs 6-7g per Tbsp while darker roasted coffee weighs 5-6g per Tbps. The lightly roasted beans weigh more because they spent less time in the roaster and have a higher moisture content.
      Finally a timer (your phone works great) is useful to measure the steep time because French Press coffee is vulnerable to over extraction if left to steep for too long.</p>
  </section>

  <section class="main-section" id="What_you_will_need">
    <header>What you will need</header>
    <p>
      <ul id="bulletpoints">
        <li>Hot Water</li>
        <li>Coffee</li>
        <li>French Press</li>

        <li>Coffee Grinder</li>
        <li>Scale</li>
        <li>Timer</li>
        <li>Thermometer</li>
      </ul>
    </p>
    <code>
      x = 5;<br>
      y = 6;<br>
      z = x + y;
    </code>
  </section>

  <section class="main-section" id="Coffee_to_Water_Ratio">
    <header>Coffee to Water Ratio</header>
    <p>What is the best French Press Ratio?

      The answer is, it depends on your taste. The first step in using the French Press ratio chart above is to decide how strong you want your coffee. Strength is calculated by the ratio of dissolved coffee to water that ends up in your mug, also known as total dissolved solids (TDS).</p>

    <p> The strong recipe is best for adding milk, sugar or other condiments while the Mild recipe is good for exposing finer flavors when drinking coffee black. Once you pick a brew strength follow that row over to find the recipe for a 3 cup French Press and 8 cup French Press. For example, to brew an 8 cup French Press at Medium strength would require 68g of coffee and 900mL of water.</p>
    <code>
      x = 5;<br>
      y = 6;<br>
      z = x + y;
    </code>
  </section>

  <section class="main-section" id="Step_by_step_Instructions">
    <header>Step by step Instructions</header>
    <h1>Step 1</h1>
    <h2>Heat Water</h2>
    <p>Start the water heating first because it will take the most time. Coffee is 98-99% water so its important to use clean filtered water with a low mineral content if possible.

      A water temperature of 195 to 205 degrees fahrenheit is considered optimal for brewing coffee but if you don't have a thermometer go ahead and heat the water to a full boil.

      The boiling water can be used to preheat and clean the french press before brewing. The chart below will help estimate how much time is needed to wait after taking the kettle off of the stove.</p>

    <p> The amount of time it takes water to cool to proper brewing temperature depends on how much water was initially heated. In the chart above the red line represents the temperature in a kettle filled with 36 oz of water and the blue line is a kettle with 24 oz.

      It took 4 minutes for the 24 oz kettle to reach the ideal brewing temperature of 200 degrees and 8 minutes for the 36 oz kettle!

      Keep in mind these results are a general guideline and you may experience different ones based on elevation, kettle construction and room temperature. For best results - use a thermometer.</p>
  </section>

  <div>
    <h1>Step 2</h1>
    <h2>Measure coffee and grind it</h2>
    <p>
      Use the Coffee to Water Ratio chart above to measure out the amount of coffee for your brew strength and French Press size. As a reminder, it is best to measure coffee with a scale and to grind whole beans just before brewing.

      If you are using pre-ground coffee, it may be easier to do step 3 first and then measure the pre-ground coffee as your pour it into the French Press beaker.</p>

    <p> To grind whole coffee beans for French Press set the grinder to a coarse setting that will produce a grind size as shown in the picture above. If you own a Handground coffee grinder, rotate the adjustment ring to setting 7.
      Load up the beans and grind!</p>

    <h1>Step 3</h1>
    <h2>Preheat the French Press</h2>
    <p>It is often recommended to "warm up" the French Press and mug but there is little evidence that it impacts the taste of your coffee. If your French Press hasn't been used in a while this step can help wash out any dust or left over residue.

      Once the water is heated up, pour it into the empty French Press beaker to fill it 1/4 of the way up. Place the top on the beaker and push the plunger all the way down. Swirl the hot water around inside for a few seconds to break loose any old coffee particles.
      Remove the top off of the beaker and pour the water out.</p>

    <h1>Step 4</h1>
    <h2>Combine ground coffee and hot water</h2>
    <p>Get your timer, scale (or measuring cup) and stirring spoon ready.

      Pour ground coffee into the bottom of the beaker and gently shake it back and forth to level out the grounds.

      Place the beaker on a scale and tare it out to zero. Pour hot water into the beaker until the scale reads the amount listed on the Coffee to Water Ratio chart above. The pour should be relatively quick while trying to get all of the coffee wet.

      If a scale isn't available, pour the amount of hot water listed on the Coffee to Water Ratio chart above into a measuring cup and then pour from the measuring cup into the beaker.
    </p>

    <h1>Step 5</h1>
    <h2>Stir and time the steep</h2>
    <p>Gently stir the coffee and water for a few seconds to ensure all of the coffee grounds are wet.

      Place the top on the beaker with the plunger pulled all of the way up to help keep the temperature up while the coffee brews.

      Set the timer for 3:30 and let the coffee steep in peace.</p>

    <h1>Step 6</h1>
    <h2>Deal with the crust</h2>
    <p>Once the timer goes off lift the top from the beaker. There should be a crust-like layer of coffee grounds on the surface that formed while the coffee was steeping.

      The final taste and texture of the coffee can be changed depending on how the crust is handled.

      For a full bodied final result use the spoon to gently break up the crust and briefly stir it. This will cause most of the coffee to fall to the bottom of the beaker.

      For a light bodied final result use the spoon to scoop the crust off and discard it. Keep scooping until you have removed all the floating coffee grounds.</p>

    <h1>Step 7</h1>
    <h2>Press and pour</h2>
    <p>Place the top back onto the beaker and gently press the plunger all the way down.

      If the plunger drops to the bottom with almost no resistance, the grind is too coarse. Alternatively, if it takes a lot of effort to press the plunger to the bottom the grind is too fine.

      Once the plunger reaches the bottom, pour the brewed coffee slowly from the French Press into the mug and enjoy.</p>
    </section>

    <h1>Step 8</h1>
    <h2>Save the last drop</h2>
    <p>Avoid pouring out the last 10% of brewed coffee that is in the beaker. This last bit will have a high concentration of silt.

      Same goes with your mug, so avoid drinking that last sip!
    </p>

  </div>
</main>
</div>
<script>
  src = "https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" >
</script>
              
            
!

CSS

              
                

#navbar {
    position: relative;
    text-align: left;
    margin-right: 40px;
    position: fixed;
    width: 16%;
  border: 5px solid black;
  background-color: #40E0D0;
  padding: 15px;
  margin: 15px;
  
    
  }



#image {
  float: center;
  
}

body {
font-family: Segoe Print;
  background-color: #AFEEEE; 
}




div.main-body {
  display: grid;
  grid-template-columns: minmax(200px, auto) 1fr
gris-template-areas: "navbar mainContent"
    grid-gap: 20px;
}





main#main-doc {
  gris-area: mainContent;
}

header {
  font-size: 25px;
    font-weight: bold;
  text-align: center;
  font-family: Segoe Print;}

code {
  background-color: gray;
  display: block;
  padding 20px;
}



@media only screen and (max-width: 600px) {
  body {
    background-color: #00CED1;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console