Having issues with two user stories on the Technical Document Landing Page project. Thought I’d hit a stride and getting through it nicely, but seems I’m stuck on User Story 10.
I can’t for the life of me work out where I’ve gone wrong and what I’m missing. I thought that I’ve already included all this? Perhaps someone can help me!
Also, I’ve got a media query, however it doesn’t seem to be working. It’s simple (as I need to learn more about media queries before trying out responsive formatting for devices etc.) but it doesn’t seem to be working. I just want to change the main-doc colour to an orange when the screen is smaller than 300px. I thought that I had formatted it correctly as I’ve passed that user story, but I’m not satisfied until I can actually get it to work and understand what is holding it back from working.
It is working. Make sure you actually narrow your view port below 300px. That’s pretty skinny so you might need to use responsive mode in the dev tools. Or, just pick a bigger number so you can see it.
@brendan.cooper1990, when a user story fails click the red button to see which test(s) are failing and text to help you correct the issue. Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
The failing message says
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".
There should be one .nav-link for every element with the class of "main-section", and every .nav-link should be within #navbar : expected 7 to equal 5
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 7 to equal 5
Do you understand what the test is looking for and why it fails?
Hint: You have a space in the section titled “The Basics” and defined the href attribute the way the user story expected. Do all of your titles follow that rule?
Thanks for your replies. However I’ve looked over this multiple times and still can’t figure out what’s going wrong. After Analysing HTML I still only get this error message, but don’t understand why? I thought I had started and ended the section as I had with every other in the document.
I believe I know what the test is looking for @Roma .
It is saying that I need to make sure every (<a>) element should be should have a class of nav-link which I do? And that nav link should then link to it’s corresponding “main-section”, which it does?
I have made sure every section is present in the navbar, and yet I don’t understand what’s the error. I’m sorry for my continued confusion, it’s just frustrating when I felt like I was getting my head around it!
Thank you @bbsmooth , I realised it was functioning haha!
Your code <section class "main-section" id="90_Minutes">
This is not the way to associate a value with an attribute. Look at the id attribute right next to it and you’ll notice a character is missing.
You have this same error twice in your code.
Correct the typo’s and all tests pass.
A couple of things you can do since codepen’s analyzer is helping you.
Switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.
Hey @Roma thanks very much. Really helpful and that colour scheme makes it much easier! I’ve sorted the silly typos, I suppose I’m still trying to adjust to read code as concise language, and that tool is great. Will be using it for sure. Thanks again!
