@MatPawluk
@emeraldknytt
Submitted
What are you most proud of, and what would you do differently next time?
I am quite content with how close my solution is to the design and if I had to do something differently, then it would be making sure that properties that are the same across different tags are given their own tags i.e
h1, p, .card {
color: blue;
}
@MatPawluk
Posted
Great job! 😊 Here are a few suggestions to improve your code:
The settings width: auto and height: 960px are generally correct, but it's worth considering responsiveness. You might want to use relative units (e.g., vh for height) or media queries to adjust the height for different screen sizes.
The styling of the element with an id in CSS (#description) is valid, but it's worth noting that id selectors have higher specificity than classes. This means that if you need to override the style for this element in the future, styling with id may be harder to modify. Instead of using id, consider using a class.
The HTML structure is correct and well-organized. However, it’s advisable to add alt attributes to all images to enhance accessibility.
Marked as helpful
@muriloviscondi
Submitted
@MatPawluk
Posted
Nice! <3
@OlamideLanre
Submitted
What are you most proud of, and what would you do differently next time?
How hard I tried to figure out the desktop view without using ai lol
What challenges did you encounter, and how did you overcome them?
The desktop view was a challenge for me, I was on the right track with my html structure but my inadeqaute knowledge on flex and grid held me back. A friend helped me over come by giving a simple explanation.
What specific areas of your project would you like help with?
Well I left the mobile view for ipad mini and ipad air tablet, I know my responsiveness is not as strong yet, especially for the tablet cause I belive it's meant to take up most of the space of a screen but on the ipad pro it leaves alot of space at the bottom and the contents are just in their positions(you can check this out on the screens provided by your browser and give me feedback pls). Any tips on how to fix this?
@MatPawluk
Posted
Nice!
@MesrouaDjamel
Submitted
@MatPawluk
Posted
Nice!
@JiteshUbale01
Submitted
What specific areas of your project would you like help with?
I would really appreciate insights on how can I make this even more responsive, so that it looks good in different screen sizes.
@MatPawluk
Posted
Super!
@Alfonso-1701
Submitted
What are you most proud of, and what would you do differently next time?
Was able to get the project set up without any difficulty. I want to remember to initiate Git throughout the project. I need to get in the habit of utilizing save states so they are there should I ever need to utilize them.
What challenges did you encounter, and how did you overcome them?
Smooth sailing. No challenges on this one.
What specific areas of your project would you like help with?
Any tips or tricks for organizing code. I'm open to feedback
@MatPawluk
Posted
Super!
@Ali-alas88
Submitted
@MatPawluk
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
HTML:
CSS:
* { margin: 0; padding: 0; box-sizing: border-box; } for resetting styles is a good practice..car seems to be a typo, it should be .card..box class, causing layout issues.height: 100%px; property in .box has an incorrect format (%px), it should be height: 100%;.text-align: center; in .box.I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@Pawel-Swiercz02
Submitted
@MatPawluk
Posted
Congratulations on sharing this project! 🎉👏
alt attributes for the images to improve accessibility.Overall, the code is well-structured and styled, leveraging Flexbox and media queries for responsiveness. To enhance it further, consider the suggestions mentioned above.
Marked as helpful
@alidev130
Submitted
@MatPawluk
Posted
Hi, congratulations on sharing this project! 🎉👏
Try using Flexbox on the body:
body {
display: flex; /* Using Flexbox */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh; /* Utilize full viewport height */
}
Also, your image is not in your repository. Try to upload it."
@DruxAMB
Submitted
Happy Coding
@MatPawluk
Posted
Hi, congratulations on sharing this project! 🎉👏
alt attribute for the QR code image could impact accessibility for users relying on screen readers.alt attribute to the QR code image for better accessibility.