Tribute Page - Built from scratch!

Project Feedback
#1

Hi!

So - my first website! I used notepad++ to edit and then added to codepen to get test results.

Looking for feedback, I am aware my divs are a bit messy I think? Also I have left placeholders (something/loremdipsum) as I just wanted to finish the ‘body’ and will finish content when I am done with the other HTML/CSS projects. The timeline is a W3 schools template that I just edited to speed things up.

I have seen on other posts that I shouldn’t use id references in CSS, I would maybe say the freecodecamp should take this into consideration when giving the details for the project, for example ‘Your HTML should contain these IDs, make to give them a class to reference in CSS!’. I was completely unaware this was bad coding practice.

Finally - link to page: https://codepen.io/ascottishpenguin/pen/PxKwLb

Thanks :slight_smile:

#2

The thing is, with the testing that freecodecamp does, the ID’s are kind of a requirement. The tests themselves hook into them.

I have heard the ID thing for years, it’s bad and it’s poor form and don’t do it. And there are valid reasons why, it is very easy to abuse. IDs all over the place make it easy to re-use an ID inadvertently. That said, there is a reason we have the option of unique IDs for elements, and there are times when it is handy. This is one. Testing code, and needing defined hooks, does make sense.

Now, with that, I do have to say… that IS a lot of unnecessary div tags. :wink: For example, you use section tags, and that’s great, but rather than a div containing them all, consider using an article tag. It would be more semantic, and accurate. It will still RENDER as a div, but from a semantic view, it is more appropriate.

But but BUT!!! I love the design, love the way you did the timeline, love the color scheme… very well done!

#3

Thank you! Yes, I assumed that was why IDs are used.

Ah, article would be better! I was confused as the instructions said to have a div with main containing all elements, does this mean I need to leave it for test purposes? I would not normally have this but I wasn’t aware of article!

I will revisit once I finish the other projects and repost a tidier version! Thank you for your feedback :slight_smile:

1 Like
#4

I think, with the lessons or challenges, we often “code to the test”. And honestly, some of the code we present for the test would be embarrassing to present to a potential employer. I do the same, go through and build something, get it close to what I think I want, then start wiring in the test hooks.

But… I find that I’m going back and re-writing stuff, in order to have a polished piece of work for my portfolio. And that applies whether the web design or the javascript tracks – it is very easy to simply code to pass, but take the time to go back, revisit challenges, and see if you could then do the same thing in a more elegant way.

As I said, it is a lovely page. Keep up the good work, and keep sharing. :wink:

#5

Regarding IDs Vs Classes, I have always been under the impression that classes are used when you need to apply a rule to more than one element, and that IDs are properly used for unique elements.

#6

Yes. Classes are used to group similar elements (for example, if I had a tab-container element, it might contain a few .tab-pane elements. I would want to use classes for those, as there might be more than one per page.

But in the case of the FCC test suite, they are looking for a specific element. Only one. So in that case, an ID hook does make sense.

#7

Beautiful Tribute page! :slight_smile: