@Kelsalamony
Latest solutions
Latest comments
- @dannyswagg
Hello, great job on this project just a few adjustments to make. Add a little bit more padding to the top and bottom of your buttons. This will make the button links look more spaced out.
Marked as helpful - @pantha704@dannyswagg
Hello, great job on this project. Please take note that your image is broken, maybe the path to the file isn't right.
- @burningbeattleWhat are you most proud of, and what would you do differently next time?
Successfully replicating the design specifications from the provided mockup, ensuring that the QR code card looks exactly as intended. Implementing a responsive layout so the card looks good on various screen sizes, maintaining usability and visual appeal. I’d focus more on optimizing the performance, perhaps by reducing image sizes or minimizing the number of reflows and repaints in the browser. Incorporating user feedback into the design process, perhaps by conducting usability tests or gathering input from real users to improve the card’s functionality and design.
What challenges did you encounter, and how did you overcome them?Translating the design specifications into code accurately, especially with precise spacing, typography, and colors. Ensuring that the card looks good on different screen sizes and orientations. Making sure the component works consistently across different browsers. I cross-referenced the design with browser developer tools to ensure accuracy and made iterative adjustments. I tested the card on various devices and screen sizes to fine-tune the responsive behavior. I used browser developer tools to test the card’s appearance.
What specific areas of your project would you like help with?Adding animations or interactive elements that enhance user experience. Suggestions for CSS animations or JavaScript libraries to create smooth and engaging effects. Identifying and fixing bugs or issues in the component. Techniques for debugging in different browsers and using testing tools.
@dannyswaggYour HTML and CSS code for the QR code component looks solid, but there are a few suggestions for improvement:
HTML Suggestions: Semantic HTML:
Consider using semantic HTML elements where possible. For instance, you could use <section> instead of <div class="card-head"> and <div class="card-body"> for better clarity and accessibility. Image alt Text:
Make the alt text of the image more descriptive. Instead of "qr-code", you might use something like "QR code for Frontend Mentor website" to give users with screen readers more context. Accessibility:
Add lang="en" to the <html> tag if it's not already present in your setup for better accessibility.
CSS Suggestions: Consistency:
The padding and margin values might be improved for consistency. For example, the padding on .card and p might be standardized. Unit Consistency:
Consider using rem or em units consistently for font sizes and spacing to maintain scalability and accessibility. Class Naming:
Make sure class names are descriptive and avoid using generic names like .image. You might use .card-image for clarity. Box Shadow:
Adding a subtle box-shadow to the .card might help it stand out more against the background.
These suggestions aim to enhance the readability, accessibility, and visual appeal of your component. Adjustments are meant to be helpful and can be tailored to fit your specific design and functionality needs.
- @wisecrac@dannyswagg
Hello WiseConcepts, great job on completing this project. For better user experience try setting the footer details to be at the bottom of the page. Great Job!!!
- @noreenfatima775What are you most proud of, and what would you do differently next time?
I done this with modular aproach.it seem good. Next time I prefer to use it.
What challenges did you encounter, and how did you overcome them?I face challenge to fulfil this design. But it done with setting container width equal to image.
What specific areas of your project would you like help with?The concrete responsiveness.
Use of media queries to design different devices responsive designs.
#accessibility#cube-css#materialize-css#pure-css#web-components@dannyswaggHello, great job on completing the QR code component challenge. just a minor detail to help your design look much more better, the background colour doesn't fill the entire page you might consider setting the property and value of the background to your <body> tag.
- @BreinerJT@dannyswagg
Hello, nice job. There's no feedback message if the email is in the right format only when its wrong you might want to add that as it is a user experience function.
Marked as helpful
