BÌnh• 110
@Binh2
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your first challenge! 🙌
I have 9 suggestions for you:
- The component is too small on larger screen. I think you should base your design on vh (view height) so the component scale correctly for other screen type.
.container { box-shadow: 10px 10px 20px #bbb; }to add shadow- You don't need CSS flexbox because using <img>, <h1>, <p> tags automatically break line.
- You can do some reset CSS styles. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser. 👇
* { margin: 0; padding: 0; box-sizing: border-box; }Because on Chrome, your <h1> tag have a large margin. - You should use
img { width: 80%; }to size your image dynamically depending on parent width. - You should also use the same width for
.container2 { width: 80%; } - For improved accessibility 📈 for your content,
:root { font-size: 16px; }to give a default font-size. And, it is best practice to use rem for your container font-size and other property value. Use em for your elment. Using these units will give the users the ability to scale elements up and down, relative to a set value. - Add alt attribute to <img> tag to improve accessibility for disabled people.
- Replace <div class="container"> with the <main> tag to fix the accessibility issue.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! <3 😊
0
