Technical project 4 completed!

[chichkenmomos]

Hey guys! Here is my 4th project - technical documentation project please have a look at it and give me some suggestions for sure.
Note - I want to add a python logo next to the header - “Python documentation”. How do I do that ? Please help me with that part, I tried but could not place the logo properly next to the header. Kindly help and review the project. Thanks!

[staranbeer]

HI, congratulations on completing the project. here are a few things i noticed in the project that need some improvement.

Contrast ratio and issues with accessibility

The first thing that popped in my head was the contrast ratio. basically, the foreground color and the background color in your site makes it harder to see content on the website so maybe try changing the background color to something else so the text on the sidebar is easier to read.

Horizontal scrolling

i noticed that there is horizontal scrolling on the website you could get rid of that by
changing the margin left on this component to auto.

#tech-doc {
  width: 68.5%;
  height: 100%;
  background: linear-gradient(261deg, blue, yellow);
  margin-left: 525px;
  padding-left: 15px;
  padding-top: 8px;
  padding-bottom: 1px;
  border-style: solid;
}

The header.

 <header id="head">
    <img src="https://www.python.org/static/img/python-logo.png" />Python Documentation
 </header>

you can add the python logo by adding an child element to the header element and then setting its src property to https://www.python.org/static/img/python-logo.png . and then you can use CSS to change it’s appearance.

hope this helps.

[Roma]

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

• Run your HTML code through the W3C validator.
  • There are HTML syntax/coding errors you should be aware of and address.
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
  • The one for CSS is good. Use it and address the issue(s). (try and avoid duplicating selectors. it can make maintenance a nightmare)
  • (The one for HTML misses things which is why I recommend W3C)
• Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs
  • You can nest those code snippets in an HTML element to preserve whitespace and line breaks. I’ll leave it to you to research that.
    Or there’s a property: value; pair you can use in CSS to preserve whitespace and line breaks. Again, I’ll leave it to you to research.
• Make your page responsive. Remember, the R in RWD stands for Responsive
  • There’s a horizontal scrollbar on smaller screens
• The 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 smaller screens you can move it to the top so neither the nav or the body of your doc is squished.
• It’s a bad UX for those with smaller screens that you hide the code.

On a side note, Just because you can add something doesn’t mean you should. The background gradient makes the text hard to read. Blue on blue, black on blue makes it hard for users to read.

I’ve noticed I’ve given you the validator link quite a few times in other topics where you’ve asked for feedback. Rather than rushing through the projects and asking for feedback take them one at a time. Go through the feedback that’s given and correct issues that have been noted. Ask for feedback again and then, when everything looks good, move on to the next project.