Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

How to make nav appear on the left of the main content .could anyone expalin how to do it

Your code so far

/* file: index.Ext.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Drawing</title>
</head>
<main id="main-doc">
<h1>Daily Drawing</h1>
<nav id="navbar">
<header class="Header">Drawing Daily</header>
<a class="nav-link" href="#Builds_confident">Builds confident</a>
<a class="nav-link" href="#Improves_observation">Improves observation</a>
<a class="nav-link" href="#Boosts_creativity">Boosts creativity</a>
<a class="nav-link" href="#Tracks_your_growth">Tracks your growth</a>
<a class="nav-link" href="#Reduce_stress">Reduce stress</a>
</nav>
<section class="main-section" id="Builds_confident">
<header class="Header">Builds confident</header>
<p>At first, your drawings may not look perfect — and that's okay!
 As you practice,
 you'll see visible progress.</p>
<p> Every sketch you finish adds a little more confidence 
in your abilities and strengthens
 your artistic voice.</p><pre>
<code>
function greetMe(yourName) {
  alert("Hello " + yourName);
}
greetMe("World");
</code>
  </pre></section>

<section class="main-section" id="Improves_observation">
<header class="Header">Improves observation</header>
<p>When you draw daily, your eyes start noticing tiny details 
— shapes, light, shadows, and textures — that most people overlook.</p>
<p> You begin to see like an artist, not just look.</p>
<p>This heightened awareness helps you capture realism and proportion 
more accurately.</p>
<pre>
<code>
function greetMe(yourName) {
  alert("Hello " + yourName);
}
greetMe("World");
</code>
  </pre></section>

<section class="main-section" id="Boosts_creativity">
<header class="Header">Boosts creativity</header>
<p>Drawing every day 
encourages your imagination to flow freely.</p>
 <p>You start experimenting with styles, concepts, and emotions.</p>
<p>Even simple sketches can spark big ideas for future projects 
or unique art pieces.</p><pre>
<code>
function greetMe(yourName) {
  alert("Hello " + yourName);
}
greetMe("World");
</code>
  </pre></section>

<section class="main-section" id="Tracks_your_growth">
<header class="Header">Tracks your growth</header>
<p>When you look back at your old sketches after a few months,
 you'll be amazed at how much you've improved.</p>
<p>Keeping a sketchbook acts like a visual diary — 
proof of your growth and consistency as an artist.</p><pre>
<code>
function greetMe(yourName) {
  alert("Hello " + yourName);
}
greetMe("World");
</code>
  </pre></section>

<section class="main-section" id="Reduce_stress">
<header class="Header">Reduce stress</header>
<p>Drawing can be a form of meditation.</p>
 <p>It calms your mind, reduces anxiety, 
and helps you express emotions that are hard to put into words.</p> 
<p>The act of focusing on your lines
 and shading naturally relaxes your nervous system.</p><pre>
<code>
function greetMe(yourName) {
  alert("Hello " + yourName);
}
greetMe("World");
</code>
  </pre>
<ul>
<li>Boosts creativity</li>
<li>Boosts creativity</li>
<li>Boosts creativity</li>
<li>Boosts creativity</li>
<li>Boosts creativity</li>
<li>Boosts creativity</li>
</ul>
</section>
</main>
</html>

/* file: styles.Ext.css */
.Header {
text-align:left;
position:relative;
margin:10px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
text-align:center;
}

code
{ display:block;
 background-color: #f7f7f7;
margin-left:50px;
}
p{
margin:10px;}

*{
box-sizing:border-box;}

.nav{
width:20%;
text-align:left;
}

.nav-link{
   text-align:left;
   padding:0.7rem 0.7rem 0.7rem 1.5rem;
  color: #4d4e53;
  border-bottom:2px solid grey;
  border-right:2px solid grey;
display:block;
}

.main{
margin:0 auto;
display:flex;
flex-direction :left;
margin-left:50px;}

Your mobile information:

SM-P613 - Android 14 - Android SDK 34

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

I don’t see any element with a nav class attribute, but I do see an element with a navbar id attribute. You also do not have a main class attribute. Obviously, it doesn’t matter what your CSS property/value pairs are if the selector is not actually pointing to the right element.

Since this is a certification project, I’m unable to provide much more help, so you might want to try googling your question about “how to fix a nav bar to the left”.