FCC Responsive Web Design Tribute Page Project Feedback

I recently completed the grid chapter, and day before yesterday, I completed my first FCC project. Looking for feedback and suggestion!

Deployment: krishlearned.github.io/freecodecamp/web/tribute/
Source Code: github.com/KrishLearned/freecodecamp/tree/main/web/tribute

All reviews, suggestions are respected :raised_hands:

1 Like
  1. Looks good to me, but I am not a design oriented person.
  2. The source code isnt visible for others to seee

Thanks for pointing out! It was a link typo! Fixed it!

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

  • the fcc test script should be before the closing body tag
  • 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
  • You should not skip header levels. That is, it’s not a good practice to jump from h1 to h5.
  • Noticed that the .page selector has calls to font-families that you neither link or import.

Do not try and replicate the sample projects. They show one way to do the project.
The instructions say yours should be “functionally similar” and to “give it your own personal style”.

1 Like
  • Those, fonts are the system font stack, those fonts are available by the operating sytems, they are also called the system font stack.

  • Headings are defined on the page to show as per ux and seo, you can make the most important text h1 and the little less important text to h2 and so on

  • I made the same page because I feel a little difficult to make content! But I made it a whole personalized style!

  • I will fix the link text asap

  • I will also fix the script tag asap

Thanks for your review, it actually means a lot to me!

I didn’t check the code for semantic or other errors, but the user story’s tests all passed and the design is awesome. Pretty nice job, even if you recreated the example tribute page.

Congrats!

1 Like
  • I have used semantic html as it is more friendly to read and understand!
  • Thanks for alerting me about other errors I will use weblint to find any possible errors!

Thanks for the review! It really means a lot to me!

‘Roboto’, ‘Oxygen’, ‘Ubuntu’, ‘Cantarell’ and ‘Open Sans’ are not system fonts.

Skipping heading levels can be confusing. You can read more by researching accessibility. Not everyone that accesses the page will be sighted.

The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.

Reference: https://systemfontstack.com/

That heading was not for catch people’s attention, it was for visual heirarchy, an ui principle. That heading is smaller because it is a subtitle and h3-h6 should be preferred for subtitle. h1/h2 for titles. If I create a blog/documentation I should follow the headings but for hero sections headings are completely opposite. Reference: https://github.com font-page for not logged in people, https://www.freecodecamp.org/ (But instead of a h3-h6, they have a bold and large paragraph)

I didn’t look at the code, I looked at the output, as the project page says, you have to create a similarly funtioning app. My app functions like the example, just the text is not different. All of the code is written by me without referencing the code. I made the page about the same person and the text (headings, paragraphs) as the example. It shouldn’t be a problem right? I don’t think people actually make text for their webpages in practice/learning projects, they often use lorem. I don’t like lorem, thus I wrote the same text as-in the example. I promise I haven’t looked up at the code!

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