Tell us what’s happening:
I finished my code but it says I need to link my #nav-link to the corresponding section element I did this by using the section element’s id as the href but it isn’t working.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Python">
<header>Python</header>
<code>print("Hello World")
</code>
<p>My personal favorite language</p>
<p>I think its easy because the syntax is similar to English</p>
</section>
<section class="main-section" id="Data_Types">
<header>Data Types</header>
<code>
my_variable = "Hello World"
</code>
<p>There are four data types</p>
<p>These include strings, integers, float, and boolean</p>
</section>
<section class="main-section" id="OOP_Coding">
<header>OOP Coding</header>
<code>class Circle</code>
<p>This method makes coding more efficient</p>
<p>It makes code reusible for different outcomes</p>
</section>
<section class="main-section" id="Pygame">
<header>Pygame</header>
<code>import pygame</code>
<p>Pygame is my favorite way to make a game</p>
<p>It is comprised of elements that make cool features</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="main-section" id="Tkinter">
<header>Tkinter</header>
<code>from tkinter import *</code>
<p>Tkinter is used for GUI</p>
<p>This creates a responsive web</p>
</section>
<nav id="navbar">
<header><a class="nav-link" href="Python">Python</a> <a class="nav-link" href="Data_Types">Data Types</a> <a class="nav-link" href="OOP_Coding">OOP Coding</a> <a class="nav-link" href="Pygame">Pygame</a> <a class="nav-link" href="Tkinter">Tkinter</a></header>
</nav>
</main>
</body>
</html
/* file: styles.css */
/* short snippet used from DEV community link is https://www.google.com/url?sa=i&url=https%3A%2F%2Fdev.to%2Fiftakher_hossen%2Fmedia-query-css-3akc&psig=AOvVaw0EU04BHRQXPzzKFVHj_PXY&ust=1748876002307000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCLiTxvq80I0DFQAAAAAdAAAAABAL */
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
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/18.5 Safari/605.1.15
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page