Tribute Page - Carlos Marighella

Code Feedback
1

Hey

I just finished (I think) my first project and i really would like to have your feedback about it. This is the link:

https://codepen.io/jqm00/pen/abBKxNz

1 Like
2

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

  • Verify your email addr with codepen so we can see your page full view.
  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • 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.
  • Do not use <style> tags in the CSS editor. The style element is only used for internal styling and would be in the head element in the HTML page.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for. If you want multiple paragraphs then use multiple paragraph tags.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “link” is not accessible
3 Likes
3

I see that your project is ok. You passed all the users stories so ready to copy the link and paste and submit

1 Like
4

Hey @Roma !

I really appreciate your answer and the time it took to guide me on best practices.

Now my page achieve 10/10. I checked every point you mentioned and i have a doubt about the W3C Validator on my code. It appeared to me, can you help ?

Error : Element figcaption not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

From line 17, column 8; to line 17, column 36

v>↩ <figcaption id="img-caption">↩

Contexts in which element figcaption may be used:

As the first or last child of a figure element.

Content model for element div :

If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.

If the element is not a child of a dl element: flow content.

In addition, the link when I click opens normally. Doesn’t it open for you because it is a BR link?

By the way, see my updated code please

https://codepen.io/jqm00/pen/abBKxNz

5

Thanks for your answer! It really make sense, but i wante to make it better how our friend told above :slight_smile:

6

Good job cleaning everything up @maharishiI.

This is saying that the figcaption element can only be a child of the figure element. If you change that div to figure the error goes away.
figure and figcaption are semantic elements and in this case they work together. You can search for “semantic elements” to familiarize yourself with them.
The rest of the info on div can be disregarded in this case.

I didn’t say the link didn’t open. I said here was not accessible and gave links explaining what accessibility meant.

1 Like
7

Thanks bro! Ill submit that and begin Survey Form.
So glad for your suport

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.