@dDevAhmed
@abubakar-sadiq001
Submitted
What are you most proud of, and what would you do differently next time?
I built the solution without getting the colors, I generated colors with the color palette and I also finished it in under 150 mins
What challenges did you encounter, and how did you overcome them?
Looking for matching colors consumes a lot of my time. but with the help of the CSS color palette, I get the matching colors
@dDevAhmed
Posted
You did a great job, Keep it up 👍
Marked as helpful
@lucasgcosta1
Submitted
What are you most proud of, and what would you do differently next time?
I managed to do it in a short time,
What challenges did you encounter, and how did you overcome them?
I had a little trouble centering the buttons at first.
What specific areas of your project would you like help with?
nothing, I think it's almost perfect
@dDevAhmed
Posted
Hello @lucasgcosta1,
Great job on the social links profile project! The design is visually appealing, and your use of Flexbox and semantic HTML is excellent. The card is responsive, adjusting well across different screen sizes. You've done a fantastic job, and your project is a strong example of effective front-end development. Keep up the great work!
@yayradesouza
Submitted
What are you most proud of, and what would you do differently next time?
I was able to use CSS effectively to center the card and improve the design fidelity
What challenges did you encounter, and how did you overcome them?
I had a challenge with loading the Figtree font but I was able to refer to google and figure it out
What specific areas of your project would you like help with?
I would like to improve my execution speed. What guidance can be shared in this regard?
@dDevAhmed
Posted
Great job on the 'blog preview card' project, @Yayradesouza! Your design is polished and well-executed. To further enhance your work and increase execution speed, optimize your workflow by starting with a clear plan, practising regularly to improve design skills, and utilizing shortcuts to streamline tasks. Break down tasks into manageable chunks and remember to take breaks to avoid burnout. I'm looking forward to collaborating on future projects and seeing your continued growth!
Marked as helpful
@DwebAgency2
Submitted
What are you most proud of, and what would you do differently next time?
I learned how to create a qr code scan using html and css only, I am proud of the fact that I finished this project on my own, without using YouTube to code alone.
next time I will try to use bootstrap to make my coding much faster, I was actually stock at some point during my css coding but i believe tailwind will be better but i have not full knowledge about it
What challenges did you encounter, and how did you overcome them?
-1 The challenge of centering my card at the middle of the page *I overcame this challenge by first applying a display flex of the parent *
-2 The challenge of setting the different screen sizes. *I overcame this challenge by using some screen sizes i had already written in my notebook *
What specific areas of your project would you like help with?
I will love to learn more about using Css, i find it hard knowing how to target each html classes and also how to target the children of this classes
@dDevAhmed
Posted
Hello DwebAgency2,
First of all, great job on completing the QR Code Component challenge! I can see the effort you've put into this project. Here are a few points of feedback that might help you improve your project further:
1. QR Card Height:
Issue: The QR card is taller than the screen height, which causes vertical scrolling and disrupts the intended design.
Suggestion: To ensure the QR card fits within the viewport height, consider setting the body height to 100vh. This will make the body take the full height of the viewport, preventing the card from exceeding the screen height.
body { height: 100vh; }
2. QR Code Image Margins:
Issue: The QR code image has unequal margins on the x-axis and y-axis, making it appear wider horizontally and disrupting the square shape of the QR code.
Suggestion: To maintain a consistent margin and ensure the QR code image remains square, use equal padding or margin values. Here’s an example of how you can adjust the margins or padding:
.qr-code img { margin: 20px; /* Alternatively, use padding on the container */ padding: 20px; } Ensure the container or the image itself maintains equal spacing on all sides to preserve the square aspect ratio.
3. Font-Family Fallback:
Issue: The absence of a font-family fallback for the body font-family is not a good practice. If the primary font fails to load, the text might display in an unintended font, affecting the overall design.
Suggestion: Always include fallback fonts to ensure your design remains consistent across different browsers and devices. Here’s an example:
body { font-family: 'PrimaryFont', 'FallbackFont', sans-serif; } This ensures that if the primary font doesn’t load, the browser will fall back to a secondary font or a generic sans-serif font.
Overall, you've made great progress on this challenge, and addressing these points will enhance the visual consistency and reliability of your project. Keep up the good work, and don’t hesitate to ask for more feedback as you continue to improve your skills!
Best regards, @dDevAhmed