Hello @francimelink!
Good job on this challenge. Some things I'd change:
- The
<header>should not be included inside the<main>tag. When a <header> is nested in <main> , <article> , or <section> , it just identifies it as the header for that section and isn't a landmark. Adding loads of headers in sub sections or inside landmarks creates a load of unwanted noise for assistive tech users and means you then have to label every section and header. - You shouldn't define
font-sizein your body element and certainly not in pixels. Browsers set the HTML font size to 16px by default. Defining yourbodyelement font-size in pixels will not respect the user's font-size preferences and therefore your web page will not be user-friendly. - You shouldn't use
<button>for "learning" label. Buttons are to be used for performing an in-page action, trigger some action. This is just some text with styles. - Author avatar should contain
altattribute since it isn't decorative image. You shouldn't hide it witharia-hiddenattribute. - Change body to take
min-height: 100vh. 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
Happy coding!
Marked as helpful
1
P
Franci Melink• 280
@francimelink
Posted
@tediko
Thank you very much for your comment and for all the suggestions.
In this example, I used a height of 100vh because it is only one element on the whole page. Otherwise, I would use min-height.
0
