Tribute Page — Dieter Rams

Tribute Page — Dieter Rams
0

#1

Hey there, i’ve made tribute page for my personal hero — Dieter Rams.
Any advice/feedback and suggestions will be greatly appreciated!

https://hinthunter.github.io/TributePage


#2

Really nice page.Simple, responsive, easy to read. I would only get rid of the svg in the nav thats pointing nowhere.


#3

Really nice jobe on your tribute project. It has a clean style. It looks nice and is mobily responsive other than the works biography which go through the image below it at small screen sizes.

Good job being unique, and an overall great project. :smile:


#4

Thanks :wink: svg was going to be a little nav there, but decided to not overcomplicate things.


#5

Biography overlay was made on purpose :wink: u know… designers :smiley:


#6

I actually thought It might have been on purpose, because It didn’t look bad. I didn’t check the code to see. So great job :wink:


#7

Hello @hinthunter,

HTML

  • error

The “main” element must not appear as a descendant of the “article” element.

From line 25 to line 25:

    <main>

Documentation:
https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.


  • error

Bad value “” for attribute “srcset” on element “img”: Must contain one or more image candidate strings.

From line 29 to line 29:

          <img src="./assets/hero.jpg" id="image" alt="Portrait Of Dieter Rams" srcset="">

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

srcset
A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use. Each string is composed of:

  1. a URL to an image,

  2. optionally, whitespace followed by one of:

    • A width descriptor, or a positive integer directly followed by ‘w’. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.

    • A pixel density descriptor, which is a positive floating point number directly followed by ‘x’.

If no descriptor is specified, the source is assigned the default descriptor: 1x.

It is incorrect to mix width descriptors and pixel density descriptors in the same srcset attribute. Duplicate descriptors (for instance, two sources in the same srcset which are both described with ‘2x’) are also invalid.


  • info

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

From line 26 to line 26:

in>
      <section class="hero">
     
  • error

Bad value “” for attribute “srcset” on element “img”: Must contain one or more image candidate strings.

From line 47 to line 47:

        <img src="assets/bio.jpg" alt="" srcset="">

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

srcset
A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use. Each string is composed of:

  1. a URL to an image,

  2. optionally, whitespace followed by one of:

    • A width descriptor, or a positive integer directly followed by ‘w’. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.

    • A pixel density descriptor, which is a positive floating point number directly followed by ‘x’.

If no descriptor is specified, the source is assigned the default descriptor: 1x.

It is incorrect to mix width descriptors and pixel density descriptors in the same srcset attribute. Duplicate descriptors (for instance, two sources in the same srcset which are both described with ‘2x’) are also invalid.


  • info

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

From line 44 to line 44:

  <section class="biography">

cheers and happy codding :slight_smile:
Note:
Tools used:
[w3c markdown checker web service] (https://github.com/validator/validator/wiki/Service-»-Input-»-POST-body)


#8

Actually forgot to use validator…
Thanks for feedback, will fix all those troubles tomorrow!