Steve Jobs Tribute Page - Would Appreciate some feedback

Code Feedback
1

Hi there,

I have finally got round to completing the Tribute Page Project! This is my first webpage build. Would love some feedback to see what people think and to understand where I need to improve. Thanks for your time :wink:

Steve Jobs Tribute Page by @roryjgorman:

1 Like
2

I am new as well so just two things I am sure of from me.

1.Wall made of < br> seems wrong. The same effect will be achieved with margin, for example:

#applelogo{
margin-bottom:500px;}

The same applies to all multiple < br>. This way is much cleaner and you separate html from design(css).

  1. p{width:1000px} makes it hard to watch on smaller screens. Check it out by making screen small. I would change it to width:90% or max-width:1000px, not sure which is better.
1 Like
3

Thank you for the feedback!

I did think that I used a tad too many < br>'s. Just couldn’t think of a solution at the time, noted…

4

One of the things about creating a responsive webpage is that the page is as easily viewed on a small screen as it is on a larger screen. You’ve made parts of your page responsive but not others. To see what I mean, resize your browser while viewing your tribute page and then load the sample tribute page and resize it.

1 Like
5

How would I go about making all of it responsive?

6

What have you tried?

Did you go back and reread the lessons on ‘Responsive Web Design Principles’? When you were working through did you just put in the correct answer? Or did you try something different to see what the effect was? That’s a good way to see changes as you work through the lessons. Give the correct answer to move on but try something different and look at the web page to see what the effect is. Resize if you need to.

Did you look at the sample tribute page to see how that was working? Resizing your browser, looking at, and understanding the HTML and CSS markup.

One thing I will mention is that you cannot make up your own HTML elements. I noticed in one part of your code you had a <p1> element. There’s no such thing. While that will not fix your issue, it something you should be aware of and something you should correct.

A hint to get rid of some of the plethora of <br> elements. In your section about young Steve you have one huge paragraph (<p>) with two <br> elements. Instead, when you finished the first paragraph, end it (</p>) then start the next paragraph <p> and when finished, end it </p>. You’ll get the break by doing that.

I understand my answer may be frustrating but each one of these projects builds on the previous one. So what you learn on this one you’ll use in the next and that will add some additional lessons. You’ll have to understand each part to keep growing.

1 Like
7

Ok I’ll do my best to correct these mistakes and I’ll keep them in mind moving forward.

Appreciate the effort of giving me feedback, thank you!

8

I’m pretty sure I’ve solved the issues with my page now…?

9

It looks better. I see now what you were doing when you had all those break (<br>)
elements. It was to keep the individual paragraphs in one section.
I’ll call out just the young Steve one again. So you styled the paragragh element and now you have three paragraphs but they’re also broken up into three sections. Instead, why don’t you try something like;
<div id=“section-info”>
<p> Some text…</p>
<p> Some more text…</p>
<p> Some additional text…</p>
</div>
Then you can style the section instead of the individual paragraphs and it will all be together in the big white box instead of three separate ones.

Give it a try and see if you like it better and if that’s what you had in mind.

1 Like
10

I tried it out and it didn’t work, I’m not sure what I’ve done wrong? Maybe you could take a look for me and let me know, thanks

11

You’re not using the correct quotes around “section-info”
Compare the quotes you have around your alt text for Young Steve versus the quotes you have around section-info. Fix the quotes and you’ll see what you expect to see.

1 Like
12

I think it was the copy paste job, just couldn’t notice that error earlier. Think I’m all done with the page now! Thanks for all the help :wink: Now onto the next challenge…

13

Great job. Here are a couple of thoughts.

Get rid of the white background boxes behind all of your text and making the text white. I think that would make it more fluid and not so blocky looking.

Also, under “Final Years”, your image is not showing, and you see a broken link.

With your video at the bottom, I would change the size so that it is a square the same size as your pictures, instead of a small rectangle.

14

My suggestion is because I’m sort of a grammar Nazi. In your last paragraph on the page, I would change it from “them last moments” to “his last moments.” Otherwise, I think it looks really nice.

1 Like
15

I really dig the background gradient, too bad it’s an image and not a CSS gradient.

  1. Your HTML is a bit malformed, see if you can’t fix it.

  2. Do not use the obsolete center element for centering, use CSS.

  3. You are using a font (eurostile) that is not linked to and most likely very few have on their system. You also do not provide a fallback font.

Try this font (Jura), it looks a bit like the eurostile font.

<link href="https://fonts.googleapis.com/css?family=Jura:400,500" rel="stylesheet">
  1. I would get rid of the white background on the text and up the font size.
/* For the font I linked to */
p {
  font-size: 24px;
  font-weight: 500;
}
  1. For the h3 I would give the background color a bit of transparency
h3 {
  background-color: rgba(0, 0, 0, 0.7);
}
  1. Make the video responsive.
16

Thanks :slight_smile: