Please give a feedback about Tribute page

1

I made a Tribute page about Elon Musk. Please give me feedback about it. Here is the link Elon Musk.

2

I think it looks good, but I can’t see the pictures since they are hosted on a website blocked by my work’s usage guidelines. I’m sure I’m not the only one, so you might consider hosting them elsewhere. (I use dropbox)

1 Like
3

Spot on.

If there’s one thing I would suggest, it would be to perhaps insert a linebreak within the caption below the main image so its width is no wider than the main image.

Regardless, it fulfills the project goals IMO. Good job.

1 Like
4

Looks great to me! Good job and keep up the great work!

1 Like
5

Thanks for giving such valuable feedbacks. Glad that you guys like it.

1 Like
6

no problem :grinning: Keep up the good work! By the way, Elon Musk is one of my favorite entrepreneurs !

7

Added

I perhaps should’ve looked at the code, too, which I’ve just done.

For the quote under the main image (which I called caption, above), I think a more semantically-friendly approach would be to use a blockquote element:

<blockquote>TEXT HERE ... </blockquote>

Instead of creating the id=“quote” style, just style the blockquote element within the stylesheet instead.

Page structure

<h1 id="main-title">Elon's contributions that changed the world </h1>

Each page should really have just one H1 element - the page title; there is already one above this so I’d make this a H3 since you already have a H2 beneath the H1 at the top.

I like to picture header elements like folder directories, where H1 is like the C:\ drive, and H2 is like the next major branch that reveals the levels below, within which lie the sub-folders (or headers/topics):

<h1> - C:\
    <h2> - Program Files
        <h3> - Microsoft Office
            <h4> - Access
            <h5> - Word
            <h6> - Excel

H2 represent a major shift in topic-emphasis, therefore, and within a typical article are rarely needed more than once. Multiple H3 elements can usually handle the sub-topics within the article quite well for most needs, with minor sub-sub-topics using H4…H6, if needed.

If you have Microsoft Word, you can see how useful good document structure works for quickly navigating content within lengthy articles by opening the navigation sidebar. Well-structured documents show a similar structure to the directory analogy.

I realise at this point, however, that the course has not covered this, although it is good to know if for no other reason than SEO purposes.

Rule

<hr id="second">

First, I think the id attribute would be better named more descriptively as “second-line”, or similar.

However, I don’t believe it’s necessary in this case; instead, setting the margin-top style on the “work” div instead would make the code more compact… and maybe rename the class=“work” to something like: class=“work-image”, or similar.

Since you’ve applied margin-bottom of 20px on the “second” class, instead just apply margin-top: -20px to the work class.

ALT

Close your eyes and imagine that your computer is reading the page out aloud. Would “zip2” or “blaster” etc, make sense without seeing the image? ALT is for providing a brief, ALTernative description of the image’s content.

OK, enough… I hope this is useful.