Build a Technical Documentation Page html code examples

Code Feedback
1

Problem - code used in text for example does not show up. Evidently there is something I should include around “” to make it show as part of text to be read.

Your code so far

   <li>
              The 
              <!DOCTYPE html> declaration defines this document to be HTML5
            </li>
            <li>The
              <html> element is the root element of an HTML page</li>
            <li>
              The

              <head> element contains meta information about the document
            </li>
            <li>
              The
              <title> element specifies a title for the document
            </li>
            <li>
              The

              <body> element contains the visible page content
            </li>

            <li>The
              <h1> element defines a large heading
                <li>The
                  <p> element defines a paragraph
                </li>

          </ul>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

https://codepen.io/diane-nelson-trotter/pen/GaQBbj

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page

2

In Codepen there is no need to add this code:

<!doctype html>
<html>
  <head>
    <meta name=charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>document</title>
  </head>
  <body>

  </body>
  </html>

You only add what goes inbetween the body tags.

3

@dianetrotter, I’m thinking this something you have between <code> </code> tags in your Tech Doc and you want the elements to show without being rendered. If that’s the case you can have them view correctly by defining them as;
&lt;html&gt;

So in your document it would look like;
<li>The &lt;html&gt; element is the root element of an HTML page</li>
and when the page renders you’ll see <html>

(Hoping I explained that well enough. If not, hit me back)

1 Like
4

Wowser! Thank you! I’ll let you know.

1 Like
5

Brandon, maybe I’m missing something. I did this:

  • The <!DOCTYPE html< declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The 
              &lt;head&lt; element contains meta information about the document
        </li>
        <li>
          The
          &lt;title&lt; element specifies a title for the document
        </li>
        <li>
          The

          &lt;body&lt; element contains the visible page content
        </li>

        <li>The
          &lt;h1&lt; element defines a large heading</li>
            <li>The
              &lt;p&lt; element defines a paragraph
            </li>

      </ul>

    This is what is rendered

    The declaration defines this document to be HTML5
    The element is the root element of an HTML page
    The element contains meta information about the document
    The

6

I copied and pasted it but nothing happened (and made tidy). https://codepen.io/diane-nelson-trotter/pen/GaQBbj

7

I had a typo which I corrected but maybe too late…it should have been;
&lt;html&gt; (I mistyped &lt; for both)

8

It’s like the rendered page is frozen in time. I made both side < but the rendered page didn’t change after I tidied it up.

https://codepen.io/diane-nelson-trotter/pen/GaQBbj

9

Right, see my comment above about my typo

so in your ‘Learning the Basics’ header section the first unordered list item should be;

<li> The &lt;!DOCTYPE html&gt; declaration defines this document to be HTML5 </li>
10

[quote=“Roma, post:9, topic:279832”]

  • The <!DOCTYPE html> declaration defines this document to be HTML5
    • [/ I changed the end to "<" replacing the "g"
    11

    @dianetrotter, I’m not seeing anything updated in your pen so I don’t know where you’re at right now

    12

    I’m sorry. I changed all of my code, front and back, to <. I tidied up. Nothing changed. I haven’t done anything since. I might be confused.

    13

    Roma, I have no idea how this turned into a arrow and a period. I typed (ampersand letter “l” letter “t” semicolon.

    I am frustrated. Thank you for being patient with me.

    14

    Hi @dianetrotter, sorry I missed your last post and sorry if I confused you. To make it clearer I forked your pen and made the changes here

    Hoping this helps you a little.

    Message me if you have any questions.

    15

    In my case I used codepen Embed function making a new pen for every example
    https://codepen.io/franciscomelov/pen/QRmWOp

    there is a button at the bottom in the right that says “Embed”

    1 Like
    16

    Thank you Francis! I will look at it more closely when I get back from church. I should remember embedding from trying to embed the Youtube video.

    Thanks!

    17

    Thank you, Roma! You didn’t frustrate me. I seem like I start from scratch every time I start a new project. But I am slowly learning!

    I’ll look at it more closely when I get back home tonight.

    Thank you for your patience!

    Diane

    18

    @dianetrotter It is good to work from scratch on a new project. The more you work from scratch the better it will stay in your brain.

    19

    I did that on my last 3 projects and I understand what you are saying. This one has extra challenges for me. After I understand what is required, I will feel comfortable. It took me more than 6 week on Project 3. :roll_eyes: