I made my first responsive web page. It’s about Indian Bandit Queen, Phoolan Devi. I would love to have your views about my page.
Thank You
Hey Preeti,
nice to meet you!
Congrats on your first project, good job so far!
My ideas:
- you can add the tests by adding
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
into your HTML box:
-
as you can see in the image above, not all tests pass (red button). You can click on
Tests 5/10
and have a look why they do not pass -
you can get a code validation by pasting your HTML code into the
body
; you will see some recurring errors and I think you are able to fix them! -
you can increase the readability of your code by:
- clicking on the small arrow on the right side of the code box and
- clicking
Format HTML/CSS
-
on my wide screen, I’m having a hard time to read the content, because some lines are very long, font size and line height are rather small:
Feel free to ask questions and keep up the good work!
Welcome to the forums @RaisinBud. Your page looks good. In addition to the previous comments some other things to revisit;
- Don’t use
<br>
to force spacing or line breaks. That’s what CSS is for. - Review the lesson about giving meaningful text to links.
- Web Accessibility in Mind has a more thorough explanation.
- “click here” is not accessible
Thank you @miku86 and @Roma for the feedback.
I followed your instructions and this is the improved version.
Have a look.
Waiting for your reply…
Nice job cleaning things up @RaisinBud. There are a couple of small things still;
- Run your code through the W3C validator again. There are two minor HTML errors you can clean up.
- The page is not responsive. The last part about her death does not scale on smaller devices. It leaves a horizontal scrollbar.
Thank you again for the help…
- Eliminated horizontal scrollbar issue.
- Ran my code in W3C validator again,
The error is about the p tag, which is opening at “line 17” and ending at “line 44”.
I went through the code several times but couldn’t find out why this error is popping.
I’m looking at your page with slug BaKRadQ
and I see the opening p
starting on line 11 of your code and ending on line 38. If you’ve got another page you’re looking at please update your post with the latest one.
No matter though the issue will still be the same. It’s the way you’re using the p
element. In a nutshell, you’re saying almost all of your page is a paragraph and that does not fit the definition of a paragraph.
Because you have the opening p
tag and immediately follow it with an h3
tag you’re basically closing the paragraph (one block level element followed by another block level element). So the closing p
tag many lines down doesn’t have a matching open p
tag and the error is thrown.
The following hopefully explains it better than I just did. Pay attention to the first two paragraphs in the article.
thanks @Roma…
I didn’t know about this relation between tags. It was very helpful.
I modified it again, removed the p tag.
Hope it’s fine now.