Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
8

Nick

@nickabateCanada170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Article Preview Component - Next.js/Tailwind/TypeScript

    #next#react#tailwind-css#typescript

    Nick•170
    Submitted about 1 year ago

    Any recommendations on using Next Image component effectively. Thanks!


    1 comment
  • Testimonials Grid Section - Next.js/Tailwind/TypeScript

    #next#react#tailwind-css#typescript

    Nick•170
    Submitted about 1 year ago

    Any suggestions to improve on the sizing of grid elements would be appreciated. There is empty space at the bottom of some of the testimonial cards and I'd like to work on minimizing empty space when using grid layouts.


    1 comment
  • Four Card Feature Section - Next.js/Tailwind/TypeScript

    #next#react#tailwind-css#typescript

    Nick•170
    Submitted about 1 year ago

    Any recommendations on responsive feature card sizing would be great!


    1 comment
  • Product Preview Card - Next.js/Tailwind

    #next#react#tailwind-css

    Nick•170
    Submitted about 1 year ago

    Any tips on handling the images using the Next.js Image component would be greatly appreciated.


    1 comment
  • Recipe Page - Next.js/Tailwind

    #next#react#tailwind-css

    Nick•170
    Submitted about 1 year ago

    Handled widths and margins accordingly on the container but would love to know any other approaches which might have worked better.


    1 comment
  • Social Links Profile - Next.js/Tailwind

    #next#react#tailwind-css

    Nick•170
    Submitted about 1 year ago

    Any additional recommended effects or Tailwind efficiencies would be appreciated!


    1 comment
View more solutions

Latest comments

  • P
    Robert Crocker•410
    @robcrock
    Submitted about 1 year 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
    Nick•170
    @nickabate
    Posted about 1 year 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
  • Manish Singh•230
    @manishsinghraj
    Submitted about 1 year 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
    Nick•170
    @nickabate
    Posted about 1 year 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
  • anderu•230
    @anderutan
    Submitted over 1 year 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
    Nick•170
    @nickabate
    Posted about 1 year 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.

  • Ahmed Hazem•180
    @ahmed-hazem-1
    Submitted about 1 year ago

    product-preview-card-component-main

    1
    Nick•170
    @nickabate
    Posted about 1 year 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.

  • Fish Ladder•140
    @fish-ladder
    Submitted about 1 year 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
    Nick•170
    @nickabate
    Posted about 1 year 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
  • AymanSedqi•160
    @AymanSdq
    Submitted about 1 year 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
    Nick•170
    @nickabate
    Posted about 1 year 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.

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub