All comments

• 

  Adhi• 240

  @Adhi-S12

  Submitted 4 months ago

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

  I assumed it would take a very little time if I did this in react since there are resuable components in this challenge. But, I actually would've completed it very quickly if I've used vanilla html,css

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

  couldn't think of a way to get the quote svg to move behind the text element , finally gave up and reduced opacity of the quote to look somewhat decent enough and finished the challenged. Still not satisfied with the result.

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

  I miscalculated on the time it would take to finish the challenge. My assumption that React will help to reduce the time taken to finish this was wrong. Give me ideas on how to move the quote behind the text element in the first card.

  

  Testimonials grid section using React.js

  1

  20

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 4 months ago

  #container {    
      position: relative;
      z-index: 0;
  }
  
  #img {  
      position: absolute;
      top: 0;
      right: 23px;
      z-index: -1;
  }
  

  Give the image a lower z-index so it's behind the text. There's a lot of online resources that can give better examples than I have, but making your image absolute and the container it's in, relative will place the image. The z-index will modify if it's in front or behind. Apart from that, your structure and details are very good. Nice work.

  1

  This comment has received 1 replyShow
• 

  denise• 230

  @moncadad

  Submitted 4 months ago

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

  On the design itself the list bullet points are aligned with the list text. If anyone has any tips on how to do that please help me out. Perhaps it's a simple fix, but I didn't figure it out :(

  

  Recipe Page

  1

  30

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 4 months ago

  Very nice work. I don't see any issues with your bullet point alignment. Perhaps you fixed this already. I see you used li::marker element, so you've edited the properties on that. I added right side padding to it and used content: '\25AA'; to change bullet point style. Your outcome looks very similar overall.

  Marked as helpful

  0
• 

  sammie-create• 100

  @sammie-create

  Submitted 4 months ago

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

  I tried using grid layouts on different screen sizes.

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

  Responsiveness, i used different viewport heights with relative units.

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

  How to make my page take all the viewport of an iPhone 11pro or related devices.

  

  Responsive Product preview card component using CSS grid

  1

  50

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 4 months ago

  Really nice similarity. You kept your attribution below which threw off the centering, but the container sizes and proportions look spot on. Other than that, some font size tweaking is all I can see that could be changed, but very good job.

  Marked as helpful

  0
• 

  Olanrewaju• 80

  @LANRIE-DEV

  Submitted 5 months ago

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

  I am proud of the way and manner I attended to the bumps I encountered and how I took my time to solve each and every one of them.

  And next time, I would make sure I apply every bit of what I have learned and continue to ask questions and be inquisitive.

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

  I encountered the challenges of actually having to structure the NUTRITION SECTION properly, but thanks to KEVIN POWELL, I was able to catch up in no time.

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

  I would love to learn more about CSS FUNCTIONS and how they are used to counter different problems in CSS.

  

  Recipe page challenge

  1

  30

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 5 months ago

  Very nice job. Looks pretty much spot except for the margin-top of your container. You also had the same issue with the Outfit font for the numbering in the Instructions section. The "1" didn't render as it was supposed to. Well done.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  osmar mendes• 50

  @osmarmcn

  Submitted 5 months ago

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

  Busquei reproduzir o projeto o mais próximo do que pedido. Acrescentaria algumas animações.

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

  Organização da projeto sem ficar utilizando a div.

  

  recipe page

  1

  20

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 5 months ago

  Nice job. Looks like your HTML was spot on. You seem to only have one font family for the text. I declared one font in the root selector then used the other at more specific elements. Your element sizes look proportionate but lack preciseness. I was able to calculate pixel height and widths for elements using Microsoft Powertoys screen ruler. Its free on Windows accounts, and has helped me heaps. It's not perfect, but it's invaluable for these challenges, depending on how fast or precise you want to be.

  Marked as helpful

  0
• 

  Anthony Becarne• 160

  @Abecarne

  Submitted 5 months ago

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

  This one is the first time for me not using Figma. So i had to use my best judgment for styles such as width, height, padding, margin, etc. I think i did well enough to publish it

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

  N/A

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

  Feel free to share any feedback :)

  

  Social Links Profile Main

  1

  40

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 5 months ago

  Very nice work. I don't have figma, so I used microsoft powertoys screen ruler. I saw a youtuber using it recently and it worked great for me. It gives horizontal and vertical lengths in pixels. Best of luck in future.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  woojjajja• 90

  @woohyodong

  Submitted 6 months ago

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

  :)

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

  :)

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

  :)

  

  Blog preview card

  1

  10

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 6 months ago

  Wow. Very nice likeness there. The only issue I can see there is the height. I got around this by using Microsoft Powertoys Screen Ruler. It's free, and measures in pixel sizes the the horizontal and vertical lengths of the supplied jpgs.

  0
• 

  Mustafa Battaloglu• 10

  @mbattaloglu

  Submitted 6 months ago

  

  Responsive Card

  1

  20

  

  Devs-advocate• 180

  @Devs-advocate

  Posted 6 months ago

  Hi MB. Nice likeness for your design. The only obvious issue I can see is the sizing. For me, I used Screen Ruler from Microsoft Powertoys to get pixel sizes for the image and the container it's in. I don't think you need the padding. Your centring with flexbox is good.

  0