P
@TranDanh1122Submitted 4 months ago
What specific areas of your project would you like help with?
welcom any idea or comment!! Have a nice day, thank you!
P
Dias
@adambeckercodesAll comments
- P@adambeckercodesPosted 4 months ago
Great job! Here are a few suggestions to further improve your code:
1️⃣ Responsiveness and Container Constraints
Currently, the
containerelement lacksmin-widthandmax-widthproperties, causing it to shrink or expand infinitely based on the viewport size. This can lead to readability issues on very large or small screens. To fix this, consider adding constraints like:.container { max-width: 1200px; /* Prevents it from growing too large */ min-width: 320px; /* Ensures content is legible on smaller screens */ margin: 0 auto; /* Centers the container */ }2️⃣ Use of min-height
The min-height property for main and .container is currently set to 100%, which depends on the height of the parent container. To ensure these elements always occupy the full viewport height, use 100vh:
main { min-height: 100vh; /* Fills the full viewport height */ } .container { min-height: 100vh; /* Ensures content is vertically centered */ }3️⃣ Page Responsiveness Currently, the page is not fully responsive. On smaller screens, the layout collapses and becomes hard to read. To fix this, you should use media queries to adjust the grid layout and font sizes for smaller devices. That way you also can adjust the grid layout for different devices.
Keep it up!
Marked as helpful1 - @salilphadnisSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I used grid this time rather than flexbox
What challenges did you encounter, and how did you overcome them?It was challenging to do the desktop design. I ended up going with more columns for the grid to do it.
P@adambeckercodesPosted 4 months agoHey there!
Your solution is strong and demonstrates a good understanding of semantic HTML, responsive design, and CSS Grid. Great work overall! 🚀
1 - @agypsynamedTunechiSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This was the first time I was able to host my project. Been able to see my project on live made me feel really proud :)
What challenges did you encounter, and how did you overcome them?Hosting my project on github pages was a bit confusing but I was able to get it done after watching a youTube video.
What specific areas of your project would you like help with?I think I did well in the project overall but I'd be happy to know if there are areas I could have done things differently (in terms of best practices maybe).
P@adambeckercodesPosted 4 months agoHey there! 👋
You’ve done a fantastic job with your QR code component! I have a few suggestions for improvements to make your project even better:
Responsive Improvements Container Margin: Instead of using a fixed
margin: 50px auto;for.container, you can center the card using Flexbox on the body. This will ensure the card is centered both vertically and horizontally on all screen sizes:body { display: flex; justify-content: center; align-items: center; height: 100vh; /* Ensures the body fills the viewport height */ margin: 0; /* Removes default margin */ }Code Optimization Font Import Optimization: You’re importing the Montserrat font but not using it. Remove the unused font to optimize performance. Commented Out Code: There are some commented-out styles (e.g., span, height) that don’t contribute to the project. Removing them would make the code cleaner.
Consistent Units You’ve mixed relative
pxand absolute%units. For better scalability, consider using relative units like rem for font sizes and spacing.
To prevent the container from shrinking too much on smaller screens, you can add a min-width to the .container. For example:
.container { min-width: 375px; }If you'd like to see another example or learn more, feel free to check out my solution. I hope it helps—keep up the awesome work! 🚀
Marked as helpful0 - @GaZtukiSubmitted 4 months agoP@adambeckercodesPosted 4 months ago
Hey there! 👋
Great job on your solution—it looks really clean and well-structured! 😊 I have a few suggestions that might help refine it further:
Card Image Element: The
card-imgdivlacks an actual<img>tag. If the background image is purely decorative, it should havearia-hidden="true". Otherwise, replace it with an<img>for better semantics and accessibility.Price Element Layout: The price container, which has two different
<span>elements, can be turned into a Flexbox container. By addingdisplay: flexandalign-items: center, you can center the text vertically for a more polished look. Also it is better to use a<div>instead of<p>for the price since it isn’t plain text but a combination of different elements (e.g., bold and line-through prices).Font Family for Second Price:
It seems like the second price doesn’t have the correct font-family applied. Double-check that the correct font is inherited or explicitly applied to that element.Button Layout:
For the button, you can usedisplay: flexandalign-items: centerto neatly align the SVG icon and text (You will need to wrap your text inspanelement). Additionally, you can add agapproperty to create consistent spacing between the icon and text, similar to the design.Let me know if you’d like further clarification on these suggestions. Keep up the great work! 🚀
0 - @ricardoaczSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was able to create the list of nutrition properties and values by using floats.
What challenges did you encounter, and how did you overcome them?I have used floats before, but it has been a while and I was struggling to get it right.
After a lot of trying and error, MDN pages and some YouTube videos, it worked. But I want to practice more, because they are tricky.
What specific areas of your project would you like help with?- How to properly write media queries to cover all devices?
- When should you use padding vs margin when moving elements?
P@adambeckercodesPosted 4 months agoHello, @ricardoacz!
Good job! But I see that you struggled with matching your solution with the design. To ensure your elements perfectly match the design, you can use the PerfectPixel extension for Chrome. It allows you to overlay a design image on top of your layout and fine-tune your styles for pixel-perfect alignment. This is especially useful when you’re trying to match exact sizes and spacing.
Regarding your questions:
To write effective media queries, it’s best to focus on the breakpoints where your design starts to look awkward, rather than targeting specific devices. Here are some commonly used breakpoints as a guideline:
/* Extra small devices (phones) */ @media (max-width: 575px) { ... } /* Small devices (portrait tablets) */ @media (min-width: 576px) and (max-width: 767px) { ... } /* Medium devices (landscape tablets) */ @media (min-width: 768px) and (max-width: 991px) { ... } /* Large devices (laptops/desktops) */ @media (min-width: 992px) and (max-width: 1199px) { ... } /* Extra large devices (large desktops) */ @media (min-width: 1200px) { ... }These are just examples, you can find a lot more in the internet. Adjust the styles at these points based on how your layout behaves, ensuring a smooth and responsive user experience.
Use Padding: When you want to create space inside an element, between the element’s content and its border. For example, adding space around text inside a button or card.
Use Margin: When you want to create space outside an element, between it and other elements. For example, spacing between two cards or separating a header from the main content. A general rule is: Padding affects the inside of an element, Margin affects the outside.
Let me know if you have more questions—I’m happy to help! 😊
Marked as helpful0 - @rajureddyhadoleSubmitted 5 months agoP@adambeckercodesPosted 4 months ago
Hey there! 👋
Great job on your project—it looks fantastic! 😊 I noticed a couple of areas where you could make some improvements:
1️⃣ Responsiveness: The page currently isn’t responsive, so it doesn’t adapt well to larger screen sizes. I’d recommend adding breakpoints for desktop and tablet layouts.
This will help ensure the design looks great across all devices!
2️⃣ Attribution Element: The attribution element is affecting the layout of other elements in the tree. You could use position: absolute to place it at the bottom of the viewport without interfering with other elements. This way your screen should match with the solution.
You can check my solution if you want to know more!
These small tweaks can make a big difference! Keep up the awesome work—looking forward to seeing the updated version! 🚀
0 - @raozhaizhuSubmitted 4 months ago
- @devdrivenaiSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Initially, it didn't look like a lot, but taking with a serious approach, I found a lot of learning from this. Also, remaining accountable and showing up is good stuff.
What challenges did you encounter, and how did you overcome them?First I didn't even know it was possible to host your own fonts. Then, as well, I learned about the advantages of using variable fonts (hosting them yourself!). From both of these things I research, tested and learned a lot. But mostly the proposal of the challenge to make font size responsive without media queries was great. There I had some interesting learning. Had to research quite a bit. Left some resources in the README. Also, I added a small supplementary twist (don't want to spoil it here), and in doing so, I also had a nice opportunity for learning.
What specific areas of your project would you like help with?I know I have to be as specific as possible here. The thing is I spent quite some time researching and testing to build this one, so I don't have a lot of specific doubts. However, what I would appreciate, and especially so if you have more experience, is if you find anything (yeah, anything!) that I could work on and do some research and testing to get better at, or even things that I might have completely ignored, completely oblivious, that you could briefly point them out to me. Will be a lot of help and takes just a minute. Thank you!
P@adambeckercodesPosted 4 months agoHey there! 👋
Great job on your design—it looks clean and visually appealing! 😊 However, I noticed that the content shrinks below typical mobile screen sizes, which can make it harder to read or interact with on smaller devices.
To fix this, I recommend setting a
min-widthproperty for the container or the body. This ensures that the content won’t shrink below a specific width, maintaining usability even on very narrow screens. For example:css body { min-width: 320px; /* Adjust as needed */ }Hope it will be useful!
1 - @ParpaploySubmitted 4 months agoP@adambeckercodesPosted 4 months ago
Yes, the solution includes some semantic HTML, such as the use of the <h1> tag for the title or the <p> tag for text. The <img> tag includes an alt attribute, which is a good accessibility practice.
The use of an alt attribute for the <img> tag improves accessibility. Text is properly structured with headings, which assist screen readers. Although contrast ratios could be improved for better visibility, especially for users with visual impairments. Adding aria-label or aria-labelledby attributes can enhance the semantic value of non-descriptive elements, such as the div used as a container.
The CSS includes a max-width property for the card, which ensures it doesn’t exceed the container's size on larger screens. The layout is centered and scales down appropriately.
The CSS is modular and makes good use of classes to apply styles. The structure is clean and readable, following consistent formatting.
The solution doesn't differ visually from the original design.
0
