Tribute page; feedback please

Project Feedback
#1

Hi all; Tribute page assignment just completed; any comments are welcome. Thank you.

1 Like
#2

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

  • Most importantly, the first line you have should be replaced with;
    <!DOCTYPE html> This says that what follows is an HTML5 version. That’s what FCC teaches. You’ve contradicted it by making it v4.1. You don’t want to do that.

Further, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors. (Only if you made the mods I previously mentioned. If not, then correct every error.)
    • There are HTML coding errors you should be aware of and address.
  • You have this <div class = "timeline container"> in HTML. In CSS you incorrectly call it as .timeline container {.
    • Incorrect because written the way you did is two different class names. One called “timeline” the other called “container”. If you want it to be one word then it needs to be written as “timeline-container”.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
    • The one for HTML misses things which is why I recommend W3C
  • Review the lesson about giving meaningful text to links.
#3

@Roma Thank you for your time; providing valuable feedback. Based on your comments; I have addressed the following:

  1. is now not only limited to v4.1 instead to HTML in general.
  2. Class name “timeline container” is now rectified as #timeline-container"

  3. is removed and instead CSS has another line of code as per MDC docs
  4. Meaningful text is now re-written and not sure but each time I click on the link (URL) it opens up the desired Wikipedia link on my machine.

Above all; as per your kind feedback yes I have now used the “Analyze HTML” option that does tell me there were no errors found now; we ll CSS looks okay as well. Please let me know if I have now done what was meant to …and thank you heaps for your time.

#4

Looks better @rajgorakshay. There are still things to revisit.

  • I mentioned this earlier. Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning again because you have elements out of order. The code that the browser renders belongs in the body element. The head element, and the elements it contains, do not go in the body element. Review this to understand the tags in HTML boilerplate
  • Run your HTML code through the W3C validator again. There’s another error to clean up in addition to the head element being out of order.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s a typo to clean up.
#5

@Roma thank you once again…have corrected CSS errors; plus removed body tag although there is something in here that I can’t get rid off . When I run this of W3C validator…there is some parse error along with tag that I haven’t touched when doing my assignment…if you could plsss help me.

image
image727×332 16.1 KB

#6

You’re seeing that because the CSS checkbox is checked. You don’t want that checked when validating HTML.
Btw, when I say codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for ’ box. That mean take away everything above and below the body element. Not just delete the body tags.
So these are not needed by codepen either;

<!DOCTYPE HTML>
  <html lang="en">
  <head>
    <title>Shri SWAMI VIVEKANAND</title>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  </head>

And of course the closing html tag isn’t needed either.

If you’d like to see all the boilerplate tags codepen provides, in Edit mode, click on the ‘Export’ tab, then ‘export .zip’. When you expand the zip file the files you’ll want to look at are in the ‘dist’ folder.

Why you’re seeing that error message. Uncheck the CSS checkbox when checking HTML code.
Screen Shot 2020-08-14 at 15.59.18

#7