Feel free to give your feedback!

Code Feedback
1

Hello,

Below is my tribute page attached, the first project I have worked on.
If you have any feedback on the project, feel free to express it!
Any help is much appreciated, thanks in advance.

https://codepen.io/sarahkaal/pen/dypYqxy

All the best!

2

Hey @sarah_kaal, It seems that you attached the wrong link. Check that again :wink:

3

Thanks, i didn’t pick up on that.
all edited now!

4

Good job it’s a good first project.

But I have some advices for you :

  • Write your css in an external file not in your .html it’s more readable.
  • Your H1 and H2 are not in your body.
    -Line 146 the tag div4 doesn’t exist, use div with an id or class name.
    -Likewise for your P2, P3, P3, P4

Have fun in your learning.

Bye

1 Like
5

Thank you! all your feedback has been edited into my work!

6

Hi @sarah_kaal, nice page. However there are some things to fix:

  • Your page only passes 9/10 tests. It must pass all 10 tests to pass. To see which test you haven’t passed, click the red test button.

  • The DOCTYPE, html, head, and body tags are not required and shouldn’t be used in codepen. Instead, paste the code from the head in the ‘Stuff for head’ section of the pen settings.

  • In portrait mode on a mobile screen, the sentences ‘-Rumi, translated by Fereydoun Kia’ and ‘Read more on Rumi’s history’ overlap.

7

Thank you for pointing that out!

As I do all my projects on my laptop, I didn’t even take mobile display in mind and it affecting me from passing the tasks.

All touched up now!

1 Like
8

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

  • As mentioned, 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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mentioning again because you have elements out of order. Everything the browser renders belongs in the body element. You have a main element outside.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • 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 and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Something to note. The style element is only used in the head element for internal styling.
    • You do not want to use the style element in the CSS section of codepen. It will cause problems.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like
9

Thanks for W3C validator, I am still very much new to coding and this helped a lot!

1 Like