Technical Documentation Page - Build a Technical Documentation Page

Here is my current code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Eggbeater Documentation Page</title>
</head>

<body>
<main id="main-doc">

  <section class="main-section" id="Introduction">
<header>Introduction</header>
<p> In this project I am going to build a Technical Documentation site for an Oster eggbeater.</p>
<p> I am going to use the following code elements to do this: </p>
<code>Nav,</code>
<code>P,</code>
<code>Li (both OL and UL),</code>
<code>Code,</code>
<code>Section,</code>
<code>Header,</code>
<code>Main,</code>
<code> and a.</code>
    </section>

  <section class="main-section" id="Eggbeater">
<header>Eggbeater</header>
  <p> Welcome to the user manual for the  Oster Hand Mixer with Retractable Cord.</p>
  <p> Model Numver: FPSTHM2578</p>
    </section>


  <section class="main-section" id="Safety">
<header>Safety<header>
  <p> Please adhere to the following safety precaustions to ensure proper use and safety with this machine. </p>
  <ul>
    <li>To protect against risk of electrical shock, do not put hand mixer in water or
other liquid. This may cause personal injury and/or damage to the product.</li>
    <li>To disconnect, turn off controls and unplug from outlet.</li>
    <li>lose supervision is necessary when any appliance is used by or near children.</li>
    <li>nplug from outlet while not in use, before putting on or taking off parts and
before cleaning.</li>
    <li>Avoid contact with moving parts. Keep hands, hair, clothing, as well as spatulas
and other utensils away from beaters during operation to reduce the risk of
injury to persons and/or damage to the hand mixer.</li>
    <li>Do not operate hand mixer with a damaged cord or plug, after the appliance
malfunctions, or if it is dropped or damaged in any manner. Return appliance
to the nearest Authorized Sunbeam Service Center for examination, repair or
electrical or mechanical adjustment.</li>
    <li>Do not use with an extension cord.</li>
    <li>The use of attachments not recommended or sold by the manufacturer may
cause fire, electrical shock or injury.</li>
    <li>Do not let cord hang over edge of table or countertop.</li>
    <li>Do not let cord touch hot surfaces, including a stove. </li>
    <li>Do not use outdoors or for commercial purposes.</li>
    <li>Remove beaters from hand mixer before washing them.</li>
    <li>Do not place hand mixer on or near a hot burner or in a heated oven.</li>
    <li>Do not use hand mixer for other than intended use.</li>
    <li>Do not leave hand mixer unattended while it is operating.</li>
    <li>THIS UNIT IS FOR HOUSEHOLD USE ONLY</li>
    <li>This appliance has a polarized plug (one blade is wider than the other). To reduce
the risk of electric shock, this plug will fit in a polarized outlet only one way. If the
plug does not fit fully in the outlet, reverse the plug. If it still does not fit, contact a
qualified electrician. Do not modify the plug in any way.</li>
</ul>
    </section>

  <section class="main-section" id="Heel_And_Bowl">
<header>Heel And Bowl</header>
<p>The heel & bowl rest keep the mixer resting on the
bowl or sitting upright on your counter</p>
    </section>

     <section class="main-section" id="Retractable_Cord">
<header>Retractable Cord</header>
<p>The cord has been designed to retract into the mixer
housing for convenient storage when not in use.
Button located on side of unit (see figure B). Retract
cord until you see the green part of the cord show up.
Do not retract beyond the red part of the cord.</p>
    </section>


  <section class="main-section" id="Eject_Button">
<header>Eject Button</header>
<p>This Oster® Hand Mixer features a convenient beater
eject button. The design allows for a smooth push
of the thumb to release the beaters or dough hooks. There will not be a noticeable
“click”.</p>
<p>Note: Make sure the mixer is turned off and unplugged before inserting or
removing attachments.</p>
    </section>


  <section class="main-section" id="Burst_Of_Power">
<header>Burst Of Power</header>
<p>The Burst of Power® feature allows for an added
boost to the selected speed setting at the press of the
button. During especially heavy mixing tasks, press
the button to drive through the mixture with ease.
Once the button is released, the mixer will return to
the original speed setting.</p>
    </section>

     <section class="main-section" id="Beaters">
<header>Beaters</header>
<p>The beater design allows for thorough, fast mixing
results for all types of batters. The beaters are
dishwasher safe.</p>
    </section>

     <section class="main-section" id="Whisk">
<header>Whisk</header>
<p>The whisk is used to beat air into mixtures such as
egg whites, yolks or cream.</p>
    </section>

     <section class="main-section" id="Use">
<header>Use</header>
<p>Before using your mixer for the first time, wash the beaters and whisk in hot/soapy
water, or the dishwasher. Rinse and dry.
Be sure speed control is in the “OFF” position and power cord is unplugged from
an electrical outlet. Insert beaters one at a time, by placing stem end of beaters into the opening drive holes on the bottom of the mixer. Turn beater slightly and push
in until beater clicks into position.
Note that the beaters are interchangeable.
Firmly pull out a suitable length of cord and plug into an appropriate outlet.
DO NOT pull the cord out beyond the red mark or you may damage the cord.</p>
    </section>


     <section class="main-section" id="Mixing">
<header>Mixing</header>
<p>Slowly guide mixer around sides and through center of bowl, going in the same
direction. Be careful not to overbeat the mixture. Overbeating tends to make some
mixtures tough.
Whenever scraping of the bowl is required, stop the mixer and scrape sides and
bottom of bowl with a rubber spatula as needed. Turn speed control to “OFF” and
rest mixer on its heel rest while adding ingredients. Be sure to position beaters over
mixing bowl so any drippings will fall back into mixing bowl.
When mixing is complete, set speed control to “1” and raise beaters slowly from
batter to clean off clinging food. Be sure to turn unit to “off” before raising beaters
completely out of mixing bowl.</p>
    </section>

     <section class="main-section" id="Adjust_Speed">
<header>Adjust Speed</header>
<p>You can select a speed by turning the position selector to the speed required,
from Speed 1 to Speed 6.</p>
<p>No matter where the position selector is situated, you can get a higher speed
immediately by pressing the “Burst” button.
</p>
<p>Note: Do not press the “Burst” button if the position selector is at the “0”
position. This may damage the mechanism.</p>
    </section>

     <section class="main-section" id="Select_Speeds">
<header>Select Speeds</header>
<p>Speeds 1 through 6: For continuous use of stirring, beating or mixing of ingredients
and thin batters. May also be useful for whipping egg whites or flour into various
doughs. May be used in mixing cake dough, making sauces and even heavy
doughs</p>
    </section>

<section class="main-section" id="Ejecting">
<header>Ejecting</header>
<p>Be sure speed control is at the “OFF” position and cord is removed from electrical
outlet. Scrape off any excess batter with a rubber spatula. Grasp the stems of the
beaters with your hand and press the beater eject button. Beaters will release into
your hand.</p>
    </section>

    <section class="main-section" id="Tool_Use">
<header>Tool Use</header>
<p>Two mixer tools are used as follows:</p>
<p>Beaters: For easy mixing of dough, eggs, cream, mayonnaise and for
mixing or stirring sauces and pudding powders.</p>
<p>Whisk: Used for beating air into mixture such as egg whites, meringue,
scrambled eggs, or cream.</p>
    </section>


    <section class="main-section" id="Care">
<header>Care</header>
<ol>
<li>Before cleaning any part of the mixer, set the position selector to the “OFF”
position, then unplug the cord from the outlet and eject the beaters.</li>
<li>Wash the beaters before and after every use. The beaters may be washed in hot,
soapy water or in a dishwasher.</li>
<li>The mixer and the cord can be cleaned with a damp cloth but the final clean
must be with a dry cloth.</li>
<li>To remove stubborn spots, wipe surfaces with a piece of cloth, slightly
dampened, in soapy water or a mild, non-abrasive cleaner.</li>
<li>Do not use any abrasive cleaner or material to clean any part of the hand mixer,
as it can harm the body of the product.</li>
<li>After removing cord from electrical outlet, clean mixer head with a damp
cloth. Dry all parts thoroughly before using them again. DO NOT IMMERSE
MIXER IN WATER. This may cause electric shock, injury, or damage to the
product. Avoid the use of abrasive cleaners that will damage the finish of your
mixer.</li>
  </ol>
    </section>

    <section class="main-section" id="Storage">
<header>Storage</header>
<p>Hold the plug end by hand and press the cord retract button to reel the cord into
the mixer housing (failure to hold plug may cause plug to whip around). Note
that the last few inches of cord may need to be pushed into the housing while the
release button is depressed. Store the hand mixer on its heel rest in a clean, dry
location such as a cabinet or shelf. Store beaters in a drawer.</p>
    </section>

    <section class="main-section" id="Maintenence">
<header>Maintenence</header>

<p>Other than the recommended cleaning, no further user maintenance should be
necessary. If for any reason your hand mixer should require repairs, do not try to
fix it yourself. Send it to the nearest Authorized Sunbeam Appliance Service Center.</p>
<p>Caution: The speed of the cord reel is high. Please hold the plug end by hand
before pressing the release button.</p>
<p>Do Not Allow Children To Use Retractable
Cord Feature as the Cord May Cause Injury.</p>
<p>All other servicing should be performed by an Authorized Service Representative.</p>
  
      </section>
    <section class="main-section" id="Warranty">
<header>Warranty</header>
<p>Sunbeam Products, Inc. doing business as Jarden Consumer Solutions, or if in Canada, Sunbeam
Corporation (Canada) Limited doing business as Jarden Consumer Solutions (collectively “JCS”)
warrants that for a period of one year from the date of purchase, this product will be free from defects
in material and workmanship. JCS, at its option, will repair or replace this product or any component
of the product found to be defective during the warranty period. Replacement will be made with a new
or remanufactured product or component. If the product is no longer available, replacement may be
made with a similar product of equal or greater value. This is your exclusive warranty.
This warranty is valid for the original retail purchaser from the date of initial retail purchase and
is not transferable. Keep the original sales receipt. Proof of purchase is required to obtain warranty
performance. JCS dealers, service centers, or retail stores selling JCS products do not have the right
to alter, modify or any way change the terms and conditions of this warranty.
This warranty does not cover normal wear of parts or damage resulting from any of the following:
negligent use or misuse of the product, use on improper voltage or current, use contrary to the
operating instructions, disassembly, repair or alteration by anyone other than JCS or an authorized
Sunbeam service center. Further, the warranty does not cover: Acts of God, such as fire, flood,
hurricanes and tornadoes.</p>
    </section>
   
   <section class="main-section" id="Reference">
     <header>Reference</header>
     <p> All of the documentation in this page is taken from <a href="https://www.oster.ca">Oster.ca</a></p>
     </section>

</main>  
     <nav id="navbar">
  <header>Eggbeater Documentation</header>
  <ul>
    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
    <li><a href="#Eggbeater" class="nav-link">Eggbeater</a></li>
    <li><a href="#Safety"  class="nav-link">Safety</a></li>
    <li><a href="#Heel_And_Bowl"  class="nav-link">Heel And Bowl</a></li>
    <li><a href="#Retractable_Cord"  class="nav-link">Retractable Cord</a></li>
    <li><a href="#Eject_Button"  class="nav-link">Eject Button</a></li>
    <li><a href="#Burst_Of_Power"  class="nav-link">Burst Of Power</a></li>
    <li><a href="#Beaters" class="nav-link">Beaters </a></li>
    <li><a href="#Whisk" class="nav-link">Whisk</a></li>
    <li><a href="#Use" class="nav-link">Use</a></li>
    <li><a href="#Mixing" class="nav-link">Mixing</a></li>
    <li><a href="#Adjust_Speed" class="nav-link">Adjust Speed</a></li>
    <li><a href="#Select_Speeds" class="nav-link">Select Speeds</a></li>
    <li><a href="#Ejecting" class="nav-link">Ejecting</a></li>
    <li><a href="#Tool_Use" class="nav-link">Tool Use</a></li>
    <li><a href="#Care" class="nav-link">Care</a></li>
    <li><a href="#Storage" class="nav-link">Storage </a></li>
    <li><a href="#Maintenence" class="nav-link">Maintenence</a></li>
    <li><a href="#Warranty" class="nav-link">Warranty</a></li>
    <li><a href="#Reference" class="nav-link">Reference</a></li>
    </ul>
    </nav>  

</body>
</html>

And here is the CSS:

html,
body {
  min-width: 290px;
  color: black;
  background-color: white;
  font-family: Calibri, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: grey;
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: bold;
}

#main-doc header {
  text-align: center;
  margin: 0px;
}

#navbar ul {
  height: 75%;
  padding: 0;
  overflow-x: hidden;
}

#navbar li {
  color: black;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: black;
  margin: 15px;
  font-size: 15rem;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: grey;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  
 #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 120px;
  }

  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

#safety ul {
  font-size: 12px;;
}

Now every one of the tests are passing except for two, and I’ve corss checked them a million times and cannot seem to figure it out.

Functionally everything works. But I can’ figure out what is causing it to flunk.

This is also a cert project, so I DEFINATELY want to get it submitted to a 100% pass.

These are tests it’s flunking:

1) Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.

2) Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

Any help would be appreciated.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

can you share https://codepen.io as it’ll be easier to debug than this format

1 Like

https://codepen.io/Mjesson33/pen/mdLvJpW

This type of thing will throw off the test (the header closing tag is missing the slash)

Check that all your closing tags are syntactically correct.

1 Like

Hbar!!!
UNBELIEVABLE!!!

  1. that you spotted that so fast after I’ve been staring at it for 2 days
  2. lol a single / messed up my test.

Anywho, that was it, I just passed.

YOU ARE AMAZING!!! Thank you.

PS. You have helped me since the my first day on FCC, and now I’ve come a looong way and I’m almost done the Responsive Web Design Course.

So you are A W E S O M E.

Thanks.

-Fellow Canadian - Mark

1 Like

I gotta tell you that I used an online validator to check your code. The validator found the error.

ok well still…
I didn’t even know there was such a thing as a validator :open_mouth:

So you are still the bomb.com

Is there something I can use for debugging?
like maybe codepen or something like that?
I also have VS code but it’s a bit too complicated for me still so can’t quite figure out how to debug my own stuff.

Codepen has a “analyze html” feature and “analyze css” feature which I like to use.

But an online html validator does a thorough review. (Just google one up)

Also codepen can indent your code for you (handy if you are a not neat coder like me)

Oh wow.

Thanks thats super helpful I will definately check that out.

One last question -if you have a sec.
How did you become a moderator? Like do you work for FCC?
Because I see you EVERYWHERE, I see you help tons and tons of people.
And is there something I can do within FCC to enhance my learning/practice, like any books, or audiobooks, etc?

FCC is amazing, and mixed with some Youtube and constantly looking things up I feel like I’m learning everything I’m supposed to. I help other newbies in FCC in the forum here and there when I can because I think it helps me lock in what I’ve learned by having to type/explain it.

But I SUPER do not feel competent with CSS positioning, grid, flex, etc. And I’m almost done the course :confused:

I would suggest to try below 2 things to catch tag related problems

  1. The W3C Markup Validation Service

  2. Start using VSCode, create index.html and copy-paste your code; VSCode will immediately complain about the error

1 Like

Just going through tutorial you won’t learn or gain confidence to apply for jobs

Start building projects from https://www.frontendmentor.io/challenges, this is the only way to learning programming by doing small - complex projects.

1 Like

Hi Mark,

I am a volunteer here. (Just like many people who help on here)

Please see this faq to read about how to become a moderator.

With respect to your learning. Keep working on your skills via the curriculum, and if you have time you can pursue other learning opportunities (it depends on where your interests lie, for eg if you like design then you should pursue additional learning as fCC doesn’t really teach that).

Reading online is a very important skill. You can look up keywords and concepts as you go or whenever you are stuck. You can also practice by trying to work on your own ideas.

Many people suggest listening to podcasts so you can get exposed to the lingo and ideas that are in the tech news. Joining a local group who likes to code and meet up is probably also good for your network. (These people may get hired somewhere and tell you about opportunities in your area).

You said you are in Canada. Try to look up volunteer opportunities with Canada learning code.
You can also try to volunteer at a public library as a tech coach. Anything to get you talking to people and getting around to discuss technology would probably be good experience.

Also I strongly encourage you to contribute to open source. If there is an open source project you like (like fCC) you can try to contribute and learn from that experience as well.

WRT grid and flex layout, you get better at these the more you use them. So hopefully you can use them more in your personal projects.

Hope this helps.

1 Like