I would love to know your opinion about my first HTML project!

Code Feedback
1

I have completed my first HTML project (tribute page) to get certified: https://codepen.io/FrankERT/pen/oNoZgdj. I am a beginner in web programming so I would really appreciate any suggestion or correction. Greetings and blessings.

2

Welcome to the forums @frankernesto.ramirez. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    The test script, with all tests passing, should be included when you submit your projects.
  • 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.
  • 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.
    “wikipedia entry” is not accessible

On a side note, a lot of your HTML and CSS code look to be copies of the sample project.
Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gained from the incremental challenges.

1 Like
3

Thanks a lot. They were the suggestions I needed. I will start from the beginning and review the lessons.

4

I have made some corrections to the code. Could you check back for me on the tribute page project, please? What can be missing? It’s ready?

5

Good job cleaning things p @frankernesto.ramirez. Some things to revisit;

  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper 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). (You have an empty block. Not necessarily a bad thing but why have it?)
    (The one for HTML misses things which is why I recommend W3C)
  • As mentioned previously, 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.
    “wikipedia entry” is not accessible

The following are suggestions. You don’t have to do any suggestions that someone gives you.
A couple of things to revisit style wise. I’m not very good at styling either but maybe revisit;

  • Making the default font size so small.
    Leave it at the default and let the user make it larger (or smaller) if needed. Especially on a large screen, 10px is hard to read.
  • Maybe don’t center the #tribute-info. It’s hard for the human eye to bounce back and forth trying to find where the next line starts.
    Maybe also get rid of the bullet points since the dates are bold and clearly show where the new list item starts.
1 Like
6

Thanks, Roma! The project is still in progress…

7

I have tried the wikipedia link and if it works for me here…

8

I did not say it didn’t work. I said it was not accessible. Please click and read the provided links to understand.

1 Like
9

:smile: Sorry Roma, I already understood you. I’m trying to give the unordered list a proper view now so I can get to the link later. Before fixing it I will consult the links that you left. Thanks again

10

I made some changes, do you think it is ready?

11

This is excellent advice. Don’t set a default font size in html, especially not in px. But really, you don’t need to set one at all. The user’s browser already has a default font size set and you should just allow that to be the default font size. For any elements where you need to make the font size bigger (or smaller) use rem units, which are based on the user’s default font size set in their browser.

2 Likes
12

Some other suggestions:

  • The text in the timeline feels way too cramped and could be hard to read for some people. I would recommend you give it a line-height of at least 1.4, and perhaps put a little margin between each list item.
  • The <h3> at the bottom of the page is not actually a heading and shouldn’t be coded as such. Headings introduce content. The is just a link. So probably just change the <h3> to a <p>. You could put it in a <footer> (outside of and below <main>) if you feel it needs to be separated from the main content semantically.
  • That white stripe at the top is caused by a top margin on one of the elements near the top. I’ll let you figure out which one it is (hint, use your browser’s dev tools inspector).
1 Like
13

:grinning: Thanks bbsmooth, fantastic!!

14

I just finished the changes you suggested. I have the impression that I am close to the final version. What do you think?

15

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