Design comparison
Solution retrospective
I feel good about achieving the challenge in less time by applying my knowledge of HTML and CSS.
What challenges did you encounter, and how did you overcome them?I encountered a challenge in this project when I needed to adjust the image using SVG code and also enable the border-radius property. I was able to solve this issue by using a div container and applying the necessary properties to it.
What specific areas of your project would you like help with?I would like to know if the webpage is using semantic HTML, and if there are alternative CSS design solutions I can explore further.
Community feedback
- @dquinn089Posted 4 months ago
Your project looks great! Here are a couple of suggestions to improve your code and enhance its functionality.
Improve accessibility by adding
alt
text:<!-- Add meaningful alt text to the image --> <img src="./assets/images/image-avatar.webp" alt="Author Greg Hooper">
Consider using CSS variables for spacing to make it easier to manage and adjust padding, margin, and gap throughout your project:
:root { --color-main: #f4d04e; --color-title: #121212; --color-text: #6b6b6b; --spacing-small: 5px; --spacing-medium: 16px; --spacing-large: 20px; }
You can use many types of CSS variables, such as colors, spacing, font sizes, and more, to make your code more maintainable and flexible. Hope this helps, Happy Coding!
Marked as helpful0@LuRamirezRPosted 4 months ago@dquinn089 thanks for your feedback, I'll make sure to remember this for my next project.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord