@osmanbay90
Posted
Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:
Centering the Card: To center the card horizontally and vertically, you need to make sure the parent container (<div class="container">)
occupies the full viewport height (100vh)
and uses flexbox
to center its contents. Your current implementation seems correct, but ensure that there are no conflicting styles or elements affecting the centering.
Responsive Design: Your media query
for smaller screens is a good start, but you may need additional adjustments for various screen sizes. Consider testing your design on different devices and screen resolutions to ensure it looks good across a range of devices.
CSS Best Practices:
Avoid inline styles: You've defined some styles inline within the HTML file (e.g., .attribution)
. It's generally better to keep all styles in a separate CSS file for better organization and maintainability.
Group related styles: Organize your CSS rules logically to make it easier to understand and maintain.
Use meaningful class names: Class
names like .img
and .text
are quite generic and may lead to confusion later on. Try to use more descriptive class names that convey the purpose of the elements they're applied to.
HTML Structure: Your HTML structure looks fine, but consider adding semantic HTML elements where appropriate (e.g., <header>
, <main>
, <footer>
) to improve accessibility and SEO.
Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀
Marked as helpful