Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm doing a freeCodeCamp portfolio but I keep failing one test:
Additionally, the navbar should contain link (<a> elements with the class of nav-link. There should be one for every element with
the class main-section.
<nav id= "navbar">
<div class="sidebar">
<header id= "title">JS Documentation</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
<a class="nav-link" href="#Hello_world">Hello World</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link"href="#Declaring_variables">Declaring variables</a>
<a class="nav-link" href="#Variable_scope">Variable Scope</a>
<a class="nav-link" href="#Global_variables">Global Variables</a>
<a class="nav-link" href="#Constants">Constants</a>
<a class="nav-link" href="#Data_types">Data types</a>
<a class="nav-link" href="#If...else_statements">If else statements</a>
<a class="nav-link" href="#Reference">References</a>
</div>
</nav>
https://codepen.io/Sharoze111/pen/wvMNyQw?editors=1010
Here is the link to the CodePen and you can run the test 'technical documentation page' within the link (3 green bars).
It's something to do with the nav-links not linking to the ID's but I can't find the issue.
The more verbose error message from the test was: AssertionError: There should be one .nav-link for every element with the class of "main-section", and every .nav-link should be within #navbar : expected 11 to equal 9
If you look closely, only 9 of your section elements have the class main-section. Two of them erroneously have main_section as the class.
Related
I want to create a form in angular, I have one problem. I would like this form to have a tab menu that does not move to subpages, so as not to lose data. I used to have a similar form not in Angular and used this method. But I don't know what's best in angular, not to make subpages, just everything on one page, so that the data when switching to tabs don't disappear. Please help.
<li>
<a data-toggle="tab" href="#User-details">User details</a>
</li>
<li>
<a data-toggle="tab" href="#Account-details">Account details</a>
</li>
<li>
<a data-toggle="tab" href="#validateSubmit">ValidateSubmit</a>
</li>
<li>
<a data-toggle="tab" href="#submitFlag">submitFlag</a>
</li>
<li>
I am new to bootstrap, I am trying out different things and when I add the classes to different elements some work, and others dont show up in dev tools. The class on the ul works, but on the li and 'a' doesnt.
`
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link-active" href="">About Us</a>
</li>
`
I tried to restart the project and reconnect bootstrap but neither solution worked.
It's because you put an extra - between nav-link and active class. The correct way is this one <a class="nav-link active" href="#">About Us</a>
I am a novice front-end developer trying to build a website using HTML, CSS, and bootstrap. I would like to ask you a couple of questions regarding the uploading process. I am about the purchase a domain for the website I have been building so far. However, I have encountered some problems. Currently, I can link my HTML files to provide the transition between different pages within the website(As my code shown below). My question is, how can I set the correct directory to provide the transition between the HTML pages. As far as I know, after the uploading process to Cpanel, href directory has to be modified. How can I provide the right href directory to carry out transitions within the website before uploading my website to public_html? Thank you in advance.
<li class="nav-item active">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\index.html">Mainpage<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\aboutme.html">About me<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\services.html">Our Services<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\contact.html">Contact<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\blog.html">Blog<span class="sr-only">(current)</span></a>
</li>
No need to link like
href="C:\Users\enver\Desktop\practice\contact.html"
use
href="contact.html"
you can do this you create a website folder at the desktop, in this folder add a pages folder where you will put your other service pages and others. You keep the index file.html at the root.
Mainpage(current)
About me(current)
Our Services(current)
Contact(current)
Blog(current)
when you're going to send herberger just the pages and index folder.html your css and don't forget to reach your css again in the pages services and other href=".. /css/.."
I am doing the freecodecamp workthroughs and it hit an error in the script that tests the product landing page project I'm working on.
Problem is as follows:
When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
However, my code as far as I can tell, does exactly that.
What in my code is causing this error?
My code, JS test hamburger hidden in logo in top left
Thanks for the help.
<header>
<div id="header">
<img id="header-img" src="https://i.imgur.com/KIqkWAZ.png" alt="handbooker helper logo"/>
<nav id="nav-bar">
<a class="nav-link" href="#infoLinks">Episodes</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="https://critrole.com/">More from Critical Role</a>
</nav>
</div>
</header>
Considering the script assumes all your nav-links correspond to a target on the same page, there's no way you can pass that story.
I tried it by replacing the link
href="https://critrole.com/"
with href="#test" and creating a div with id test, and the story passed after doing so.
I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)