@ujwal282
Latest solutions
Mobile-First Product Page
Submitted 9 months agoHonestly, any tips for responsive typography and rem-based containers will be really appreciated. Maybe, I should have had a clamp() with my min and max font sizes, but I still struggle a bit to visualize how calc() works.
Mobile-Responsive Recipe Page With CSS Grid
Submitted 9 months agoIf someone could give me some pointers on my code for the lists, I'd really appreciate it. Something to get it to look a bit less bloated. Also, I'd like to know if it's bad practice to wrap in a div. I only did it to center it, but I'd love to see alternatives.
Blog Article With Flex
Submitted 10 months agoMostly the html tags. It's my first time using them, so I'm not too sure if I did my best with them.
Latest comments
- @FirstHalcyon
Hey, great job, it looks identical on the preview.
I'd consider adding some more semantic HTML elements (avoid a few divs and spans), but there's nothing functionally wrong with it.
Weird thing, but the desktop design looks super off on the github pages link. The right container is fine, but the image is only 25% of the container's width. Not sure why it does this, it looks good on the preview, but I'm giving it a mention. Might be a 'me' thing, I don't know. Can't post an image here, unfortunately.
Mobile looks good, though, keep it up!
- P@aurelienfliegerWhat are you most proud of, and what would you do differently next time?
I worked first on the mobile design.
What challenges did you encounter, and how did you overcome them?I still do not know how to add or borders below table rows.
What specific areas of your project would you like help with?How to add borders/hr elements to table rows?
@FirstHalcyonHey, Aurélien, good job on this project! It took me a while to complete too.
Mobile looks pretty good. I'd suggest adding some extra padding between the elements to get closer to the original design (or more of a gap since you're using Flex). Try playing around with some rems to tinker with it further.
As for your question, I added a bottom border under the td elements, and erased only the one under the last row. You could also do the same thing under the tr element and it would have the same effect. To eliminate the gaps between td elements, I used border-collapse: collapse; for the entire table. It worked for me and it looked like the design.
This answer from stackoverflow is pretty good and I can confirm that it works fine: https://stackoverflow.com/questions/13624276/how-to-separate-table-rows-with-a-line
Great job with the semantics too. Keep it up!
- @gckushWhat are you most proud of, and what would you do differently next time?
Did this one faster
@FirstHalcyonHey, looks fine, good job on this one! I see that you went for a fixed display. Nothing wrong with it necessarily, but it would be easier to size and position things with grid or flex. As of this screenshot, your page is quite different from the design shown. Good job with the self-hosting of the font. Like the button hover color too. Keep it up!
Marked as helpful - @BrandonJr20What are you most proud of, and what would you do differently next time?
Me resulto mas sencillo este proyecto, creo que estoy mejorando en cuanto a la practica
What challenges did you encounter, and how did you overcome them?La verdad no encontre muchos desafios
What specific areas of your project would you like help with?Quiza si existe una manera distinta al usar media y utilizar mas las dimensiones rem y em que me confunden un poco
@FirstHalcyonHey, Brandon, good work, keep it up.
Good job with the box shadow and the border radii, they're spot on. In the future, I'd suggest playing around a bit more with the measurements to get them to look more similar to the design wanted. Look up em vs rem to get a good gist of what they are and how they work.
Marked as helpful
