Tell us what’s happening:
Hello! All tests passed except one:
“Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.”
I have double checked the spelling and formatting of all the IDs and texts, and they match. So I am not sure how I can go about resolving this.
Many thanks
Your code so far
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav id="navbar">
<header id="nvbr-hdr"><a href="#main-hdr">Home</a></header>
<ul id="nvbr-lst">
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Basic_Modes">Basic Modes</a></li>
<li><a class="nav-link" href="#Basic_Navigation">Basic Navigation</a></li>
<li><a class="nav-link" href="#Inserting_Text">Inserting Text</a></li>
<li><a class="nav-link" href="#Editing_Text">Editing Text</a></li>
<li><a class="nav-link" href="#Yank_and_Put">Yank and Put</a></li>
<li><a class="nav-link" href="#Visual_Mode">Visual Mode</a></li>
<li><a class="nav-link" href="#Searching">Searching</a></li>
<li><a class="nav-link" href="#Command_line_Mode_Commands">Command line Mode Commands</a></li>
<li><a class="nav-link" href="#Useful_Tips">Useful Tips</a></li>
<li><a class="nav-link" href="#Conclusion">Conclusion</a></li>
</ul>
</nav>
<header id="main-hdr"><span style="color: yellow;">Vim</span> Basic Commands Documentation</header>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header><h2>Introduction</h2></header>
<p>Vim is a highly configurable text editor built to enable efficient text editing.
It is an improved version of the vi editor distributed with most UNIX systems. This
documentation provides a basic overview of essential Vim commands to get you started.</p>
</section>
<section class="main-section" id="Basic_Modes">
<header><h2>Basic Modes</h2></header>
<p>Vim operates in several modes, each serving different purposes:</p>
<ul>
<li><b>Normal Mode</b>: Used for navigation and text manipulation.</li>
<li><b>Insert Mode</b>: Used for inserting text.</li>
<li><b>Visual Mode</b>: Used for text selection.</li>
<li><b>Command-line Mode</b>: Used for executing Vim commands.</li>
</ul>
<h3>Switching Modes</h3>
<ul>
<li><b>Normal Mode</b>: Press <code>Esc</code> to switch to Normal mode from any other mode.</li>
<li><b>Insert Mode</b>: Press <code>i</code> in Normal mode.</li>
<li><b>Visual Mode</b>: Press <code>v</code> in Normal mode.</li>
<li><b>Command-line Mode</b>: Press <code>:</code> in Normal mode.</li>
</ul>
</section>
<section class="main-section" id="Basic_Navigation">
<header><h2>Basic Navigation</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>h</code></td><td>Move cursor left</td></tr>
<tr><td><code>j</code></td><td>Move cursor down</td></tr>
<tr><td><code>k</code></td><td>Move cursor up</td></tr>
<tr><td><code>l</code></td><td>Move cursor right</td></tr>
<tr><td><code>w</code></td><td>Jump forwards to the start of a word</td></tr>
<tr><td><code>b</code></td><td>Jump backwards to the start of a word</td></tr>
<tr><td><code>0</code></td><td>Jump to the beginning of the line</td></tr>
<tr><td><code>$</code></td><td>Jump to the end of the line</td></tr>
<tr><td><code>gg</code></td><td>Go to the beginning of the file</td></tr>
<tr><td><code>G</code></td><td>Go to the end of the file</td></tr>
</tbody>
</table>
</section>
<section class="main-section" id="Inserting_Text">
<header><h2>Inserting Text</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>i</code></td><td>Insert before the cursor</td></tr>
<tr><td><code>I</code></td><td>Insert at the begging of the line</td></tr>
<tr><td><code>a</code></td><td>Insert after the cursor</td></tr>
<tr><td><code>A</code></td><td>Insert at the end of the line</td></tr>
<tr><td><code>o</code></td><td>Open a new line below the current line and insert</td></tr>
<tr><td><code>O</code></td><td>Open a new line above the current line and insert</td></tr>
</tbody>
</table>
</section>
<section class="main-section" id="Editing_Text">
<header><h2>Editing Text</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>x</code></td><td>Delete the character under the cursor</td></tr>
<tr><td><code>dw</code></td><td>Delete from the cursor to the start of the next word</td></tr>
<tr><td><code>dd</code></td><td>Delete the current line</td></tr>
<tr><td><code>d$</code></td><td>Delete from the cursor to the end of the line</td></tr>
<tr><td><code>u</code></td><td>Undo the last change</td></tr>
<tr><td><code>Ctrl-r</code></td><td>Redo the last undone change</td></tr>
<tr><td><code>r</code></td><td>Replace the character under the cursor</td></tr>
<tr><td><code>R</code></td><td>Enter replace mode</td></tr>
<tr><td><code>cw</code></td><td>Change from the cursor to the start of the next word</td></tr>
<tr><td><code>cc</code></td><td>Change the entire line</td></tr>
</tbody>
</table>
</section>
<section class="main-section" id="Yank_and_Put">
<header><h2>Yank and Put</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>yy</code></td><td>Yank (copy) the current line</td></tr>
<tr><td><code>yw</code></td><td>Yank from the cursor to the start of the next word</td></tr>
<tr><td><code>y$</code></td><td>Yank from the cursor to the end of the line</td></tr>
<tr><td><code>p</code></td><td>Put (paste) the yanked text after the cursor</td></tr>
<tr><td><code>P</code></td><td>Put the yanked text before the cursor</td></tr>
</tbody>
</table>
</section>
<section class="main-section" id="Visual_Mode">
<header><h2>Visual Mode</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>v</code></td><td>Start visual mode, mark lines, and move the cursor to selet text</td><tr>
<tr><td><code>V</code></td><td>Start visual line mode, select whole lines</td><tr>
<tr><td><code>Ctrl-v</code></td><td>Start visual block mode, slect a block of text</td><tr>
</tbody>
</table>
</section>
<section class="main-section" id="Searching">
<header><h2>Searching</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>/</code></td><td>Search forward for a pattern</td></tr>
<tr><td><code>?</code></td><td>Serach backward for a pattern</td></tr>
<tr><td><code>n</code></td><td>Repeat the search in the same direction</td></tr>
<tr><td><code>N</code></td><td>Repeat the serach in the opposite direction</td></tr>
</tbody>
</table>
</section>
<section class="main-section" id="Command_line_Mode_Commands">
<header><h2>Command line Mode Commands</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>:w</code></td><td>Write (save) the file</td></tr>
<tr><td><code>:q</code></td><td>Quit Vim</td></tr>
<tr><td><code>:wq</code></td><td>Write and quit</td></tr>
<tr><td><code>:q!</code></td><td>Quit without saving</td></tr>
<tr><td><code>:e filename</code></td><td>Open a file</td></tr>
<tr><td><code>:set number</code></td><td>Show line numbers</td></tr>
<tr><td><code>:set nonumber</code></td><td>Hide line numbers</td></tr>
</tbody>
</table>
</section>
<section class="main-section" id="Useful_Tips">
<header><h2>Useful Tips</h2></header>
<table>
<thead>
<tr><th>key</th><th>action</th></tr>
</thead>
<tbody>
<tr><td><code>:help [command]</code></td><td>Open Vim's built-in help for any command.</td></tr>
<tr><td><code>u</code></td><td>Use <code>u</code> to undo changes and <code>Ctrl-r</code> to redo them.</td></tr>
<tr><td><code>Esc</code></td><td>Press <code>Esc</code> frequently to ensure you are in Normal mode.</td></tr>
</tbody>
</table>
<!--<ul>
<li><b>:help [command]</b>: Open Vim's built-in help for any command.</li>
<li><b>u</b>: Use <code>u</code> to undo changes and <code>Ctrl-r</code> to redo them.</li>
<li><b>Esc</b>: Press <code>Esc</code>: frequently to ensure you are in Normal mode.</li>
</ul>-->
</section>
<section class="main-section" id="Conclusion">
<header><h2>Conclusion</h2></header>
<p>These basic commands cover essential operations in Vim, enabling you to perform common text
editing tasks efficiently. As you become more comfortable with these commands, you can explore
more advanced features and customizations to further enhance your productivity in Vim.</p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
</section>
<div id="spcr"></div>
</main>
</body>
</html>
body {
background-color: rgb(200, 200, 250);
font-size: 16px; font-family: "Gill Sans", sans-serif;
}
#navbar {
position: fixed; top: 100px; left: 0px;
width: 300px; height: 100%;
}
#nvbr-hdr {
background-color: rgb(150, 150, 200);
border-right: 5px solid rgb(0, 0, 0);
border-top: 1px solid rgb(0, 0, 0);
border-left: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
padding: 5px 10px; text-align: right;
}
#nvbr-lst {
list-style-type: none;
margin: 0; padding: 0;
}
#nvbr-lst li {
border: 1px solid black;
margin: 2px 0;
background-color: rgb(150, 150, 200);
border-right: 5px solid rgb(0, 0, 0);
border-top: 1px solid rgb(0, 0, 0);
border-left: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
padding: 5px 10px; text-align: right;
}
#main-hdr {
background-color: rgb(76, 76, 112); color: rgb(237, 237, 237);
position: absolute; top: 50px; left: 302px; right: 5px;
height: 100px;
border: 5px solid rgb(0, 0, 0);
padding: 10px; text-align: right;
font-weight: bold; font-style: italic;
}
#main-doc {
background-color: rgb(105, 105, 150); color: rgb(237, 237, 237);
position: absolute; top: 100px; left: 302px; right: 5px;
border-left: 5px solid rgb(0, 0, 0);
border-right: 5px solid rgb(0, 0, 0);
border-bottom: 5px solid rgb(0, 0, 0);
padding: 10px;
}
#spcr {
position: relative; top: 50px;
height: 1px;
}
table {
background-color: rgb(120, 120, 170);
border-collapse: collapse;
}
th, td {
border: 1px solid rgb(0, 0, 0);
padding: 5px 20px;
}
td:hover {
background-color: rgb(237, 237, 237);
color: rgb(0, 0, 0);
}
section {padding-bottom: 20px;}
th {background-color: rgb(76, 76, 112);}
td:first-of-type {text-align: center;}
a:hover {color: yellow}
@media (min-width: 1338px) {
#main-doc, #main-hdr {width: 1000px;}
}
@media (max-width: 800px) {
#navbar {width: 150px;}
#main-doc, #main-hdr {left: 152px; right: 5px;}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page