Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I have used media queries in my project, but the test always fails and asks me to use media queries at least once

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Git Technical Documentation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav id="navbar">
    <header>Git Documentation</header>
    <div class="nav-group">
      <div class="nav-group-title">Getting Started</div>
      <a class="nav-link" href="#Introduction">Introduction</a>
      <a class="nav-link" href="#Installation_and_Configuration">Installation and Configuration</a>
    </div>
    <div class="nav-group">
      <div class="nav-group-title">Core Concepts</div>
      <a class="nav-link" href="#Basic_Commands">Basic Commands</a>
      <a class="nav-link" href="#Branching">Branching</a>
      <a class="nav-link" href="#Remote_Collaboration">Remote Collaboration</a>
    </div>
    <div class="nav-group">
      <div class="nav-group-title">Advanced</div>
      <a class="nav-link" href="#Practical_Case">Practical Case</a>
      <a class="nav-link" href="#Tips_and_Troubleshooting">Tips and Troubleshooting</a>
      <a class="nav-link" href="#Appendix">Appendix</a>
    </div>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <p>Git is a distributed version control system designed to handle everything from small to very large projects with speed and efficiency.</p>
      <p>It allows multiple developers to work on the same project without interfering with each other.</p>
      <ul>
        <li>Distributed architecture</li>
        <li>Efficient branching and merging</li>
        <li>Strong community support</li>
      </ul>
    </section>
    <section class="main-section" id="Installation_and_Configuration">
      <header>Installation and Configuration</header>
      <p>Git can be installed on Windows, Mac, and Linux platforms.</p>
      <p>After installation, configure your username and email:</p>
      <pre><code>git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"</code></pre>
      <p>Initialize a repository:</p>
      <pre><code>git init</code></pre>
      <ul>
        <li>Set username and email</li>
        <li>Initialize a local repository</li>
      </ul>
    </section>
    <section class="main-section" id="Basic_Commands">
      <header>Basic Commands</header>
      <p>Common commands include:</p>
      <ul>
        <li><code>git add</code>: Add files to the staging area</li>
        <li><code>git commit</code>: Commit changes</li>
        <li><code>git status</code>: Show the working tree status</li>
        <li><code>git log</code>: Show commit logs</li>
        <li><code>git diff</code>: Show changes between commits</li>
      </ul>
      <pre><code>git add .
git commit -m "Initial commit"
git status</code></pre>
    </section>
    <section class="main-section" id="Branching">
      <header>Branching</header>
      <p>Branching is a core feature in Git.</p>
      <ul>
        <li>Create a branch: <code>git branch new-branch</code></li>
        <li>Switch branch: <code>git checkout branch-name</code></li>
        <li>Merge branch: <code>git merge branch-name</code></li>
        <li>Delete branch: <code>git branch -d branch-name</code></li>
      </ul>
      <p>Resolve conflicts manually if they occur during merging.</p>
    </section>
    <section class="main-section" id="Remote_Collaboration">
      <header>Remote Collaboration</header>
      <p>Git supports collaboration with remote repositories like GitHub.</p>
      <ul>
        <li>Add remote: <code>git remote add origin &lt;repo-url&gt;</code></li>
        <li>Push: <code>git push origin master</code></li>
        <li>Pull: <code>git pull origin master</code></li>
        <li>Clone: <code>git clone &lt;repo-url&gt;</code></li>
      </ul>
    </section>
    <section class="main-section" id="Practical_Case">
      <header>Practical Case</header>
      <p>Set up a Git project from scratch:</p>
      <ol>
        <li>Initialize the project and commit</li>
        <li>Push to GitHub</li>
        <li>Collaborate with others</li>
      </ol>
      <pre><code>git init
git add .
git commit -m "init"
git remote add origin &lt;repo-url&gt;
git push -u origin master</code></pre>
    </section>
    <section class="main-section" id="Tips_and_Troubleshooting">
      <header>Tips and Troubleshooting</header>
      <ul>
        <li>How to write a <code>.gitignore</code> file</li>
        <li>Using <code>git stash</code></li>
        <li>Difference between <code>git rebase</code> and <code>git merge</code></li>
        <li>How to revert a bad commit</li>
      </ul>
      <p>Use <code>git status</code> and <code>git log</code> to troubleshoot common issues.</p>
    </section>
    <section class="main-section" id="Appendix">
      <header>Appendix</header>
      <ul>
        <li>Common command cheat sheet</li>
        <li>Recommended Git learning resources</li>
        <li>GUI tools (e.g., GitKraken, GitHub Desktop)</li>
      </ul>
      <p>For more resources, visit <a href="https://git-scm.com/" target="_blank">Git official website</a>.</p>
    </section>
  </main>
</body>
</html> 


@media (max-width: 600px) {
  body { background: #f0f0f0; }
}
body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: #f9f9fb; color: #222; }
#navbar {
  position: fixed;
  top: 0; left: 0; height: 100vh; width: 270px;
  background: #232946;
  color: #fff;
  border-right: 1.5px solid #eebbc3;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(35,41,70,0.07);
  z-index: 100;
}
#navbar header {
  font-size: 2em;
  font-weight: bold;
  padding: 28px 24px 16px 24px;
  letter-spacing: 1px;
  color: #eebbc3;
}
.nav-link {
  display: block;
  padding: 14px 24px;
  color: #fff;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-size: 1.08em;
}
.nav-link:hover, .nav-link:focus {
  background: #eebbc3;
  color: #232946;
  border-left: 4px solid #232946;
}
#main-doc {
  margin-left: 290px;
  padding: 48px 36px 36px 36px;
  max-width: 900px;
}
.main-section {
  margin-bottom: 48px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(35,41,70,0.04);
  padding: 28px 28px 20px 28px;
}
.main-section header {
  font-size: 1.45em;
  margin-bottom: 12px;
  color: #232946;
  font-weight: 600;
}
ul, ol { margin-left: 28px; }
code {
  background: #eebbc3;
  color: #232946;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 1em;
}
pre code {
  display: block;
  background: #232946;
  color: #eebbc3;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 1em;
}
a { transition: color 0.2s; }
@media (max-width: 800px) {
  #navbar {
    position: static;
    width: 100vw;
    height: auto;
    border-right: none;
    border-bottom: 2px solid #eebbc3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none;
  }
  #main-doc {
    margin-left: 0;
    padding: 24px 8px;
  }
  .main-section {
    padding: 18px 8px 12px 8px;
  }
  .nav-link { padding: 10px 14px; font-size: 1em; }
}

.nav-group {
  margin-bottom: 18px;
}
.nav-group-title {
  font-size: 1.08em;
  font-weight: bold;
  color: #eebbc3;
  padding: 10px 24px 4px 24px;
  letter-spacing: 0.5px;
  background: transparent;
}
.nav-group .nav-link {
  padding-left: 36px;
  font-size: 1em;
} 
@media (max-width: 600px) {
  body {
    background: #f0f0f0;
  }

  #navbar header {
    font-size: 1.5em;
    padding: 20px;
  }

  .nav-link {
    font-size: 0.95em;
    padding: 8px 16px;
  }

  .main-section header {
    font-size: 1.25em;
  }

  pre code {
    font-size: 0.95em;
    padding: 12px;
  }
}
@media (max-width: 600px) {
  #navbar {
    display: none;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Can I see your HTML? Before you send it, you can try moving your media queries so that they are at the end of your code?

3

I tried.There should be no problem with html.@media (max-width: 600px) {
#navbar {
display: none;
}
}

4

I need to perform tests on your code, and without the HTML, all tests are failing.

5

Only this test has a problem // running tests
22. Your Technical Documentation project should use at least one media query.
// tests completed
I gave my html content.

8

is your css being applied at all? you wrote a lot of stuff, is any of that taking effect?

1 Like
9

image
image1620×928 69 KB

yep

10

is that what you see in the preview when you write the code in the freecodecamp editor?

11

But it’s different in freecodecamp

image
image856×741 55.5 KB

12

yep, that’s your issue

can you figure it out? or do you need more hints?

13

I don’t understand, my html already references the css, I need some tips

image
image1123×608 115 KB

1 Like
14

look slightly higher than that, to the filenames

15

image
image809×650 83.5 KB

16

what are you sharing this for?

17

I need to fix this because I’m sure my code should be using media queries, but why can’t it detect it?
I don’t understand what this means: loom is slightly above that, to the file name

18

look higher in the page, look at the filenames above the editor

what are the names of the two files?

1 Like
19

I understand, thank you