Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

It’s saying you need to have the same amount of .nav-link and .main-section elements. I’ve counted and cannot for the life of me understand it. it also says

’ 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”).’

I’m really at a loss on the second one as I also believe I have done this.

these are the last two things I need to fix before I finish the project.

Your code so far

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VB.net Technical Documentation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="fullWindow">
        <nav id="navbar">
            <Header id="logo">VB.NET</Header>
                <ul class="nav-bar-links">
                    <li id="nav-intro"><a class="nav-link" href="#Introduction">Introduction</a></li>
                    <li id="nav-should-already-know"><a class="nav-link" href="#Prerequesites">Prerequesites</a></li>
                    <li id="nav-vb.net"><a class="nav-link" href="#VB.net_and_C#">VB.net and C#</a></li>
                    <li id="nav-Solution-structures"><a class="nav-link" href="#Solution_Structures">Solution Structures</a></li>
                    <li id="nav-data-types"><a class="nav-link" href="#Data_Types">Data Types</a></li>
                    <li id="nav-variables"><a class="nav-link" href="#Variables">Variables</a></li>
                    <li id="nav-read-write"><a class="nav-link" href="#Read_Write_Commands">Read Write Commands</a></li>
                    <li id="nav-if-else"><a class="nav-link" href="#If_Else_Statements">If Else Statements</a></li>
                    <li id="nav-loops"><a class="nav-link" href="#Loops">Loops</a></li>
                    <li id="nav-structure"><a class="nav-link" href="#Structures">Structures</a></li>
                    <li id="nav-reference"><a class="nav-link" href="#Reference">References</a></li>
                </ul>
        </nav>
        <main id="main-doc">
            <section class="main-section" id="Introduction">
                <Header><h2>Introduction</h2></Header>
                <p class="intro-text">
                    Visual Basic (VB), (originally called Visual Basic .NET or VB.NET), is a multi-paradigm, object-oriented programming language, implemented on .NET, Mono, and the .NET Framework. Microsoft launched VB.NET in 2002 as the successor to its original Visual Basic language, the last version of which was Visual Basic 6.0. Although the ".NET" portion of the name was dropped in 2005, this article uses "Visual Basic [.NET]" to refer to all Visual Basic languages released since 2002, in order to distinguish between them and the classic Visual Basic.
                </p>
                <p class="intro-text">
                    Along with C# and , it is one of the three main languages targeting the .NET ecosystem. Microsoft updated its VB language strategy on 6 February 2023, stating that VB is a stable language now and Microsoft will keep maintaining it.[6]
                </p>
            </section>
            <section class="main-section" id="Prerequesites">
                <Header><h2>Prerequesites</h2></Header>
                <ul>
                    <li>You should know how basic developement works</li>
                    <li>you should understand basic naming principles</li>
                    <li>you should understand basic programming and computer terminology</li>
                </ul>
            </section>
            <section class="main-section" id="VB.net_and_C#">
                <Header><h2>VB.net and C#</h2></Header>
                <p>For Developers who have already learned C#, VB.net will be fairly simple to understand as it uses a fairly similar solution structure and they can be 'translated' between. They both are languages that are used for the .NET framework that is designed and maintained by Microsoft.</p>
                <p>The main difference between them is the syntax. C# is a case sensitive language and all characters of a variable or command must be correct for it to see that. VB.net on the otherhand is Case-insensitive, this means that the compiler doesn't see the difference between upper and lower case.</p>
                <h4>For example:</h4>
                <fieldset class="field-small">
                    <code>
                        dim Name as string
                    </code>
                </fieldset>
                <h4>is the same as</h4>
                <fieldset class="field-small">
                    <code>
                        dim name as string
                    </code>
                </fieldset>
                <p>If you put both in the same module: </p>
                <fieldset class="field-small">
                    <code>
                        dim name as string<br>
                        dim Name as string
                    </code>
                </fieldset>
                <p>Then the console will throw an error as you have essentially declared the name twice.</p>
                <h4>Whereas C# is case sensitive and if you write something like this:</h4>
                <fieldset class="field-small">
                    <code>
                        <span class="bold">string</span> Name = Visual Basic;<br>
                        <span class="bold">string</span> name = Visaul Basic;
                    </code>
                </fieldset>
                <p>You would have two variables, one called <span class="bold">Name</span> and one called name.</p>
                <p>You will also see that the C# declarations end with a semicolon.  VB.net is a much more simpler language to learn as it's syntax is closer to english than C#.</p>
            </section>
            <section class="main-section" id="Solution_Structures">
                <Header><h2>Solution Structures</h2></Header>
                <p>In VB.net solutions there are blocks of code that are broken up into <span class="bold">classes</span> and then <span class="bold">Subs or Functions</span>. Classes are the main sections in VB.net and can be made up of <span class="bold">Subs</span> and <span class="bold">Functions</span>.</p>
                <p>Subs and Functions are very similar however there is one main difference.  Subs don't return any values whereas Functions are able to.</p>
                <h4>An example of a Class</h4>
                <p>This is a Class built to handle the sorting and display of teamScores() an array.  It also has a button that is designed to close this form and show frmMainMenu.</p>
                <fieldset class="field-large">
                    <code>
                        Public Class frmLeaderboard<br>
                        <br>
                        Dim firstPlace As String<br>
                        Dim secondPlace As String<br>
                        Dim thirdPlace As String<br>
                        Dim fourthPlace As String<br>
                        <br>
                        <br>
                        Dim firstPlaceScore As Integer<br>
                        Dim secondPlaceScore As Integer<br>
                        Dim thirdPlaceScore As Integer<br>
                        Dim fourthPlaceScore As Integer<br>
                        <br>
                        <br>
                        Private Sub Form3_Load(sender As Object, e As EventArgs) Handles MyBase.Load<br>
                        <br>
                            Array.Sort(teamScores, Function(x, y) y.Score.CompareTo(x.Score))<br>
                            <br>
                            lbl1st.Text = teamScores(0).Team<br>
                            txt1st.Text = teamScores(0).Score<br>
                            lbl2nd.Text = teamScores(1).Team<br>
                            txt2nd.Text = teamScores(1).Score<br>
                            lbl3rd.Text = teamScores(2).Team<br>
                            txt3rd.Text = teamScores(2).Score<br>
                            lbl4th.Text = teamScores(3).Team<br>
                            txt4th.Text = teamScores(3).Score<br>
                            <br>
                            <br>
                            <br>
                        End Sub<br>
                        <br>
                        Private Sub Label5_Click(sender As Object, e As EventArgs) Handles lbl2nd.Click<br>
                        <br>
                        End Sub<br>
                        <br>
                        Private Sub lbl1st_Click(sender As Object, e As EventArgs) Handles lbl1st.Click<br>
                        <br>
                        End Sub<br>
                        <br>
                        Private Sub btnMainMenu_Click(sender As Object, e As EventArgs) Handles btnMainMenu.Click<br>
                            Me.Close()<br>
                            frmMainMenu.Show()<br>
                        End Sub<br>
                    End Class <br>
                    </code>
                </fieldset>
                <h4>An example of a Sub:</h4>
                <p>This is the same as the sub above that is being used to close the form this corresponds to and show frmMainMenu.</p>
                <fieldset class="field-large">
                    <code>
                        Private Sub btnExitTeam_Click(sender As Object, e As EventArgs) Handles btnExitTeam.Click<br>
                        Me.Close()<br>
                        frmMainMenu.Show()
                    End Sub
                    </code>
                </fieldset>
                <h4>An example of a Function</h4>
                <p>This is a function that is designed to take two numbers and return the sum of the two numbers (add them together).</p>
                <fieldset class="field-large">
                    <code>
                        Module Module1<br>
                        <br>
                            Sub Main()<br>
                                Dim num1 As Integer = 5<br>
                                Dim num2 As Integer = 10<br>
                                <br>
                                Dim result As Integer = AddNumbers(num1, num2)<br>
                                <br>
                                Console.WriteLine("The sum of " & num1 & " and " & num2 & " is: " & result)<br>
                                Console.ReadLine() ' This line will keep the console window open until a key is pressed.<br>
                            End Sub<br>
                            <br>
                            ' Function to add two numbers and return the sum<br>
                            Function AddNumbers(ByVal number1 As Integer, ByVal number2 As Integer) As Integer<br>
                                Dim sum As Integer = number1 + number2<br>
                                Return sum<br>
                            End Function<br>
                            <br>
                        End Module<br>
                    </code>
                </fieldset>
            </section>
            <section class="main-section" id="Data_Types">
                <Header><h2>Data Types</h2></Header>
                <p>Now that you know the different structures in VB.net I'll explain the different data types.<br>
                <br>
                There are two main types of data types, primitive and abstract data.  Primitive data types include:
                </p>
                <h4>Primitive Data Types</h4>
                <ul>
                    <li>String - For Text</li>
                    <li>Integer - For Whole Number</li>
                    <li>Boolean - True/false</li>
                    <li>double - stores decimals</li>
                    <li>single - stores decimals 2 digits or smaller</li>
                    <li>char - holds a single character</li>
                    <li>date - shows the date</li>
                    <li>object - combination of code and data that can be treated as a unit</li>
                </ul>
                <p>
                    "Primitive data types are a set of basic data types from which all other data types are constructed." - Wikipedia<br>
                    <br>
                    Primitive data is used all the time, for example, when I declared Name as string earlier in the guide I used a string type so that I could contain a text value.
                </p>
                <h4>Complex Data Types</h4>
                <p>Complex Data Types can hold more data and have more elements there are 2 main Types:</p>
                <ul>
                    <li>Arrays</li>
                    <li>lists</li>
                </ul>
                <p>There is also Structures however these are slightly different and I will discuss these later.</p>
                <p>Arrays and lists are very similar as they both store data in records and can sort. The difference is with the amount of records, lists have a dynamic amount whereas arrays are declared with a specific amount of records.<br>
                    eg: <code>dim numbers(3) as integer</code>.<br>
                arrays and lists have a slightly weird way of counting in the way that they count including 0 instead of from 1. So the example I gave has 4 records, rather than only having 3.
                </p>
            </section>
            <section class="main-section"id="Variables">
                <header><h2>Variables</h2></header>
                <div class="Declaring-Variables">
                    <Header>Declaring Variables</Header>
                    <p>
                        There are 3 ways of declaring variables in VB.net. By using the commands Dim, Public or Const<br>
                        Const means constant which isn't really a variable, it's a constant and cannot be changed by the program while it is running or redefined at a later point. <br><br>  you declare a Variable by: 
                        <fieldset class="field-small">
                            <code>Dim Name as String</code>
                        </fieldset>
                        A Constant:
                        <fieldset class="field-small">
                            <code>Const Name as String</code>
                        </fieldset>
                        A public:
                        <fieldset class="field-small">
                            <code>Public Name as String</code>
                        </fieldset>
                        <br>
                        There are two scopes of variables, Public and Private.  Public variables can be seen and used by any form in the project, whereas Private variables are only usable by the Sub, Class or Form it's in.
                    </p>
                </div>
            </section>
            <section class="main-section"id="Read_Write_Commands">
                <Header><h2>Read Write Commands</h2></Header>
                <p>Right, lets get you coding.  So first of all you will want to open a console app in visual studio. You can find how to do this <a href="https://learn.microsoft.com/en-us/visualstudio/get-started/visual-basic/tutorial-console?view=vs-2022">here</a></p>
                <p>Now you should have something looking like this:</p>
                <fieldset class="field-large">
                    <code>
                        Module Program<br>
                        <br>
                        End Module<br>
                    </code>
                </fieldset>
                <p>This is the standard Command Line (same as console app) <span class="bold">Boilerplate</span>.  A Boilerplate is what is given to you by the IDE for the type of code/application your writing. If you are using a code editor like Visual Studio Code, then you will have to install extentions to do this through intellisense. I won't go through the differences between IDEs and Code Editors here but the main difference is that IDEs natively support specific languages whereas Code Editors are closer to blank slates and can be set more to how each developer wants it.</p>
                <p>But coming back to coding, lets go through some coding examples.<br>
                <br>
                In the console app, if you want to write something then you will have to use the writeline command:
                </p>
                <fieldset class="field-large">
                    <code>
                        Module Program<br>
                        <br>
                        Console.writeline("hello, world!")<br>
                        <br>
                        End Module<br>
                    </code>
                </fieldset>
                <p>If you then wish read what is input into the console you can use the readline command.</p>
                <fieldset class="field-large">
                    <code>
                        Module Program<br>
                        <br>
                        dim Word as string ' declare the variable Word as String so that we can store the input<br>
                        <br>
                        Word = console.readline() ' we set the variable to the input<br>
                        console.writeline(Word) ' we output the variable that is storing the input<br>
                        <br>
                        End Module<br>
                    </code>
                </fieldset>
            </section>
            <section class="main-section" id="If_Else_Statements">
                <Header><h2>If Else Statements</h2></Header>
                <p>Now that we know how to declare variables and input and output data, we can start setting decisions that the code can make.  To do this we use If Else statements.  These blocks of code are used to see if a parameter is met and if not do something else.<br><br>  The Syntax is like this:</p>
                <fieldset class="field-large">
                    <code>
                        Module Program<br>
                        <br>
                        dim Name as String<br> ' declare the variable that will store the name
                        <br>
                        Name = console.readline()<br> ' read the input and store it in Name
                        <br>
                        If Name = "James" Then<br> 
                        console.writeline('hello, ' + Name + '!')<br>
                        else<br>
                        console.writeline('Who are you?')<br>
                        end if<br>
                        <br>
                        end module
                    </code>
                </fieldset>
                <p>This if block shows that <span class="bold">if</span> the variable Name is 'James' then it will greet James with 'Hello, James! or it will ask 'Who are you?' we can also nest if statements inside eachother using the <code>Elseif</code> statement</p>
                <fieldset class="field-large">
                    <code>
                        Module Program<br>
                        <br>
                        dim Name as String<br> ' declare the variable that will store the name
                        <br>
                        Name = console.readline()<br> ' read the input and store it in Name
                        <br>
                        If Name = "James" Then<br> 
                        console.writeline('hello, ' + Name + '!')<br>
                        elseif Name = "Matilda" Then<br>
                        console.writeline('Hello, ' + Name + '!')<br>
                        else<br>
                        console.writeline('Who are you?')<br>
                        end if<br>
                        <br>
                        end module
                    </code>
                </fieldset>
                <p> Using the <code>Elseif</code> statement allows us to give an option for both James and Matilda to be greeted.</p>
            </section>
            <section id="main-section" id="Loops">
                <Header><h2>Loops</h2></Header>
                <div>
                    <h4>For Next Loops</h4>
                    <p>There are two types of loops in vb.net. For and While Loops.  The main difference between the two is their use case,  for loops are used for a specific number of repetitions and while loops can be infinite.  We will first look at For loops.<br><br>For Loops have the syntax like this:</p>
                    <fieldset class="field-large">
                        <code>
                            Module Program<br>
                            Sub Main()<br>
                                For i As Integer = 1 To 5<br>
                                    Console.WriteLine(i)<br>
                                Next<br>
                            End Sub<br>
                            End Module<br>
                        </code>
                    </fieldset>
                    <p>As you can see, this has a specified amount of runs that it will complete before it finishes, this being 5 as it runs for i as it counts from 1 to 5.</p>
                </div>
                <div>
                    <h4>Do While Loops</h4>
                    <p>If you don't know how many times that you need to run a loop for then you should use a while loop.  The rules u can set for while loops have a much wider scope. For example:</p>
                    <fieldset>
                        <code>
                            Module Module1<br>
                            Sub Main()<br>
                                Dim i As Integer = 1<br>
                                While i <= 5 ' creates the rule saying while i is less than or equal to 5 do this loop<br>
                                    Console.WriteLine(i)<br>
                                    i += 1<br>
                                End While ' this is where the loop ends and when the while loop is true (is not equal to 5) it will loop back to while from here.  When the rule is false then it will carry on after this<br>
                            End Sub<br>
                        End Module<br>
                        In this VB.NET exam<br>
                        </code>
                    </fieldset>
                    <p>What this code does is allows you to set the while rule to anything compared to i and end the loop with the value you set, here it is 5 and all this program does is count from 1 to 5.</p>
                </div>
            </section>
            <section class="main-section" id="Structures">
                <header><h2>Structures</h2></header>
                <p>Structures are essentially abstract data types in a way that they can be 2 or 3 primitive data types put together.  For example you could create a structure called People which include the data name and age, the code of which would be:</p>
                <fieldset class="field-large">
                    <code>
                        Module Module1<br>
                        Public Structure People<br>
                            Public name As String<br>
                            Public age As Integer<br>
                        End Structure<br>
                        <br>
                        dim Public() as People<br>
                        <br>
                        public(0).name = Chuck<br>
                        public(0).age = 21<br>
                        <br>
                        end module<br>
                    </code>
                </fieldset>
                <p>What we did here was create a public structure 'People' and give it the attributes name and age (with the data types to match). we then declared a dynamic array as data type 'People', this means that the array is storing the two attributes in each record.  In the module we set the name attribute to Chuck and the age to 21.  Structures can have unlimited attributes however I recommend to keep them simple so they don't conflict with other variables.</p>
            </section>
            <section class="main-section" id="Reference">
                <header><h2>Reference</h2></header>
                <p><a class="reference-link" href="https://en.wikipedia.org/wiki/Visual_Basic_(.NET)">https://en.wikipedia.org/wiki/Visual_Basic_(.NET)</a><br><a class="reference-link" href="https://learn.microsoft.com/en-us/dotnet/visual-basic/">https://learn.microsoft.com/en-us/dotnet/visual-basic/</a></p>
            </section>
        </main>
    </section>
</body>
</html>

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

count the amount of sections and the amount of nav’s there’s a difference

also make sure your nav-link text and section headers and exactly the same

Check the spelling of text and href value

1 Like

thank you, that bit works now. Apparently being dyslexic is really not helpful when it comes to coding lol

1 Like

I’m still really confused, the list only has 11 parts and there are only 11 .main-section elements? I removed the and that hasn’t done anything?
does it matter if a section element doesn’t have the .main-section class?

Yes. I think this is the issue.

1 Like

Give space between id and class.

1 Like

Here is also space need

1 Like

Thank you so much mate, sorry about my illiteracy but that’s fixed it. Much appreciated :slight_smile:

1 Like

Your welcome. Keep it up, happy Coding!

1 Like