I’m really worst at this coding! Please, I need mentor. Check my Documentation Page Code
This pic doesn’t tell us anything about the issues you are having. You’ll need to paste your entire HTML and CSS in here if you want help. Also, it would help if you asked a specific question or at least described the issue you are having.
To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.
1 Like
When I try to run,
it brings the error message in this picture.
#navbar{display:block; position:fixed;width:160px;left:0;top:0; height:100%; border-right:3px solid black; z-index:1; overflow-x:hidden;}
main{margin-left:160px; }*{font-size:14px;}
@media(max-width:500px){main{width:250px;}}
code{width:70%; background-color:#0a0aff;}
a{display:block;margin:2px 2px 0 10px;border-top:2px solid #ff34;border-bottom:2px solid #ff34;}
h1{text-align:center; border-top:none;}
body{box-sizing:border-box;}
If you want good help you’ll need to paste all of your HTML in here. The error you are getting is related to your HTML, not your CSS. So we need to be able to see all of your HTML to help you properly.
1 Like
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<nav id="navbar">
<header><h1>Responsive Design</h1></header>
<a class="nav-link"href="#Basic_Knowlege"/>Basic Knowlege
<a class="nav-link" href="#HTML"/>HTML
<a class="nav-link" href="#CSS"/>CSS
<a class="nav-link" href="#Pseudo_Elements"/>Pseudo Elements
<a class="nav-link" href="#Accessibility"/>Accessibility
</nav>
<main id="main-doc">
<h1>My Encounters</h1>
<section class="main-section" id="Basic_Knowlege">
<header>Basic Knowlege</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<ul><li></li></ul>
<code></code>
</section>
<section class="main-section" id="HTML">
<header>HTML</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<ul><li></li></ul>
<code></code>
</section>
<section class="main-section" id="CSS">
<header>CSS</header>
<p>represents an opportunity to build one of the largest and most diverse service networks in the world.</p>
<p>represents an opportunity to build one of the largest and most diverse service networks in the world.</p>
<ul><li></li></ul>
<code></code>
</section>
<section class="main-section" id="Pseudo_Elements">
<header>Pseudo Elements</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>represents an opportunity to build one of the largest and most diverse service networks in the world.</p>
<ul><li></li></ul>
<code></code>
</section>
<section class="main-section" id="Accessibility">
<header>Accessibility</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>represents an opportunity to build one of the largest and most diverse service networks in the world.</p>
<ul><li></li></ul>
<code></code>
</section>
</main>
</body>
</html>Okay, I have some things I want you to think about.
First, in terms of broken code.
<a class="nav-link"href="#Basic_Knowlege"/>Basic Knowlege
Where is the closing tag for your nav links? anchor elements do not work without a closing tag.
You do not need a slash after the href value, this stops the anchor element working.
Third, you have not added space between the class value and href for some of these. This will stop the anchor element working.
Please go back to earlier lessons in the cat photo app on anchor elements if you can’t remember how to write them correctly.
Now this bit isn’t required to pass the test.
But I’d advise thinking of putting something in these empty elements if you can, even if it’s just the words ‘example list’ or ‘example code’.
<ul><li></li></ul>
<code></code>
It’s best to use these challenges to test and increase your knowledge of coding and web design. Ticking the boxes will pass the project but making the best project you can will increase your skills far more.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.