in the attached picture are the page versions for desktops and mobile phones.
As it can be seen, the Desktop Version has a #navbar on the left side of the page, while the Mobile Version has it moved to the top of the page, in order to gain space, with the help of a @media query.
The problem is that the Mobile Version with the #navbar on the top is marked as unacceptable as a solution, as can be seen in the left side of the picture where instead of a check there is an x.
Now if I let the #navbar on the left side (and use @media query, which is required, to do some other, less useful, things) in the case of the Mobile Version, then there will be No Mobile Version… only a Desktop Version which will not be correctly displayed on the mobile screens, so No Responsive Design.
The project is done and fully functional and has some nice tricks that cannot be seen in the pictures, but will Not Pass the Test due to the problem exposed above. How to make a Mobile Version of a Page if keeping a full Sidebar/Navbar to the left? In this case there will be no difference between the Mobile and the Desktop version of the page.
Thank you @lasjorg, you made me check again what they truly asked for and find out the culprit!
Seemingly they pure and simple wanted the #navbar to stick to the left side of the viewport no matter what (I mean, also in the Mobile version). First thing in the morning I fixed the problem and now everything complies with the requirements!
You asked me to post my code (now the code passes, but I would be glad if you would take a look at it and give some ideas that would improve my coding skills), but I don’t know how to post code here in the Forum.
Instead, I can give you the links to the code in my Git repo:
The only requirement is that you run the test with the page in its desktop layout. It is perfectly fine to have a “mobile” layout where it is stacked, you just can’t run the tests in that layout.
A little feedback because you asked:
The requirement for the nav header is passing but it isn’t really what is meant by the requirement. It isn’t a syntax error to have all the links inside a header element but it also seems a bit odd. What the requirement is asking for is more like this.
<nav id="navbar">
<header>What the project is about</header>
<a href="#javascript_introduction" class="nav-link">JavaScript Introduction</a>
<!-- rest of the links -->
</nav>
Your br tags are not closed correctly. They should either not be closed or closed after the element name (<br> or <br/>). Also, you do not need them. If you want a paragraph to end and a new one to begin on a new line just wrap each paragraph inside a p element. The br element isn’t really meant for breaking up long-running paragraphs.
Instead of making the body position absolute and using the left offset, you can use a margin-left on the body (I’d personally avoid absolutely positioning when possible).
I like the use of utility classes but the ms naming is a bit confusing to me. Edit: I guess it isn’t that uncommon to have “s” for start and “e” for end these days. Even Bootstrap has switched to it (issue with arguments for/against). It just looks a bit weird to me, but I guess it makes sense. I’d likely still go with left and right instead of start and end (but that is just out of habit).
Thank you @lasjorg, that was the kind of feedback that I was hoping for! I already started the next course, but tomorrow I will review the Technical Page and improve it by applying corrections (I suppose it’s OK to modify it after it passed in order to make it cleaner&better). I really appreciate that you’ve spent your time reading my code and help me write better code. I wish you a nice day!
I already started the next course, but tomorrow I will review the Technical Page and improve it by applying corrections (I suppose it’s OK to modify it after it passed in order to make it cleaner&better). I really appreciate that you’ve spent your time reading my code and help me write better code. I wish you a nice day!