My Tribute Page: How can it get better?

Code Feedback
1

Hey guys!
First time coding here. The page passes all tests and looks pretty basic. How can I make the code better? There are probably lots of mistakes/unnecessary stuff. Would love to read your opinions.

https://codepen.io/lolib/pen/wvJdvXW

2 Likes
2

Looks good. :+1:
Guess you don’t have to change anything except maybe the background color.

1 Like
3

Hi @lolib !

Welcome to the forum!

I think your page looks good.

Just a few things.

I would review the lesson on giving links meaningful text.
Wikipedia page is not that accessible .

In codepen, you do not need to include the html and head tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Tribute Page: Kobe Bryant</title>
  </head>

That is already built into codepen for you.

You need to remove these <style> tags
Remember that <style> tags are html tags and should not be in the css section.

You have some repetition in your css.

For example, you keep using these css properties in your css.

  font-family: mongolian-baiti;
   font-weight: normal;
   text-align: center;

Instead of applying those same properties to the individual ids, I would suggest creating a class and apply those styles there.
It will cut down on repetition.

.bio-text {
  font-family: mongolian-baiti;
   font-weight: normal;
   text-align: center;
}

Hope that helps!

1 Like
4

Thanks, I choose light gray because I thought a plain white background made it harder to read the time line.

5

Thank you very much! That’s great feedback.

I thought “Wikipedia page” would be accessible enough because the tribute page I saw was “Wikipedia entry”.

Initially I coded without the style tags but for some reason thought that it was necessary in CSS.

And regarding the repetition, I just wanted to make sure all text would keep the same pattern, but creating a single class and applying it makes more sense.

Once again, thank you! :slight_smile:

6

If you think about, there are thousands of wikipedia pages.
Wikipedia entry or page isn’t that helpful.

It would be better if it said something like “Kobe Bryant’s biography” or “Kobe Bryant’s wikipedia page”. :grinning:

1 Like
7

Got it. I’m adding the changes.

8

Welcome to the forums @lolib. 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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like
9

Thank you! I’ll look into it.

10

I’ve just learned line-height :smiley:
I used it to space the text within the ul tag because margin and padding are not meant for this (?). I think it looks good now.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.