Nice job! 👏🏻 This is a really good start.
Here are some suggestions: Simplify your HTML. The simpler your markup, the easier your code will be to maintain. Keep it simple. All you need is this. 👇🏻
<body>
<main class="card">
<img/>
<h1>...</h1>
<p>...</p>
</main>
</body>
- You don’t need a
<picture> element in this case. Use that when you need to serve different image resolutions at different screen sizes, or when you need different images for artistic purposes.
- Every webpage needs a
<main> landmark. With something this simple, your whole card can be the main , but in a larger site you'd have many many elements inside and the main would contain everything except for a header and footer . You can read up on semantic HTML on web.dev.
Avoid using ID's for CSS selectors. They have a very high specificity and it's going to cause more problems than it is worth. Use classes to avoid “specificity wars”.
NEVER use px for fonts. Use rem or another responsive unit. You can read more on Grace's blog.
Centering your card. There are some pretty simple ways of centering things in modern CSS. Here is the snippet I tend to use:
body {
display: grid;
place-content: center;
min-block-size: 100vh;
}
Some will prefer using flexbox, though it is technically more code:
body {
display: flex;
justify-content: center;
align-items: center;
min-block-size: 100vh;
}
Some nitpicky things:
- The background color is off.
- The heading font is not the right size.
- You have some typo’s:
container in your CSS and skills in your markup.
Keep it up. You're off to a great start. :)
