Request for feedback on tribute page

Hi, I am a very new to web development and I am trying to improve my skills. I would really appreciate some feedback. If any of you could point out all of the flaws with the web page that I have created that would be great. The web page can be found at: https://codepen.io/DaltonGray/project/editor/XJoQNJ

Thanks for your help :smile:

1 Like

Hi Dalton,
You may need include google font to you project please see more details in link below


1 Like

why would this help?

Just a suggestion If you need to change your font style .

@Dalton I love that you’re using the project section of CodePen! I didn’t know that was an option, so it’s great to see that it is and that you’re using it. I feel that this simulates a more realistic web development experience. Thanks for sharing!

You have this code currently:

<!DOCTYPE html>

<html lang="en">

<div class="center">
<div class="wrapper">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles/index.processed.css">
  <h1>Jim Raynor</h1>
  <h2 class="center">The man who saved <div style="text-decoration: line-through">a billion</div> all lives</h2>

</head>

<body>

Even though it works fine, I think it’s best practice to put your center and wrapper divs in the body element, like this:

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles/index.processed.css">
  <h1>Jim Raynor</h1>
  <h2 class="center">The man who saved <div style="text-decoration: line-through">a billion</div> all lives</h2>
</head>

<body>
  <div class="center">
  <div class="wrapper">

This is discussed a little in the FCC beta curriculum (1 | 2).

Your image width is fixed so it looks strange on some screen widths. You may want to use something like width: 100% to fix it. This makes the image relatively small in mobile views, but at least the whole image will be visible and you can learn more about responsive images as you progress.

I notice you don’t have closing list item tags </li> for your list items. Those are important.

You have this relatively large <p> element:

<p>
    Raynor is simple, honest, direct and passionate. He does what is right, even if it's the difficult choice. He won't go looking for trouble, but he won't run if it comes looking for him.

Raynor developed a very close relationship with Tassadar, Zeratul and Fenix. His close relationship allow many protoss to consider him like a brother. From there he was one of the few terrans to gain widespread trust and respect amongst the protoss, to the point of some considering him a hero as well.

Raynor's musical preferences lie in country rock.As a teen, he wasn't fond of classical music. He doesn't hate easily, but when he does so, it's intense.

Tactical Abilities
"Keep your intervals wide, your eyes open and your asses covered. Let's move!"
- Jim Raynor raiding Mar Sara
    
Raynor developed good leadership and excellent tactical acumen through practical experience; a lack of formal training allowed him to avoid the preconceived notions of "accepted" knowledge. Rather than plan in depth, Raynor is an excellent improviser able to achieve victory by using what is on hand.Zeratul recognized Raynor to be highly resourceful,and even Arcturus Mengsk considered Raynor a grave threat.He has a casual confidence in command that inspires others to follow him.     
   </p>

Even though there are line breaks between paragraphs in your code, this all gets scrunched together into one paragraph when it’s viewed in a browser. To fix this, you’ll want to give each paragraph it’s own <p></p> tags, like this:

<p>Raynor is simple, honest, direct and passionate. He does what is right, even if it's the difficult choice. He won't go looking for trouble, but he won't run if it comes looking for him.</p>

<p>Raynor developed a very close relationship with Tassadar, Zeratul and Fenix. His close relationship allow many protoss to consider him like a brother. From there he was one of the few terrans to gain widespread trust and respect amongst the protoss, to the point of some considering him a hero as well.</p>

etc...

Why did you use Sass .scss instead of native CSS .css? I don’t see anything in your .scss that suggests it would benefit from using Sass. I’m not sure if using Sass is a default setting for CodePen projects or not because I don’t use CodePen. Maybe someone else can help with that.

Well done here! Keep working hard. :sunny:

1 Like

Thanks a lot for taking the time to go through this for me I really appreciate it and I think .scss is default since I don’t remember typing that :smiley: