@vanzasetia
Posted
Hi, Hengul Akash! 👋
For those background patterns, I recommend showing them with pseudo-elements and positioning them with absolute positioning. You can see Grace's solution for your reference: Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution
Here are some suggestions for improvements:
- Readable alternative text: Alternative text should not be hyphenated.
- Wrap the text with a meaningful element: For example, use a paragraph element to wrap the text. There should not be text in
<span>
and<div>
alone. <section>
needs a heading: Only use<section>
or<article>
if you make sure that a heading will be inside it. Otherwise, just use a<div>
. Learn more about<section>
and<article>
— WebAIM: HTML Semantics and Accessibility Cheat Sheet- CSS reset: Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell
- Do not use pixel unit for font sizes: Use
rem
orem
instead ofpx
for font sizes. Never usepx
unit. Relative units such asrem
andem
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
I hope this helps. Happy coding! 🙂
Marked as helpful