Finally did it....Tribute page!

Hey yall!

I did the courses a while back…life happened and then I tried doing the project finally last week a realized I forgot everything! SOOO this week I re learned it and tackled the project.

It’s not the prettiest crayon in the tool box, but its my crayon! haha.

I tried to make it look nicer with some box shadows around the title, but I couldn’t get the feel right.

I went Tenacious D cause that’s all I could think about when I read the Tribute.

Let me know thoughts, suggestions, learnings!

Thanks in advance!

https://codepen.io/Carliess/pen/poeeZvN

Hey,

Welcome back.

I’ve checked out your Tribute Page and think that it looks really neat, simple, but effective.

If you want, for further eye-candy, you could use little png images instead of bulletpoints for the li(list items), taken from the movie, like guitars, little-devils and so on. But it’s just an idea.

Great work overall.

Cheers Arky.

Hey,

I’m in the same boat. Just getting back now. Great job on the tribute page. Finessing the space around the image and the title might be good but well done :slight_smile:

Thanks guys! I appreciate the tips and kinds words!

Welcome to the forums @Carliess. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
    • Mentioning because there are elements missing. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There is an HTML syntax/coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • In addition to using it incorrectly, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • You may have noticed that even though the dates in the timeline have been coded to be bold they do not display as such. This is because the font you chose only has one style (weight). Browsers will try to accommodate but will not be able to.
    • If you decide on another font, look for one that has more than one style. You’ll want 400 (regular weight) and 700 (bold weight).

Great tips @Roma !

Question, would <header> and <head> not be the same thing?

If I’m understanding what you’re saying and what i’m reading, it says <head> is for meta data, so like when I imported the fonts etc… and <header> is more like the top of page, above a navigation bar. If that’s the case, super enlightening bud!

Thanks for the Clarifications! Thats great!

oh I cleaned up those <br> too

No, they are not the same. They are two very different HTML tags with two very different purposes.
And yes, what you’ve said in your second paragraph regarding how they are used is correct.

So since codepen provides the boilerplate for you, you do not need to declare the doctype or have the html, head or body elements.
You can see how codepen does it for you.
Click the “export” button then “export.zip” and “download.zip”. When you expand the zip file open the “dist” folder and examine the index.html file. Notice there are two doctype declarations, etc. This is because codepen adds them for you but since you had them in the HTML editor they’re added again. It’s not very pretty.
It’s not a big deal/showstopper at this point but is something you should be aware of. Pointing it out because you seemed interested.
If at some point in time you want to take your code from codepen and put it onto GitHub, export would be the easiest way since all boilerplate tags are added…including the link to the stylesheet.

Looks good.

  1. I would just use the years as the bullet points for the list (i.e. remove the actual bullet points from the list).

  2. I’d suggest lowering the line-height on the ul and giving the li some margin-bottom.

Good job, keep it up.

Gotcha! I see that now, as well as the <head> and <body> elements too.

:+1: I’ll mess around with it and see whats up!

I’ve edited your posts. Notice the code is missing? When entering a line of code surround it with a single backtick so it shows. Or use the preformatted text tool in the editor. The following explains how to enter code blocks.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like