@nanikore0
@karthikganesanTR
Submitted
What are you most proud of, and what would you do differently next time?
NA
What challenges did you encounter, and how did you overcome them?
NA
What specific areas of your project would you like help with?
NA
@nanikore0
Posted
Great job on your solution! It looks just like the desired design and you did a good job with semantic html too. Just a small pointer:
Hope this helps. Good luck!
@bartoszdudziak-dev
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of my solution with grid-template-areas. Code looks clean and maintainable for me. I feel control over the grid layout in this way.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was creating responsive grid layout.
What specific areas of your project would you like help with?
I'm still not much confident using semantic HTML. I need to catch up.
@nanikore0
Posted
Solution looks really close to the design, well done!
@esurreal
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of the fact that I'm learning this stuff.
What challenges did you encounter, and how did you overcome them?
Media queries took a little time to understand. Making the page responsive was the biggest learning curve.
What specific areas of your project would you like help with?
I think I need help with image sizing and keeping everything within the container, but It'll probably come with practice.
@nanikore0
Posted
Hi Eric, great job on submitting your solution!
Here are my suggestions:
Does the solution include semantic HTML?
<main> element. This is good for accessibility as it helps screen readers identify a page's "main" section.Is it accessible, and what improvements could be made?
<grid> and <p3> are not valid HTML elements, instead use a div with a class for the price container and use h2 and h3 elements for the prices.px as it prevents the font size from scaling with the user's default setting.Does the layout look good on a range of screen sizes?
Is the code well-structured, readable, and reusable?
:root pseudo-class.Does the solution differ considerably from the design?
Desktop viewing is too wide, I would suggest decreasing the container width using the max-width property.
As for the image sizing I suggest setting a max-width and max-height to 100% for the img element.
You can switch images from desktop to mobile using the <picture> element with media queries.
Hope this can be useful! Good luck! 🙏
@zlatan-cic
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of successfully implementing a responsive design that looks great on both mobile and desktop devices 📱💻. However, next time, I would spend more time planning the layout to avoid any last-minute adjustments and ensure a smoother development process 🚀.
What challenges did you encounter, and how did you overcome them?
One of the main challenges was handling the image display for mobile devices. Initially, I had to place the first image in the body and then use CSS to set it to display: none for desktop and display: block for mobile 📱. I overcame this by leveraging media queries to conditionally show and hide images, ensuring a seamless and responsive design experience 🎨.
What specific areas of your project would you like help with?
I would appreciate help with optimizing the layout for different screen sizes to ensure a more consistent look across devices. Additionally, advice on improving the overall code structure and efficiency would be highly valuable. Any tips on enhancing the user experience and accessibility would also be greatly appreciated. 😊
@nanikore0
Posted
Hi, great job! Regarding accessibility, you can use <section> tags instead of divs to separate different sections of the page and <footer> for the attribution. The use of semantic HTML elements helps to clearly describe its meaning to both the browser and the developer. Hope this helps! 😊
@GalaxyPliego
Submitted
@nanikore0
Posted
Hey! Nice work on your solution. I like how you make the use of different CSS files to make the code more organized, and I also like the use of semantic HTML.
Here are my suggestions:
HTML:
CSS:
@font-face {
font-family: "Inter";
src: url(../../assets/fonts/Inter-VariableFont_slnt\,wght.ttf);
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
}
And removing the following line from .main__container:
height: 100vh;
But other than that, congratulations on completing this project! Hope this helps 🙏
Marked as helpful
@Qudusy
Submitted
@nanikore0
Posted
Hello there!
Congrats on completing the challenge!
I've noticed the layout works well on mobile, however the card gets too big on desktop (landscape orientation) because the image grows so much. For this challenge I'd like to suggest using an absolute length width for the QR code container.
I hope it helps!
