Feedback on my "tribute page"

I just upload it on the FCC Challenge, apparently went through (it got the check it in the /learn tab). I believe that as long as you meet the User Stories it should work.
From that you can spin it how you like it. I did like this to play a bit with flexboxes and responsive layout.

Ps. Thanks for notice on the typo of the CSS. :slight_smile:

1 Like

Yes, just change the existing break points from px to em. Setting your breakpoints in em will automatically make them responsive to both changes in the browser width and font size changes. You get two for the price of one.

2 Likes

Not sure if it was just my scrolling/loading before or not, but it looks like you now have a black background below the title area, which looks much cleaner than it did before, also allows faster and easier reading :slight_smile: which means I noticed something…MJ attended UNC-CH or University of North Carolina at Chapel Hill (you do not have to include the at Chapel Hill as that is the main campus and is referred to as UNC :slight_smile: ) to my knowledge there is no North Carolina College .

Yes, I am a proofreader :slight_smile:

1 Like

The black background on the title was probably due to the loading, but now I’ve inserted and I think I prefer like that.

And I’ve corrected the “North Carolina College”, thanks :slightly_smiling_face:

1 Like

Yes, it worked. I’ve used the 16 rate conversion from px to em, seems to have worked fine. Thanks for the tip and the time to help me.

Looks real good. Isn’t that nice, now your page is automatically responsive no matter what the view port width or text size.

A few other issues:

  • Don’t use ‘vw’ (of ‘vh’) for font size. Doing this makes the size of the text solely dependent upon the view port dimensions. It takes away the ability of the user to control the text size.
  • I think your heading levels could be fixed up a little. All of those h4’s should probably be h2’s. The current h2 and h3 should not be headings at all, or you could add “The greatest to ever play the game” to the h1.
  • The alt text for the four images at the bottom is the same for every image. I’m guessing you just forgot to customize them.
  • The blue link at the bottom is too hard to read on the black text, it definitely needs to be a lighter color. You can check color contrast accessibility at
    https://webaim.org/resources/contrastchecker/
  • That link is also not quite as descriptive as it could be. Maybe change the sentence to something like
"Visit <a>Michael Jordan's Wikipedia page</a> to learn more about his career.

I agree with those. Regarding the headings I was making the mistake of using the headings tag to also give bigger font-sizes, which I’ve read is a mistake, since headings have a purpose. I’ve created class to them instead and left only h1 and h2.

For the responsive text I found a solution that mixed em + vw, so you can set a minimum for the text size and still make it variable with the vw size. I believe it worked.

Thank you for the helpful tips!

Welcome to the forums @victor.zamith. 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>).
    • Your page passes 5/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you should address.
  • Review the lesson about giving meaningful text to links.

Edit: On a side note, don’t include the style tags in CSS when using codepen. It will cause issues.

2 Likes

Thank you for the welcome. Since is my first project I missed out on the script to test the code. Now runs 10/10.

I’ve also checked the bugs in W3C, fixed them all. Just in the CSS it shows me some Parse error, but I believe is from copying to Codepen. Is that right?

Changed the link, it wasn’t acessible, also included some :hover and etc, to make it even more accesible.

One final question, I’ve already upload the codepen link (which is still the same) into the FCC, should I redo it? Or is gonna work fine?

Thanks.

No. I believe you need calc and the expression in parens. Go ahead and Google it to be sure.

It’ll be fine as long as you updated the same pen. If you created another pen then you’d have to resubmit the link.

1 Like

:point_up_2: this is what I was originally asking you about @victor.zamith with the testing …

@Roma where in our code should the test script be placed? I have not tested my projected yet with the script…I have run it through W3C validator and it passes, however FF accessibility does not like my text/background contrast so I am working on that currently :slight_smile:

Thanks :slight_smile:

1 Like

If using codepen the script element can be the first line in the HTML section.
If you’re coding elsewhere that requires you to create the HTML boilerplate then the test script (being JS) would go right before the closing body tag.

2 Likes

Thanks everyone for the feedback and help, I’ve been learning a lot those few days.

I did finish my Form page, in case you are interest in checking it out.

hi @victor.zamith

great work at your survey form.
maybe add box-sizing inside .textarea class would make it nicer.

1 Like

Thanks! That was the thing it was bothering me.

Hey Victor,

I checked out your project, once again, Super Job!
My recommendations are purely visual in nature.

First, I would change “kid” to “child” it just sounds better :slight_smile:

Also, I would switch:
“What grade is he/she in” → “What is the last grade completed by your child” (Since it is Summer Break, the child is not really in a grade, but between them.)
“Did your kid went in last year’s summer camp?” → “Did your child attend last year’s summer camp?”

I know that these are not “coding” fixes per say; however, if you are going to use them as part of your portfolio, then it will more accurately display your true talent and skill. :slight_smile:

1 Like

Nice job reworking your form @victor.zamith. It looks good.
Incorporate the wording changes that heather.kent726 mentioned to make it read smoother.

1 Like

Thanks for the comment! Makes sense, I was torn between using kid or child before going with kid.

For sure, I intend to use it in my portfolio so needs to looks clean, that’s why the forum is a good place to come for feedback.

1 Like

I applied your comments also to this one, with the debug in W3C and all.

Thanks again!