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

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:

3 Likes

OOOOOOOOOOoooooooooooooooh…

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

3 Likes

@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.

3 Likes

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).

3 Likes

@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:

3 Likes

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 https://www.sololearn.com/Courses/
Free and you can also use on your phone (or desktop or laptop)
They offer fundamentals of java, javascript, c# and c++.

Also https://www.microsoft.com/net/learn/in-browser-tutorial/1
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. (https://codepen.io/rmcorral/pen/YeGaLO)

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

with cheers,
narayan.

1 Like

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

3 Likes

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

hi @narayan!

I really like your page; its clean and simple without being boring, and the brown background to your main picture echoes the brown of the mushroom gills nicely.

Your text is well-written, which I think is often neglected when designing webpages - a good balance of humour and seriousness.

You’ve packed a lot of information into a small space, without it being too dense.

My only real suggestions would be that:
i) I think you need white-space between your sections in the same way that you had a gap between your picture and main text.

ii) I think it would help for your lists to start from 1 in each benefits section instead of counting from 1 to 21 across them all (benefits to the skin 1, 2,3 … how mushrooms benefit the the hair 1, 2,3 etc)

iii) Maybe have your “life saver” text as a subtext under “Tribute to mushrooms”

iv) I think we need to avoid using bootstrap for the beta curriculum - see campers post further up the thread

Other than that, good job!

hi bro,
thank you for the review.

1.white space given (padding)
2.modified bulleting
3.Still like to have the “life saver” text as main title because its unique :slight_smile:
with cheers,
narayan.

1 Like