Design comparison
Solution retrospective
i proud to how i can did it and solve this problems and i want to solve more challenge harder than this
What challenges did you encounter, and how did you overcome them?how i show the share and response it in differnt device
What specific areas of your project would you like help with?Responsive Design: Ensuring that your template looks good and functions well on different devices and screen sizes. CSS Styling: Assistance with styling elements using CSS, including layout design, color schemes, typography, and responsive design techniques. HTML Structure: Help with organizing and structuring your HTML code for better readability, accessibility, and SEO optimization. JavaScript Functionality: Adding interactivity and dynamic behavior to your template using JavaScript, such as creating animations, form validation, implementing navigation menus, and handling user interactions. Accessibility: Ensuring that your template is accessible to all users, including those with disabilities, by following best practices for semantic HTML, ARIA roles, and keyboard navigation. Performance Optimization: Optimizing your template for fast loading times and better performance by minifying CSS and JavaScript files, optimizing images, and implementing lazy loading techniques.
Community feedback
- @mkborisPosted 7 months ago
Hi MidoGhareeb great job on completing this challenge, here are some suggestions that might be of interest to you.
- Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to.
- All content should be wrapped within landmarks. Wrap a
main
tag around your container. - Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
- Media queries should be defined in rem or em not px. Also your current media query of
max-width: 450px
is making part of the card to be cut out from the view, it should be increased to aboutmax-width: 48rem
768px. I will strongly recommend you consider building using mobile first workflow. Check out this resource for Responsive Design. - It's best practice linking Google fonts directly in the HTML
head
section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times. - Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
Hope this helps.
Marked as helpful0@MidoGhareebPosted 6 months agothank you very much ,you have helped me a lot@mkboris
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