I have completed all of the challenges, apart from the @media queries. But the tests are returning only 9/16 and saying that the following ‘story’ has not been completed. But I’ve done more than I need to do with respect to this. I would appreciate any help. Here’s the request and then a link to my my code on CodePen:
User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
The way you set up your internal anchors is also not what they are looking for in the test suite so fixing above will only get you half way there. Using name attributes as an anchor still works but in the HTML5 standard preference is for id attribute. (The browser looks for matching id, if none found then looks for matching name attribute.)
<a name="home-link"></a> <!-- works but not ideal -->
F
but if, for instance, this code were present
<footer id="home-link"> <!-- browser will choose this first -->
The browser would ‘prefer’ this anchor and ignore your <a name="home-link"> anchor at the top.
It does not help that there are tons of tutorials online still showing how to use name attribute as the anchor. I think that was HTML4
Thanks very much for your help, alhazen1. I’ll take your advice, change my syntax and let you know. I appreciate your help. I understand what you mean about the cascading effects of more selective and specific selectors (I.e. IDs over names). Can I just ask one more question regarding names, IDs and classes?
If I was to create a form, isn’t it best to use name attributes to connect the input elements to the corresponding labels? In other cases, like the example above, if there is no ID and if it’s better to use a class to style multiple elements together, do classes also link with other elements in the same way that IDs do? Even if I was to use classes instead of IDs to connect input elements with their corresponding labels?
I’ve made the changes and I’m still getting the same 9/10 score. I remember changing these around as I was making the document, so that ‘href’ was included in the same element with the ID “nav-link”.
The alternative would be to use ‘href’ in the tag, but I have already tried this. I’m not even sure if button tags themselves can be used as links, rather than turning other tags (links) into buttons.
Thank you very much for taking the time to fork my pen. I understand what you mean now. It’s basically better to ‘buttonize’ anchor tags with CSS rather than use the tags in HTML?
I ran the tests again and I got 12 so far, so I need to do the media query and then find out what the other issues are. Thanks again, alhazen1.
AlHazen1, I’ve now done what you mentioned and I’ve added (which definitely work). But now I’m returning a 14/16 score. It should be reading 16/16. I’ve gone through each point and I can’t see where I’ve gone wrong. Can you offer another perspective, if you’ve got the time?
What I’ve done is posted the url into the ‘Solution’ box and I’ve moved onto the next task, as I perfectly understood the task at hand. It’s the first one where I’ve not got 16/16. But I can always return to it if you have any ideas (see above). Thanks.
