Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Can’t solve User Story #15 on Build a Technical Documentation Page Certification Project.
I tried to do it the same as in the Building a Piano course, and also researched old forums but had no success. Can someone please guide me? Thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE HTML><HTML LANG="EN">
  <HEAD>
    <META CHARSET="UTF-8">
    <META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH INITIAL-SCALE=1.0">
    <TITLE>TECHNICAL-DOCUMENT</TITLE>
    <LINK REL="STYLESHEET" HREF="STYLES.CSS">
  </HEAD>
  <BODY>
    <MAIN ID="main-doc">
<nav id="navbar">
      <header class="nav-header">Technical Document</header>
  <a class="nav-link" href="#Main_Section_1">Main Section 1</a>
  <a class="nav-link" href="#Main_Section_2">Main Section 2</a>
  <a class="nav-link" href="#Main_Section_3">Main Section 3</a>
  <a class="nav-link" href="#Main_Section_4">Main Section 4</a>
  <a class="nav-link" href="#Main_Section_5">Main Section 5</a>
  </nav>   
      <section class="main-section" id="Main_Section_1" ><header>Main Section 1</header>
      <p>Information of Section 1</p>
      <p><ul><li>Bullet point 1 <code>.html</code></li></ul></p>
      </section>
      <section class="main-section" id="Main_Section_2" ><header>Main Section 2</header>
      <p>Information of Section 2</p>
      <p><ul><li>Bullet point 2 <code>www.</code></li></ul></p>
      </section>
      <section class="main-section" id="Main_Section_3" ><header>Main Section 3</header>
      <p>Information of Section 3</p>
      <p><ul><li>Bullet point 3 <code>.js</code></li></ul></p>
      </section>
      <section class="main-section" id="Main_Section_4" ><header>Main Section 4</header>
      <p>Information of Section 4</p>
      <p><ul><li>Bullet point 4 <code>https//:</code></li></ul></p>
      </section>
      <section class="main-section" id="Main_Section_5" ><header>Main Section 5</header>
      <p>Information of Section 5</p>
      <p><ul><li>Bullet point 5 <code>Array</code></li></ul></p>
      </section>

    </MAIN>
  </BODY>
</HTML>

/* file: styles.css */
#navbar{background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
}

@media(max-width: 768px) 
   #navbar{width:358px;
   }

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

You need a media Query and its the last bit of code here. It goes directly under your closing HTML tag. example:

this will give your page a media player.

3

Hi, thanks for such a quick reply.
I am confused,…we didn’t create a media player in the Piano exercise, how do I add this? Can you please clarify a bit more? Thanks

4

Here is the code without the tags and there are three of them, there not supported because of a technical issue.

video controls
source src=“https://youtu.be/sn3CHauUbQ0” type=“video/mp4”
Your browser does not support the video tag.
video

5

  • The name of the CSS file should be styles.css all lowercase.

  • Your media query isn’t using the correct syntax.

@media (someCondition) {
   someSelector {
     theStyles
   }
}
1 Like
6

Hello!

@media query are tricky.

I found this great article on FCC News that explains and provides great examples for the @media query.

FCC News Media Query

Keep up the great progress!

Happy coding!

7

Thanks so much! That fixed the issue like magic! Can’t believe it was such a simple thing that I overlooked.

1 Like
8

Yes, they are but I’m determined to solve my confusion around them. Thanks for sharing this article!

9

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