Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Running the tests I fail for ‘None of your header elements should be empty’ when none of my header elements are empty. Am I misinterpreting the requirements? I must be missing something, does it need a specific id or name?

### Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <header id="main_header">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arduino</title>
    <link rel="stylesheet" href="./styles.css">
  </header>


  <nav id="navbar">
      <header id="arduino_documentation">Arduino Documentation</header>
      <a class="nav-link" href="#introduction">Introduction</a>
      <a class="nav-link" href="#hardware">Hardware</a>
      <a class="nav-link" href="#software">Software</a>
      <a class="nav-link" href="#features_of_arduino">Features of Arduino</a>
      <a class="nav-link" href="#who_uses_arduino?">Who uses Arduino?</a>
  </nav>


  <main id="main-doc">

    <section class="main-section" id="introduction">
      <header class="sub-heading" id="introduction">Introduction</header>
      <p>Arduino is an open-source electronics platform based on easy-to-use hardware and software.</p>
      <p>Whether you're interested in learning electronics, building robots, automating your home, or creating interactive art, Arduino offers a powerful and accessible platform to bring your ideas to life</p>
      <div id="section-break"></div>
    </section>


    <section class="main-section" id="hardware">
      <header class="sub-heading" id="hardware">Hardware</header>
      <p>In the context of Arduino, hardware refers to the physical components that make up the electronic boards and circuits used for prototyping and building interactive projects. These components work together to execute the instructions given in Arduino code, allowing you to create various interactive objects and systems.</p>
      <p>Here's a breakdown of the key hardware elements involved:</p>
      <li class="list-item-indent">Microcontrollers: These small circuit boards have a brain (microprocessor), memory, and input/output pins (like eyes and ears to interact with the world). Some popular Arduino board models include Uno, Nano, Mega, etc.</li>
      <li class="list-item-indent">Sensors: These are devices that detect things like light, temperature, touch, and distance. You can connect them to the Arduino to gather data from your environment</li>
      <li class="list-item-indent">Actuators: These are devices that do things based on instructions from the Arduino. Examples include LEDs, motors, speakers, and servos.</li>
      <li class="list-item-indent">Other components: Additional parts like breadboards, wires, resistors, switches, etc., can be used to connect everything and control the circuit.</li>
      <div id="section-break"></div>
    </section>


    <section class="main-section" id="software">
      <header class="sub-heading" id="software">Software</header>
      <p>In the context of Arduino, software encompasses the programs, code, and tools that enable you to create, interact with, and control the hardware. It bridges the gap between your ideas and the physical world, bringing your Arduino projects to life.</p>
      <p>Here are some examples of arduino code:</p>
      <li class="list-item-indent">Including libraries (example for liquid crystal display library)</li>
        <code>#include &lt;LiquidCrystal.h></code>
        <li class="list-item-indent">Declaring Variables</li>
        <code>const int analogPin = A0;</code><br>
        <code>const int ledCount = 10;</code>
        <li class="list-item-indent">Setup (code only runs once)</li>
        <code>void setup() {</code><br>
        <code>// the code here only runs once</code><br>
        <code>}</code>
        <li class="list-item-indent">Loop (code repeats)</li>
        <code>void loop {</code><br>
        <code>// this code will run over and over</code><br>
        <code>}</code>
    </section>


    <section class="main-section" id="features_of_arduino">
      <header class="sub-heading" id="features_of_arduino">Features of Arduino</header>
      <p>Easy to use: The hardware and software are designed to be accessible even for beginners with no prior coding or electronics experience.</p>
      <p>Affordable: Arduino boards and components are relatively inexpensive, making it a budget-friendly platform for experimentation.</p>
    </section>


    <section class="main-section" id="who_uses_arduino?">
      <header class="sub-heading" id="who_uses_arduino?">Who uses Arduino?</header>
      <p>Hobbyists and makers</p>
      <p>Educators and students</p>
    </section>

    
  </main>
</html>

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

1 Like
2 
<header id="main_header">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arduino</title>
    <link rel="stylesheet" href="./styles.css">
  </header>

I think you are confusing <head> and <header>. Here is a typical HTML boilerplate, do you notice the difference?

<!DOCTYPE html>
<html lang="en">
  <head>
  // meta tags, title, etc. go inside the head element
  </head>
  <body>
  // all the content that will be displayed on your page
  </body>
</html>
1 Like
3

Thank you. It makes sense now. I scanned the code over and over looking for misspellings etc, not wording. Not sure where I got from, but it makes perfect sense now.

2 Likes
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.