Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I passed the certification requirements but I’m still not happy with what I have. I want to have clickable tabs like the one in the example how do I do that?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
<link rel="stylesheet"
href="./styles.css"/>
<meta charset="UTF-8">
<meta name="viewport"
content="device-width=initial-scale=1.0">
<title>Technical documentation page practice</title>
  </head>
  <body>
<main id="main-doc">
  <section class="main-section" id="panda"><header>panda</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><code></code><li></li></section> 
  <section class="main-section" id="tiger"><header>tiger</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><code></code><li></li></section>
  <section class="main-section" id="giraffe"><header>giraffe</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><code></code><li></li></section>
  <section class="main-section" id="fox"><header>fox</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><code></code><li></li></section>
  <section class="main-section" id="gorilla"><header>gorilla</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><code></code><li></li></section>
  <nav id="navbar"><header>zoo animals</header><a class="nav-link" href="#panda">panda<a class="nav-link" href="#tiger">tiger</a><a class="nav-link" href="#giraffe">giraffe</a><a class="nav-link" href="#fox">fox</a><a class="nav-link" href="#gorilla">gorilla</a></a></nav>
</main>
    </body>
</html>

/* file: styles.css */
@media (min-width:525px) {
  
}

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.3 Safari/605.1.15

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

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

You need to style your project using CSS. You didn’t even try for that. If you didn’t no how to style your project, then keep practicing html css challenges until you have done.
@hansono

4

I know, but what do I learn exactly I’ve tried googling but I’ve had no answers and I don’t wanna just copy from a YouTube video.

5

Hi @hansono

You will need to learn a lot more about css. Once you have accumulated enough knowledge and skills you can go back to past projects and redo them.

For now, try using flexbox to create a one dimensional layout.

Happy coding

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.