Documentation Page Of Spot

Hi fellow coders.
I’ve finally finished my Documentation Page. Please take a look and feel free to leave feedback. Doc is based on Spot by Boston Dynamics

https://codepen.io/KegStar/pen/dyOarXO

Your code looks good except the media queries could use another look. All font and pictures are huge and could be resized smaller to make it easier for people to read and use.

Would recommend a different background color too to make your page unique.

Besides those things, great job! Coding is no easy task.

Your page looks good @KevinRJSmith. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Keep all your styling external. Do not use in-line styling.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Having an empty code block for the media query defeats the purpose of having a media query. Don’t use it just to pass the test.
You could have

  1. made images and text smaller
  2. moved the navbar to the top of the page on smaller screens

Thank u very much. I’m still having problems with layout #1

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.

Thanks again for your help

What problem are you having? You quoted the user story. Read it carefully. The element with id="navbar" only needs to be on the left side of the screen for regular sized devices (laptops and desktops). On smaller devices it can be moved to the top and still meet the requirement of the user story.
To help with responsive styling, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.