Build a Tribute Page Project Questions, Discussions, and Resources (January 2018 Cohort)

Okay, here’s the plan. I’m putting this out there, publicly committing to the plan. Yikes!

I have a version of the Tribute Page, but I want to re-work it. So…
By Tuesday, I’ll have a new version to share. The new version will be done in Flexbox.

So… I better get to taking a closer look at Flexbox!

Send me your positive vibes!


May the force be with you!:muscle:

1 Like

I also think that you should use a lighter shade of gray for the quote. There just isn’t enough contrast between it and the black background, making it really hard to read.

Okay, I’m likely not going to make the Tuesday goal date that I set for myself last Friday. :frowning_face:

The trouble is this:
Original tribute page created with Bootstrap.
Bootstrap classes do a lot of the heavy lifting in the background, like jumbotron, thumbnail, etc.

So I’m using dev tools to reveal all the hidden properties and settings and it’s taking a while to replicate the original using Flexbox and “pure CSS”.
But I’m learning Flexbox which is a good thing IMHO. Plus I’m also using BEM and will be adding in semantic HTML in the final stages.

new ETA: Thursday, Feb 1. :sparkles:



Woah, woah, wait…

(1) Why are we being asked to use so many ids?
This is not current best practice.
I used classes in BEM style – which is in-line with one of the current best practices out there.
(Full disclaimer: I used one single id for one specific Flexbox thing with display: inline-flex.)

(2) Instructions say to NOT look at code of working example.
Where was I supposed to know before building the page, that a heap-load of ids was the expectation??

(3) Instructions say to fulfill the user stories by getting all of the tests to pass.
Where are the user stories posted?

(4) Do I miss a rubric?
I saw the checklist that @camper included in this thread, but that doesn’t identity the specific id overload issue.

(5) The beta “Build A Tribute” instructions leave out a lot of important detail.
beta Build a Tribute page

I ran the HTML validator and CSS validator; my code passes.

So I’m partially blowing-off steam, but I’m also bewildered by the absence of concise instructions / rubric / user stories provided to help a camper-coder get pointed in the correct direction. I’m also stunned that best practice is not being upheld and promoted. I recommend FCC all the time, but this took me by complete surprise. Did I miss something in the lead-up to the project page? ??:confused:??

Was anyone else bewildered or stunned when they ran the tests?

Thanks for hearing me out,
– Janice


@ConnectExtend Without id’s, how would you expect your page to be tested? Just a thought…

Some campers in the cohort suggested that you first make sure you pass the test and then work out the details. This saved me the frustration of having to re-structure elements when I thought I was finally done. So yeah, it would be nice if the user stories were listed somewhere in the challenge but you could see them by running the test on an empty page.


hmm still not working, I thought you couldn’t use fixed wallpaper on mobile browsers?

I extracted the Tests checklist for each of the 5 projects. Here’s the link:

Google Doc with Tests checklist for each Project

(I’ll also post this on the main cohort page).


@ConnectExtend :raised_back_of_hand: I feel similarly about using ids and also felt surprised at the test results when I first added the tests to my tribute project.

I think, like @yoizfefisch points out, ids are a good way to determine if the submission passes the tests. Also, I realized that I don’t have to select the ids in CSS, so I think of them as being present for some future JavaScript or something. However, I have noticed that some people tend to think that since the ids are supposed to be there, they’re also supposed to be styled.

Thank you for your comments and your willingness to help myself and others work our way through the fCC beta curriculum! :fireworks:

@camper, Thanks for your kind comments.

For the overall good of front-end dev, everyone should be aware of --and work according to-- the best practices. It’s not easy to teach beginners – there’s so much knowledge to impart. But a simple statement to the effect of [You’ll notice that we are asking you to use ids as part of this project. This is not a best practice when used for styling purposes. We, at FCC, ask you to include ids because these are unique identifiers and are used by our test verification process. Please include the ids in your code, but don’t apply styles with them. Please use classes for styling. …maybe add something about in IRW, ids and JS…]

I’ll take a look tomorrow with fresh eyes at the tests checklist. I’ll also try to review others’ projects tomorrow, too.

Enjoy the SuperMoon BlueMoon BloodMoon tomorrow morning! :full_moon:


thanks that part of the tests gets pretty annoying

New day! Much better than yesterday!

I added the necessary ids to my Tribute Page and cleared all the tests!

In the end, all that was needed was to open my existing HTML file and insert each id into its proper place. :boom:

Johnny Cash - Tribute Page

1 Like
1 Like

So guys, i will not be keeping up with you as much cause i am in school and all 4 of the compsci classes i am taking basically require my to learn a new programming language specifically, java, javascript, csharp, .net and c. Anybody know where i can learn these. Something kind of like fcc?

1 Like

@deedee I recommend that you start with
Free and you can also use on your phone (or desktop or laptop)
They offer fundamentals of java, javascript, c# and c++.

It looks free and covers .NET and c#
However I have no personal experience with Microsoft Learn; have only seen it recommended by others.

Good luck!
– Janice

Quick reminder to look at the list of projects in the first post above and review as many of them as you can, using the checklist, before the 2018-02-04 23:59 PST (2018-02-05 04:59 UTC) deadline. :sunny:

Also, I find it helpful to read reviews that others have made :clipboard: so I can learn from their issues and learn how to write better reviews.

1 Like

Here is my Tribute page, please feel free to comment. (

hi there, the water mark is bright and its making the some of the text not quiet visible.

with cheers,

1 Like

Hi All, this is my first FCC tribute page coding Tribute to Mushrooms , kindly give your valuable feedback.


I’m so behind! :confused:

Here is my tribute feedback post.

As mentioned in that post, I’ve updated one I started work on last year when I first tried FCC but had to have a break. The amount of time I’ve spent trying to tidy it up, I think I should have started from scratch!

I’ve implemented semantic tags, and tried to follow best practices in terms of swapping out styling on id tags, tried to make the css less messy, and eliminated px measures for ems/% to try to prepare for making it work in a responsive way.

I’ve hit a bit of a roadblock in using media queries to make it responsive - as I’ve used floats and a lot of styling to form the columns on my page I’m struggling to figure out the best approach as to how to render the page on mobile.

I’m also going to look at the contrast and colour scheme tools to check the accessibility, but going to step away from the keyboard for a bit before my head falls off.

Any thoughts or advice welcome!

1 Like