Let's discuss your "Tribute Page"

Sarah,
Here’s the general info page on FCC for Tribute Page project requirements:
General info
And here’s a link to the specific items being “tested” by FCC:
Google Doc with Tests checklist for each Project

HTH.

2 Likes

Thanks for the feedback i’m going to mess around with some new colors tonight :grin:

Thanks so much, I really appreciate all of the feedback! Those are the all great tips, exactly what I was looking for and I didn’t know about csslint :rofl:

Project link - https://codepen.io/cuckoolove/full/rJxebG

Ola campers! I’m an interior designer, and I’m new to coding.
The tribute page features a heroine from my home country.

I initially formatted the tribute with an unordered list like the example by freecodecamp, but due to the lack of dates in the timeline (because of her brief life), I decided to format it in a different style while still fulfilling the user stories and objective.

Critiques and suggestions are most welcome!

Project link - https://codepen.io/1DVS_BSTD/full/KQVEWm/

Hi campers!

Please check my tribute page, it’s nothing special (I didn’t use any bootstrap, should I?) but any feedback and critique is welcome :slight_smile:

Have a nice day!

Hi there!
Did you already run your Tribute Page through the FCC tests?

Here’s the general info page on FCC for Tribute Page project requirements:
General info
And here’s a link to the specific items being “tested” by FCC:
Google Doc with Tests checklist for each Project

HTH.
– Janice

Hello, Savitri.
The page feels nice. It’s tranquil and pleasing.
The colors are very nice. Would you consider changing the color of the quote to match the page header?
The quote gets a bit lost at the bottom, and it’s hard to read due to low contrast.
Maybe also open up the quote’s interline spacing a little. You can play around with: line-height: 1.3px, 1.5px, 1.1px, etc.

Try to keep all styles in the CSS file. You are using Bootstrap and it does a lot of the styling and formatting. But for the extra ones that you added within the HTML, it’s a good idea to move them to the CSS file.

Did you already run your Tribute Page through the FCC tests?

Here’s the general info page on FCC for Tribute Page project requirements:
General info
And here’s a link to the specific items being “tested” by FCC:
Google Doc with Tests checklist for each Project

HTH.
– Janice

Hmmm… by testing you mean checking it all by myself according to this documents? Or is there some automated test?

FCC has an automated test for each project.

Take a look at the links in my earlier post.

Dear Janice,

First of all thank you so much for taking the time to take a look at my tribute page and for giving me your honest feedback. I’ve taken your helpful suggestions and made the corresponding changes to my codes to make the page look better.
I didn’t know about the FCC tests (forgive me, I’m so new to this), so I really appreciate your info. I’ll run my page through the tests.

EDIT: I ran the test, and of course I failed every single item. :sob:
I will remedy the situation asap.

EDIT #2: I fixed all the “failed” items, and I’m able to get 9/10 passed items.
I’m unable to get the image responsively resize, relative to the width of its parent element, without exceeding its original size. I tried putting max-width, and also the bootstrap class=“col-xs-12 col-md-8” but neither of the two helped me pass the last test.

EDIT #3: I DID IT! 10/10 finally. I added class=“img-responsive” and it cleared my error. :smiley:

PS: I didn’t fork any other pen’s code, not even the example, to make sure I can get through this on my own, so please forgive if my codes might seem messy / not the ones expected.

-Savitri

1 Like

First of all, thank you for your help :slight_smile: I fixed my tribute page and I have now 9/10. I miss one point for responsive image (but I think it is responsive now…) but I have no idea how to fix it.

I had the same issue, and it was fixed by adding class=“img-responsive” to the tag. Depending on the bootstrap version, sometimes class=“img-fluid” will work instead.

Congrats, Savitri! :boom:

Hello Bartosz,

I’m not very good yet at fixing responsive image issues.
I tried modifying your Codepen this morning by applying suggestions @camper and others gave me for improving the responsiveness of my project, but nothing fixed that final FCC test.
Then the FCC Forum was out-of-order most of the day until about an hour ago. (I even tweeted out wondering if the Forum was down or if it was something on my end.)

Sorry, I couldn’t help more. We’ll get 'em next time!

–Janice

@cuckoolove

Oh, no. It just occurred to me that I incorrectly wrote the values for line-height.
I should have written it without the px: line-height: 1.3, 1.5, 1.1, etc.
You can use px, but the value would be much larger, like 28px, 32px, etc.

I hope I didn’t cause you trouble.

project link - https://codepen.io/ashleywsywang/full/JpXLew

i should have probably included more information :grimacing: any feedback would be greatly appreciated!

(also, was bootstrap necessary?)

Hi guys, this is my Tribute page v1 on Marcus Aurelius.
Any suggestions are welcome :slight_smile:
Project Link - https://codepen.io/thelvinas/pen/eVJwjr

Looks good, responsive design and all user stories are fulfilled. I noticed that first 4 pictures are clickable, and that action returns you to the top of the page. Don’t know if that was intended. Also, visually it would look better if all the pictures were the same size. My idea for that would be to make use of the bootstrap grid system and make 2 rows with 3 columns, in each of those you put 1 image with class thumbnail.

Beautiful. However, the text is rather small and hard to read. Also, when switching to mobile or tablet size, there is just empty white space. I think (not 100% sure) that you can tackle that (if desired) by adding “html height 100%” to your css.

Nice tribute. Only thing, it’s not completely responsive. Specifically, the jumbotron seems to be responsive, but everything inside it (text, picture, quote, timeline) isn’t. I see you have “container-fluid” and “col-xs-12” both. Could that be the reason? I truly don’t know. But in my tribute I used “container” without adding “fluid” and later “col-xs-12” just like you did and it works fine (just FYI).