Nick

Latest comments

• 

  P

  Robert Crocker•410

  @robcrockSubmitted 10 months ago

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

  I am proud of myself for facing another challenge. I honestly thought I had thought out the UI pretty well, but once I got into I realized that the responsive design was more dynamic than I anticipated. My refactor wasn't to prettiest, but I believe it was a good balance between a quick pivot and full redesign.

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

  The footer of the card content was the trickiest part. Getting the size and background color correct between the desktop and mobile didn't come to me in the first pass, but I got there eventually.

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

  I know my TypeScript could be cleaner. I'm sure my Tailwind could have been written more elegantly. I am looking forward to see how others approached this problem.

  

  Article Preview Component

  #next#react#tailwind-css#typescript

  1

  30
  

  Nick•170

  @nickabatePosted 10 months ago

  Great stuff! One thing you could edit to resemble the mockup even more is to update the font colours to match.

  Marked as helpful

  0
• 

  Manish Singh•230

  @manishsinghrajSubmitted 10 months ago

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

  Developed a full-stack solution using React, Node.js, Tailwind CSS, and GSAP.

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

  Testimonial data was served from the server to the client. Each card had a different color, which needed to be dynamically mapped and styled in React.

  There were a few issues encountered during the deployment of both the client and server to Vercel. These issues were resolved by updating the following configuration files:

  • server/vercel.json
  • client/tailwind.config.json

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

  Any feedback!!

  

  Testimonials using React + Tailwind + Node + Gsap

  #node#react#tailwind-css#vite#gsap

  1

  20
  

  Nick•170

  @nickabatePosted 10 months ago

  One quick fix you could make is altering the opacity of the testimonial text to look a bit closer to the original design.

  Marked as helpful

  0
• 

  anderu•230

  @anderutanSubmitted 12 months ago

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

  Use grid and flexbox to control the layout

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

  learn to pass down css as prop to control the design

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

  css grid

  

  four-card-feature-section

  #react#tailwind-css

  1

  40
  

  Nick•170

  @nickabatePosted 10 months ago

  Make sure close attention is paid to the colours of the original design. You'll find that your feature card headers are coloured black while the design is slightly different.

  0
• 

  Ahmed Hazem•180

  @ahmed-hazem-1Submitted 11 months ago

  

  product-preview-card-component-main

  1

  40
  

  Nick•170

  @nickabatePosted 11 months ago

  Try to avoid using too much whitespace compared to the mock designs, in addition to ensuring that font sizes fill out their appropriate blocks while viewing the design space. Some are a bit too large while others are a bit too small.

  0
• 

  P

  Fish Ladder•140

  @fish-ladderSubmitted 11 months ago

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

  I'm proud of further refining my workflow to help stay organized. There was a lot of small detail tweaks required to come as close to the design as possible and my CSS would have been much more confusing to get around if I hadn't tried to keep it reasonably organized.

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

  I had quite a lot of difficulty with styling the table to look like the design. Particularly in getting the column padding and spacing to match the design closely.

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

  How can I get the bullets to align vertically in the middle of the list item (as seen in the mobile design where the text is in two rows)? I was unable to find a solution that achieved this.

  

  Recipe page using mobile-first responsive design

  2

  50
  

  Nick•170

  @nickabatePosted 11 months ago

  If you were to turn your list items into flex containers (align items center), include a span element within that had the bullet point • inside and style them accordingly, you can remove the default bullet point and style it as it's own element. This can effectively let the bullet point always be aligned to the center of the text, no matter how many rows it contains. Hope that helps!

  Marked as helpful

  1
• 

  AymanSedqi•160

  @AymanSdqSubmitted 11 months ago

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

  Every day practicing

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

  Nothing hard at all

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

  Improving my front end skills

  

  Social links profile

  1

  30
  

  Nick•170

  @nickabatePosted 11 months ago

  A bit less rounding on the link borders and some more gap between them will let them breathe a bit more and standout on their own.

  0