Hey guys, check out my Tribute to the Toronto Raptors

Hey guys, check out my Tribute to the Toronto Raptors
0

I’ve just completed the Tribute Page project and I would love to get some feedback.
My topic is the Toronto Raptors, 2019 NBA Champs!

Here’s a link to the CodePen.
https://codepen.io/kwxza/full/wLZYbW

I’m a big Raptors fan and I had fun creating a summary of the Raptors history.
Let me know what you think!!

3 Likes

Like your work …best of luck for next one

1 Like

Hi @kwxza, your page looks good. There is something you may want to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link. There’s an error in HTML, <hr> cannot be a child of <ul>
1 Like

@Roma
Thanks for taking a look at my site.

I didn’t realize I couldn’t use a <hr> tag within a <ul>.
It seems like the browser renders it properly in both Firefox and Chrome.
I haven’t been able to try it out in Safari yet.

What is the browser rendering if it is not rendering a proper <ul>?

@kwxza, browsers are lenient and do their best to render pages despite a failure to compliance.
The issue comes into play when they (browsers) do adhere to a rule that you’re overlooking today or you work for a company that wants you to be compliant now because they don’t want to spend the money in the future to have you go back and rewrite your code.
For example, you wrote this and it works and you got paid for it. Six months browsers become compliant and your code doesn’t work. The company doesn’t want to pay you for something that should work and you don’t want to have to spend time to fix something that previously worked even though it wasn’t compliant.

Code validators (HTML, CSS, JS, etc) are there to help you as a developer. You’re not expected to know all the rules but you should know how to use tools that help you to know that what works today will also work tomorrow.

1 Like

I like the grow effect when hovering over an icon. Perhaps add an effect when you hover off an icon? I think it would flow a little better.

Nice page though!

1 Like

@Roma
That makes a lot of sense, thanks for the tip!

Do you know of any good VS Code extensions for code validation?
I’ve been using Prettier for HTML and CSS formatting, but I guess
it didn’t catch the invalid usage of the <hr> element.

Thanks once again for your reply :slightly_smiling_face:

1 Like

@RadDevDad
Thanks!

I wanted to add a timed shrink effect once the cursor went off the icon,
but I wasn’t entirely sure how to do it and I wanted to move on to the
next project.

I used the @keyframes CSS animation property to make the icon scale
when hovered over, but I don’t know if it’s possible to run the animation in
reverse once hovering stops. Something to figure out, I guess.

Thanks for checking out the page!

1 Like

This is awesome !! I am a HUGE raptors fan and the site looks good. We The Champs :slight_smile:

1 Like

I found this website which uses webkit to make it grow and shrink. Perhaps this could help in some way! The example was #3

1 Like

@fullcourtchef
We’ve came a long way!! Champs!! :trophy:

1 Like

@RadDevDad
That’s an awesome link, I’m going to check that out and see if I can implement it.
Thanks!

@kwxza, I don’t know of anything for VS Code. Personally I use Brackets.
What Prettier does is set nice indentations so your code is easier to read. It’s worth it to use that.

Since I tend to write my code in Brackets I’ll use the W3C Markup Validation Service. Can’t go wrong with them.

1 Like