Looking for feedback on my tribute page project

Code Feedback
1

Hello all,

I have just finished my tribute page and I am feeling ok about it. I know that there is a lot that could probably improved, but I am at a point where I don’t really know how it could be adjusted. I am still not completely sure I understand media queries and responsive elements, but it passed the tests so I feel as though I must have got it somewhat correct.

Any and all feedback is appreciated. I am looking to improve my skills and get better, so if there are glaring issues, please let me know.

Ada Lovelace tribute page

Thanks in advance.

Anton

2

Hi Anton,
looks ok! keep going with the projects.
You could try to adjust the color of the links. For example the one in the figcaption could have a lighter color as right now is very hard to read! I’d try to make the links something like white?

Please can you spend 1min looking at my Tribute Page?

Live Demo

GitHub

Many thanks and happy coding!

Fabio

3

Thanks Fabio. That’s a good pointer for me to take forward.

I will PM you with my thoughts about your tribute page.

1 Like
4

Hi Anton,

Many thanks for your feedback. You are totally right, the images are hard to see when the screen size is just above the 320px (small device). I should probably fix that.
I look forward to seeing you next projects!
Happy coding!

5

Hello @Blutakduck,

HTML

  • error

Saw “<” when expecting an attribute name. Probable cause: Missing “>” immediately before.

From line 8 to line 8:

    <figcaption id="img-caption"><By <a href="https://en.wikipedia.org/wiki/en:Antoine_Claudet" class="extiw" title="w:en:Antoine Claudet">Antoine Claudet</a> - <a href="//commons.wikimedia.org/wiki/File:Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850.jpg" title="Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg">Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg</a> </figcaption>
  • info

Attribute “<a” is not serializable as XML 1.0.

From line 8 to line 8:

    <figcaption id="img-caption"><By <a href="https://en.wikipedia.org/wiki/en:Antoine_Claudet" class="extiw" title="w:en:Antoine Claudet">Antoine Claudet</a> - <a href="//commons.wikimedia.org/wiki/File:Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850.jpg" title="Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg">Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg</a> </figcaption>
  • error

Element “by” not allowed as child of element “figcaption” in this context. (Suppressing further errors from this subtree.)

From line 8 to line 8:

    <figcaption id="img-caption"><By <a href="https://en.wikipedia.org/wiki/en:Antoine_Claudet" class="extiw" title="w:en:Antoine Claudet">Antoine Claudet</a> - <a href="//commons.wikimedia.org/wiki/File:Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850.jpg" title="Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg">Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg</a> </figcaption>
  • error

Stray end tag “a”.

From line 8 to line 8:

    <figcaption id="img-caption"><By <a href="https://en.wikipedia.org/wiki/en:Antoine_Claudet" class="extiw" title="w:en:Antoine Claudet">Antoine Claudet</a> - <a href="//commons.wikimedia.org/wiki/File:Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850.jpg" title="Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg">Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg</a> </figcaption>
  • error

End tag “figcaption” seen, but there were open elements.

From line 8 to line 8:

    <figcaption id="img-caption"><By <a href="https://en.wikipedia.org/wiki/en:Antoine_Claudet" class="extiw" title="w:en:Antoine Claudet">Antoine Claudet</a> - <a href="//commons.wikimedia.org/wiki/File:Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850.jpg" title="Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg">Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg</a> </figcaption>
  • error

Unclosed element “by”.

From line 8 to line 8:

    <figcaption id="img-caption"><By <a href="https://en.wikipedia.org/wiki/en:Antoine_Claudet" class="extiw" title="w:en:Antoine Claudet">Antoine Claudet</a> - <a href="//commons.wikimedia.org/wiki/File:Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850.jpg" title="Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg">Ada Byron daguerreotype by Antoine Claudet 1843 or 1850.jpg</a> </figcaption>

Note:
These errors are product of <by (a typo)

  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

From line 12 to line 12:

  <section id="tribute-info">
  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

From line 15 to line 15:

    <section id="facts">
  • info

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

From line 27 to line 27:

<section id="further">

MDN documentation:
<section>: The Generic Section element - HTML: HyperText Markup Language | MDN

Usage notes

Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element.

Example:

 <section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

cheers and happy codding :slight_smile:

Note:
Tools used:
w3c markdown checker web service

Video:

6

Looks good so far! I agree with iClusterDev, I believe the links could be a better color, the dark blue is a bit hard to read and doesn’t fit very well with dark red, as well as being hard to see once clicked and purple. Finding a fourth color for links that matches with the existing colors as well as keeping in mind it is meant to be viewed along with the text (a lighter color that goes with the light gray) will make it more readable.

While I think the font you have is fine, I would experiment with different types and see if it matches the style you are looking for. Seeing examples of where this kind of font is used may help you make that judgement. I’d also increase the spacing of the text a bit, dark backgrounds make things feel crowded.

Otherwise, I think everything else was addressed above, this is just some advice on the aesthetics of the page.

1 Like