P
@nmoon8019Submitted about 1 month ago
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
- Submitted about 1 month ago
Testimonials Grid
- HTML
- CSS
Still need to work on Typography sizing to match the design.
- Submitted about 2 months ago
Four Card Feature
- HTML
- CSS
I know my box-shadow for the cards isn't quite like the Figma design - I could use help with this.
- Submitted 2 months ago
recipe-page
- HTML
- CSS
The 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@CooleyWCPosted about 1 month ago
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 helpful0 - P@JairRaidSubmitted about 1 month agoWhat 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.
- @AceThunder546Submitted about 2 months agoP@CooleyWCPosted about 2 months ago
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 helpful1 - @adetoadetoSubmitted about 2 months agoP@CooleyWCPosted about 2 months ago
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 helpful0 - @masaudahmodSubmitted 3 months agoP@CooleyWCPosted 2 months ago
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 helpful0 - @arachoxsSubmitted 3 months ago
