Hi. I’m Daniele and I’m trying to get the certification on responsive web design. Lately I finished the Technical Documentation Page project, I followed all the instructions, but it still tells me that the ids of the sections doesn’t match with the header text and that the same text doesn’t match with the section headers, but they actually do.
Can you help me, please?
Thank you in advance
Hi @DanieleErcoli243 and welcome to the community.
Please can you post all your code into the template or into a new forum post.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Please can you also link to the challenge you are doing. You can do this in the template.
I’ve also changed the category of your request to HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>HTML and CSS Documentation</header>
<ul>
<li>
<a class="nav-link" href="#Tags">Tags</a>
</li>
<li>
<a class="nav-link" href="#Effects">Effects</a>
</li>
<li>
<a class="nav-link" href="#Selectors">Selectors</a>
</li>
<li>
<a class="nav-link" href="#Position">Position</a>
</li>
<li>
<a class="nav-link" href="#Flexbox">Flexbox</a>
</li>
</ul>
</nav>
<main id="main-doc"></main>
<section class="main-section" id="Tags">
</header>Tags<header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod delectus qui asperiores iusto minus voluptatibus. Quaerat blanditiis quibusdam voluptas minus. Recusandae excepturi, suscipit asperiores dignissimos adipisci dicta error sequi in.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod delectus qui asperiores iusto minus voluptatibus. Quaerat blanditiis quibusdam voluptas minus. Recusandae excepturi, suscipit asperiores dignissimos adipisci dicta error sequi in.</p>
<ul>
<li>
<span>p</span>
</li>
<li>
<span>a</span>
</li>
<li>
<span>article</span>
</li>
<li>
<span>figure</span>
</li>
<li>
<span>img</span>
</li>
</ul>
<code>
<figure>
<img src="" alt="">
</figure>
</code>
</section>
<section class="main-section" id="Effects">
<header>Effects</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque eligendi cum ut, ipsum nemo quis maxime illo unde, aliquid aut dolorum laboriosam eius accusamus optio provident quidem illum repellat ex.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque eligendi cum ut, ipsum nemo quis maxime illo unde, aliquid aut dolorum laboriosam eius accusamus optio provident quidem illum repellat ex.</p>
<ul>
<li>rotation</li>
<li>scale</li>
<li>opacity</li>
<li>hover</li>
<li>animation</li>
</ul>
<code>
img:hover {
transform: scale(2, 3);
}
</code>
</section>
<section class="main-section" id="Selectors">
<header>Selectors</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A autem aspernatur nostrum necessitatibus architecto sit, exercitationem nobis delectus tempora provident obcaecati ducimus harum eos ipsa. Minus in laudantium facere dolor.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A autem aspernatur nostrum necessitatibus architecto sit, exercitationem nobis delectus tempora provident obcaecati ducimus harum eos ipsa. Minus in laudantium facere dolor.</p>
<ul>
<li>.</li>
<li>#</li>
<li>.class[value=""]</li>
<li>::after</li>
<li>::before</li>
</ul>
<code>
#selectors {
}
</code>
</section>
<section class="main-section" id="Position">
<header>Position</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dolorem ipsum iste aliquid doloremque dolorum et ut! Ex repellendus maxime, alias neque sapiente doloribus, est ipsum, nulla incidunt impedit ratione?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dolorem ipsum iste aliquid doloremque dolorum et ut! Ex repellendus maxime, alias neque sapiente doloribus, est ipsum, nulla incidunt impedit ratione?</p>
<ul>
<li>static</li>
<li>relative</li>
<li>absolute</li>
<li>sticky</li>
<li>fixed</li>
</ul>
<code>
position: absolute;
</code>
</section>
<section class="main-section" id="Flexbox">
<header>Flexbox</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nemo commodi aspernatur in iure porro repellendus eveniet? Fuga quam numquam ut porro ex. Perspiciatis sint veniam omnis exercitationem labore facilis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nemo commodi aspernatur in iure porro repellendus eveniet? Fuga quam numquam ut porro ex. Perspiciatis sint veniam omnis exercitationem labore facilis.</p>
<ul>
<li>display: flex</li>
<li>justify-content</li>
<li>align-items</li>
<li>flex-direction</li>
<li>align-content</li>
</ul>
<code>
display: flex;
justify-content: center;
align-items: center;
</code>
</section>
</main>
</body>
</html>
Here it is. I hope I did it properly.
Hey there!
Two things to point out:
- Your sections should be inside the
.main-docand it seems like you are closing the main element right away. - This doesn’t seem right:
</header>Tags<header>
Good luck!
Thank you so much. I changed the position of the main and VSCode completed it on its own and I didn’t noticed it. I looked at the header focusing on the text so I completely forgot the tag. It worked.
Thank you again 
1 Like