Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Hi team, please assist me with the two missing steps to complete this exercise:

1st missing step:
Your #navbar should have exactly one header element within it.
‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’
2nd missing step:
Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’’

Your code so far
“”“”“”“”"‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’

Avast Antivirus How safe is Avast Antivirus?

Naturally, if you’re looking for good antivirus software, you’re probably quite security conscious. And considering Avast was forced to admit to selling user data last year, it’s reasonable to wonder just how safe Avast actually is.

What did we find out during our Avast research? We had a look at the security features and independent lab test results – and there are some interesting things worth noting.

    What is Avast Malware score?
  1. It scored a 100% malware detection rate during test

How safe is Avast Antivirus?

How safe is Avast Antivirus?

Avast Antivirus features

Considering that Avast has a free version available, its pricing strategy is pretty reasonable. You can get all the basic security features for free, which is much more generous than many other free antivirus services.

Yet, the Avast One package is the optimal choice – with webcam, malicious website, and tracking protection, you’re secured from virtually all threats. Not to mention that you also get a VPN which is great for online anonymity and streaming.

Unsurprisingly, the paid plans are much more feature-loaded. However, it’s very refreshing to see such a generous free version that even includes a firewall. Not to mention that its malware detection rates are as good as with paid plans.

    List of Avast Features
  1. Online management platform
  2. Avast antivirus
  3. Data protection

Avast Antivirus features

<a class=“nav-link"id=“plans_and_pricing” target=”_blank" heref=“https://cybernews.com/best-antivirus-software/avast-antivirus-review/#plans-and-pricing”>Avast Antivirus features

Secure browser

Avast’s secure browser takes seconds to download and has a lovely clean interface that’s very similar to Google Chrome. It even has Google open by default. So you can complete searches just as quickly and easily as you would if you were using Chrome.

Here’s what you can expect from Avast packages:

Real-time protection that runs silently in the background to block threats as they appear in an unobtrusive yet effective way. This feature is even available in the free version, which is rare to see.

Complete malware detection that stops you from sharing infected files with other users.

In-depth scans of your entire machine or device that’s designed to root out hidden malware.

External storage scans to check external drives, such as CDs, DVDs, USB sticks, etc. for viruses.

Scheduled scans so it can check for malware while you’re away from your desk.

Security reports that provide you with personalised updates every 30 days.

Real-time security updates and new features which are updated automatically

To put it simply, it prevents PuPs (potentially unwanted programs) and scans secure connections. Such scans are only applied to ingoing or outgoing emails of popular mail management software, such as Mail or Outlook.

Secure browser

<a class=“nav-link"id=“secure-browser” target=”_blank" heref=“https://cybernews.com/best-antivirus-software/avast-antivirus-review/#secure-browser”>Secure browser

Avast firewall

A firewall is an essential part of an antivirus package, and Avast provides both free and paid users with one.

To put it simply – a firewall protects your network from unauthorized intrusions. With Avast, you can block internet access to specific apps yourself.

However, paid users also get more advanced network security. First off, you can enable or disable hiding potentially sensitive information from other network devices. Also, you can be notified about open ports and ARP spoofing attacks.

Avast firewall

<a class=“nav-link"id=“ease-of-use” target=”_blank" heref=“https://cybernews.com/best-antivirus-software/avast-antivirus-review/#ease-of-use”>Avast firewall

Avast SecureLine VPN

Getting the Avast One bundle will also give you the Avast SecureLine VPN (which you can also buy separately). Even though it might not be as good as, say, NordVPN, the service is pretty decent, especially when you know that it comes from an antivirus developer.

Free Avast users can also use the VPN, however, it’s limited to 5GB per week, which tends to use up fast, especially if you’re streaming content.

There’s also a feature called a Password leak checker that will tell you whether your email has been compromised. And Additionally, Android users will get the split tunneling feature as well. Avast SecureLine VPN now offers WireGuard protocol for Windows and Android users, which can improve your online experience.

    Avast Business Pricing
  1. Small Office plan that you can buy for $139.99/year
  2. The Essential plan costs $36.99/year for 1 user

Avast SecureLine VPN

<a class=“nav-link"id=“customer-support” target=”_blank" heref=“https://cybernews.com/best-antivirus-software/avast-antivirus-review/#customer-support”>Avast SecureLine VPN

""""""''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-pagePreformatted text

Hello @Brice!

Here is an example of how to connect the nav-link to main section headers.

< nav id=“nav-bar”>
< ul>
< li>< a href=“#puppy_paws” class=“nav-link”>Puppy Paws< /a>< /li>
< li>< a href=“#kitten_kisses” class=“nav-link”>Kitten Kisses< /a>< /li>
< li>< a href=“#turtle_treasures” class=“nav-link”>Turtle Treasures< /a>< /li>
< li>< a href=“#bird_blessings” class=“nav-link”>Bird Blessings< /a>< /li>
< /ul>
< /nav>

< section>Pets< /section>
< header id="puppy_paws”>Puppy Paws< /header>
< p> Text for this header < /p>
< header id="kitten_kisses”>Kitten Kisses < /header>
< p> Text for this header < /p>
< header id=“turtle_treasures””>Turtle Treasures< /header>
< p> Text for this header < /p>
< header id=“bird_blessings”>Bird Blessings < /header>
< p> Text for this header < /p>
< /section>

2 Likes

Hi Life.Blessed and thank you for helping. I tried to follow your example and I restarted my code, but I still can’t complete these two steps:

1 * Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

2* Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MMA Fighters Page</title>
<link rel="stylesheet" href="styles.css">
<a href="styles.css" id="build_a_MMA_Fighters_page" target="_blank"></a>
  </head>
    <body>
<div id="side-nav">
<nav id="navbar">
<header id="head" align="left">MMA Fighters Page</header>
<li><a class="nav-link" 
href="#MMA_Division">MMA_Division</a></li>
        <li><a class="nav-link" href="#MMA Organisations">MMA Organisations</a></li>
        <li><a class="nav-link" href="#Categories">Categories</a></li>
        <li><a class="nav-link" href="#Fighters_Names">Fighters_Names</a></li>
        <li><a class="nav-link" href="#Records">Records</a></li>
        <li><a class="nav-link" href="#Rankings">Rankings</a></li>
        <li><a class="nav-link" href="#Notes"> Notes</a></li>
        <li><a class="nav-link"  href="#Forum">Forum</a></li>  
        <li><a class="nav-link" href="#Reference">Reference</a></li>
      <p></p>
      </nav>
<main id="main-doc">
      
      <section class="main-section" id="mma_division">
      <header>MMA Division</header>
        <p>Return to fight Island</p>
        <p>UFC 274</p>
      </section>
      <section class="main-section" id="mma_organisations">
    <header>MMA Organisations</header>
        <p><code><li>Fighterss</code></li></p>
        <p><code><li>Venue</li></code></p>
      </section>
      <section class="main-section" id="categories">
        <header>Categories</header>
        <p></p>
        <p><code></code></p>
  </section>
  <section class="main-section" id="fighters_names">
    <header>Fighters Names</header>
    <p></p>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      </ol>
   </section>
  <section class="main-section" id="records">
   <header>Records</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="notes">
    <header>Notes</header>
    <p></p>
     <p><code><li>Most KOs</li></code></p>
     <p><code><li>Most Wins</li></code></p>
     <p><code><li>Title Defenses</li></code></p>
  </section>
  <section class="main-section" id="forum">
    <header>Forum</header>
    <p></p>
     <p><code></p>
  </section>
  <section class="main-section" id="forum">
    <header>Forum</header>
     <p><code></code></p>
     <p></p>
 </section>
<section class="main-section" id="reference">
    <header>Reference</header>
    <p></p>
  </section>
  
     </main>
      </body>
     </html>
1 Like

It’s important to understand this simple thing.

When you open some html tag, then you open another one , you have to close that another one first, then close first one.

This means if
<li><a> Baileys

then it’s
<li><a>Baileys</a></li>

order of closing is important. otherwise code is messed up.


Now, did you try to click on your navigation menu and see if it works?
because I did, and it doesnt. what do you think is issue in that?

Hello Brice!
Sorry this is so difficult. I am sure we will both remember it once you succeed, though. :slight_smile:
I noticed that this one does not have the underslash between the #MMA and Organisations

And, the id has been added to the section instead of the headers.

Hopefully this will help you!

Happy coding! :slight_smile:

Hi Life.Blessed.
I put an underscore between MMA and Organisations.
I also move the IDs from sections to headers, but it generated theses errors:
image

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