codeScape Technical Documentation Project Feedback

Code Feedback
1

Hello! I just finished my fourth RWD project and I’ll really appreciate your feedback :blush:.

It’s a technical documentation I titled codeScape

Screenshot from 2021-03-29 02-43-28
Screenshot from 2021-03-29 02-43-281368×743 99.4 KB

I failed one of the user stories but I don’t understand what the error is

Screenshot from 2021-03-29 02-45-39
Screenshot from 2021-03-29 02-45-391368×743 144 KB

At first I thought it was because I’d display:none the #navbar for smaller(phone) screen sizes but the error kept displaying even after I corrected my code.

Could you please check it out? CodePen Link

2

Hi @Babi !

You forgot to post the link to your project.

3

@jwilkins.oboe Thanks :sweat_smile:

4

If you look at the FCC example, the navbar is in a fixed position in the top left.
Your navbar shows up further down the page.

5

Ahh ok, thanks @jwilkins.oboe

6

@Babi,when a test 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;

On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn't scroll with the page content.
Top of bounding rectangle is not correct.: expected 451 to be below 300
AssertionError: Top of bounding rectangle is not correct.: expected 451 to be below 300

The related user story says “On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.”
On a regular sized device the user has to scroll to see the nav because of the big banner across the top of the page.

On a side note, what is this doing in your code? I’m missing it.

<div id="area">
        <ul class="circles">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
7

Thank you @Roma for reviewing my work. :blush:

The #area div is used to create the animation in the green banner at the top of the page

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.