P
@nmoon8019
What specific areas of your project would you like help with?
HTML-- Is my use of div's acceptable? CSS-- am I using too much code to accomplish this?
Latest solutions
Testimonials Grid
PSubmitted 4 months agoStill need to work on Typography sizing to match the design.
Four Card Feature
PSubmitted 4 months agoI know my box-shadow for the cards isn't quite like the Figma design - I could use help with this.
recipe-page
PSubmitted 5 months agoThe design has the bullet points centered vertically in between the wrapped <li> text (when it's more than one line on small screens). I tried using flexbox properties but found myself straying away from semantic HTML best practices, so I stuck with <ul> and <li> elements for now. I could use help with this.
Latest comments
- P@CooleyWC
You could use an article tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) instead of a div for the card. I would also use section tags instead of divs for the 'info' and 'authorbox'.
CSS: I would avoid using pixels for font-sizes - convert to rems or use clamps for better responsiveness. I usually copy clamps from this site https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
Also avoid setting hard widths and heights (on the container) - usually its better to use min-widths or min-widths to control the sizing.
Hope that helps!
Marked as helpful - P@JairRaidWhat are you most proud of, and what would you do differently next time?
I learned to make this quote mark position absolute to his parent.
- @AceThunder546P@CooleyWC
Looks Great! One thing to consider is using a different unit type for font-sizes instead of pixels(rems are what I use most). This helps both with responsiveness and accessibility. And I also often use the typography clamps that I get from this site: https://utopia.fyi/ - they smoothly scale your font size and they make sure the size doesn't get too big or too small. Also consider updating your README (you can use the template they give you in the project files)
Marked as helpful - @adetoadetoP@CooleyWC
Looks great! Perhaps adjust the breakpoint so it doesn't get quite as wide before switching to your desktop layout (when the image is next to the description). Maybe somewhere in the 350-500px range.
Marked as helpful - @masaudahmodP@CooleyWC
Looks great!! Perhaps consider using a separate css file for styling. A few items to compare with the original design:
Mobile:
- image should have no margin/padding.
- container should extend to full width and height.
- check colors of main heading text and the preparation time card.
- spacing between li and their respective markers should be larger.
- no bottom border after the last nutrition table row. can try not(:last-child) selector for this.
Desktop: -larger top/bottom margin
Marked as helpful - @arachoxsP@CooleyWC
Looks great! Check responsiveness on small screens
