All comments

• 

  Jadline•90

  @JadlineSubmitted 3 days ago

  What are you most proud of, and what would you do differently next time?

  I got to learn about grid-template-areas and object-position properties.Initially i didnt know about them.

  What specific areas of your project would you like help with?

  Placing of the images in the grid containers .Somehow we were required to crop the images and i had to place them absolutely and hide the overflow.Technically i struggled with that and even on screen size one of the images is still out of the page flow.I would like assistance on that ..I had issues with placing the images.

  

  Bento Grid

  1

  30
  

  Jay Khatri•150

  @khatri2002Posted 3 days ago

  Your approach is on the right track! When working with images in a grid container, here’s a simple method that might help:

  1. Position the image (child of the grid item) as absolute. This allows you to freely place the image within its parent container (the grid item).

  2. Set the parent container (grid item) to position: relative. This makes sure the image is positioned relative to its parent, not the entire page.

  3. Adjust the top, right, bottom, and left properties of the image to fit it exactly where you want it inside the container. For example, you can center it, crop it, or align it to specific edges.

  4. Make the parent container’s overflow property hidden. This ensures that any part of the image outside the container is not visible.

  5. Handle responsive design: At smaller screen sizes, if you need to display the full image, you can change the image’s position to relative or static so it flows naturally with the content.

  Remember, this is just one way to do it! Depending on your design, you could also explore using object-fit on the image or CSS properties like clip-path. Keep experimenting and find what works best for your specific use case!

  0
• 

  radhaBharadwaj•130

  @radhaBharadwajSubmitted 2 months ago

  

  In this Responsive web page I used HTML CSS

  1

  10
  

  Jay Khatri•150

  @khatri2002Posted 28 days ago

  The developed design seems good. However below are my suggestions to make it more accurate:

  • Use of CSS grid layout will be a better approach here, instead of flex-box. Multiple flex-boxes in the same container can be little tricky to manage. As I can see in your design, at some specific resolutions, the gaps between cards are not consistent; which could also the reason of 2 cards with white background having more height than others.
  • The background image included in card-1 appears to be huge in tablet devices (iPad Mini, iPad Air, iPad Pro), as it is covering almost entire height of the card.
  • The person image resolution needs to be reduced.
  • The card padding and font-size can also be reduced, in order to make an overall smaller container; which may fit in the desktop screen, preventing the scroll behaviour of page in desktop resolution.

  Take the feedback very positively and keep the work going! Happy Coding!

  0
• 

  P

  Timothé Bissonnette•420

  @Fable54321Submitted about 1 month ago

  What challenges did you encounter, and how did you overcome them?

  Spent way too much time working on the box shadow. Could have got it better still, but it's close enough.

  

  my take on the four-card-feature project

  1

  00
  

  Jay Khatri•150

  @khatri2002Posted 29 days ago

  The developed design seems accurate!

  Since you've mentioned about box-shadow property, below are my suggestions.

  • Try CSS frameworks such as Tailwind; where the readymade classes are prepared. Even if you're not using any framework, you can always copy paste the CSS style provided there; and modify it according to your needs.
  • You can also search properties such as 'box-shadow' over the web in order to get the pre prepared values.

  However, writing CSS properties from scratch is always preferred when you're trying to learn them.

  Happy Coding!

  Marked as helpful

  1
• 

  P

  CasperTheChild•130

  @CasperTheChildSubmitted 29 days ago

  What are you most proud of, and what would you do differently next time?

  Srcset

  What challenges did you encounter, and how did you overcome them?

  I haven't faced any problems except one, which I couldn't solve.

  What specific areas of your project would you like help with?

  I couldn't figure out why the 'srcset' and 'sizes' attributes in '' aren't working. I tried everything, but it still didn't work as I planned. Could you look at my code and provide feedback?

  

  Product_Preview

  2

  00
  

  Jay Khatri•150

  @khatri2002Posted 29 days ago

  The design seems good. However, there are few enhancements which can be done in order to achieve cleaner code and more accurate design.

  You've used 'p' tag to render the prices, however, a 'span' tag seems more relevant since we only wish to render a single word. Also, the strikethrough price text should be aligned center vertically.

  The height of image appears to be higher in the mobile view, resulting in scroll behaviour of webpage.

  Happy Coding!

  Marked as helpful

  0
• 

  sofiasmnk•110

  @sofiasmnkSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  I feel like I'm getting more used to the workflow and being able to get through the steps more quickly. I still feel a bit lost when working with media queries, since I can get the results I want, but I'm never sure if I'm following best practices because I don't have a good framework for that yet.

  What challenges did you encounter, and how did you overcome them?

  Noticed that bold text looked way too bold in Safari compared to other browsers / how it's supposed to look. Apparently it's an issue with variable fonts, and Safari forcing fonts to be bold if they don't have a specific bold variant specified. Adding font-synthesis: none; to my reset seems to have worked.

  What specific areas of your project would you like help with?

  Like I mentioned earlier, probably about best practices with media queries?

  

  Recipe page with semantic HTML

  1

  51
  

  Jay Khatri•150

  @khatri2002Posted about 1 month ago

  Developed design looks accurate!

  0
• 

  Bhavana Prabhu•80

  @prabhubhavanagSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  I have tried to replicate the desktop and mobile screens provided.

  What challenges did you encounter, and how did you overcome them?

  As I didn't have access to the Figma file this time, I tried ruler plugin to gauge the widths and font-sizes. Hope it looks similar to the design.

  What specific areas of your project would you like help with?

  I would like to learn more on the responsiveness and the mobile screens.

  

  Social Links Profile using CSS Grid

  1

  10
  

  Jay Khatri•150

  @khatri2002Posted about 1 month ago

  The developed design looks accurate!

  0
• 

  gckush•50

  @gckushSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  Used css in a distributed manner so it can be reused

  What challenges did you encounter, and how did you overcome them?

  Had trouble vertically aligning author pic and name because I was trying to align the text instead of the image. Once I realized that the image needs to be aligned, I was able to fix it. Learnt how to use local font using @font-face

  What specific areas of your project would you like help with?

  Local font

  

  Blog preview card

  1

  20
  

  Jay Khatri•150

  @khatri2002Posted about 1 month ago

  The developed solution looks accurate!

  1
• 

  Mohamed Ahmed•190

  @Mo-Ahmed-sharqawySubmitted about 2 months ago

  What challenges did you encounter, and how did you overcome them?

  It is so easy, I didn't encounter any challenges

  

  QR Code Component

  1

  21
  

  Jay Khatri•150

  @khatri2002Posted about 1 month ago

  The solution looks accurate & impressive!

  0