@Stroudy
Posted
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
-
Here you could use
margin-inline: 30px
does the same as thismargin-left: 30px; margin-right: 30px;
, Inline means left and right. -
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
Developers should avoid using pixels (
px
) because they are a fixed size and don't scale well on different devices. Instead, userem
orem
, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning. -
For future project, You could downloading and host your own fonts using
@font-face
improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful
@Stroudy thank You very much for this informations I can learn a lot from Your comment 😀
@Stroudy
Posted
Hey @miedzygalaktycznygit, You got this, I'm glad you found this information useful 💪