Tribute to Nicolas Cage aka GOAT

Code is probably a bit messy, but then again it is only my first project. Feedback and criticism more than welcome x (image is a bit grainy, but I was more worried about passing the tests so be kind)

PS. Thumbnail image seems to be dated too weirdly enough.

1 Like

Nice page, he’s also a great actor :+1: Here is what I would change.

  • Give a color your hyperlink. Didn’t know there was one until I had to read it.
  • Give some space between your unordered list and its introductory paragraph.

Well done :slight_smile:

Done and Done. Thanks!

Hello k-dun, there is some semantic problem in your code and I think you could change some styling.

I played a bit with your code and this is what I did for comparison:
codepen io/anon/pen/rRgVML?editors=1100 (I can’t post link yet, you can add a “dot” enter codepen and io to check the change I made.

Things I did:

wrap your h1 and h2 in a header

add some padding

I did:
header {
padding: 30px 15px 0px 15px;
}

(The 15px are useful for when you reduce your window size or on smartphone)

deleted the <i tag in your h2 and your p and created a class=“italic” in both then added in css: .italic {font-style: italic;}

Put a max-width of the image of 500px; (in full screen the width of nicolas face will fit perfectly enter the h2 and the Rose quote).

I add a line-height (I choose 30px) for more readability (as white on black can be hard on the eyes)


Avoid using <br. for ex. for your image caption it’s better to make a <div with two <p like this:

<div id="img-caption"
<p class="italic" "No one can rock a leather jacket like Nick Cage" </p
<p - Axl Rose.</p

Instead of a single <p with a break enter the quote and Axl.


The same goes for your “tribute info” part. Try to avoid all the <br and remember that the <div is a container and even if it can contain and display text directly, you should only fill it with other tag element (like <p for your text).

I didn’t change the semantic in “tribute info” but you can make your website look the same as right now without using br and adding some <p tag.

I didn’t read too much the css. I have a hard time reading the code in codepen and I’m starting to learn to code also so I just note good at reading efficiently html css yet.

++ style the link as shimpphillip said. I also didn’t see it.This text will be hidden

PS/edit: sorry for the formatting. All the tags I put were use to style the text as in html so my post didn’t make any sense and wasn’t readable haha.
I let all the tag open seem ok now consider them closed :sweat_smile::sweat_smile:

You’ve gone through too much effort, thank you so much :slight_smile:
I’ll make sure to try it and I’ll try doing it without looking at your code first. I was so excited about passing all the tests I didn’t even start thinking about refactoring. MEA CULPA

No worries I just finished my tribute page so I thought I would come check if there was some posted here and found yours. Still fresh so I dug in and answered.

I guess a good part of a programmer job is to be able to read and understand others code so better start when it’s easy.

My learning mindset is to learn from courses/books, learn by coding a lot of projects and read other people work so the effort I put benefited me too :slight_smile: .

Anyway. Cheers and good luck in your journey. We are in the beginning of a great path.

1 Like

Thank you for bestowing this blessed tribute on our humble forum. Today is a good day.

2 Likes

Unsung hero of mediocrity. Forever underrated.