Thais• 245
@thaiscode
Submitted
Is there any way to control how the image will be cropped in object-fit?
feedback is welcome (:
Ham
@hmac100
All comments
- Ham• 340
@hmac100
Posted
Hi nice job 👍. Really like the breakpoints - very smooth transitions. If anything - Would be good to have the popup positioned in a way that's uniform from the share__button element so it's in the same position relative to it across all non mobile screen sizes. Would also be nice to have a simple toggle to hide the popup after a button re click maybe ? function displaySocials() { socials.classList.toggle("hide"); }
But great job - you're a lot further down the road than I am - well done.
Marked as helpful
0 - Abhishek• 30
@Abhishek-paka
Submitted
Ham• 340@hmac100
Posted
Hi - looks pretty good - but I'd probably try to match the border radius on the qr code image with the card container - as in the design. Also perhaps a touch more bottom padding or bottom margin on the body text to match the space on the design - but well done - still looks cool !
Marked as helpful
0 - Abdallah Aboelsaoud• 220
@Saoud2021
Submitted
What are you most proud of, and what would you do differently next time?
i learned alot during this project and i even add some tweaks in the learning tag and the profile picture of the author
What challenges did you encounter, and how did you overcome them?
the challenge was in the text as i wasn't quite sure how to categories them but i was able to add the arrow which points to the child directly
What specific areas of your project would you like help with?
i think my projects are wide and it's scale is larger than the original designs and i am not sure how to scale it down a little bit
Ham• 340@hmac100
Posted
Hi Abdullah Looks pretty good to me - I reckon the max-width suggestion from Krushna is a really good idea I noticed the avatar and author name are a bit out of alignment . For what it's worth - I wrapped both in a container - that seemed to do the trick.
<div class="author"> src="./assets/images/image-avatar.webp" alt="avatar of james hooper"/> <div class="author-name">Greg Hooper</div> </div>Then used display:flex and align-items:center on the .author class
Well done 👍
0 - Juan• 480
@JEWebDev
Submitted
What are you most proud of, and what would you do differently next time?
I'm very proud that i finished this challenge. I still have lots to learn but it was very fun.
What challenges did you encounter, and how did you overcome them?
I didn't knew how to use media queries and downloaded fonts. I searched web.dev page for learning responsive design and MDN for how to use downloaded fonts.
What specific areas of your project would you like help with?
Any feedback is appreciated. Have a nice day!
Ham• 340@hmac100
Posted
Hi Juan - Well done 👍 With the ingredients list you can do ** list-style: disc **; to get it closer to the design - if that's what you want to do. Still looks ok the way you have it. I found the Instruction list the trickiest to try styling the numbers by adding the colour. I ended up using a thing called my-awesome-counter which is a free 3rd party bit of css that helps you style the numbers. There's bound to be another way to do it but that really helped me out. All the best :)
0 - P
@prem-kumart
Submitted
What are you most proud of, and what would you do differently next time?
- Work-flow improved greatly when using grid and flex box.
What challenges did you encounter, and how did you overcome them?
- alining the photo and name ; but flex box did the trick.
What specific areas of your project would you like help with?
- how can I improve organization of code and increased minimalism.
Ham• 340@hmac100
Posted
Hi Prem overall looks good 👍 - I noticed no box shadow on the white card areas - I'm assuming it was a design element you didn't want include ? To me the breakpoint for smallscreen / laptop devices seems to kick in really early but perhaps more importantly the mobile appears to need a lot more width (as the design indicates) which would make it much better for readability - but well done.
Marked as helpful
0 - LucasNgTg• 190
@LucasNgTg
Submitted
Ham• 340@hmac100
Posted
Really like the css structure and the focus on responsiveness. If anything I'd just say that your submission does appear to vary from the look of the design ( not sure if that was an aesthetic judgement ? ) In the design - the the <p>tag font-size is smaller and takes up 4 lines and the button has less padding. There's also more margin/ padding between the elements.
0 - MURUGAN.S• 90
@MURUGAN008
Submitted
Ham• 340@hmac100
Posted
Nice job - perhaps a little less left and right padding on the desktop version. For me the colour didn't seem to be listed in the style-guide for the preparation background so I used background-color: hsl(326, 100%, 98%); it seemed closer to the design. Also to get the styling in the instructions ol I used my-awesome-counter that really helped. Also your
<h2>'s don't appear to have the correct font style.Marked as helpful
0 - PanayiotisTsg• 20
@PanayiotisTsg
Submitted
Ham• 340@hmac100
Posted
Great job - have you thought about placing some css property/values into the :root of your css to make them global. Also using css variables can make things easier as they're also global , so any changes - if and when you need to make them - can be made from one location.
0 - P
@Franciscoj91
Submitted
What are you most proud of, and what would you do differently next time?
I managed to get pretty close to the Figma design. Work in an orderly manner.
What challenges did you encounter, and how did you overcome them?
The image on the card did not occupy the same height as in the design. I managed to solve it using width, height and object-fit
What specific areas of your project would you like help with?
Possibilities for improvement.
Adjust font-size without media queries
Ham• 340@hmac100
Posted
Hi @Franciscoj91. Looks great . I like how you did the hover on the card not the h1 - interesting. Your body text appears a little darker , the author text and <h1> is a bit smaller. There's more space between the bottom and the avatar - author section. I'm not sure whether they were intentional design decisions - but I'm not knocking it - Well done 👍
Marked as helpful
0 - Vishesh Rao• 10
@visheshrao17
Submitted
Ham• 340@hmac100
Posted
Hi Vishesh - I'm by no means an expert but can I suggest using an <h1> tag and a smaller font-size for the .heading class. A smaller font gives 2 lines for the heading instead of 3 so you don't get overflow onto the <p> tag . It also creates more room for left - right padding. The font size within the <p> tag seems smaller in the design jpg. so again a smaller font allows more padding to get nearer to what the design looks like. Also, I could be totally wrong here , but is a class and id actually needed for the <h2> and <p> tag -as this is a super small project ? Any way good work - have fun !
Marked as helpful
0
