Project feedback-Tribute page

1

here is the link of my Tribute page.

I think the photo caption thing is not really working I don’t know why.
Please also give me some feedback. Thank you!!

2

Looks good, overall. Much better than the silly one I put together just to entertain myself. Ha.

My only quibbles are with the border around the opening sentence. It’s distracting. Also, the link at the bottom is too generic. “this website” should be something more specific, e.g., “Steve Jobs’s Official Website” or something.

Good work!

3

Thank you for your comment . It’s really helpful sight! :slight_smile:
that’s my second draft. My first one looks like shit tbh hahha
may I see your website as well ?

4

Hi.

  1. About your HTML
    2018-06-27%2000_22_32-Tribute%20Page-%20second%20draft
    head tag uses for meta information of the page. In this case much better to use header tag and h1 tag within it to name your page.
    2018-06-27%2000_24_20-Tribute%20Page-%20second%20draft
    2018-06-27%2000_24_20-Tribute%20Page-%20second%20draft981×51 3.61 KB

    HTML doesn’t have p1 tag. Only headers have: h1,h2,h3,h4,h5,h6. Read this Html/Elements/h1, h2, h3, h4, h5, and h6 article by W3C.
    2018-06-27%2000_28_52-Tribute%20Page-%20second%20draft
    2018-06-27%2000_28_52-Tribute%20Page-%20second%20draft968×152 8.84 KB

    For each event at your timeline you’ve created new ul:unordered list with only one li:list item. It makes code unreadable and broke semantic of the page because actually you hav one list with many items which chain one theme: Steve Jobs , right? And it’ll harder to style your code. Do this:
    html%20%E2%80%A2%20(static_start)%20-%20Sub
    Your footer HTML5 tag can’t be as a main container for the content. HTML5 has header,main,footer each tag for its content.
    2018-06-27%2000_35_36-Tribute%20Page-%20second%20draft
    header for the information on the top of the page, main = your main content, footer = footer information with additional information like contacts, map etc. Read this W3C: HTML5 Semantic Elements article for extra information.
    And you’ve mistaken the tags on the page. Look at a normal HTML document structure and fix yours.
    html%20%E2%80%A2%20(static_start)%20-%20Sub
    2.About your CSS
    For fonts use responsive units like em,re,% etc.. Because of your fixed font size will be hard to read at 2000px viewport (at the desktop it’ll be too small) and at 320px viewport(at the mobile it’ll be too big). Read W3C: CSS Units.
  2. About your Design
    Dark grey color not the best choise for background. You can make it lighter or make background white and it’ll be look better.
    2018-06-27%2000_49_48-Tribute%20Page-%20second%20draft
    When you hover a cursor on the image it’s getting bigger and a border cover your caption to the image. Anyway if an element of the page hasn’t an action by click or any other this is not the best idea to make it interactive.
    Your timeline is good. But you need to add paddings to the container because of this:
    2018-06-27%2000_53_03-Tribute%20Page-%20second%20draft

And this:

2018-06-27%2000_53_41-Tribute%20Page-%20second%20draft

By the way the paddings of the main container are too big for mobile viewport. Check this:
2018-06-27%2000_54_18-Tribute%20Page-%20second%20draft

If you’ll fix all this stuff you page will be much better as a project with good HTML, CSS and responsive design.

Anyway I see your simple design style and I like it. Just play with colors and grids and you’ll make great websites.

I hope you didn’t get confused about the things I wrote above.

Be happy to answer your questions.

Have a nice code. :wink: