FCC Feedback For Tribute Page Requested Please

Code Feedback
1

Hello FCC Community :wave:t4:,

I’d appreciate feedback on my Tribute Page.

I struggle much more than I expected to develop this and feel a bit like Homer.

I’d particularly appreciate feedback on:

  • What best practice am I missing?
  • How could I make the code more efficient?
  • Is there any redundant / optimisations I could make?

I’m very grateful to the FCC community for their selfless assistance.

2

Hi @danieljohnsonxyz !

Welcome to the forum!

This comes up a lot in the forum where people will replicate the sample project but the goal of these projects is to build something different from the sample.

I understand that it is difficult to build your first project but you will learn a lot more in the process if you don’t duplicate the sample. :grinning:
Something to keep in mind for the future.

Here are my thoughts on your project

I would review the lesson on giving links meaningful names.

wikipedia page is not that accessible.

In codepen, you don’t need to include the doctype, html and head tags.
That is already built into codepen.

Codepen also has a formatting tool.
Properly formatted code will make your code more readable.
Screen Shot 2021-06-09 at 11.49.10 AM

Hope that helps!

1 Like
3

Hi @jwilkins.oboe first of all, thank you for your helpful and useful feedback - it’s appreciated.

I have a few questions:

  1. The CSS and HTML were apparently OK with respect to the analysis function. Do you see anything I could have done to improve the code in terms of quality / best practice.
  2. Do you think I should redo it with my own ‘style’?

Thanks!

4

You still haven’t fixed the accessibility issue with the wikipedia page link.
Accessibility is important so I would review that lesson I mentioned earlier.

You also still haven’t formatted your code.
It is important to properly format your code so it makes it easier for other developers to read it.

Stuff like this is not good practice.

<ul>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
</ul>

or stuff like this

#img-div {
      background-color: white;
      padding-bottom: 10px;
    }
  img {
    padding-top: 10px;
    height: auto;
    max-width: 600px;
    margin: auto;
    display: block;
  }

I would.
You will learn a lot more by creating your own page than recreating the sample.

5

For my own understanding, would you mind clarifying what the best practice would be for bolding text in the bullet points would be? <span>?

Additionally, what is the problem with the CSS?

Thanks for your feedback!

6

Hi there,

I updated my tribute page. Whilst it adheres to the requirements checklist, it’s not very interestingly designed and I struggle with inspiration. From a code perspective, is this profile better?

Thanks,
Daniel

7

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

  • 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 syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

No one here is a designer, we all try to make the page visually appealing. You’ve accomplished that.

1 Like
8
9

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