Tribute page feedback any criticism or tips to improve are welcome

Hello there guys, I am new here and also very new to coding and have been coding for a month. I have spent most of my time doing research on the field and worked my way past the freecodecamp html and css sections, I am also taking the intro to web development free course on frontendmasters.

Stuck to the original idea for the first one, in future projects I will try to add my own personal style to it.

Here is the link to my codepen:

Any criticism or tips on improving would be very welcome. I plan to be very active in this community over the span of the next year and hoping to learn as much as I can so I can help others too. Sidenote: English is not my first language, hopefully my post is able to be understood.

First of all, yeah, you could have done your own thing here, you didn’t need to copy the FCC one exactly.

Second of all, your English is fine, don’t worry about it. I didn’t even realize until you said something.

All in all, the page looks good.

Looking at the HTML, a few things caught my eye:

    <ul class="tribute-list">
        <div class="tribute-group"><li>1914 - Born in Cresco, Iowa</li></div>
        <!-- ... -->

I think the children of ul (or ol) are supposed to be li. There shouldn’t be a div here. Is there something you can apply to that div that you can’t apply to the li?

    <div><blockquote class="quote"> <!-- ... -->
    <div><figcaption class="quote fig-caption">  <!-- ... -->

There is a similar problem here. Why wrap these things in divs? I think the one for the figcaption is problematic. And that figure never gets closed.

In the CSS…

    /* text-align:center; */

I don’t understand where the end of the padding line is.

    text-align: center;
    font-weight: bold;
    font-size: 18x;

I don’t understand what 18x is - I assume you mean 18px.

But still, it looks good, good work. Have fun on the survey form.

Welcome to the forums @silenceisgod6. You page looks good. Some things to revisit (some have been mentioned, some not…)

  • 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.
  • 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron 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)
  • 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

And as previously mentioned, do not try and replicate the sample projects. The instructions say to make your project “functionally similar” and to “give it your own personal style”.

I think my assumption here was based on thinking that all flexbox children have to be wrapped in their own <div>, this is not necessary because <li> are block elements? , I changed this (removed the divs) and everything still works as it should.

Also the same reason I wrapped the figcaption in divs. The closing figure tag forgot that.

That again left over (forgotten) and also the unit I wanted to use for font-size was 18px.

Thank you very much for your feedback kevinSmith , I will keep this in mind as I go on to the next project , will get creative and add my own style.

I initially wrote it out in vscode and copied it over, but thank you for making me aware of this, will go through the basics of codepen.

Thank you for the recommendation Incredibly useful tool, came about the term validators for CSS during research prior to learning but was unaware of one for html.

Will review this lesson and read through the accessibility resource. Thank you very much Roma, thank you for your help.

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