Hello @zacc-anyona!
Good job on this challenge! There is a few things that you can improve in your code and learn a thing or two alongside!
- You shouldn't define
font-size
in yourbody
element in pixels. You don't have to do it at all. By default, browsers set the HTML font size to 16px. A lot of people change their base text size in browser to make it more accessible for them. Defining your body element font-size in pixels will not respect the user's font-size preferences. Remove font-size from body to use default browser size. - Learn about landmarks because you're using them wrong. Landmarks are semantic elements that can be used to define different parts of a web page to make your website accessible to users using assistive technologies. Landmakrs help screen reader users navigate your website. The
<main>
element represents the dominant content of a document. That's why you need to wrap your.content
div with<main>
element. If you want your.content
element can be an<article>
but it isn't necessary. Change yourmain
element within.content
todiv
.<header>
is element that represents a container for introductory content or a set of navigational links. In your example either of these conditions are met so change<header>
to normal<div>
element. - Read about
figure
element since you misuse it within yourheader
element. The<figure>
element represents self-contained content, and<figure-caption>
provides the accessible description to that element. Replace it withdiv
element. As for using this figure for the avatar, I think it is a more reasonable choice, but still don't know if I'd use it for that. - Instead of setting
width: 30%
on your.content
component, you could usemax-width
property to set the maximum width of an element.